/* ============================================================ 2026-27 SYSTEM */
:root{
  --gold:#C9A962; --gold-br:#D4AF37; --gold-lt:#E8D5A3;
  --ink:#0A0A0A; --surf:#121212; --surf2:#181818; --surf3:#1E1E1E;
  --line:rgba(201,169,98,.16); --line2:rgba(201,169,98,.30);
  --tx:#EDEDED; --tx2:#B9B9B9; --burg:#800020;
  --ok:#6FBF73; --warn:#FFB020; --bad:#FF6B6B;

  /* type scale, 1.25 minor third, floored at the DOE 16px minimum */
  --t-xs:16px; --t-sm:16px; --t-base:17px; --t-md:19px;
  --t-lg:23px; --t-xl:29px; --t-2xl:36px; --t-3xl:45px;

  /* 8px spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r1:6px; --r2:10px; --r3:16px; --r4:22px;
  --wrap:1180px; --measure:68ch;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  /* The masthead is sized around the CREST, not the other way round. He has said
     more than once that his logo keeps coming back tiny at the top left: 64px on a
     desktop, 52px on a phone, and never smaller. The bar grows to hold it. */
  --mast:84px; --crest:64px;
}
@media(max-width:680px){:root{--mast:68px;--crest:52px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--tx);
  font-family:var(--body);font-size:var(--t-base);line-height:1.6;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--ink)}

/* every focusable thing, per WCAG 2.2 SC 2.4.13 */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold-br);outline-offset:2px;border-radius:var(--r1)}

/* SC 2.4.1 */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gold-br);
  color:var(--ink);font-weight:700;font-size:16px;padding:var(--s3) var(--s5);
  border-radius:0 0 var(--r2) 0;text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center}
.skip-link:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
@media(max-width:680px){.wrap{padding:0 var(--s4)}}

/* ---------------------------------------------------------------- masthead */
.mast{position:sticky;top:0;z-index:200;background:rgba(10,10,10,.94);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.mast-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5);height:var(--mast);
  display:flex;align-items:center;gap:var(--s4)}
@media(max-width:680px){.mast-in{padding:0 var(--s4);gap:var(--s3)}}
.mark{display:flex;align-items:center;gap:var(--s3);text-decoration:none;
  color:var(--tx);flex:1 1 auto;min-width:0;min-height:44px}
.mark img{height:var(--crest);width:auto;flex:0 0 auto;
  filter:drop-shadow(0 3px 14px rgba(201,169,98,.32))}
.mark b{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mark span{display:block;font-family:var(--body);font-size:16px;font-weight:400;
  color:var(--tx2);letter-spacing:.02em}
@media(max-width:430px){.mark span{display:none}
  /* the crest keeps its size; the wordmark wraps to two short lines instead of
     being cut off with an ellipsis */
  .mark b{font-size:18px;white-space:normal;line-height:1.08;overflow:visible;
    text-overflow:clip}}
.mast nav{display:flex;align-items:center;gap:var(--s1);flex:0 0 auto}
.mast nav a,.mast nav button{color:var(--tx2);text-decoration:none;
  font-family:var(--body);font-size:16px;font-weight:500;padding:var(--s2) var(--s3);
  border-radius:var(--r1);background:none;border:0;cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;white-space:nowrap}
.mast nav a:hover,.mast nav button:hover{color:var(--gold);background:rgba(201,169,98,.09)}
.mast nav a[aria-current]{color:var(--gold)}
.pill{border:1px solid var(--line2);border-radius:999px;padding:var(--s2) var(--s4) !important;
  font-weight:700 !important;min-width:44px;justify-content:center}
.pill.on{background:var(--gold);color:var(--ink) !important;border-color:var(--gold)}
.burger{display:none !important}
@media(max-width:900px){
  .mast nav .hide-sm{display:none !important}
  .burger{display:inline-flex !important;font-size:24px;min-width:44px;
    justify-content:center;color:var(--gold) !important}
}

/* the phone sheet */
.sheet{position:fixed;inset:var(--mast) 0 0 0;z-index:190;background:rgba(10,10,10,.985);
  padding:var(--s4) var(--s4) var(--s8);overflow-y:auto;display:none}
.sheet.open{display:block}
.sheet a,.sheet button{display:flex;align-items:center;width:100%;min-height:52px;
  padding:var(--s3) var(--s2);color:var(--tx);text-decoration:none;font-size:17px;
  font-weight:500;border:0;border-bottom:1px solid rgba(201,169,98,.10);
  background:none;font-family:inherit;text-align:left;cursor:pointer}
.sheet a:hover{color:var(--gold)}
.sheet h4{font-family:var(--body);font-size:16px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--tx2);margin:var(--s5) 0 var(--s2)}

/* ---------------------------------------------------------------- headers */
.chead{border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(201,169,98,.05),transparent 70%)}
.chead .wrap{padding-top:var(--s7);padding-bottom:var(--s6)}
/* ---------------------------------------------------------------- the crest
   PLACEMENT IS A SYSTEM, NOT A SIZE. Three rules, all measured:
   1. ONE crest per screen. The homepage hero carries it large and centered, the way
      his site has always opened; while that hero crest is on screen the bar shows
      the wordmark only, and the bar's mark docks in - scale and fade, spring
      easing - the moment the hero crest scrolls out. Pages with no hero crest
      (every lesson, About, Contact) show the bar's mark from the start.
   2. The crest is ALIVE: a settle on entrance, a sheen that sweeps inside the shape
      (the PNG is its own mask), a slow internal light, and a six-second breath.
      All transform/opacity, all behind html.js, all off under reduced motion.
      Nothing about visibility depends on any of it: no JS, no motion, crest still
      there.
   3. The canonical PNG only. Recoloured and resized, never redrawn. */
