/* CCM course pages - shared styling.
   Light and dark are both first-class: Phillip reads for hours on an iPad.
   Palette is the GCHS brand set (darker variants) agreed 2026-09-11. */

:root {
  --paper:#F2F4F7; --card:#FFFFFF; --ink:#102036; --muted:#5A6472;
  --accent:#004E85; --accent-warm:#A85200; --good:#2F6B41; --bad:#8F3524;
  --border:#CBD5E0; --tint:#E8EEF5; --shadow:0 1px 3px rgba(16,32,54,.10);
  --fs:1;                      /* font scale, driven by A- / A+ */
  --measure:60rem;             /* reading measure: widened 2026-09-27 so lessons use more of a wide screen */
}
:root[data-theme="dark"] {
  --paper:#0D1622; --card:#16212F; --ink:#E4EAF1; --muted:#96A3B4;
  --accent:#63A8DC; --accent-warm:#E09A4D; --good:#6FBF8B; --bad:#E0846C;
  --border:#2B3A4C; --tint:#1B2938; --shadow:0 1px 3px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:calc(1.0625rem * var(--fs)); line-height:1.65;
  padding:0 0 96px;
}
.wrap{max-width:var(--measure); margin:0 auto; padding:0 20px;}

/* ---- reader control bar ---- */
.reader-bar{
  position:sticky; top:0; z-index:20; background:var(--card);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:8px 12px;
}
.reader-bar .spacer{flex:1 1 auto;}
.reader-bar button, .reader-bar select{
  font:inherit; font-size:calc(.85rem * var(--fs));
  background:var(--card); color:var(--ink);
  border:1px solid var(--border); border-radius:8px;
  padding:7px 11px; min-height:40px; cursor:pointer;
}
.reader-bar button:hover{border-color:var(--accent);}
.reader-bar button[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:var(--accent);}
.reader-bar .back{text-decoration:none; color:var(--accent); font-weight:600; padding:7px 4px;}

/* ---- day header ---- */
.day-head{padding:22px 0 6px;}
.eyebrow{color:var(--accent-warm); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; font-size:calc(.75rem * var(--fs)); margin:0 0 4px;}
h1{font-size:calc(1.6rem * var(--fs)); line-height:1.25; margin:0 0 6px; color:var(--ink);}
.day-meta{color:var(--muted); font-size:calc(.85rem * var(--fs)); margin:0 0 18px;}

h2{font-size:calc(1.2rem * var(--fs)); margin:34px 0 10px; color:var(--ink);
   border-bottom:2px solid var(--border); padding-bottom:6px;}
h3{font-size:calc(1.03rem * var(--fs)); margin:22px 0 8px; color:var(--ink);}
p,li{font-size:inherit;}
a{color:var(--accent);}
strong{font-weight:700;}
table{width:100%; border-collapse:collapse; margin:14px 0; font-size:calc(.92rem * var(--fs));}
th,td{border:1px solid var(--border); padding:7px 9px; text-align:left; vertical-align:top;}
th{background:var(--tint);}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ---- speaking highlight ---- */
.speaking{background:var(--tint); box-shadow:0 0 0 3px var(--tint); border-radius:3px;}

/* ---- practice questions ---- */
.q{background:var(--card); border:1px solid var(--border); border-radius:12px;
   padding:14px 16px; margin:14px 0; box-shadow:var(--shadow);}
.q .stem{font-weight:600; margin:0 0 10px;}
.q ol.choices{margin:0 0 12px; padding-left:1.4em;}
.q ol.choices li{margin:4px 0;}
.reveal-btn{font:inherit; font-size:calc(.88rem * var(--fs)); background:transparent;
  color:var(--accent); border:1px solid var(--accent); border-radius:8px;
  padding:8px 14px; min-height:44px; cursor:pointer;}
