/* ============================================================================
   Course diagrams (web/app/course-scenes.js) — original vector illustrations
   for the theory course. They reuse the .scene palette from scenes.css (asphalt,
   grass, car tones, lane colours) but, unlike the neutral question scenes, a
   course diagram is ALLOWED to teach: it carries labels, arrows, dimension lines
   and priority badges, because here we WANT to show the correct behaviour.
   Static by design (no animation) — a learner reads them, they don't play.
   ========================================================================== */
.cs {
  --good: #1a7f37; --bad: #c0342a; --warn: #e08a00; --info: #2f6fed;
  --dim: var(--muted); --ink2: var(--text);
  display: block; margin: 0 0 1.1rem;
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
  background:
    radial-gradient(90% 120% at 12% 0%, color-mix(in srgb, var(--info) 9%, transparent), transparent 60%),
    var(--surface);
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 26px rgba(16,24,40,.06);
}
.cs.cs--road {  /* diagrams set on a real road get the sky, like question scenes */
  --sky1: #b9e2ff; --sky2: #eaf6ff;
  --grass: #7ecb7c; --hill: #a9dda2;
  --asph: #444b5a; --asph2: #363c49; --lane: #f4c542; --edge: rgba(255,255,255,.6);
  --carA: #d81f3a; --carB: #2f6fed; --carC: #f0a020; --ink: #1a1f28;
  background: linear-gradient(180deg, var(--sky1), var(--sky2));
}
:root[data-theme="dark"] .cs.cs--road {
  --sky1: #16243c; --sky2: #101722; --grass: #2f5138; --hill: #24402c;
  --asph: #2a303c; --asph2: #22272f; --edge: rgba(255,255,255,.32); --ink: #e8eaed;
}
.cs-svg { display: block; width: 100%; height: auto; }
.cs figcaption {
  padding: .45rem .75rem; font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  color: var(--muted); background: var(--surface); border-top: 1px solid var(--border);
}