.chead.hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:var(--s6)}
.chead.hero .lede{margin-left:auto;margin-right:auto}
.chead.hero .statrow{justify-content:center}
.chead.hero .mark-live{margin:0 0 var(--s5)}
:root{--hero-crest:184px}
@media(max-width:760px){:root{--hero-crest:132px}}

.mark-live{position:relative;display:inline-block;line-height:0}
.mark-live img{display:block;height:var(--hero-crest);width:auto;position:relative;z-index:1;
  filter:drop-shadow(0 10px 30px rgba(201,169,98,.28))}
.mark-live .energy,.mark-live .sheen{position:absolute;inset:0;pointer-events:none;
  overflow:hidden;z-index:2;display:none;
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
html.js .mark-live .energy,html.js .mark-live .sheen{display:block}
.mark-live .energy::after{content:'';position:absolute;left:-25%;top:-25%;width:150%;
  height:150%;mix-blend-mode:screen;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(255,236,190,.6) 72%,transparent 84%);
  animation:crestEnergy 16s linear infinite}
.mark-live .sheen::after{content:'';position:absolute;inset:-10% -70%;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-80%);animation:crestSheen 9s var(--ease) 1.6s infinite}
html.js .mark-live{animation:crestBreathe 6s ease-in-out 1.8s infinite}
html.js .mark-live img{animation:crestSettle 1.1s cubic-bezier(.34,1.56,.64,1) both}
@keyframes crestSettle{from{opacity:0;transform:translateY(16px) scale(.88) rotate(-3deg)}
  to{opacity:1;transform:none}}
@keyframes crestBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes crestSheen{0%{transform:translateX(-80%)}24%{transform:translateX(80%)}
  100%{transform:translateX(80%)}}
@keyframes crestEnergy{to{transform:rotate(360deg)}}

/* the bar's mark: docked away while a hero crest is on screen, slides in after */
.mark img{max-width:160px;transition:max-width .45s var(--ease),opacity .35s var(--ease),
  transform .55s cubic-bezier(.34,1.56,.64,1),margin .45s var(--ease)}
html.js .mast.hero-on .mark img{max-width:0;opacity:0;transform:scale(.55);
  margin-right:calc(-1 * var(--s3))}

@media(prefers-reduced-motion:reduce){
  html.js .mark-live,html.js .mark-live img,.mark-live .energy::after,
  .mark-live .sheen::after{animation:none}
  .mark-live .energy,.mark-live .sheen{display:none!important}
  .mark img{transition:none}
}
.eyebrow{font-size:16px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 var(--s3)}
h1,.h1{font-family:var(--display);font-weight:700;line-height:1.05;
  font-size:clamp(34px,5.4vw,var(--t-3xl));margin:0 0 var(--s3);letter-spacing:-.01em}
h2,.h2{font-family:var(--display);font-weight:600;line-height:1.15;
  font-size:clamp(26px,3.4vw,var(--t-2xl));margin:0 0 var(--s3)}
h3,.h3{font-family:var(--display);font-weight:600;line-height:1.2;
  font-size:var(--t-lg);margin:0 0 var(--s2)}
h4{font-family:var(--body);font-size:16px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--gold);margin:0 0 var(--s2)}
p{margin:0 0 var(--s4)}
.lede{font-size:var(--t-md);color:var(--tx2);max-width:var(--measure);
  line-height:1.55;margin:0 0 var(--s5)}
a{color:var(--gold)}

/* a row of facts, replacing the old centered tagline stack */
.statrow{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:var(--s5) 0 0;
  padding:0;list-style:none}
.statrow li{display:flex;flex-direction:column;gap:2px}
.statrow b{font-family:var(--display);font-size:var(--t-xl);line-height:1;
  color:var(--gold);font-weight:700}
.statrow span{font-size:16px;color:var(--tx2);letter-spacing:.05em;
  text-transform:uppercase}

/* ---------------------------------------------------------------- panels */
.panel{background:var(--surf);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s5)}
.panel.raised{background:var(--surf2)}
/* chips: a state, a part of a lesson, a small fact. One line, never a button. */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:var(--s1);min-height:32px;
  padding:var(--s1) var(--s3);border-radius:999px;font-size:16px;line-height:1.2;
  letter-spacing:.03em;color:var(--tx2);background:rgba(201,169,98,.07);
  border:1px solid var(--line)}
.chip.gold{color:var(--gold);background:rgba(201,169,98,.12);border-color:var(--line2);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em}
section{padding:var(--s7) 0}
@media(max-width:680px){section{padding:var(--s6) 0}}
.sechead{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);margin:0 0 var(--s5);flex-wrap:wrap}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --- TODAY: the reason he opens the page --- */
.today{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;
  background:linear-gradient(120deg,rgba(201,169,98,.13),rgba(128,0,32,.16));
  border:1px solid var(--line2);border-radius:var(--r4);padding:var(--s6)}
@media(max-width:760px){.today{grid-template-columns:1fr;padding:var(--s5)}}
.today .when{font-size:16px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin:0 0 var(--s2)}
.today h2{margin:0 0 var(--s2)}
.today p{color:var(--tx2);margin:0;max-width:60ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s6);border-radius:999px;font-weight:700;
  font-size:17px;text-decoration:none;background:var(--gold);color:var(--ink);
  border:1px solid var(--gold);cursor:pointer;font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--gold-br);border-color:var(--gold-br)}
.btn.ghost{background:none;color:var(--gold)}
.btn.ghost:hover{background:rgba(201,169,98,.12);color:var(--gold-br)}
@media(max-width:760px){.btn{width:100%}}