.reveal-btn:hover{background:var(--accent); color:#fff;}
.answer{margin:12px 0 0; padding:12px 14px; border-left:4px solid var(--good);
  background:var(--tint); border-radius:0 8px 8px 0;}
.answer .letter{font-weight:700; color:var(--good);}

/* ---- assignment / glossary / checklist ---- */
.assignment{background:var(--card); border:1px solid var(--border);
  border-left:4px solid var(--accent-warm); border-radius:0 12px 12px 0;
  padding:14px 16px; box-shadow:var(--shadow);}
dl.glossary{margin:0;}
dl.glossary dt{font-weight:700; margin:14px 0 2px; color:var(--accent);}
dl.glossary dd{margin:0 0 6px;}
ul.checklist{list-style:none; padding:0;}
ul.checklist li{margin:8px 0;}
ul.checklist label{display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:9px 11px; border:1px solid var(--border); border-radius:10px;
  background:var(--card); min-height:44px;}
ul.checklist input{margin-top:.35em; width:20px; height:20px; accent-color:var(--good); flex:none;}
ul.checklist input:checked + span{color:var(--muted); text-decoration:line-through;}

/* ---- day footer nav ---- */
.day-nav{display:flex; gap:10px; margin:36px 0 0; flex-wrap:wrap;}
.day-nav a{flex:1 1 45%; text-align:center; text-decoration:none;
  border:1px solid var(--border); border-radius:10px; padding:13px 10px;
  background:var(--card); color:var(--accent); font-weight:600; min-height:44px;}
/* Mark-complete is a real <button> and a toggle. Unmarked it reads as an
   action; marked it goes solid green and says how to take it back, so the
   state is never carried by colour alone. */
.day-nav button.done-btn{
  flex:1 1 45%; text-align:center; font:inherit; font-weight:600;
  border:1px solid var(--border); border-radius:10px; padding:13px 10px;
  background:var(--card); color:var(--accent); min-height:44px; cursor:pointer;
}
.day-nav button.done-btn:hover{border-color:var(--good); color:var(--good);}
.day-nav button.done-btn.is-done{background:var(--good); color:#fff; border-color:var(--good);}
.day-nav button.done-btn.is-done:hover{opacity:.9; color:#fff;}
.day-nav button.done-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.day-nav button.done-btn[disabled]{opacity:.65; cursor:default;}

/* ---- narration player ---- */
#scrub{
  flex:1 1 120px; min-width:90px; max-width:240px; height:34px;
  accent-color:var(--accent); cursor:pointer; background:transparent;
}
#scrub:disabled{opacity:.45; cursor:default;}
#timeLabel{
  font-variant-numeric:tabular-nums; color:var(--muted);
  font-size:calc(.78rem * var(--fs)); white-space:nowrap; padding:0 2px;
}
#speechControls{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.audio-note{
  flex-basis:100%; color:var(--accent-warm);
  font-size:calc(.78rem * var(--fs)); padding:2px 2px 0;
}

/* ---- course diagrams ---- */
figure.course-fig{
  margin:22px 0; padding:16px 14px 10px;
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
}
figure.course-fig svg{width:100%; height:auto; display:block;}
figure.course-fig figcaption{
  margin-top:10px; padding-top:9px; border-top:1px solid var(--border);
  color:var(--muted); font-size:calc(.85rem * var(--fs)); line-height:1.45;
}

/* ---- exam pages ---- */
.timer{font-variant-numeric:tabular-nums; font-weight:700; color:var(--accent);
  padding:0 8px; font-size:calc(.95rem * var(--fs));}
.timer.low{color:var(--bad);}
ul.choices-pick{list-style:none; padding:0; margin:0;}
ul.choices-pick li{margin:7px 0;}
ul.choices-pick label{display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  padding:11px 13px; border:1px solid var(--border); border-radius:10px;
  background:var(--card); min-height:44px;}
