/* ============================================================
   Course presentation — shared by all three courses.
   The course home (hero, progress ring, module map, chapter
   cards), the quiz blocks and the completion control.

   The product shell — typography, article, navigation, search,
   themes, responsive layout, focus states and motion — lives in
   style.css, which every page loads first.
   ============================================================ */

:root {
  --quiz-good: #9fbf7f;
  --quiz-bad: #d98a7a;
}

html[data-theme="paper"] {
  --quiz-good: #4f7d2c;
  --quiz-bad: #a4462e;
}

/* Course home */

.home {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.25rem var(--gutter) 2rem;
  overflow-wrap: break-word;
}

.home.fade-in { animation: fadeIn 0.35s ease-out; }
@media (prefers-reduced-motion: reduce) { .home.fade-in { animation: none; } }

.hero {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}

.hero-text { flex: 1; min-width: 0; }

.hero-kicker {
  margin: 0 0 0.8rem;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.hero h1 {
  margin: 0 0 0.4rem;
  color: var(--ink);
  font-size: 2rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.hero h1::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 1.1rem;
  background: var(--accent);
}

.hero-lede { margin: 1rem 0 1.5rem; }
.hero-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-hint { color: var(--text-faint); font-size: 0.85rem; font-style: italic; }

.hero-ring { position: relative; flex-shrink: 0; max-width: 100%; }
.hero-ring svg { display: block; max-width: 100%; height: auto; }
.ring-track { fill: none; stroke: var(--rule); stroke-width: 6; }
.ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ring-label strong { color: var(--ink); font-size: 1.45rem; line-height: 1; }
.ring-label span {
  margin-top: 0.3rem;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Footnote-grade copy about a tick-off mechanic used to carry the heaviest
   accent bar in the system, full column width, directly under the CTA — it
   read as a warning banner. Demoted to what it is. */
.path-legend {
  margin: 1.6rem 0 2.4rem;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid var(--rule-mid);
  color: var(--text-faint);
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.6;
}

/* the signature amber tick is rounded on chapters; make the home match */
.hero h1::after { border-radius: 2px; }

/* a fixed <br> in the hero headline broke at the same character at every
   width; let the line find its own balance */
.hero h1 { text-wrap: balance; }

/* Course map and chapter cards */

.module { margin-bottom: 2.6rem; }
.module-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
}

.module-index {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.9rem;
}

.module-head h2 { margin: 0 0 0.15rem; color: var(--ink); font-size: 1.4rem; overflow-wrap: break-word; min-width: 0; }
.module-blurb { margin: 0 0 0.35rem; color: var(--text-dim); font-size: 0.86rem; font-style: italic; }
.module-head .lvl-badge { margin-left: auto; flex-shrink: 0; }

/* course.js has always emitted `lvl-badge lvl-${level}` — beginner,
   intermediate, advanced — and no stylesheet defined any of them, so
   PREFACE, BEGINNER and ADVANCED+ all rendered the same amber and the
   difficulty progression the course data models was invisible. */
.lvl-badge.lvl-beginner {
  border-color: var(--lvl-core);
  background: color-mix(in srgb, var(--lvl-core) 12%, transparent);
  color: var(--lvl-core);
}
.lvl-badge.lvl-intermediate {
  border-color: var(--lvl-mechanism);
  background: var(--accent-soft);
  color: var(--accent);
}
.lvl-badge.lvl-advanced {
  border-color: var(--lvl-internals);
  background: color-mix(in srgb, var(--lvl-internals) 12%, transparent);
  color: var(--lvl-internals);
}

.lvl-badge {
  display: inline-block;
  padding: 0.18em 0.65em;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.chapter-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
.chapter-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--rule-mid);
  border-radius: 6px;
  background: var(--bg-raised);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.chapter-card:hover,
.chapter-card:focus-visible { border-color: var(--accent-dim); background: var(--accent-soft); }
/* the hover-only arrow was the card's only affordance for mouse users and
   nothing at all for keyboard ones */
.chapter-card:focus-visible .card-arrow { color: var(--accent); opacity: 1; transform: translateX(0); }

.card-check {
  position: relative;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  /* an unchecked ring at 1.16:1 was invisible, so "how many have I done"
     read as "there is nothing here" */
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
}

.chapter-card.done .card-check { border-color: var(--accent); background: var(--accent); }
.chapter-card.done .card-check::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.chapter-card.done .card-title { color: var(--text-faint); }
.card-num { flex-shrink: 0; color: var(--text-faint); font-family: var(--mono); font-size: 0.76rem; }
.card-body { min-width: 0; }
.card-title { display: block; color: var(--ink); font-size: 0.96rem; font-weight: 700; }
.card-desc { display: block; margin-top: 0.1rem; color: var(--text-dim); font-size: 0.82rem; font-style: italic; }
.card-arrow {
  margin-left: auto;
  color: var(--text-faint);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.chapter-card:hover .card-arrow { color: var(--accent); opacity: 1; transform: translateX(0); }

/* Course-specific chapter metadata */

.crumb { color: var(--text-faint); text-decoration: none; }
.crumb:hover, .crumb:focus-visible { color: var(--accent); }
/* was var(--rule) — 1.21:1, so the separator simply was not there */
.crumb-sep { color: var(--text-faint); }
.crumb-here { color: var(--text-dim); }
.meta-right { display: inline-flex; align-items: center; gap: 0.7rem; margin-left: auto; }
.read-time { color: var(--text-faint); font-family: var(--mono); font-size: 0.72rem; }

/* Quiz blocks and answer states */

.quiz {
  margin: 2.4rem 0 1.5rem;
  padding: 1.4rem 1.5rem 1.2rem;
  border: 1px solid var(--rule-mid);
  border-radius: 6px;
  background: var(--bg-raised);
}

.quiz-head h3 { margin: 0.3rem 0 0.2rem; color: var(--accent); font-size: 1.15rem; }
.quiz-flag {
  color: var(--accent-dim);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.quiz-sub { margin: 0 0 1.1rem; color: var(--text-dim); font-size: 0.84rem; font-style: italic; }
.quiz-q { margin: 0 0 0.9rem; padding: 0.9rem 1.1rem 0.8rem; border: 1px solid var(--rule-mid); border-radius: 5px; }
.quiz-q legend { padding: 0 0.4rem; color: var(--ink); font-size: 0.95rem; font-weight: 700; }
/* Correctness was a border colour and nothing else — and --quiz-good
   against --quiz-bad measures 1.30:1, so the two states were the same
   state to a colour-blind reader. The legend now carries a glyph and a
   word as well. */
.quiz-q.right { border-color: var(--quiz-good); }
.quiz-q.wrong { border-color: var(--quiz-bad); }

.quiz-verdict {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.quiz-q.right .quiz-verdict { color: var(--quiz-good); }
.quiz-q.wrong .quiz-verdict { color: var(--quiz-bad); }
/* thumb-sized: the block padding does the lifting so the floor rarely bites,
   and the baseline answers wrap onto stays where the eye expects it */
.quiz-choice {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-height: 44px;
  margin: 0 -0.5rem;
  padding: 0.55rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.93rem;
}
.quiz-choice:hover { background: var(--accent-soft); }
.quiz-choice input { appearance: auto; accent-color: var(--accent); cursor: pointer; }
.quiz-explain {
  margin: 0.6rem 0 0.2rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule);
  color: var(--text-dim);
  font-size: 0.86rem;
  font-style: italic;
}
.quiz-q.right .quiz-explain { color: var(--quiz-good); }
.quiz-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; }
.quiz-result { color: var(--text-dim); font-size: 0.9rem; font-style: italic; }
.quiz-result.pass { color: var(--quiz-good); font-weight: 700; }
.quiz-result.fail { color: var(--quiz-bad); }
/* answers were right but the write was refused — never claim a save that failed */
.quiz-result.warn { color: var(--lvl-internals); font-style: normal; }

/* Per-chapter completion control */

.chapter-done { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); text-align: center; }
/* the one control a reader taps at the end of every chapter — thumb-sized too */
.complete-toggle {
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.complete-toggle:hover { border-color: var(--accent-dim); color: var(--ink); }
.complete-toggle.done { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.save-warning {
  margin: 0.7rem 0 0;
  color: var(--lvl-internals);
  font-size: 0.82rem;
  font-style: italic;
}

@media (max-width: 900px) {
  .home {
    padding: 2.4rem max(1.75rem, env(safe-area-inset-right)) 1.5rem
             max(1.75rem, env(safe-area-inset-left));
  }
  .hero { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; }
  .hero-ring { align-self: flex-end; }
  .hero h1 { font-size: 1.75rem; }
  .module-head { flex-wrap: wrap; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .home {
    padding: 3rem max(2.5rem, env(safe-area-inset-right)) 2rem
             max(2.5rem, env(safe-area-inset-left));
  }
}

@media (max-width: 600px) {
  .home {
    padding: 1.85rem max(1.15rem, env(safe-area-inset-right)) 1rem
             max(1.15rem, env(safe-area-inset-left));
  }
  .hero h1 { font-size: 1.55rem; }
  .hero-ring svg { width: 100px; height: 100px; }
  .ring-label strong { font-size: 1.1rem; }
  .module-head h2 { font-size: 1.22rem; }
  .chapter-card { gap: 0.7rem; padding: 0.75rem 0.9rem; }
  /* the map is all a phone reader has to steer by — clip the blurb, never drop it */
  .card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.78rem;
  }
  .quiz { padding: 1.1rem 1rem 1rem; }
  .meta-right { flex-basis: 100%; margin-left: 0; }
}

/* ---------------- platform landing (#/ on the root shell) ----------------

   Reuses the course-home vocabulary — .hero, .card-arrow, the progress ring —
   because it is the same product, one level up. The only new idea is a card
   big enough to be the page's primary content rather than a nav chip.

   Ring geometry is r=26 here against r=52 on a course home, so the stroke is
   halved to keep the same visual weight. */

.platform-hero { display: block; }
.platform-hero .hero-lede { max-width: 46rem; }
.platform-hero .hero-hint { display: block; margin-top: 1.2rem; }

.course-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  margin: 2rem 0 0;
}

.course-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--rule-mid);
  border-radius: 8px;
  background: var(--bg-raised);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.course-card:hover,
.course-card:focus-visible {
  border-color: var(--accent-dim);
  background: var(--accent-soft);
}

/* Three cards *are* the landing page, so their arrow is not a hover reward:
   at rest it is the only mark that says a card is somewhere to go. The
   chapter cards can keep theirs hidden — a 56-card grid of arrows is noise. */
.course-card .card-arrow {
  align-self: center;
  opacity: 0.55;
  transform: translateX(0);
}

.course-card:hover .card-arrow,
.course-card:focus-visible .card-arrow {
  color: var(--accent);
  opacity: 1;
  transform: translateX(3px);
}

.course-card-body { min-width: 0; flex: 1; }

.course-card-title {
  display: block;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 700;
}

.course-card-desc {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.55;
}

.course-card-meta {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* started: a real ring. Not started: the size of the thing, because an empty
   donut reading "0%" tells a first-time visitor nothing. */
.course-ring { position: relative; flex-shrink: 0; width: 64px; height: 64px; }
.course-ring svg { display: block; }
.course-ring .ring-track,
.course-ring .ring-fill { stroke-width: 3.5; }
/* the shared --rule track vanishes at this stroke, and a ring with no visible
   track reads as "4% of nothing" rather than "4% of the course" */
.course-ring .ring-track { stroke: var(--rule-mid); }

/* One centred flex item holding one line of text: `align-items: baseline` on a
   box stretched over the whole ring packed the line at the top of the cross
   axis, so "4%" sat against the rim instead of in the middle. The "%" is
   inline *inside* that item, so it keeps the digits' baseline — as a flex
   sibling it aligned to the ring's edges rather than to the number. */
.course-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1;
  pointer-events: none;
}

.course-ring-label b { font-weight: 400; }
.course-ring-label span { font-size: 0.58rem; color: var(--text-faint); }

.course-meter {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.course-meter-n { color: var(--ink); font-family: var(--mono); font-size: 1.3rem; line-height: 1; }
.course-meter-l {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* the way back up, above the three course chips in every sidebar */
.chip-all { margin-bottom: 0.5rem; }
.chip-all .chip-title { color: var(--accent); }

@media (max-width: 600px) {
  /* The blurb wraps to five or six lines on a phone, and a centred meter then
     floated halfway down a tall card, level with nothing. Pin it to the title
     it measures. */
  .course-card { gap: 0.9rem; padding: 1rem; align-items: flex-start; }
  .course-card-title { font-size: 1rem; }
  .course-ring, .course-meter { width: 52px; margin-top: 0.1rem; }
  .course-ring { height: 52px; }
  .course-ring svg { width: 52px; height: 52px; }
  .course-card .card-arrow { align-self: flex-start; margin-top: 0.35rem; }
}