/* --- the unit rail --- */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:var(--s4);padding:0;margin:0;list-style:none}
.rail a{display:flex;flex-direction:column;gap:var(--s2);height:100%;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s5);text-decoration:none;color:var(--tx);transition:.2s var(--ease);
  min-height:44px}
.rail a:hover{border-color:var(--line2);background:var(--surf2);transform:translateY(-2px)}
.rail .un{font-family:var(--display);font-size:var(--t-2xl);line-height:1;
  color:var(--gold);font-weight:700}
/* the tile title is running text, so it is sans: the serif is reserved for headings,
   the wordmark and the numbers, which is exactly what the accessibility statement
   declares */
.rail .ut{font-family:var(--body);font-size:var(--t-md);font-weight:600;
  line-height:1.3}
.rail .um{font-size:16px;color:var(--tx2);margin-top:auto;padding-top:var(--s2)}

/* --- the lesson index: 163 rows, dense and scannable --- */
.unitblock{margin:0 0 var(--s7)}
.unitbar{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding:0 0 var(--s3);border-bottom:1px solid var(--line);margin:0 0 var(--s2)}
.unitbar .n{font-family:var(--display);font-size:var(--t-lg);color:var(--gold);
  font-weight:700}
.unitbar h3{margin:0;font-size:var(--t-lg)}
.unitbar .r{margin-left:auto;font-size:16px;color:var(--tx2);white-space:nowrap}
.idx{list-style:none;margin:0;padding:0}
.idx li{border-bottom:1px solid rgba(201,169,98,.08)}
.idx a{display:grid;grid-template-columns:52px 1fr auto;gap:var(--s4);
  align-items:center;padding:var(--s3) var(--s2);text-decoration:none;color:var(--tx);
  min-height:56px;border-radius:var(--r1);transition:.15s var(--ease)}
.idx a:hover{background:rgba(201,169,98,.07)}
.idx .n{font-family:var(--display);font-size:var(--t-md);font-weight:700;
  color:var(--gold);text-align:center;background:rgba(201,169,98,.09);
  border-radius:var(--r1);padding:var(--s2) 0;line-height:1}
.idx .t{font-size:17px;font-weight:500;line-height:1.35;min-width:0}
.idx .d{font-size:16px;color:var(--tx2);white-space:nowrap;text-align:right}
.idx li.today-row a{background:rgba(201,169,98,.14);
  box-shadow:inset 3px 0 0 var(--gold)}
.idx li.locked .n{background:rgba(201,169,98,.05);color:rgba(201,169,98,.55)}
.idx li.locked .t{color:var(--tx2)}
@media(max-width:560px){
  .idx a{grid-template-columns:46px 1fr;row-gap:2px;padding:var(--s3) var(--s2)}
  .idx .d{grid-column:2;text-align:left}
}

/* ---------------------------------------------------------------- article */
.article{max-width:var(--measure)}
.article h2{margin-top:var(--s7)}
.article h2:first-child{margin-top:0}
.article ul,.article ol{margin:0 0 var(--s4);padding-left:var(--s5)}
.article li{margin:0 0 var(--s2)}
.article .panel{margin:var(--s5) 0}
/* A link standing ALONE in a paragraph is not "in a sentence", so the SC 2.5.8 inline
   exception does not cover it and it must clear 24px on its own. Links inside prose
   are left inline on purpose: forcing a box on them breaks the reflow the exception
   exists to protect. */
.article p.solo > a{display:inline-flex;align-items:center;min-height:24px}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--s4);margin:var(--s5) 0}

/* ---------------------------------------------------------------- crumbs */
.crumbs{font-size:16px;color:var(--tx2);padding:var(--s3) 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs a{color:var(--gold);text-decoration:none;min-height:44px;
  display:inline-flex;align-items:center}
.crumbs a:hover{text-decoration:underline}
.crumbs i{color:rgba(201,169,98,.5);font-style:normal;margin:0 var(--s2)}
.crumbs span[aria-current]{color:var(--tx)}
@media(max-width:680px){.crumbs .crumb-mid{display:none}}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);margin-top:var(--s8);
  padding:var(--s7) 0 var(--s8);background:var(--surf)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:var(--s5)}}
.foot h4{margin-bottom:var(--s3)}
.foot a{display:block;color:var(--tx2);text-decoration:none;padding:var(--s2) 0;
  min-height:44px;display:flex;align-items:center;font-size:16px}