ul.choices-pick label:hover{border-color:var(--accent);}
ul.choices-pick input{margin-top:.3em; width:20px; height:20px; accent-color:var(--accent); flex:none;}
.submit-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:26px 0 8px;}
.answered-count{color:var(--muted); font-size:calc(.88rem * var(--fs));}
.q.is-correct{border-left:4px solid var(--good);}
.q.is-wrong{border-left:4px solid var(--bad);}
.score-line{font-size:calc(1.1rem * var(--fs));}
.verdict-pass{color:var(--good); font-weight:700;}
.verdict-fail{color:var(--bad); font-weight:700;}
.timeout-note{color:var(--bad); font-weight:600;}
td.weak{color:var(--bad); font-weight:700;}
.hard-rule{margin:16px 0; padding:14px 16px; background:var(--card);
  border:1px solid var(--bad); border-left:5px solid var(--bad); border-radius:0 10px 10px 0;}

/* ---- NSPIRE urgent banner ---- */
.urgent{background:var(--card); border:1px solid var(--accent-warm);
  border-left:6px solid var(--accent-warm); border-radius:0 12px 12px 0;
  padding:18px 20px; margin:20px 0 30px; box-shadow:var(--shadow);}
.urgent.past{border-color:var(--muted); border-left-color:var(--muted); opacity:.8;}
.urgent-kicker{margin:0 0 4px; color:var(--accent-warm); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; font-size:calc(.76rem * var(--fs));}
.urgent h2{margin:0 0 10px; border:0; padding:0;}
.verified{background:var(--tint); border-left:4px solid var(--good);
  border-radius:0 10px 10px 0; padding:13px 16px; margin:16px 0;}
.verified p{margin:0 0 9px;}
.verified p:last-child{margin-bottom:0;}
blockquote{margin:14px 0; padding:10px 16px; border-left:4px solid var(--border);
  color:var(--muted);}

/* ---- course hub: tile grid ---- */
.wrap-wide{max-width:1400px;}

.progress-box{background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:16px; margin:18px 0 26px; box-shadow:var(--shadow);}
.progress-head{display:flex; justify-content:space-between; align-items:baseline;
  gap:14px; flex-wrap:wrap; margin-bottom:9px;}
.progress-label{margin:0; color:var(--ink); font-weight:600; font-size:calc(.95rem * var(--fs));}
.progress-started{margin:0; color:var(--muted); font-size:calc(.85rem * var(--fs));}
.progress-track{height:10px; background:var(--tint); border-radius:999px; overflow:hidden;}
.progress-fill{height:100%; width:0; background:var(--good); transition:width .3s;}
.progress-box .reveal-btn{margin-top:13px;}

section.mod{margin:30px 0;}
section.mod h2{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap;}
.wt{font-size:calc(.78rem * var(--fs)); font-weight:600; color:var(--accent-warm);
  text-transform:uppercase; letter-spacing:.03em;}

/* auto-fit + minmax: 4 across on a wide monitor down to 1 on a phone,
   with no breakpoints to maintain. */
ul.tiles{
  display:grid; gap:16px; list-style:none; padding:0; margin:0;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  align-items:stretch;                 /* equal heights within a row */
}
li.tile{
  position:relative; display:flex; flex-direction:column; gap:6px;
  min-height:0; aspect-ratio:1 / 1;
  padding:18px 16px 14px;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow);
  overflow:hidden;
}
@supports not (aspect-ratio: 1 / 1){ li.tile{min-height:240px;} }

li.tile.is-exam{
  border-color:var(--accent-warm); border-top:5px solid var(--accent-warm);
  background:linear-gradient(to bottom, var(--tint), var(--card) 38%);
}

.tile-num{
  margin:0; font-size:calc(1.5rem * var(--fs)); line-height:1.1;
  font-weight:800; color:var(--ink); letter-spacing:-.01em;
}
li.tile.is-exam .tile-num{font-size:calc(1.12rem * var(--fs)); color:var(--accent-warm);}
.tile-title{
  margin:0; font-size:calc(.95rem * var(--fs)); font-weight:600; line-height:1.35;
  overflow:hidden;
}
.tile-title a{color:var(--accent); text-decoration:none;}
.tile-title a:hover{text-decoration:underline;}
.tile-title a:focus-visible{outline:3px solid var(--accent-warm); outline-offset:3px; border-radius:4px;}
/* the whole tile is clickable for convenience, but the TITLE is the real link */
.tile-title a::after{content:""; position:absolute; inset:0;}
.tile-meta{margin:auto 0 0; color:var(--muted); font-size:calc(.78rem * var(--fs));}
.tile-foot{
  margin:6px 0 0; padding-top:7px; border-top:1px solid var(--border);
  color:var(--muted); font-size:calc(.76rem * var(--fs)); min-height:1.3em;
}
.tile-foot:empty{border-top:0; padding-top:0;}

