/* ==========================================================================
   SkillUp — shared stylesheet
   Design tokens live in :root — tweak these first to re-theme the site.
   ========================================================================== */

:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #1b2030;
  --text-muted: #5b6474;
  --border: #e3e6ed;
  --accent: #3b5bfd;
  --accent-dark: #2c46d1;
  --accent-soft: #eef1ff;
  --success: #1f9d55;
  --success-soft: #e9f9ef;
  --error: #d6455a;
  --error-soft: #fdecee;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(20, 24, 40, 0.04), 0 8px 24px rgba(20, 24, 40, 0.06);
  --max-width: 880px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---------- layout ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brand:hover {
  text-decoration: none;
  opacity: 0.85;
}

.brand span {
  color: var(--accent);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.site-nav a {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.site-nav a:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- home page ---------- */

.hero {
  padding: 48px 0 40px;
  text-align: center;
}

.hero h1 {
  font-size: 2.25rem;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.hero p {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.module-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.module-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}

/* Base badge — the shared look. Size is set by the context that uses it, so a
   badge always has a FIXED width and never sizes to its own text; otherwise
   "JS" and "FHIR" come out different widths and the labels beside them fail to
   line up down a column. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 700;
  border-radius: 8px;
  flex: none;
}

.module-card .go {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

/* ==========================================================================
   dashboard (js/dashboard.js)

   Conventions borrowed from the site's own tokens:
     mastered    -> --success  (validated: ΔE 30.1 vs accent under deuteranopia)
     in progress -> --accent
     not started -> no fill, neutral track only

   Colour encodes STATE, never magnitude — the bar's length already carries the
   value, and colouring it darker-because-longer would say the same thing twice.
   Every meter is paired with its score in text, so colour is never the only
   way to read a row.
   ========================================================================== */

.dash-section {
  margin-bottom: 40px;
}

.dash-heading {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.dash-subhead {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.dash-heading + [data-dash-modules],
.dash-heading + [data-dash-recent],
.dash-heading + [data-dash-review] {
  margin-top: 16px;
}

.dash-storage-warning {
  background: var(--error-soft);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 0.9rem;
  margin: 0 0 28px;
}

/* ---------- hero figure: exactly one per view ---------- */

.dash-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 16px;
}

.dash-hero-value {
  /* Proportional figures, not tabular: at display sizes tabular-nums gives
     every digit the width of a zero, which makes a number look loose. */
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0;
}

.dash-hero-label {
  margin: 8px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.dash-hero-sub {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- supporting stat tiles ---------- */

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.dash-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.dash-tile-value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.dash-tile-label {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- per-module meter rows ---------- */

.dash-modules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dash-row:hover {
  text-decoration: none;
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* Fixed width so every module title starts at the same x, whatever the badge
   text is ("JS" vs "FHIR"). */
.dash-row .badge {
  width: 52px;
  height: 26px;
  border-radius: 6px;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.dash-row-body {
  flex: 1;
  min-width: 0; /* lets long titles wrap instead of forcing the row wider */
}

.dash-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.dash-row-title {
  font-weight: 600;
}

.dash-row-value {
  /* tabular-nums IS right here: these align down a column of rows. */
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/*
   The meter. Thin (8px, well under the 24px cap), square at the baseline where
   it starts and 4px-rounded at the data end. The track is a lighter step of the
   fill's own hue so the state reads across the whole bar, not just the filled
   part. No border around the fill — the track provides the separation.
*/
.dash-meter {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}

.dash-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  transition: width 0.3s ease;
}

.dash-meter.is-mastered {
  background: var(--success-soft);
}

.dash-meter.is-mastered .dash-meter-fill {
  background: var(--success);
}

.dash-meter.is-progress {
  background: var(--accent-soft);
}

.dash-meter.is-progress .dash-meter-fill {
  background: var(--accent);
}

.dash-row-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.dash-row-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ---------- tables (recent attempts, questions to review) ---------- */

.dash-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.9rem;
}

.dash-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.dash-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.dash-table tbody tr:last-child td {
  border-bottom: none;
}

.dash-cell-when {
  color: var(--text-muted);
  white-space: nowrap;
}

.dash-cell-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-cell-question {
  min-width: 220px;
}

.dash-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.dash-pill.is-pass {
  background: var(--success-soft);
  color: var(--success);
}

.dash-pill.is-fail {
  background: var(--error-soft);
  color: var(--error);
}

.dash-note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.dash-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}

.dash-empty h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.dash-empty p {
  margin: 0 0 18px;
  color: var(--text-muted);
}

/* Wide tables scroll inside their own container rather than pushing the page
   sideways on a narrow screen. */
@media (max-width: 620px) {
  [data-dash-recent],
  [data-dash-review] {
    overflow-x: auto;
  }

  .dash-row-head {
    flex-direction: column;
    gap: 2px;
  }
}

/* ==========================================================================
   home module cards — status layer (js/home.js)

   Three states, each carried by colour AND a text label AND the bar, so the
   state is never colour-only:
     .is-none      not started    grey, empty track
     .is-progress  attempted      blue, partial bar
     .is-mastered  >= 80%         green, full bar + badge
   ========================================================================== */

.module-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.module-card-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.module-card .badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 0.95rem;
}

.module-blurb {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.module-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto; /* pin the status block to the bottom of the card */
  padding-top: 4px;
}

.module-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.module-card.is-progress .module-status {
  color: var(--accent-dark);
}

.module-card.is-mastered .module-status {
  color: var(--success);
}

.module-meter {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.module-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.module-card.is-progress .module-meter {
  background: var(--accent-soft);
}

.module-card.is-mastered .module-meter {
  background: var(--success-soft);
}

.module-card.is-mastered .module-meter-fill {
  background: var(--success);
}

.module-when {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.module-when-empty {
  opacity: 0.7;
}

/* Backward-looking pointer: rises when things go stale, unlike a completion
   bar which only ever rises when you start something new. */
.home-review {
  margin: 0 0 20px;
  text-align: center;
}

.home-review-link {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 600;
}

.home-review-link:hover {
  text-decoration: none;
  background: var(--accent);
  color: #fff;
}

/* ==========================================================================
   lesson content (modules/javascript.html + js/lesson.js)

   The other six modules still use the compact `.intro` card. The JavaScript
   lesson is long enough that one giant card reads as a wall, so each topic is
   its own card with the prose outside them.
   ========================================================================== */

.lesson > h2 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.lesson-lede {
  margin: 0 0 28px;
  color: var(--text-muted);
  max-width: 640px;
}

.lesson-topic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 20px;
}

.lesson-topic h3 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.lesson-topic p {
  margin: 0 0 16px;
  max-width: 660px;
}

.lesson-topic p:last-child {
  margin-bottom: 0;
}

.lesson-note {
  border-left: 3px solid var(--border);
  padding-left: 14px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ---------- runnable examples ---------- */

.lesson-example {
  margin: 0 0 20px;
}

.lesson-example .stage-code {
  margin-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* The run bar sits flush under the code so the two read as one unit. */
.lesson-run {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 8px 10px;
}

.lesson-run-btn {
  padding: 6px 16px;
  font-size: 0.85rem;
}

.lesson-run-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.lesson-output {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  overflow-x: auto;
}

.lesson-output.has-error {
  border-left-color: var(--error);
}

/* `pre-wrap` keeps the spacing an example lines up with, while still wrapping
   a long line instead of forcing the card sideways. */
.lesson-output-line {
  white-space: pre-wrap;
  word-break: break-word;
}

.lesson-output-line.is-error {
  color: var(--error);
}

.lesson-output-line.is-warn {
  color: #a8730a;
}

.lesson-output-line.is-muted {
  color: var(--text-muted);
  font-style: italic;
}

/* ==========================================================================
   staged modules (js/stages.js)
   ========================================================================== */

.stage-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.stage-tab {
  appearance: none;
  font-family: inherit;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stage-tab:hover:not(:disabled) {
  border-color: var(--accent);
}

.stage-tab.is-active {
  border-left-color: var(--accent);
  box-shadow: var(--shadow);
}

.stage-tab.is-mastered {
  border-left-color: var(--success);
}

.stage-tab.is-locked {
  cursor: not-allowed;
  opacity: 0.6;
  background: transparent;
}

.stage-tab-step {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
}

.stage-tab-title {
  font-weight: 600;
  font-size: 1rem;
}

.stage-tab-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stage-tab.is-mastered .stage-tab-meta {
  color: var(--success);
}

.stage-panel {
  background: transparent;
}

.stage-heading {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.stage-blurb {
  margin: 0 0 20px;
  color: var(--text-muted);
  max-width: 640px;
}

.stage-locked {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
}

.stage-locked p {
  margin: 0;
}

/* Code snippets inside a question. `pre` keeps the authored newlines; the
   horizontal scroll stops a long line widening the whole card. */
.stage-code {
  background: #1b2030;
  color: #e8ecf7;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
}

.stage-code code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

.stage-result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 20px;
}

.stage-result.is-pass {
  border-left-color: var(--success);
  background: var(--success-soft);
}

.stage-result.is-fail {
  border-left-color: var(--error);
  background: var(--error-soft);
}

.stage-result-score {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stage-result-note {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.stage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ---------- parsons ---------- */

.parsons-puzzle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.parsons-prompt {
  margin: 0 0 14px;
  font-weight: 600;
  line-height: 1.5;
}

.parsons-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.parsons-lines.is-correct {
  border-color: var(--success);
}

.parsons-lines.is-incorrect {
  border-color: var(--error);
}

.parsons-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.parsons-line:last-child {
  border-bottom: none;
}

.parsons-code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: none;
  color: var(--text);
  padding: 0;
  white-space: pre;
  overflow-x: auto;
}

.parsons-controls {
  display: flex;
  gap: 4px;
  flex: none;
}

/* Plain buttons on purpose — keyboard-operable and screen-reader-announced
   with no extra work, unlike drag handles. See the note in js/stages.js. */
.parsons-move {
  appearance: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.parsons-move:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.parsons-move:disabled {
  opacity: 0.35;
  cursor: default;
}

.parsons-answer {
  margin-top: 12px;
}

/* ---------- free write ---------- */

.free-task {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.free-prompt {
  margin: 0 0 14px;
  font-weight: 600;
  line-height: 1.5;
}

.free-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 6px;
}

.free-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  resize: vertical;
}

.free-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.free-expected {
  margin: 12px 0;
  font-size: 0.9rem;
}

.free-expected-label {
  font-weight: 700;
  margin-right: 8px;
}

.free-answer-label {
  margin: 16px 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.free-hints {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.free-hints li {
  margin-bottom: 4px;
}

.free-selfmark-q {
  margin: 14px 0 8px;
  font-weight: 600;
  font-size: 0.92rem;
}

.free-selfmark {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.free-selfmark .btn.is-chosen {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ==========================================================================
   flashcards (js/flashcards.js)
   ========================================================================== */

.fc-intro {
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 0 24px;
}

.fc-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.fc-filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.fc-filter {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.fc-progress {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.fc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.fc-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.fc-module {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
}

.fc-reason,
.fc-streak {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.fc-streak::before {
  content: "·";
  margin-right: 8px;
}

.fc-question {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 20px;
}

.fc-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Options are <button>s here rather than radios: a flashcard is answered by one
   click, with no submit step, so a button is the honest control. */
.fc-option {
  appearance: none;
  text-align: left;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.fc-option:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.fc-option:disabled {
  cursor: default;
  opacity: 1; /* keep the revealed answers fully legible */
}

.fc-option.is-correct {
  background: var(--success-soft);
  border-color: var(--success);
  font-weight: 600;
}

.fc-option.is-incorrect {
  background: var(--error-soft);
  border-color: var(--error);
}

.fc-feedback {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 0.92rem;
  line-height: 1.55;
}

.fc-feedback .result-label {
  font-weight: 700;
  margin-right: 6px;
}

.fc-feedback.correct .result-label {
  color: var(--success);
}

.fc-feedback.incorrect .result-label {
  color: var(--error);
}

.fc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.fc-summary,
.fc-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
}

.fc-summary h2,
.fc-empty h2 {
  margin: 0 0 8px;
  font-size: 1.3rem;
}

.fc-summary-score {
  margin: 0 0 12px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.fc-summary-retired {
  margin: 0 auto 8px;
  max-width: 460px;
  color: var(--success);
  font-weight: 600;
  font-size: 0.92rem;
}

.fc-summary-note,
.fc-empty p {
  margin: 0 auto;
  max-width: 460px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.fc-summary .fc-actions,
.fc-empty .fc-actions {
  justify-content: center;
}

.noscript-note {
  background: var(--error-soft);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  padding: 16px 20px;
  color: var(--text);
  margin: 16px 0 0;
}

/* ---------- module page ---------- */

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.module-header h1 {
  margin: 0 0 6px;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.module-header .kicker {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.intro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin: 24px 0 40px;
}

.intro h2 {
  margin-top: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.intro p {
  margin: 0 0 12px;
}

.intro p:last-child {
  margin-bottom: 0;
}

.intro code,
p code,
li code {
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.intro ul {
  margin: 0;
  padding-left: 20px;
}

.intro li {
  margin-bottom: 6px;
}

.quiz-section h2 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.quiz-section .quiz-intro {
  color: var(--text-muted);
  margin-top: 0;
  margin-bottom: 24px;
}

/* ---------- quiz component (rendered by js/quiz.js) ---------- */

.quiz-question {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 16px;
  /* Browsers give <fieldset> a default `min-width: min-content`, which stops it
     shrinking properly inside flex/grid parents. Always reset it. */
  min-width: 0;
}

/*
   A <legend> is not a normal block. By default the browser lifts it OUT of the
   fieldset's content flow and paints it ON the top border — that's how you get
   the classic "label notched into the box outline" look. With a filled, rounded
   box like ours the result is the question text sitting half outside the white
   card, which is the spacing bug you spotted.

   The fix is defined by the HTML spec rather than being a hack: an element only
   gets that special "rendered legend" treatment if it is the first <legend>
   child AND its computed `float` is `none` AND it is not absolutely positioned.
   Floating it therefore opts out cleanly, and it lays out as an ordinary block
   inside the box's padding. `.quiz-options` then clears the float.
*/
.quiz-question legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
}

.quiz-options {
  clear: both; /* drop below the floated legend */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  line-height: 1.5;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.quiz-option:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Nudge the radio down to sit on the first line of text rather than the top of
   the box. `em` keeps it aligned if the font size ever changes; a fixed px
   value drifts out of alignment as soon as it does. `flex: none` stops the
   radio being squashed when an option wraps to several lines. */
.quiz-option input {
  margin-top: 0.3em;
  flex: none;
}

.quiz-option.is-correct {
  background: var(--success-soft);
  border-color: var(--success);
}

.quiz-option.is-incorrect {
  background: var(--error-soft);
  border-color: var(--error);
}

.quiz-feedback {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 0.9rem;
  line-height: 1.55;
  display: none;
}

.quiz-feedback.is-visible {
  display: block;
}

/* The gap between "Correct." and the explanation is produced here, not by a
   leading space inside the explanation string in js/data/*.js. */
.quiz-feedback .result-label {
  font-weight: 700;
  margin-right: 6px;
}

.quiz-feedback .result-explanation {
  color: var(--text);
}

.quiz-feedback.correct .result-label {
  color: var(--success);
}

.quiz-feedback.incorrect .result-label {
  color: var(--error);
}

.quiz-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.btn {
  appearance: none;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease;
}

.btn:hover {
  background: var(--accent-dark);
}

.btn.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn.btn-secondary:hover {
  background: var(--accent-soft);
}

/* ---------- quiz: stats banner shown above the questions ---------- */

.quiz-stats {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.quiz-stats.is-retry {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.quiz-stats-line {
  margin: 0;
  font-weight: 600;
}

.quiz-stats-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-weight: 400;
}

.mastery-badge {
  display: inline-block;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  vertical-align: middle;
}

/* ---------- quiz: score readout ---------- */

.quiz-score {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 20px;
  display: none;
}

.quiz-score.is-visible {
  display: block;
}

.quiz-score.is-pass {
  border-left-color: var(--success);
  background: var(--success-soft);
}

.quiz-score.is-fail {
  border-left-color: var(--error);
  background: var(--error-soft);
}

.quiz-score-headline {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
}

.quiz-score-verdict {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ---------- quiz: post-attempt results and retry routing ---------- */

.quiz-results {
  display: none;
  margin-top: 20px;
}

.quiz-results.is-visible {
  display: block;
}

.quiz-results-heading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.quiz-missed {
  margin: 0 0 4px;
  padding-left: 20px;
  font-size: 0.92rem;
}

.quiz-missed li {
  margin-bottom: 6px;
}

.quiz-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 6px 0 0;
  display: none;
}

.quiz-note.is-visible {
  display: block;
}

/* ---------- home page: progress export / import ---------- */

.progress-tools {
  margin-top: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.progress-tools h2 {
  margin: 0 0 6px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.progress-tools p {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.progress-tools-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The "Import" control is a <label> wrapping a hidden file input, so it needs
   the flex/inline treatment a <button> gets for free. */
.file-btn {
  display: inline-flex;
  align-items: center;
}

.progress-tools-status {
  margin: 12px 0 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}

.progress-tools-status.is-ok {
  color: var(--success);
}

.progress-tools-status.is-error {
  color: var(--error);
}