.foot a:hover{color:var(--gold)}
.foot .crest{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.foot .crest img{height:64px}
.foot .crest b{font-family:var(--display);font-size:var(--t-md)}
.foot p{font-size:16px;color:var(--tx2);margin:0 0 var(--s3);max-width:46ch}
.langnote{font-size:16px;color:var(--tx2);line-height:1.55;margin:var(--s5) 0 0;
  padding-top:var(--s4);border-top:1px solid var(--line);max-width:70ch}
.langnote.es-support{color:var(--gold-lt) !important}
.foot .fine{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:16px;color:var(--tx2)}

/* ---------------------------------------------------------------- Spanish */
.es-support{display:none;font-style:italic;color:var(--gold-lt) !important;
  letter-spacing:normal !important;text-transform:none !important;
  font-size:16px !important;line-height:1.55}
body.es-active .es-support{display:block}
.es-inline{display:none}
body.es-active .es-inline{display:inline}

/* ---------------------------------------------------------------- utility */
.nowrap{white-space:nowrap}
.muted{color:var(--tx2)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Spanish support. Hidden until the ES button is pressed, then shown under the
   English it translates - never replacing it, because the room is bilingual and the
   English is what is on the board. */
.es-support{display:none;font-style:italic;color:#E8D5A3 !important;
  opacity:1;line-height:1.5}
/* The Spanish must be at least as readable as the English it translates. The first
   versión inherited whatever colour its neighbour used - on the hero that was the
   dimmed grey meant for a caption - and the translated line came out darker than the
   original, for the readers who need it most. It sets its own colour now, and the
   uppercase tracked treatment of the line above is dropped because tracked caps in
   a second language are harder, not easier, to read. */
.es-support{letter-spacing:normal !important;text-transform:none !important;
  font-size:16px !important}
/* 16px, not 15: this rule follows design.CSS in every stylesheet and an !important
   at 15 was quietly beating the 16px floor on every Spanish line the moment ES was
   switched on - for exactly the readers who need it most. */
body.es-active .es-support{display:block}
.es-inline{display:none}
body.es-active .es-inline{display:inline}
body.es-active .en-only{display:none}
.es-toggle,.es-btn{cursor:pointer;font-family:inherit}
.es-toggle.active,.es-btn.active{background:var(--gold,#C9A962) !important;
  color:#1a1a1a !important;border-color:var(--gold,#C9A962) !important}

/* ============================================================ LESSON PAGE */
:root{--topbar-h:48px;--navbar-h:56px;
  --stage-top:calc(var(--mast) + 1px + var(--topbar-h))}

/* The running deck is a full-viewport player that autofits and must never scroll
   under a teacher's hands. */
body{overflow:hidden}
/* A LOCKED page must scroll. The rule above is right for the running deck and wrong
   for the locked page, which is a normal page a scholar reads on a phone and is
   taller than the screen. With the deck's rule inherited, a real wheel gesture moved
   it 0px and 454px of the card and the whole footer were unreachable. Height goes
   auto as well as overflow so a scrollbar can exist at all. */
body.is-locked{overflow-y:auto;overflow-x:hidden;height:auto;min-height:100%}
html:has(body.is-locked){height:auto}
/* Breadcrumbs and the footer belong to the LOCKED page. A running lesson is a
   full-viewport deck, and .stage is position:absolute at the same y the crumb bar
   occupies, so the deck painted straight over the trail. */
body:not(.is-locked) .crumbs{display:none}
body:not(.is-locked) .foot{display:none}
/* .nav and .lesson-jump set display explicitly, which outranks the user-agent rule
   behind the hidden attribute. */
[hidden]{display:none!important}

/* On a phone the masthead also has to hold the Lessons button, so the wordmark gives
   way and the crest carries the identity on its own; its alt text still says whose
   classroom it is. The lesson number and title sit in the bar directly beneath. */
@media(max-width:520px){.mast .mark b{display:none}}
.mast nav .lessons-btn{color:var(--gold);font-weight:700}

/* ---------- top bar: lesson number, live date, zoom, fullscreen ---------- */
.top-bar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--s2);
  padding:0 var(--s5);background:var(--surf);border-bottom:1px solid var(--line);
  position:relative;z-index:150}
.top-bar .brand-num{font-family:var(--display);font-size:var(--t-lg);font-weight:700;
  color:var(--gold);white-space:nowrap;line-height:1;margin-right:var(--s2)}
.top-bar .meta{font-size:16px;color:var(--tx2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.top-bar .spacer{flex:1}
.top-bar button{background:var(--surf2);color:var(--tx);border:1px solid var(--line2);
  border-radius:var(--r1);padding:0 var(--s3);font-size:17px;font-weight:700;
  font-family:inherit;cursor:pointer;min-height:44px;min-width:44px;line-height:1}
.top-bar button:hover{border-color:var(--gold);color:var(--gold)}
.top-bar button:active{transform:translateY(1px)}
#zoomLabel{font-size:16px;color:var(--tx2);min-width:46px;text-align:center;
  font-variant-numeric:tabular-nums}
@media(max-width:680px){
  .top-bar{padding:0 var(--s4)}
  .top-bar .meta{font-size:16px}
  /* Zoom is a SmartBoard control while a lesson is RUNNING - a phone pinches - but
     a locked page is a normal page a scholar reads, so the controls stay there. */
  body:not(.is-locked) .top-bar .zoomctl{display:none}
}

/* ---------- stage ---------- */
main.stage,.stage{position:absolute;top:var(--stage-top);bottom:var(--navbar-h);
  left:0;right:0;overflow:hidden}
.blk{position:absolute;inset:0;display:none;flex-direction:column;margin:0;
  padding:var(--s3) clamp(16px,4vw,52px);overflow:hidden}
.blk.on{display:flex}
.blk-head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;flex-shrink:0;
  padding-bottom:var(--s2);border-bottom:1px solid var(--line);margin-bottom:var(--s2)}
.blk-num{font-family:var(--display);font-size:clamp(30px,4vw,44px);font-weight:700;
  color:var(--gold-br);line-height:1}
.blk-name{font-size:clamp(22px,3.2vw,34px);font-weight:700;letter-spacing:.02em;
  line-height:1.1}
.blk-sub{font-size:16px;color:var(--tx2)}
.blk-sub.es{color:var(--gold-lt);font-style:italic;display:none}
body.es-active .blk-sub.es{display:block}
.es-t{display:none;color:var(--gold-lt);font-style:italic;font-weight:400;font-size:max(16px,.92em);line-height:1.35;margin-top:2px}
body.es-active .es-t{display:block}
body.es-active .es-steps{display:block;margin-top:6px;border-top:1px dashed var(--line2);padding-top:6px}
.es-steps{display:none}
.es-note{display:none} body.es-active .es-note{display:block}
details.teacher{margin-top:10px;border-top:1px dashed var(--line2);padding-top:6px;opacity:.8}
details.teacher summary{cursor:pointer;font:600 13px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:24px}
details.teacher summary::-webkit-details-marker{display:none}
details.teacher summary::before{content:'+';font-size:16px;color:var(--tx2)}
details.teacher[open] summary::before{content:'3'}
details.teacher .note{margin:6px 0 0;font-size:.9em}
.card.issue{border-left-color:var(--gold-br);background:rgba(212,175,55,.08)}
button.blk-time{background:transparent;border:1px solid transparent;border-radius:12px;padding:2px 10px;color:inherit;
  font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:flex-end;min-height:48px;line-height:1}
button.blk-time:hover,button.blk-time:focus-visible{border-color:var(--line2);background:rgba(201,169,98,.08);outline:none}
.blk-time .hint{font:600 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:2px}
.blk-time.running .hint{color:var(--tx2)}
/* a photo strip is a 2x2 grid of small thumbnails, every one 9vh, so four pictures
   take the height of two and the Do Now block still fits the board */
.figs.photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1)}
.figs.photos figure img,.figs.photos figure:first-child img{height:9vh;object-fit:cover;background:#111}
@media(max-width:900px){.figs.photos{grid-template-columns:repeat(4,1fr)}.figs.photos figure img{height:9vh}}
.nav .end-links{display:none;gap:8px;align-items:center;flex-wrap:nowrap}
body.deck-end .nav .btn-next{display:none}
.btn-link{white-space:nowrap}
@media(max-width:680px){.nav .end-links .btn-link.all{display:none}.btn-link .long{display:none}}
body.no-timer #btnStart{visibility:hidden}
body.deck-end .nav .end-links{display:flex}
.btn-link{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:9px;border:1px solid var(--line2);
  background:var(--surf3);color:var(--tx);text-decoration:none;font-weight:700}
.btn-link.primary{background:var(--burg);border-color:var(--burg);color:#fff}
@media(max-width:680px){.btn-link{padding:0 10px;font-size:16px}}
.blk-time{margin-left:auto;font-variant-numeric:tabular-nums;
  font-size:clamp(26px,3.6vw,40px);font-weight:700;color:var(--gold);line-height:1}
.blk-time.warn{color:var(--warn)} .blk-time.bad{color:var(--bad)}
.blk-body{flex:1;min-height:0;overflow-y:auto;font-size:clamp(19px,2.3vw,26px);line-height:1.5;padding-bottom:2px}
.blk-body p{margin:0 0 var(--s3)}
.blk-body ol,.blk-body ul{margin:0 0 var(--s3);padding-left:var(--s5)}
.blk-body li{margin-bottom:var(--s2)}
.big{font-size:1.23em;font-weight:600}
.note{color:var(--tx2);font-size:clamp(16px,1.6vw,18px)}
.card{background:var(--surf2);border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:var(--s3) var(--s4);margin:0 0 var(--s3);border-radius:0 var(--r2) var(--r2) 0}
.card h4{margin:0 0 var(--s1)}
.card > :last-child{margin-bottom:0}
.stems li{color:var(--tx2)}
.roles{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.role{background:rgba(201,169,98,.09);border:1px solid var(--line2);color:var(--gold);
  padding:var(--s1) var(--s3);border-radius:999px;font-size:16px;font-weight:600}
.timed{list-style:none;padding-left:0;margin:var(--s2) 0 0}
.timed li{padding:2px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:0 var(--s3);align-items:baseline}
.timed .clock{text-align:right;white-space:nowrap}
.timed li:last-child{border-bottom:0}
.clock{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;
  margin-right:var(--s3);white-space:nowrap}
.subnote{margin-top:var(--s3);border:1px solid var(--line2);border-radius:var(--r2);
  background:rgba(201,169,98,.06)}
.subnote summary{cursor:pointer;padding:var(--s2) var(--s3);color:var(--gold);
  font-weight:700;min-height:44px;display:flex;align-items:center}
.subnote dl{margin:0;padding:0 var(--s4) var(--s3);max-height:46vh;overflow-y:auto}
.subnote dt{font-weight:700;margin-top:var(--s2)}
.subnote dd{margin:2px 0 0;color:var(--tx2)}
.off-schedule{opacity:.55;filter:grayscale(.5)}
/* real illustrations: the note card from his Recorder Book, the hand rules, the
   engraved staff. White scans on the dark ground, so each sits in its own panel. */
/* On the board the pictures stand in a column beside the steps, so they cost width,
   not height: the MAKE block is the densest block and has to fit after autofit. */
.blk-body.has-figs{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 var(--s4);
  align-items:start}
.blk-body.has-figs > *{grid-column:1}
.blk-body.has-figs > .figs{grid-column:2;grid-row:1 / span 12}
.figs{display:flex;flex-direction:column;gap:var(--s2);margin:0 0 var(--s3)}
.figs figure{margin:0;background:var(--surf2);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s1) var(--s2)}
/* fixed heights, so the block's geometry is final BEFORE the images arrive: autofit
   measures once, on show, and a lazy image that grows the block afterwards is exactly
   how a fitted block overflows. */
.figs img{display:block;width:100%;height:10vh;object-fit:contain;
  background:#fff;border-radius:var(--r1)}
/* the first picture is the one that matters (the note card): it gets the height */
.figs figure:first-child img{height:15vh}
.figs figure.wide img{height:11vh}
.figs figure:first-child.wide img{height:13vh}
.figs figcaption{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.figs figcaption{font-size:16px;color:var(--tx2);margin-top:var(--s1);line-height:1.3}
@media(max-width:900px){.blk-body.has-figs{display:block}
  .figs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);margin:0 0 var(--s2)}
  .figs figure{padding:var(--s1)}.figs img{height:11vh}.figs figure:first-child img{height:11vh}
  .figs figure.wide img{height:11vh}
  .figs figcaption{font-size:16px;-webkit-line-clamp:2}}
@media(max-width:680px){
  /* The phone deck runs at the 16px floor with the spacing tightened. TALK, the
     densest block, did not fit 390x844 at 17px and the gate refuses any block that
     does not fit after autofit. These are the metrics the previous chrome actually
     rendered at - measured, not guessed. */
  .blk{padding:var(--s3) var(--s4)}
  .blk-head{gap:var(--s3);padding-bottom:var(--s1);margin-bottom:var(--s2)}
  .blk-num{font-size:26px}
  .blk-name{font-size:20px}
  .blk-time{font-size:24px}
  .blk-body{font-size:16px;line-height:1.42}
  .blk-body p{margin:0 0 var(--s2)}
  .blk-body ol,.blk-body ul{margin:0 0 var(--s2);padding-left:22px}
  .blk-body li{margin-bottom:var(--s1)}
  .big{font-size:1.12em;line-height:1.34}
  .note{font-size:16px}
  .card{padding:10px var(--s3);margin:0 0 var(--s2)}
  .roles{gap:var(--s1) var(--s2);margin-bottom:var(--s2)}
  .role{padding:3px 10px}
  .timed li{padding:2px 0}
  .subnote summary{padding:var(--s2)}
  /* the first-day WELCOME is the tallest block in the year: the recorder issue plus
     the one-minute orientation. On a phone it needs its list tightened by a few px
     or it runs past the viewport, which the gate refuses. */
  .blk[data-key="greet"] .card{margin-bottom:var(--s1)}
  .blk[data-key="greet"] li{margin-bottom:2px}
}

/* ---------- preview ribbon ----------
   Appended to the end of body, AFTER .nav, so a sibling selector cannot reach back
   to it; a class on body works in both directions, and the offset is measured from
   the ribbon rather than guessed, because it wraps to two lines on a phone. */
.preview-ribbon{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--gold);color:var(--ink);font-weight:700;font-size:16px;
  letter-spacing:.02em;text-align:center;padding:var(--s2) var(--s3)}
body.has-ribbon .nav{bottom:var(--ribbon-h,38px)}
/* 11 Sept 2026: the ribbon lifted the nav but not the stage, so in preview the last ribbon-height of every slide
   sat under the controls (autofit measured a box the controls covered). The stage moves up with the nav. */
body.has-ribbon main.stage,body.has-ribbon .stage{bottom:calc(var(--navbar-h) + var(--ribbon-h,38px))}

/* ---------- the jump list: every day of the year, from the live schedule ---------- */
.lesson-jump{position:fixed;top:var(--stage-top);right:0;bottom:0;width:min(400px,92vw);
  z-index:170;background:var(--surf);border-left:1px solid var(--line2);
  box-shadow:-12px 0 40px rgba(0,0,0,.6);display:flex;flex-direction:column}
.lj-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);flex-shrink:0}
.lj-head a{color:var(--gold);text-decoration:none;font-weight:700;font-size:16px;
  min-height:44px;display:flex;align-items:center}