/* completed: subdued background plus a real checkmark, not just a date */
li.tile.is-done{background:var(--tint); border-color:var(--good);}
li.tile.is-done.is-exam{background:var(--tint);}
li.tile.is-done .tile-num{color:var(--muted);}
.tile-check{position:absolute; top:12px; right:13px; width:22px; height:22px;
  border-radius:50%; display:none;}
li.tile.is-done .tile-check{display:block; background:var(--good);}
li.tile.is-done .tile-check::after{
  content:""; position:absolute; left:7px; top:3px; width:6px; height:12px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
li.tile.is-done .tile-foot{color:var(--good); font-weight:600;}

/* ================================================================
   Exam-day simulation (exam-day.html)
   A four-hour sitting on an iPad, so everything here is sized for a
   finger and for tired eyes: 48px minimum targets, a timer you can
   read across a desk, and no hover-only or drag-only affordances.
   ================================================================ */

.sim-bar{
  position:sticky; top:0; z-index:30; background:var(--card);
  border-bottom:2px solid var(--border); box-shadow:var(--shadow);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:10px 14px;
}
.sim-bar .spacer{flex:1 1 auto;}
.sim-count{
  font-weight:700; font-variant-numeric:tabular-nums;
  font-size:calc(1rem * var(--fs)); color:var(--ink); white-space:nowrap;
}
.sim-count .of{color:var(--muted); font-weight:600;}

/* The timer is the one thing that must never be missed. Big, bold,
   tabular, in a bordered pill that changes colour at 30 and 5 minutes. */
.sim-timer{
  font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:.01em;
  font-size:calc(1.55rem * var(--fs)); line-height:1;
  padding:9px 16px; border-radius:10px; white-space:nowrap;
  color:#fff; background:var(--accent); border:2px solid var(--accent);
}
.sim-timer.warn{background:var(--accent-warm); border-color:var(--accent-warm);}
.sim-timer.urgent{background:var(--bad); border-color:var(--bad);}
.sim-timer-label{
  display:block; font-size:calc(.6rem * var(--fs)); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; opacity:.85;
}

.sim-btn{
  font:inherit; font-weight:600; font-size:calc(.92rem * var(--fs));
  background:var(--card); color:var(--accent);
  border:2px solid var(--border); border-radius:10px;
  padding:11px 16px; min-height:48px; min-width:48px; cursor:pointer;
}
.sim-btn:hover{border-color:var(--accent);}
.sim-btn[disabled]{opacity:.4; cursor:default;}
.sim-btn.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.sim-btn.danger{color:var(--bad); border-color:var(--bad);}
.sim-btn[aria-pressed="true"]{background:var(--accent-warm); color:#fff; border-color:var(--accent-warm);}

/* One visible focus treatment everywhere, keyboard only. */
.sim-btn:focus-visible,
.review-cell:focus-visible,
.sim-choices label:focus-within,
#qCard:focus-visible{
  outline:3px solid var(--accent-warm); outline-offset:3px; border-radius:10px;
}

/* ---- the question card ---- */
#qCard{outline:none;}
.q-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:20px 20px 18px; margin:18px 0; box-shadow:var(--shadow);
}
.q-card .q-kicker{
  margin:0 0 10px; color:var(--muted); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:calc(.72rem * var(--fs));
}
.q-card .stem{font-weight:600; font-size:calc(1.08rem * var(--fs)); margin:0 0 16px;}