/* --- drawing primitives (fills/strokes referenced from the SVG strings) --- */
.cs-asph { fill: var(--asph, #444b5a); }
/* Sykkelfelt surface. Norwegian cycle lanes are painted RED, not the green used
   in several other countries — same recipe as .sc-bikelane-red in scenes.css so
   the course diagrams and the question illustrations agree. Mixed into --asph
   rather than fixed, so it stays a painted carriageway in both themes. */
.cs-cyclelane { fill: color-mix(in srgb, #e8767a 55%, var(--asph, #444b5a)); }
.cs-grass { fill: var(--grass, #7ecb7c); }
.cs-edge { stroke: var(--edge, rgba(255,255,255,.6)); stroke-width: 2; }
.cs-lane { stroke: var(--lane, #f4c542); stroke-width: 2.4; }
.cs-lane.white { stroke: #f2f4f8; }
.cs-dash { stroke-dasharray: 12 12; }

.cs-good-f { fill: var(--good); } .cs-bad-f { fill: var(--bad); }
.cs-warn-f { fill: var(--warn); } .cs-info-f { fill: var(--info); }
.cs-good-s { stroke: var(--good); } .cs-bad-s { stroke: var(--bad); }
.cs-warn-s { stroke: var(--warn); } .cs-info-s { stroke: var(--info); }

.cs-zone-good { fill: color-mix(in srgb, var(--good) 22%, transparent); }
.cs-zone-bad  { fill: color-mix(in srgb, var(--bad) 24%, transparent); }
.cs-zone-warn { fill: color-mix(in srgb, var(--warn) 26%, transparent); }
.cs-zone-info { fill: color-mix(in srgb, var(--info) 20%, transparent); }

.cs-label { fill: var(--text); font: 700 12px 'Plus Jakarta Sans', system-ui, sans-serif; }
.cs-label.sm { font-size: 10.5px; font-weight: 600; }
.cs-label.lg { font-size: 15px; font-weight: 800; }
.cs-label.mut { fill: var(--muted); font-weight: 600; }
/* Semantic label colours. These MUST be classes: a `fill="var(--good)"` attribute
   on a .cs-label loses to the class rule above and silently renders default ink. */
.cs-label.good, .cs-num.good { fill: var(--good); }
.cs-label.bad,  .cs-num.bad  { fill: var(--bad); }
.cs-label.warn, .cs-num.warn { fill: var(--warn); }
.cs-label.info, .cs-num.info { fill: var(--info); }
.cs-label.inv { fill: #fff; }
.cs-num { fill: var(--text); font: 800 13px 'Plus Jakarta Sans', system-ui, sans-serif; }

/* On a .cs--road figure the footer note can land on grass, asphalt or sky, and
   plain --muted grey fails contrast over the green verge. A halo (paint-order:
   stroke fill) keeps one rule legible over every backdrop, which beats picking a
   fill per scene — there are 200+ of them. .inv labels are excluded: they are
   white-on-dark by design and a white halo would erase them. */
.cs--road .cs-label.mut:not(.inv) {
  paint-order: stroke fill; fill: #1e242e;
  stroke: rgba(255,255,255,.92); stroke-width: 3px; stroke-linejoin: round;
}
:root[data-theme="dark"] .cs--road .cs-label.mut:not(.inv) {
  fill: #e6eaf0; stroke: rgba(10,14,20,.9);
}

.cs-dimline { stroke: var(--muted); stroke-width: 1.4; }
.cs-arrow-s { stroke: var(--text); stroke-width: 2.4; fill: none; }
.cs-badge { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }

.cs-car-body { stroke: rgba(0,0,0,.28); stroke-width: 1; }
.cs-glass { fill: color-mix(in srgb, var(--info) 30%, #cfe9ff); }

/* --- kit primitives (web/app/course-scenes/kit.js) ------------------------- */
/* Sign faces. Norwegian fareskilt are WHITE with a red border (verified against
   web/signs/*.svg from skiltforskriften) — never the Swedish yellow. */
.cs-sign-face { stroke-width: 4.5; }
.cs-sign-face.warn  { fill: #fff; stroke: #cd1e00; }   /* fareskilt 1xx (triangle) */
.cs-sign-face.ban   { fill: #fff; stroke: #cd1e00; }   /* forbudsskilt 3xx (circle) */
.cs-sign-face.order { fill: #00205b; stroke: #fff; }   /* påbudsskilt 4xx (blue circle) */
.cs-sign-face.info  { fill: #00205b; stroke: #fff; }   /* opplysningsskilt 5xx (blue square) */
.cs-sign-face.prio  { fill: #f5c400; stroke: #12151b; stroke-width: 3; } /* 502 forkjørsveg */
.cs-sign-face.stop  { fill: #cd1e00; stroke: #fff; }
.cs-sign-face.plate { fill: #fff; stroke: #12151b; stroke-width: 2.5; }
.cs-sign-ink { fill: #12151b; }
.cs-sign-ink.inv { fill: #fff; }
.cs-sign-txt { fill: #12151b; font: 800 11px 'Plus Jakarta Sans', system-ui, sans-serif; }
.cs-sign-txt.inv { fill: #fff; }
.cs-post { stroke: #8d97a6; stroke-width: 3.4; stroke-linecap: round; }

/* Step / comparison panels inside one figure (our stand-in for animation: a
   sequence is drawn as numbered frames the learner reads, it never plays). */
.cs-panel { fill: color-mix(in srgb, var(--info) 5%, var(--surface)); stroke: var(--border); stroke-width: 1.2; }
.cs-panel.good { fill: color-mix(in srgb, var(--good) 8%, var(--surface)); stroke: color-mix(in srgb, var(--good) 45%, var(--border)); }
.cs-panel.bad  { fill: color-mix(in srgb, var(--bad) 8%, var(--surface));  stroke: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.cs-step-dot { fill: var(--info); }
.cs-step-num { fill: #fff; font: 800 11px 'Plus Jakarta Sans', system-ui, sans-serif; }

/* Misc scenery + chart furniture */
.cs-ink { fill: var(--text); }
.cs-hairline { stroke: var(--border); stroke-width: 1; }
.cs-grid { stroke: color-mix(in srgb, var(--muted) 28%, transparent); stroke-width: 1; }
.cs-kerb { fill: #b9bfc9; }
.cs-tree { fill: #2f7d4f; } .cs-trunk { fill: #6b4a2f; }
.cs-bldg { fill: color-mix(in srgb, var(--muted) 38%, var(--surface)); stroke: var(--border); }
.cs-track { stroke: #8d97a6; stroke-width: 2.6; }

/* ============================================================================
   Course reader UI — home, chapter overview and the lesson reader. Uses the
   site's design tokens (surface/border/brand/radii/shadows) so it sits inside
   the existing visual language; dark mode and reduced motion inherited.
   ========================================================================== */

/* --- course home ---------------------------------------------------------- */
/* UN-BOXED (2026-09-14), to match the two front-page heroes: this was the same white card with a
   shadow the owner asked to lose there, holding the same kind of content (eyebrow, h1, lead, CTA,
   chips, a figure). No card, no border, no background — see the rule on .lp-hero in styles.css for
   why a "soft" background gradient here would just redraw the box. Sides 0: .view carries the gutter
   and the title starts on the rail edge like every other page heading. The blue tint the card used
   to carry moves to the ring's side as a free-floating glow (::before below). */
.course-hero {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.2rem, 3vw, 2.2rem) 0; margin: .4rem 0 1.6rem;
}
.course-hero-ring { position: relative; }
.course-hero-ring::before { content: ""; position: absolute; inset: -30% -40%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 22%, transparent), transparent 72%); }
.course-hero h1 { margin: .3rem 0 .4rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.course-hero .lead { margin: 0 0 1rem; max-width: 48ch; }
.course-hero-ring { display: grid; justify-items: center; gap: .5rem; text-align: center; }
/* The ring's phone stand-in — hidden until the ≤620px block swaps them. Course blue, not brand red,
   to match the stat chips' figures. */
.course-hero-bar { display: none; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; width: 100%; }
.course-hero-bar b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.course-hero-bar .bar { margin: 0; height: 10px; }
.course-hero-bar .bar > i { background: var(--blue); }
.course-hero-ring small { color: var(--muted); font-weight: 700; font-size: .78rem; max-width: 12rem; }
/* Measured reading time (app/coursetime.js), under the completion ring. Rendered
   only once there is any, so it never states "0 min" beside a fresh ring. */
.course-hero-time { display: inline-flex; align-items: center; gap: .35rem; }
.course-hero-time svg { width: 14px; height: 14px; }
.course-hero-time b { color: var(--text); }

/* eyebrow, CTA and stat chips styled for the LIGHT hero surface (the site's
   .hero-* / .pill chrome is tuned for the red gradient hero and would render as
   muddy grey chips here). */
.course-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .7rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: color-mix(in srgb, var(--blue) 60%, var(--text)); background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--border));
  padding: .28rem .7rem; border-radius: var(--r-pill);
}
.course-eyebrow svg { width: 14px; height: 14px; }
.course-hero-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.course-hero-cta .btn svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: .2rem; }
.course-hero-stats { display: flex; gap: .5rem; flex-wrap: wrap; }
/* Same chip as .pill on the un-boxed home hero: opaque surface + hairline + e1, so it reads over the
   decorative shapes that now pass behind. Figure in the page's blue, the course's accent. */
.course-stat {
  display: inline-flex; align-items: baseline; gap: .35rem; font-size: .85rem; color: var(--text);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); padding: .3rem .75rem;
  border-radius: var(--r-pill); box-shadow: var(--e1);
}
.course-stat b { font-size: 1rem; color: var(--blue); }

.course-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.course-ch-card {
  --accent: var(--blue);
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start;
  padding: 1.15rem 1.2rem; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.course-ch-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
/* Press states on the three course link-cards: same "physical key" idiom as .btn and
   .opt in styles.css — down 1px, lift gone — so a tap answers before the route does. */
.course-ch-card:active { transform: translateY(1px); box-shadow: var(--shadow); }
.course-ch-ico {
  display: grid; place-items: center; width: 51px; height: 51px; border-radius: 50%;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.course-ch-ico svg { width: 24px; height: 24px; }
.course-ch-ico.big { width: 66px; height: 66px; } .course-ch-ico.big svg { width: 30px; height: 30px; }
.course-ch-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.course-ch-body h3 { margin: .35rem 0 .3rem; font-size: 1.08rem; }
.course-ch-body p { margin: 0 0 .7rem; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.course-ch-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.course-ch-num { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 62%, var(--text)); }
.course-ch-meta { display: flex; flex-wrap: wrap; gap: .9rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.course-ch-meta svg { width: 15px; height: 15px; vertical-align: -3px; }
.course-ch-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.course-ch-done { color: var(--ok-ink); }
/* Your own measured time in this chapter, distinct from the estimated `ch.minutes`
   next to it — hence the tinted pill rather than another muted clock chip. */
.course-ch-time {
  color: color-mix(in srgb, var(--blue) 60%, var(--text));
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  padding: .1rem .45rem; border-radius: var(--r-pill);
}
.course-ch-bar { display: block; height: 5px; margin-top: .7rem; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.course-ch-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
.course-ch-arrow { color: var(--muted); align-self: center; } .course-ch-arrow svg { width: 20px; height: 20px; }
.course-ch-card:hover .course-ch-arrow { color: var(--accent); }

.cs-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .66rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: .15rem .5rem; border-radius: var(--r-pill); }
.cs-chip svg { width: 12px; height: 12px; }
.cs-chip--free { color: var(--ok-ink); background: var(--ok-bg); }
.cs-chip--lock { color: var(--muted); background: var(--surface-2); }

/* --- chapter overview ----------------------------------------------------- */
/* No cap of its own: the chapter overview sits on the shared --page-w rail like
   every other route (it used to be 860px, which made #/course/<ch> narrower than
   #/course itself). Blocks that need a reading measure set their own. */
.course-wrap { max-width: var(--page-w); margin: 0 auto; }
.course-back { display: inline-block; margin: .2rem 0 1rem; color: var(--muted); font-weight: 700; text-decoration: none; }
.course-back:hover { color: var(--text); }
.course-ch-head { --accent: var(--blue); display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; margin-bottom: 1.4rem; }
.course-ch-head h1 { margin: .25rem 0 .4rem; }
.course-ch-head .lead { margin: 0 0 .7rem; }
/* "Om kapitlet": the chapter's landing page, under the meta row. Reuses .readup. */
.course-ch-aboutrow { margin: .7rem 0 0; }

.course-lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.course-lesson-link {
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center;
  padding: .85rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.course-lesson-link:hover { transform: translateX(3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--blue) 40%, var(--border)); }
.course-lesson-link:active { transform: translateY(1px); box-shadow: var(--shadow); }
.course-lesson-num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-weight: 800; color: var(--muted); background: var(--surface-2); flex: none;
}
.course-lesson-num svg { width: 18px; height: 18px; }
.is-done .course-lesson-num { color: #fff; background: var(--ok); }
.course-lesson-title { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.course-lesson-sum { display: block; color: var(--muted); font-size: .84rem; line-height: 1.4; margin-top: .1rem; }
.course-mark-dot { color: var(--amber); } .course-mark-dot svg { width: 14px; height: 14px; }
.course-lesson-meta { color: var(--muted); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.course-lesson-meta svg { width: 14px; height: 14px; vertical-align: -2px; }
.course-chnav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; }
.course-chnav .flip { direction: ltr; } .course-chnav svg { width: 18px; height: 18px; }
.course-chnav .prev svg { transform: scaleX(-1); }

/* --- lesson reader -------------------------------------------------------- */
.course-progressbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 60; pointer-events: none; }
.course-progressbar > span { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

.course-reader { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }
/* No measure cap on .course-article: the article track is ~838px on the 1160px
   rail, which is the same line length .legal-prose already reads at (72ch is 843px
   in Plus Jakarta Sans — its `ch` is a wide 11.7px, so `ch` figures in this sheet
   are much wider than they look). Capping it here would have made the reader the
   one page narrower than the rest again. */
.course-toc { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 100px); overflow: auto; padding-right: .3rem; }
.course-toc-title { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .6rem 0 .5rem; }
.course-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.course-toc a {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center;
  padding: .45rem .55rem; border-radius: var(--r-sm); text-decoration: none; color: var(--muted);
  font-size: .86rem; font-weight: 600; border-left: 2px solid transparent;
}
.course-toc a:hover { color: var(--text); background: var(--surface-2); }
.course-toc a.is-active { color: var(--text); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); border-left-color: var(--blue); font-weight: 800; }
.course-toc-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .74rem; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.course-toc a.is-done .course-toc-num { color: #fff; background: var(--ok); }
.course-toc a.is-done .course-toc-num svg { width: 13px; height: 13px; }

.course-article { min-width: 0; }
/* `.course-crumb` was the app's only breadcrumb and is now `.crumbs` in styles.css,
   shared with every other section and with the landing pages. Only the spacing to the
   h1 below it is course-specific. */
.course-article > .crumbs { margin-bottom: .5rem; }
.course-article h1 { margin: 0 0 .4rem; font-size: clamp(1.6rem, 3.6vw, 2.2rem); line-height: 1.15; }
.course-lead { font-size: 1.05rem; color: var(--muted); line-height: 1.5; margin: 0 0 1rem; }
.course-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-bottom: 1.1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--border); }
.course-meta-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 700; color: var(--muted); }
.course-meta-chip svg { width: 15px; height: 15px; }
.course-bmk {
  display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; cursor: pointer;
  padding: .35rem .7rem; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); font: inherit; font-size: .8rem; font-weight: 700;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.course-bmk svg { width: 15px; height: 15px; }
.course-bmk:hover { color: var(--text); border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.course-bmk.is-on { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, var(--border)); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); }

/* body typography */
.course-body { font-size: 1.02rem; line-height: 1.68; }
.course-body > p { margin: 0 0 1.05rem; }
.course-body .cs-sub { margin: 1.9rem 0 .8rem; font-size: 1.3rem; line-height: 1.25; scroll-margin-top: 90px; }
.course-body .cs-list { margin: 0 0 1.1rem; padding-left: 1.2rem; display: grid; gap: .4rem; }
.course-body .cs-list li { padding-left: .2rem; }
.course-body .cs-list li::marker { color: var(--blue); font-weight: 800; }

.cs-tablewrap { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--border); border-radius: var(--r-md); }
.cs-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.cs-table th, .cs-table td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--border); }
.cs-table thead th { background: var(--surface-2); font-weight: 800; font-size: .82rem; letter-spacing: .01em; }
.cs-table tbody tr:last-child td, .cs-table tr:last-child td { border-bottom: 0; }
.cs-table-ic-h, .cs-table-ic { width: 1%; white-space: nowrap; padding-right: .3rem; }
.cs-table-icon { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: .2rem; color: var(--blue); }
.cs-table-icon:last-child { margin-right: 0; }
.cs-table-icon svg { width: 20px; height: 20px; }

/* course photos (real-world images, alongside the drawn `figure` scenes) */
.cs-img { display: block; width: 100%; height: auto; }

/* callouts */
.cs-callout {
  --c: var(--blue);
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  margin: 1.3rem 0; padding: .95rem 1.1rem; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--border)); border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 8%, var(--surface));
}
.cs-callout-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--c); flex: none; }
.cs-callout-ic svg { width: 17px; height: 17px; }
.cs-callout-title { display: block; margin-bottom: .15rem; font-weight: 800; }
.cs-callout-body p { margin: 0; line-height: 1.55; }
.cs-callout--tip { --c: var(--ok); }
.cs-callout--warn { --c: var(--brand); }
.cs-callout--rule { --c: var(--blue); }
.cs-callout--example { --c: var(--violet); }
.cs-callout--exam { --c: var(--amber); }

/* practice cross-link */
.cs-practice {
  display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center;
  margin: 1.3rem 0; padding: .9rem 1.1rem; border-radius: var(--r-md);
  border: 1px dashed color-mix(in srgb, var(--blue) 45%, var(--border));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
  text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .18s ease, background .18s ease;
}
.cs-practice:hover { transform: translateY(-2px); box-shadow: var(--shadow); background: color-mix(in srgb, var(--blue) 11%, var(--surface)); }
.cs-practice-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, var(--surface)); }
.cs-practice-ic svg { width: 20px; height: 20px; }
.cs-practice-body b { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: color-mix(in srgb, var(--blue) 78%, var(--text)); }
.cs-practice-body span { color: var(--muted); font-size: .9rem; }
.cs-practice-arrow { color: var(--blue); } .cs-practice-arrow svg { width: 20px; height: 20px; }

/* glossary */
.cs-gloss { margin: 1.1rem 0; padding: .85rem 1.05rem; border-radius: var(--r-md); background: var(--surface-2); }
.cs-gloss dt { font-weight: 800; margin-bottom: .15rem; }
.cs-gloss dd { margin: 0; color: var(--muted); line-height: 1.55; }

/* complete + prev/next */
/* Flex, not text-align, since the mark-done button gained a "quiz yourself" sibling
   (the lesson→practice half of the read↔practice bridge) — they sit side by side and
   wrap as a pair on phones. */
.course-complete { margin: 2rem 0 1.2rem; display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }
.course-complete .btn svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: .3rem; }
.course-lessnav { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.course-lessnav-btn {
  display: grid; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); text-decoration: none; color: inherit; box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.course-lessnav-btn:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--blue) 40%, var(--border)); }
.course-lessnav-btn.next { text-align: right; }
.course-lessnav-btn.next:hover { transform: translateX(3px); } .course-lessnav-btn.prev:hover { transform: translateX(-3px); }
.course-lessnav-btn:active { transform: translateY(1px); box-shadow: var(--shadow); }
.course-lessnav-dir { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.course-lessnav-name { font-weight: 700; }
.course-gate { max-width: 560px; margin: 1.5rem auto; }

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 860px) {
  .course-reader { grid-template-columns: 1fr; gap: 1.2rem; }
  .course-toc { position: static; max-height: none; order: -1; border: 1px solid var(--border); border-radius: var(--r-md); padding: .6rem .8rem; background: var(--surface); }
  .course-toc ol { grid-auto-flow: row; }
}
@media (max-width: 620px) {
  .course-hero { grid-template-columns: 1fr; }
  /* Ring -> line on phones. The circle took ~a third of the fold to say "0%"; a bar says it in
     one row. The glow (::before) goes with the ring — it was sized for a circle. */
  .course-hero-ring { justify-self: stretch; justify-items: start; text-align: left; gap: .35rem; }
  .course-hero-ring .ring, .course-hero-ring::before { display: none; }
  .course-hero-bar { display: grid; }
  .course-ch-card { grid-template-columns: auto 1fr; }
  .course-ch-arrow { display: none; }
  .course-lessnav { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .course-ch-card, .course-lesson-link, .course-lessnav-btn, .cs-practice { transition: none; }
  .course-progressbar > span { transition: none; }
}