.lj-head button{background:none;border:0;color:var(--tx2);font-size:28px;cursor:pointer;
  line-height:1;min-width:44px;min-height:44px}
.lj-list{flex:1;overflow-y:auto;padding:var(--s2)}
.lj-list a{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);
  border-radius:var(--r2);text-decoration:none;color:var(--tx2);font-size:16px;
  min-height:44px;line-height:1.3}
.lj-list a:hover{background:rgba(201,169,98,.07);color:var(--gold)}
.lj-list a.here{background:rgba(201,169,98,.13);color:var(--gold);font-weight:700}
.lj-list .ln{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r1);
  background:rgba(201,169,98,.10);color:var(--gold);font-family:var(--display);
  font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center}
.lj-list a.here .ln{background:var(--gold);color:var(--ink)}
/* the date line under each title: 16px and full contrast, not the 60% gray the
   inline style asks for */
.lj-list small{font-size:16px;color:var(--tx2);display:block;opacity:1 !important}
.lj-unit{padding:var(--s3) var(--s3) var(--s1);font-size:16px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--gold);font-weight:700}

/* ---------- the locked card: the page a scholar actually reads ----------
   Built in lockPage() on the homepage's own vocabulary: a raised panel, a gold chip
   for the release time, the I CAN in a rule-left box, one chip per part of the
   lesson, and the two buttons. */