ul.sim-choices{list-style:none; padding:0; margin:0;}
ul.sim-choices li{margin:10px 0;}
ul.sim-choices label{
  display:flex; gap:14px; align-items:flex-start; cursor:pointer;
  padding:15px 16px; border:2px solid var(--border); border-radius:12px;
  background:var(--card); min-height:56px;
}
ul.sim-choices label:hover{border-color:var(--accent);}
ul.sim-choices input{position:absolute; opacity:0; width:1px; height:1px;}
ul.sim-choices .key{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; font-weight:800;
  background:var(--tint); color:var(--ink); border:1px solid var(--border);
}
ul.sim-choices input:checked + .key{background:var(--accent); color:#fff; border-color:var(--accent);}
ul.sim-choices li.picked label{border-color:var(--accent); background:var(--tint);}

.sim-nav{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:22px 0 10px;}
.sim-nav .grow{flex:1 1 auto;}
.sim-hint{
  color:var(--muted); font-size:calc(.8rem * var(--fs)); margin:14px 0 0; line-height:1.5;
}

/* ---- review panel ---- */
.review-head{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;}
.review-legend{display:flex; gap:16px; flex-wrap:wrap; margin:12px 0 16px; padding:0; list-style:none;}
.review-legend li{display:flex; gap:7px; align-items:center;
  color:var(--muted); font-size:calc(.82rem * var(--fs));}
.swatch{width:18px; height:18px; border-radius:5px; border:2px solid var(--border); flex:none;}
.swatch.answered{background:var(--good); border-color:var(--good);}
.swatch.flagged{background:var(--accent-warm); border-color:var(--accent-warm);}

.review-grid{
  display:grid; gap:8px; list-style:none; padding:0; margin:0;
  grid-template-columns:repeat(auto-fill, minmax(58px, 1fr));
}
.review-cell{
  font:inherit; font-weight:700; font-variant-numeric:tabular-nums;
  min-height:52px; width:100%; cursor:pointer;
  border:2px solid var(--border); border-radius:10px;
  background:var(--card); color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:3px;
}
.review-cell.is-answered{background:var(--good); border-color:var(--good); color:#fff;}
.review-cell.is-flagged{border-color:var(--accent-warm); border-width:3px; color:var(--accent-warm);}
.review-cell.is-flagged.is-answered{color:#fff;}
.review-cell.is-flagged::after{content:"\25B2"; font-size:.6em; line-height:1; color:var(--accent-warm);}
.review-cell.is-flagged.is-answered::after{color:#fff;}
.review-cell.is-current{box-shadow:0 0 0 3px var(--accent);}

/* ---- start / resume screens ---- */
.sim-rules{margin:0 0 16px; padding-left:1.25em;}
.sim-rules li{margin:7px 0;}
.sim-callout{
  background:var(--card); border:1px solid var(--border);
  border-left:5px solid var(--bad); border-radius:0 12px 12px 0;
  padding:14px 18px; margin:18px 0; box-shadow:var(--shadow);
}
.sim-callout.ok{border-left-color:var(--good);}
.sim-callout p:last-child{margin-bottom:0;}

/* ---- results ---- */
.no-explain{color:var(--muted);}
.rubric-rule{
  margin:10px 0; padding:11px 14px; background:var(--tint);
  border-radius:8px; font-size:calc(.93rem * var(--fs));
}
.rubric-rule.hit{background:var(--card); border:1px solid var(--accent); font-weight:600;}
.sim-review-q{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin:12px 0; box-shadow:var(--shadow);
}
.sim-review-q.is-correct{border-left:5px solid var(--good);}
.sim-review-q.is-wrong{border-left:5px solid var(--bad);}
.sim-review-q .stem{font-weight:600; margin:0 0 9px;}
.sim-review-q ol{margin:0 0 10px; padding-left:1.5em;}
.sim-review-q li.pick{font-weight:700;}
.sim-review-q li.key{color:var(--good); font-weight:700;}
.sim-review-q li.pick.wrong{color:var(--bad);}
.sim-review-q .tag{
  display:inline-block; margin:0 0 8px; padding:2px 8px; border-radius:6px;
  background:var(--tint); color:var(--muted); font-size:calc(.72rem * var(--fs));
  font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}

@media (max-width: 420px){
  .sim-timer{font-size:calc(1.25rem * var(--fs)); padding:8px 12px;}
  .review-grid{grid-template-columns:repeat(auto-fill, minmax(50px, 1fr));}
}

/* Nothing here relies on motion, but honour the preference anyway. */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important;}
}

/* Off-screen but still announced. Used for the timer milestone announcements,
   which must reach a screen reader without the timer itself being a live
   region that reads out every single second for four hours. */
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Exam day has its own sticky bar carrying the timer. Two sticky bars both
   pinned to top:0 would stack and the lower one would cover the upper, so the
   reader bar scrolls away on this page and the timer is the only thing pinned. */
body[data-exam="exam-day"] .reader-bar{position:static;}

/* =========================================================================
   Course sidebar, reading column and "On this page" rail
   -------------------------------------------------------------------------
   The reading measure (--measure) is deliberately unchanged. The complaint
   this solves is a narrow column stranded in a wide empty viewport, and the
   fix is to USE the space either side, not to stretch the line length: past
   roughly 75 characters long-form prose gets measurably harder to track
   across 29 days of reading.

   Grid, not float: [sidebar] [reading column] [rail]. The reading column is
   left-aligned against the sidebar rather than centred in the viewport, and
   keeps its own max-width.
   ========================================================================= */
:root{
  --nav-w:17.5rem;             /* sidebar */
  --rail-w:13rem;              /* "on this page" */
  --nav-bg:var(--card);
}

.layout{
  display:grid;
  grid-template-columns:var(--nav-w) minmax(0,1fr);
  align-items:start;
  justify-content:start;
  gap:0;
}
/* Very wide screens earn the third column. The reading column is capped at its
   measure here rather than left as 1fr, so the rail sits just past the prose
   instead of being flung to the far edge with a dead gap between them. Width
   beyond that stays empty margin on the right, which is what left-aligning
   against the sidebar means. */
@media (min-width:1400px){
  /* .has-rail only: the hub has no rail element, and an unconditional third
     column would leave it an empty track and squeeze the tile grid. */
  .layout.has-rail{
    grid-template-columns:var(--nav-w) minmax(0,1fr) var(--rail-w);
  }
}

/* The reading column: left-aligned against the sidebar, measure preserved. */
.layout .wrap{max-width:var(--measure); width:100%; margin:0 auto; padding:0 32px;}
.layout .wrap-wide{max-width:1400px;}

/* ---- sidebar ---- */
.ccm-nav{
  position:sticky; top:0; align-self:start;
  height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--nav-bg); border-right:1px solid var(--border);
  padding:14px 0 40px; z-index:30;
}
.nv-head{padding:0 16px 12px; border-bottom:1px solid var(--border); margin-bottom:10px;}
.nv-brand{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--ink); font-weight:700; font-size:calc(.95rem * var(--fs));
}
.nv-brand img{border-radius:6px; flex:0 0 auto;}
.nv-course{
  display:block; margin-top:7px; text-decoration:none;
  color:var(--accent); font-weight:600; font-size:calc(.83rem * var(--fs));
}
.nv-course:hover{text-decoration:underline;}