.locked{padding:var(--s6) 0 0}
.lk-card{max-width:800px;margin:0 auto}
.lk-tag{margin:0 0 var(--s4)}
.lk-card h1{margin:0 0 var(--s2)}
.lk-when{color:var(--tx2);margin:0 0 var(--s5);font-size:var(--t-md)}
.lk-ican{background:var(--surf3);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r2) var(--r2) 0;padding:var(--s4) var(--s5);margin:0 0 var(--s5)}
.lk-ican h4{margin:0 0 var(--s2)}
.lk-ican p{margin:0;font-size:var(--t-md);line-height:1.5}
.lk-blocks{margin:0 0 var(--s5)}
.lk-note{color:var(--tx2);margin:0 0 var(--s3);max-width:var(--measure)}
.lk-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s5) 0 0}
@media(max-width:680px){.locked{padding-top:var(--s5)}.lk-card{padding:var(--s4)}}

/* ---------- the lightbox: any picture, full screen, zoomable ---------- */
.fig-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r1);font:inherit}
.fig-btn:hover img,.fig-btn:focus-visible img{outline:3px solid var(--gold)}
.lb{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.96);display:flex;
  flex-direction:column}
.lb-bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);
  background:var(--surf);border-bottom:1px solid var(--line);flex-shrink:0}