.nv-list{list-style:none; margin:0; padding:0;}

/* Module row is a real <button>: keyboard-operable, announces expanded state. */
.nv-mod-btn{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:0; border-radius:0;
  font:inherit; font-size:calc(.85rem * var(--fs)); font-weight:600;
  color:var(--ink); text-align:left; cursor:pointer;
  padding:9px 14px; min-height:42px;
}
.nv-mod-btn:hover{background:var(--tint);}
.nv-caret{
  flex:0 0 auto; width:0; height:0; margin-left:2px;
  border-left:5px solid currentColor; border-top:4px solid transparent;
  border-bottom:4px solid transparent; opacity:.65;
  transition:transform .12s ease;
}
.nv-mod-btn[aria-expanded="true"] .nv-caret{transform:rotate(90deg);}
.nv-mod-name{flex:1 1 auto; min-width:0;}
/* The weight is the reason the sidebar exists - it stays legible, never
   truncated, and is not colour-only information. */
.nv-weight{
  flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:700;
  font-size:calc(.75rem * var(--fs)); color:var(--accent-warm);
  background:var(--tint); border-radius:999px; padding:2px 7px;
}

.nv-days{list-style:none; margin:0 0 4px; padding:0;}
.nv-day a, .nv-exam a{
  display:flex; align-items:baseline; gap:8px;
  text-decoration:none; color:var(--muted);
  font-size:calc(.81rem * var(--fs)); line-height:1.4;
  padding:7px 14px 7px 30px; min-height:38px;
}
.nv-day a:hover, .nv-exam a:hover{background:var(--tint); color:var(--ink);}
.nv-num{flex:0 0 3.2rem; font-variant-numeric:tabular-nums; color:var(--muted);}
.nv-title{flex:1 1 auto; min-width:0;}

/* Current page: a left bar plus weight change, so it does not rely on colour. */
.nv-day.is-current > a, .nv-exam.is-current > a{
  color:var(--ink); font-weight:700; background:var(--tint);
  box-shadow:inset 3px 0 0 var(--accent);
}

/* Completed: same green check as the hub tiles. */
.nv-check{flex:0 0 auto; width:1em; text-align:right;}
.nv-day.is-done .nv-check::after, .nv-exam.is-done .nv-check::after{
  content:"\2713"; color:var(--good); font-weight:700;
}

.nv-group{
  padding:16px 14px 5px; margin-top:6px;
  font-size:calc(.7rem * var(--fs)); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); border-top:1px solid var(--border);
}
.nv-exam a{padding-left:14px;}

/* Visible focus everywhere in the nav, matching the exam pages. */
.ccm-nav a:focus-visible, .ccm-nav button:focus-visible,
.ccm-rail a:focus-visible, #navToggle:focus-visible{
  outline:3px solid var(--accent); outline-offset:-3px; border-radius:4px;
}

/* ---- collapse ---- */
#navToggle{flex:0 0 auto;}
#navToggle .nv-bars{display:block; width:16px; height:2px; background:currentColor;
  box-shadow:0 5px 0 currentColor, 0 -5px 0 currentColor;}
body.nav-collapsed .layout{grid-template-columns:minmax(0,1fr);}
@media (min-width:1400px){
  body.nav-collapsed .layout.has-rail{
    grid-template-columns:minmax(0,1fr) var(--rail-w);
  }
}
body.nav-collapsed .ccm-nav{display:none;}

/* ---- "on this page" rail ---- */
.ccm-rail{
  position:sticky; top:64px; align-self:start;
  max-height:calc(100vh - 88px); overflow-y:auto;
  padding:26px 20px 20px 4px;
}
.rail-head{
  margin:0 0 8px; font-size:calc(.7rem * var(--fs)); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.rail-list{list-style:none; margin:0; padding:0;}
.rail-list a{
  display:block; padding:5px 10px; text-decoration:none;
  color:var(--muted); font-size:calc(.79rem * var(--fs)); line-height:1.35;
  border-left:2px solid var(--border);
}
.rail-list a:hover{color:var(--ink);}
.rail-list a[aria-current="true"]{color:var(--accent); font-weight:600; border-left-color:var(--accent);}
/* Below 1400px there is no room for a third column. */
@media (max-width:1399.98px){ .ccm-rail{display:none;} }

/* ---- audio player, relocated into the reading column ---- */
.audio-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px; margin:18px 0 4px; box-shadow:var(--shadow);
}
.audio-card button, .audio-card select{
  font:inherit; font-size:calc(.85rem * var(--fs));
  background:var(--card); color:var(--ink);
  border:1px solid var(--border); border-radius:8px;
  padding:7px 11px; min-height:40px; cursor:pointer;
}
.audio-card button:hover{border-color:var(--accent);}
.audio-card button[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:var(--accent);}
.audio-card button:focus-visible, .audio-card select:focus-visible,
.audio-card input:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.audio-card #scrub{flex:1 1 150px; min-width:120px;}
.audio-card #timeLabel{font-variant-numeric:tabular-nums; color:var(--muted);
  font-size:calc(.78rem * var(--fs));}