.lb-cap{font-size:16px;color:var(--tx2);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.lb-sp{flex:1}
.lb-bar button{background:var(--surf2);color:var(--tx);border:1px solid var(--line2);
  border-radius:var(--r1);min-width:44px;min-height:44px;font-size:20px;font-weight:700;
  cursor:pointer;font-family:inherit}
.lb-bar button:hover{border-color:var(--gold);color:var(--gold)}
.lb-z{font-size:16px;color:var(--tx2);min-width:52px;text-align:center}
.lb-canvas{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;padding:var(--s3)}
.lb-canvas img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  background:#fff;border-radius:var(--r2);transform-origin:center center;
  transition:transform .12s var(--ease);user-select:none;-webkit-user-drag:none}
body.lb-open{overflow:hidden}
@media(max-width:680px){.lb-cap{display:none}}

/* ---------- bottom nav ---------- */
.nav{position:absolute;bottom:0;left:0;right:0;height:var(--navbar-h);display:flex;
  align-items:center;gap:var(--s2);padding:0 var(--s4);background:var(--surf);
  border-top:1px solid var(--line)}
.nav button{background:var(--surf2);color:var(--tx);border:1px solid var(--line2);
  border-radius:var(--r1);padding:0 var(--s4);font-size:16px;font-weight:700;
  cursor:pointer;min-height:44px;min-width:92px;font-family:inherit}
.nav button.primary{background:var(--burg);border-color:var(--burg);color:#fff}
.nav button:hover{border-color:var(--gold)}
.dots{flex:1;display:flex;gap:var(--s1);justify-content:center;flex-wrap:wrap}
.dot{width:12px;height:12px;border-radius:50%;background:#3a3a3a;cursor:pointer;
  border:1px solid #4a4a4a}
.dot.on{background:var(--gold);border-color:var(--gold-br);transform:scale(1.25)}
.dot.done{background:var(--burg)}
@media(max-width:680px){.nav button{min-width:0;padding:0 var(--s3);white-space:nowrap}}

/* ============================================================ v2 SLIDES
   One lesson, its own slides. Everything a scholar is asked to watch or hear is on
   the slide itself. Pictures and videos have fixed heights so autofit measures the
   final geometry, never a picture that arrives late. */
.blk.deck .blk-head{align-items:center}
.blk.deck .hd{min-width:0}
.blk.deck .tag{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-weight:700;line-height:1.25;margin:0}
.blk.deck .blk-name{font-family:var(--display);font-size:clamp(26px,3.4vw,42px);letter-spacing:0;
  font-weight:700;line-height:1.08}
.blk.cover-slide .blk-head{display:none}
.cols{display:grid;grid-template-columns:var(--cols,1fr 1fr);gap:var(--s3) var(--s5);align-items:start}
.cols > .col{min-width:0}
@media(max-width:900px){.cols{grid-template-columns:1fr !important}}
.steps{list-style:none;padding:0;margin:0 0 var(--s3);counter-reset:st}
.steps li{counter-increment:st;position:relative;padding-left:2.2em;margin-bottom:var(--s2)}
.steps li::before{content:counter(st);position:absolute;left:0;top:.12em;width:1.55em;height:1.55em;
  border-radius:50%;background:var(--gold);color:var(--ink);font-weight:800;font-size:.82em;
  display:flex;align-items:center;justify-content:center;font-family:var(--body)}
.frame{border:2px dashed var(--line2);border-radius:var(--r3);padding:var(--s3) var(--s4);
  font-size:1.1em;background:rgba(201,169,98,.07);margin:0 0 var(--s3);line-height:1.45}
.frame b{color:var(--gold)}
.card.burg{border-left-color:#C23B55;background:rgba(128,0,32,.16)}
.card.gold{background:rgba(201,169,98,.10)}
.pic{margin:0 0 var(--s3);background:var(--surf2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s2)}
/* a card or a score takes its own shape (no white band around it); a photo fills its box */
.pic img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--h,32vh);margin:0 auto;
  object-fit:contain;background:#fff;border-radius:var(--r1)}
.pic.photo img{width:100%;height:var(--h,32vh);max-height:none;object-fit:cover;background:#111}
.pic figcaption{font-size:16px;color:var(--tx2);margin-top:var(--s1);line-height:1.3}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s2);margin:0 0 var(--s3)}
.gallery .pic{margin:0}
.vid{width:min(100%,calc((100vh - 400px) * 1.7778));margin:0 auto var(--s2)}
.vid .video-container{position:relative;width:100%;background:#000;border-radius:14px;overflow:hidden;
  border:2px solid rgba(201,169,98,.35);margin:0 0 6px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.vid .video-container::before{content:'';display:block;padding-top:56.25%}
.vid .video-container > iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-label{font-size:16px;color:var(--tx2);line-height:1.3}
.video-fallback a{font-size:16px;color:var(--gold);display:inline-flex;align-items:center;min-height:32px}
.aud{margin:0 0 var(--s3);background:linear-gradient(120deg,rgba(201,169,98,.10),rgba(128,0,32,.12));
  border:1px solid var(--line2);border-radius:var(--r3);padding:var(--s3) var(--s4)}
.aud figcaption{font-weight:700;margin-bottom:var(--s2);line-height:1.3}
.aud audio{width:100%;height:48px}
.aud .credit{font-size:16px;color:var(--tx2);margin-top:var(--s1);line-height:1.3}
.cover{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s5);align-items:center;
  min-height:100%}
.cover .num{font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 var(--s2)}
.cover h1{font-size:clamp(40px,5.6vw,76px);line-height:1.02;margin:0 0 var(--s3)}
.cover .when{color:var(--tx2);font-size:clamp(18px,2vw,24px);margin:0 0 var(--s4)}
@media(max-width:900px){.cover{grid-template-columns:1fr;min-height:0}.cover .cv-img{display:none}}
.qa{list-style:none;padding:0;margin:0 0 var(--s3)}
.qa li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:start;
  margin-bottom:var(--s3)}