.audio-card .audio-note{flex:1 1 100%; color:var(--muted); font-size:calc(.75rem * var(--fs));}

/* ---- narrow screens ---- */
@media (max-width:999.98px){
  /* Sidebar overlays the text instead of squeezing it; it starts collapsed
     here, and ccm-nav.js also closes it on Escape. */
  .layout{grid-template-columns:minmax(0,1fr);}
  .ccm-nav{
    position:fixed; top:0; left:0; bottom:0; width:min(84vw, var(--nav-w));
    height:100vh; height:100dvh; box-shadow:0 0 0 100vmax rgba(16,32,54,.45);
  }
  /* The sidebar overlays rather than sitting in flow here, so there is nothing
     to align against - the measure re-centres instead of hugging a left edge
     with dead space beside it. Below ~600px the measure fills the screen and
     this is a no-op. */
  .layout .wrap{margin:0 auto; padding:0 18px;}
}

/* ---- skip link ----
   The sidebar puts ~40 links ahead of the prose in tab order, so keyboard and
   switch users get a way past it. Visible only when focused. */
.skip-link{
  position:absolute; left:8px; top:-60px; z-index:60;
  background:var(--accent); color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:0 0 8px 8px; font-weight:600;
  font-size:calc(.85rem * var(--fs));
}
.skip-link:focus{top:0;}
#readable:focus, #hubMain:focus{outline:none;}

/* =========================================================================
   Reading progress bar and scroll-reveal
   -------------------------------------------------------------------------
   Course-agnostic, opt-in via markup (course-enhance.js is a no-op on a page
   without these elements/classes). First used on the Lean Six Sigma pilot
   redesign; safe to add to any course page.
   ========================================================================= */
#readProgress{
  position:sticky; top:0; left:0; z-index:21; height:3px; width:0;
  background:var(--accent-warm); transition:width .1s linear;
}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
.reveal.is-shown{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---- rail sub-items (h3 entries, indented under their h2) ---- */
.rail-list li.sub a{padding-left:22px; font-size:calc(.75rem * var(--fs));}

/* ---- "why this matters" / key-point callout, used in the rail or inline ---- */
.why-box{
  background:var(--tint); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin:20px 0; box-shadow:var(--shadow);
}
.why-box p{margin:0;}
.why-box .why-kicker{
  margin:0 0 6px; color:var(--accent); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:calc(.72rem * var(--fs));
}

/* ---- lesson section cards ----
   Added by /training/lesson-enhance.js, which wraps each heading (and the
   paragraphs under it) from a lesson's reading section in one of these,
   so the reading portion looks like a sequence of distinct cards rather
   than one unbroken scroll of text. Deliberately additive: nothing here
   changes how any element looks unless something actually applies the
   class, so a page that doesn't load lesson-enhance.js is unaffected.
   Reuses the existing .reveal / .reveal.is-shown fade-and-rise transition
   already defined above, rather than a second copy of the same animation. */
.lesson-card{
  background:var(--card); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:12px; padding:18px 22px 20px; margin:0 0 18px;
}
.lesson-card > *:first-child{margin-top:0;}
.lesson-card > *:last-child{margin-bottom:0;}
.lesson-card h2, .lesson-card h3{margin-top:0;}

/* ---- inline illustration / diagram figure ----
   Same pattern used on the ICC B1/B2 pages: an inline SVG with a caption,
   for lesson content where a picture genuinely helps more than another
   paragraph would. Not every lesson needs one. */
.diagram{
  margin:16px 0; padding:16px; background:var(--tint);
  border:1px solid var(--border); border-radius:12px; text-align:center;
}
.diagram svg{width:100%; max-width:420px; height:auto; display:block; margin:0 auto;}
.diagram figcaption{
  margin-top:10px; font-size:calc(.85rem * var(--fs)); color:var(--muted);
}