.qa .qn{width:1.7em;height:1.7em;border-radius:var(--r1);background:var(--burg);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:max(16px,.9em)}
/* the board is short (1366x768 leaves about 480px of body): a picture never takes more
   than the room left after the slide head, and on a phone the columns stack, so every
   picture gives up height rather than pushing the text off the screen */
.pic img{max-height:min(var(--h,32vh),calc(100vh - 330px))}
.pic.photo img{height:min(var(--h,32vh),calc(100vh - 330px));max-height:none}
@media(max-width:900px){.pic img{max-height:min(var(--h,32vh),30vh)}.pic.photo img{height:min(var(--h,32vh),30vh)}}
@media(max-width:680px){.pic img{max-height:min(var(--h,32vh),24vh)}.pic.photo img{height:min(var(--h,32vh),24vh)}
  .cols{gap:var(--s2)}.pic.no-phone,.aud.no-phone{display:none}}
.qa .pts{font-size:16px;color:var(--gold);font-weight:700;margin-left:6px;white-space:nowrap}
.deckchips{margin:0 0 var(--s3)}
@media(max-width:680px){.blk.deck .blk-name{font-size:23px}.frame{font-size:1em}
  .steps li{padding-left:2em}.aud{padding:var(--s2) var(--s3)}}

/* ---- the whiteboard: floating button, full-screen canvas, tools ---- */
.nav .board-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border-radius:9px;
  background:var(--surf3);color:var(--gold-lt);border:1px solid var(--line2);font:600 15px/1 var(--body);cursor:pointer}
body > .board-btn{position:fixed;right:18px;bottom:78px;z-index:850;display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 16px 0 12px;border-radius:999px;background:var(--surf2);color:var(--gold-lt);
  border:1px solid var(--line2);box-shadow:0 8px 24px rgba(0,0,0,.5);font:600 15px/1 var(--body);cursor:pointer}
.board-btn .bd-ico{font-size:20px;color:var(--gold-br)}
.board-btn:hover{border-color:var(--gold);color:#fff}
body.locked .board-btn,body:has(.locked) .board-btn{display:none}
.board{position:fixed;inset:0;z-index:9000;touch-action:none}
.board[hidden]{display:none}
.board[data-bg=over]{background:rgba(10,10,10,.08)}
.board[data-bg=white]{background:#ffffff}
.board[data-bg=dark]{background:#0a0a0a}
.bd-canvas{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.bd-tools{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:center;justify-content:center;max-width:calc(100vw - 20px);padding:8px 12px;border-radius:14px;
  background:rgba(18,18,18,.94);border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.55)}
.bd-group{display:flex;gap:6px;align-items:center}
.bd-btn{min-height:44px;min-width:44px;padding:0 12px;border-radius:9px;border:1px solid var(--line2);background:var(--surf3);
  color:var(--tx);font:600 14px/1 var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.bd-btn:hover{border-color:var(--gold)}
.bd-btn.on{outline:2px solid var(--gold-br);outline-offset:1px}
.bd-pen{padding:0;width:44px;border-color:rgba(255,255,255,.25)}
.bd-size i{display:block;border-radius:50%;background:var(--tx)}
.bd-close{font-size:22px;color:var(--gold-lt)}
.bd-danger{color:var(--bad);border-color:rgba(255,107,107,.5)}
.bd-saved{position:absolute;top:84px;right:14px;width:min(360px,calc(100vw - 28px));max-height:calc(100vh - 110px);overflow:auto;
  background:rgba(18,18,18,.97);border:1px solid var(--line2);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.bd-saved[hidden]{display:none}
.bd-saved-head{font:600 15px/1.2 var(--body);color:var(--gold);margin:4px 0 10px}
.bd-saved-row{display:grid;grid-template-columns:96px 1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.bd-saved-row img{width:96px;border-radius:6px;border:1px solid var(--line2)}
.bd-saved-meta{font:500 13px/1.3 var(--body);color:var(--tx2)}
.bd-note{color:var(--tx2);font:400 14px/1.4 var(--body);margin:0}
.bd-toast{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);background:rgba(18,18,18,.96);color:var(--gold-lt);
  border:1px solid var(--line2);border-radius:10px;padding:10px 16px;font:500 14px/1.3 var(--body)}
@media(max-width:680px){.nav .board-btn{padding:0 10px}.board-btn .bd-lbl{display:none}
  .bd-tools{top:6px;gap:6px 8px;padding:6px 8px}.bd-btn{padding:0 9px;font-size:13px}}
/* the bottom bar on a phone: Back, Start timer, Board, Next fit one row; the progress
   dots are decoration and go, so nothing wraps under the bar */
@media(max-width:680px){.nav{padding:0 var(--s2);gap:var(--s1)}.nav button{min-width:0;padding:0 var(--s2);font-size:15px}
  .nav .btn-link{font-size:15px;padding:0 8px}
  .nav .dots{display:none}}
@media print{.board-btn,.board{display:none}}