/* ==========================================================================
   book.css — what the book adds on top of ui.css + components.css:
   the notebook, the hooks (32/33/41), traps, the opener, placeholders.
   ========================================================================== */
.wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter) 90px; }
.bar__brand { text-decoration: none; color: inherit; }
.navcard { text-decoration: none; color: inherit; }
.lcard { text-decoration: none; color: inherit; }
.ph { font-family: var(--f-display); font-variation-settings: "opsz" 72; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin: 26px 0 8px; }
h2.ph { font-size: 27px; } h3.ph { font-size: 22px; } h4.ph { font-size: 19px; }
.block--todo { margin: 14px 0; padding: 12px 14px; border: 1.5px dashed var(--line-2); border-radius: var(--r); font-family: var(--f-ui); font-size: 13px; color: var(--ink-3); }
.fig__missing { padding: 40px; text-align: center; font-family: var(--f-ui); color: var(--warn); }

/* notebook affordances */
.nb-add { font-family: var(--f-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; color: var(--ink-3); border: 1px solid transparent; transition: .2s; }
.nb-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.nb-add:hover { color: var(--accent); background: var(--accent-soft); }
.nb-add.is-on { color: #fff; background: var(--ink); }
.statement__k .nb-add { margin-left: auto; }
.formula__top .nb-add { margin-left: 0; }
.p-foot { display: flex; justify-content: flex-end; margin: -6px 0 6px; }
.nb-fab { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 56px; height: 56px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(21,23,28,.7); transition: transform .15s; }
.nb-fab:active { transform: scale(.94); }
.nb-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.nb-fab__n { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 11px/22px var(--f-ui); text-align: center; border: 2px solid var(--paper); }
.nb-entry { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin-bottom: 8px; }
.nb-entry__k { font-family: var(--f-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.nb-entry__t { font-family: var(--f-display); font-weight: 600; font-size: 16px; margin: 2px 0 4px; }
.nb-entry__b { font-size: 15px; line-height: 1.5; }
.nb-entry__src { font-family: var(--f-ui); font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.nb-entry__src a { color: var(--ink-3); }
.nb-entry .iconbtn { width: 32px; height: 32px; }
.nb-lesson { font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 14px 0 8px; }
.nb-empty { font-family: var(--f-ui); color: var(--ink-3); font-size: 14px; padding: 30px 0; text-align: center; }
.err-entry { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--warn); margin-bottom: 8px; }
.err-entry.is-resolved { border-left-color: var(--good); opacity: .7; }
.err-entry__q { font-size: 15px; font-weight: 500; }
.err-entry__w { font-family: var(--f-ui); font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.err-entry textarea { width: 100%; margin-top: 8px; min-height: 48px; font: 13.5px/1.5 var(--f-ui); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: #FFFBEB; resize: vertical; }
.drawer__head .seg { margin-left: auto; margin-right: 6px; }
.drawer__head .seg button { padding: 5px 10px; font-size: 12px; }

/* hooks: phenomenon, story, application */
.hook { margin: 22px 0; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--card); box-shadow: var(--sh-1); position: relative; overflow: hidden; }
.hook::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--hk); }
.hook--phenomenon { --hk: #0E7490; background: linear-gradient(135deg, var(--card), rgba(14,116,144,.06)); }
.hook--story { --hk: #B45309; background: linear-gradient(135deg, var(--card), rgba(180,83,9,.06)); }
.hook--application { --hk: var(--accent-2); }
.hook__k { font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hk, var(--ink-3)); }
.hook__t { font-family: var(--f-display); font-variation-settings: "opsz" 72; font-weight: 600; font-size: 22px; letter-spacing: -.02em; margin: 4px 0 8px; }
.hook p { margin: 0 0 10px; }
.hook__promise { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); font-family: var(--f-ui); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.hook__promise::before { content: "By the end of this lesson: "; color: var(--hk); }
.traps { margin: 22px 0; padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid rgba(180,83,9,.3); background: var(--warn-soft); }
.traps .hook__k { color: var(--warn); }
.traps ol { margin: 8px 0 0; padding-left: 20px; }
.traps li { margin: 6px 0; }
.traps__fix { font-family: var(--f-ui); font-size: 13.5px; color: var(--ink-2); }
.opener { margin: 10px 0 20px; display: grid; gap: 14px; }
.opener__why, .opener__before { padding: 16px 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.opener__why p, .opener__before p { margin: 6px 0 0; }
.opener .will { margin: 0; }
.tol { font-family: var(--f-ui); font-size: 12px; color: var(--ink-3); }
.grade__q { font-family: var(--f-ui); font-size: 13px; color: var(--ink-3); align-self: center; }
.sstep__more { padding: 10px 0 6px; }
.synth:empty { display: none; }

@media (min-width: 1100px) { .nb-fab { right: 28px; bottom: 28px; } }

/* =========================================================================
   Two families: structure text (--f-ui) vs physics text (--f-body/--f-display)
   ========================================================================= */
:root { --measure: 1200px; --ui-scale: 1; --f-hand: 'Kalam', cursive; --hand-scale: 1.08; }
.wrap { max-width: var(--measure); }
.check__eyebrow { font-size: calc(11px * var(--ui-scale)); }
.pill { font-size: calc(12.5px * var(--ui-scale)); }
.fig__cap { font-size: calc(13.5px * var(--ui-scale)); }
.goal, .lcard__d { font-size: calc(14px * var(--ui-scale)); }
.formula__cell, .lcard__meta, .traps__fix { font-size: calc(13px * var(--ui-scale)); }
.dstep__why, .sstep__hint, .example__try, .gate .gq, .hook__promise { font-size: calc(13.5px * var(--ui-scale)); }
.goals__t, .topic-mark, .statement__k, .callout__k, .hook__k, .formula__lab, .lhead__eyebrow, .hero__eyebrow, .sstep__n, .navcard small, .nb-add { font-size: calc(11px * var(--ui-scale)); }
.check__fb, .cmp__row > div { font-size: calc(14px * var(--ui-scale)); }

/* Inline maths takes the weight of the text around it. MathJax has one weight of glyph, so in
   the semibold display headings a thin stroke gives its letters the same colour on the page,
   and the heading keeps the maths at the height of its own letters (not the body's 108 %). */
.lhead h1 mjx-container, .hero h1 mjx-container, .ph mjx-container, .hook__t mjx-container,
.statement__t mjx-container, .lcard__t mjx-container, .will h3 mjx-container, .stest__h h3 mjx-container,
.wb-sheet__h mjx-container { -webkit-text-stroke: .03em currentColor; font-size: 100% !important; }
/* in structure text (Inter, 11-14 px) the maths sits at the text's own size, so that a root or
   a subscript never pushes the lines of a card apart */
.goal mjx-container, .lcard__d mjx-container, .will li mjx-container, .hook__promise mjx-container,
.traps__fix mjx-container, .fig__cap mjx-container, .dstep__why mjx-container, .sstep__hint mjx-container,
.termpop mjx-container { font-size: 100% !important; }
/* physics text always in the physics family */
.check__q, .example__q, .statement__b, .hook p, .callout p, .opt__text, .traps li, .gq__q, .model p, .explain textarea, .concept-section { font-family: var(--f-body); }

/* ---------- the notebook writes by hand ---------- */
.nb-entry__t { font-family: var(--f-hand); font-size: calc(1.15em * var(--hand-scale)); font-weight: 600; letter-spacing: 0; }
.nb-entry__b { font-family: var(--f-hand); font-size: calc(1em * var(--hand-scale)); line-height: 1.35; color: #1f2a44; }
.nb-entry__b mjx-container { font-size: 100% !important; }
.nb-entry { background: repeating-linear-gradient(180deg, transparent 0 27px, rgba(37,99,235,.12) 27px 28px) 0 6px, #FFFDF7; border-color: rgba(37,99,235,.18); }
.err-entry textarea, .note textarea { font-family: var(--f-hand); font-size: calc(1em * var(--hand-scale)); line-height: 1.35; }
.err-entry__q { font-family: var(--f-body); }
.lab__sample { margin: 6px 0 4px; padding: 10px 12px; border-radius: 10px; background: #FFFDF7; border: 1px solid rgba(37,99,235,.18); line-height: 1.35; color: #1f2a44; }

/* ---------- Design lab panel ---------- */
.lab { font-family: var(--f-ui); font-size: 13px; }
.lab__sec { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 6px; }
.lab__sec small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; margin-top: 2px; }
.lab__row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.lab__row label { font-weight: 600; color: var(--ink-2); }
.lab__row select { width: 100%; font: 500 13px var(--f-ui); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); }
.lab__row .seg { width: 100%; } .lab__row .seg button { flex: 1; text-transform: capitalize; padding: 6px 4px; font-size: 12px; }
.drawer--lab { width: min(420px, 100%); }
.toast { z-index: 70; }
.lab__range { display: grid; grid-template-columns: 1fr 52px; gap: 8px; align-items: center; }
.lab__range input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; }
.lab__range input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-2); }
.lab__range input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.lab__range output { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.lab__actions { display: flex; gap: 8px; margin-top: 14px; }
.lab__json { width: 100%; margin-top: 10px; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink-2); resize: vertical; }
.lab__hint { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }
.dots { display: inline-flex; gap: 6px; }
.dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; background: var(--c); box-shadow: inset 0 0 0 2px var(--card); }
.dot.is-on { border-color: var(--ink); }
.seg { display: inline-flex; background: var(--paper-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; color: var(--ink-2); }
.seg button.is-on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }

/* =========================================================================
   PHONE: use the width. Stack what was side by side.
   ========================================================================= */
@media (max-width: 719px) {
  .formula__top { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 8px; align-items: center; padding: 10px 12px 0; }
  .formula__lab { grid-column: 1 / -1; }
  .formula__name { font-size: 15px; }
  .formula__top .pin { margin-left: 0; }
  .formula__top .nb-add span { display: none; }
  .formula__tex { padding: 4px 8px; }
  .fig__cap { display: block; padding: 10px 12px 12px; }
  .fig__num { display: inline; margin-right: 6px; }
  .fig__plate { padding: 10px 6px 6px; }
  .example__h { flex-wrap: wrap; gap: 2px 8px; }
  .example__h b { width: 100%; }
  .example__try { flex-direction: column; align-items: stretch; gap: 8px; }
  .example__try .btn { align-self: flex-end; }
  .statement { padding: 14px 14px 12px 16px; }
  .statement__k { flex-wrap: wrap; }
  .statement__k .nb-add span { display: none; }
  .p-foot .nb-add { padding: 4px 8px; }
  .deriv__h { flex-wrap: wrap; }
  .dstep { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 12px 12px; }
  .hook { padding: 14px 14px 12px 16px; }
  .callout { grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 12px; }
  .callout__i { width: 28px; height: 28px; }
  .check { padding: 14px 12px 12px 14px; }
  .opt { padding: 10px 10px; gap: 10px; }
  .cmp__row > div { padding: 8px 8px; }
  .lhead { padding-top: 18px; }
  .goals { padding: 12px 12px; }
  .lab__row { grid-template-columns: 84px 1fr; }
}

/* ---------- one reading width everywhere: --measure (1200) governs; nothing narrower ---------- */
@media (min-width: 720px) {
  .hero, .stats, .lessons, .will, .lhead, .goals, .article, .lfoot, .h2, .sub, .synth, .opener, .stest, .recall { max-width: none; margin-left: 0; margin-right: 0; }
  .lessons { grid-template-columns: 1fr 1fr; }
}
/* questions are not bold: inline maths inside bold looks wrong */
.check__q, .stest__q .check__q, .example__q p, .gq__q { font-weight: 400; }
.check__q strong, .example__q strong { font-weight: 600; background: none; }

/* ---------- account chip, sign-in ---------- */
.acct { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.acct__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.acct__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__in { padding: 7px 12px; font-size: 13px; }
@media (max-width: 719px) { .acct__name { display: none; } .bar__crumb { display: none; } }
.auth { display: grid; place-items: center; padding: 40px 0 60px; }
.auth__card { width: min(440px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px 26px; box-shadow: var(--sh-2); }
.auth__brand { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-weight: 700; font-size: 16px; } .auth__brand svg { width: 20px; height: 20px; fill: var(--brand); } .auth__brand b { color: var(--brand); }
.auth__h { font-family: var(--f-display); font-variation-settings: "opsz" 72; font-weight: 600; font-size: 32px; letter-spacing: -.02em; margin: 14px 0 6px; }
.auth__p { font-family: var(--f-ui); font-size: 14px; color: var(--ink-2); margin: 0 0 18px; line-height: 1.5; }
.auth__form { display: grid; gap: 12px; }
.auth__form label { font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: grid; gap: 5px; }
.auth__form input { font: 15px var(--f-ui); padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); }
.auth__form input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.auth__err { font-family: var(--f-ui); font-size: 13.5px; color: #7C2D12; background: var(--warn-soft); padding: 10px 12px; border-radius: 10px; }
.auth__example { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); font-family: var(--f-ui); font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.auth__example b { width: 100%; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.auth__example code { background: var(--card); border: 1px solid var(--line); padding: 3px 7px; border-radius: 6px; }
.auth__role { border: 0; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--f-ui); }
.auth__role legend { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 0 0 6px; }
.auth__role label { display: flex !important; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; cursor: pointer; font-size: 14px !important; min-height: 44px; }
.auth__role label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink) !important; }
.auth__role input { accent-color: var(--accent); }
.auth__teacher { display: grid; gap: 12px; } .auth__teacher[hidden] { display: none; }
.auth__note { font-family: var(--f-ui); font-size: 12.5px; color: var(--ink-3); margin: 0; line-height: 1.5; }
.acct__dash { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; margin-right: 8px; }
.acct__dash svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
#account { display: inline-flex; align-items: center; }
.auth__reg { margin-top: 16px; } .auth__reg summary { font-family: var(--f-ui); font-size: 13.5px; font-weight: 600; color: var(--accent); cursor: pointer; padding: 6px 0; } .auth__reg form { margin-top: 10px; }

/* ---------- topic pills on lesson cards, glossary page, termpop link ---------- */
.tpills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tpill { font-family: var(--f-ui); font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-2); }
.tpill.mr { background: var(--accent-soft-2); border-color: rgba(var(--accent-rgb), .4); }
.tpill.m1 { background: rgba(var(--accent-rgb), .3); border-color: var(--accent); color: var(--ink); }
.tpill.m2 { background: var(--good-soft); border-color: var(--good); color: #065F46; }
.tpill.m0 { background: var(--warn-soft); border-color: var(--warn); color: #7C2D12; }
.lcard { align-items: start; }
.gloss { margin: 0; display: grid; gap: 10px; }
.gloss__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; scroll-margin-top: 80px; }
.gloss__item:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.gloss dt { font-family: var(--f-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin: 0 0 4px; }
.gloss dd { margin: 0; font-size: 1em; }
.termpop__link { display: block; margin-top: 8px; color: #fff; font-weight: 600; font-size: 12.5px; opacity: .85; }
.stest__row a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ---------- home page ---------- */
.home__fig { margin: 26px 0 0; }
.home__fig .fig__plate { padding: 10px 8px 4px; }
/* the home picture drawn at random by home-hero.js: centred, never taller than about half the screen */
.home__plate--pick { display: grid; place-items: center; min-height: 220px; animation: homePick .6s ease both; }
.home__pick { max-width: 100%; } .home__pick svg { display: block; max-width: 100%; height: auto; }
@keyframes homePick { from { opacity: 0; } to { opacity: 1; } }
.home3d { position: relative; } .home3d canvas { display: block; }
.home3d__hint { position: absolute; right: 10px; bottom: 8px; font-family: var(--f-ui); font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; pointer-events: none; transition: opacity .5s; }
.home3d__hint.is-gone { opacity: 0; }
.syllabus { margin-top: 26px; }
.syllabus__grid { display: grid; gap: 10px; }
.sy { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; opacity: .55; }
.sy.is-live { opacity: 1; border-color: rgba(var(--accent-rgb), .35); box-shadow: var(--sh-1); }
.sy__n { font-family: var(--f-display); font-weight: 600; font-size: 13px; color: var(--accent); }
.sy__t { font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -.015em; margin: 2px 0 6px; }
.sy__soon { font-family: var(--f-ui); font-size: 12px; color: var(--ink-3); }
.sy__ch { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--paper); text-decoration: none; color: var(--ink); font-family: var(--f-ui); font-size: 14px; font-weight: 600; margin-top: 4px; }
.sy__ch:hover { background: var(--accent-soft); } .sy__ch small { color: var(--ink-3); font-weight: 500; }
@media (min-width: 720px) { .syllabus__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .syllabus__grid { grid-template-columns: repeat(4, 1fr); } }
.home { position: relative; padding: 36px 0 8px; overflow: hidden; }
.home__hero { position: relative; z-index: 1; max-width: 640px; }
.home__h1 { font-family: var(--f-display); font-variation-settings: "opsz" 144; font-weight: 600; font-size: clamp(36px, 7vw, 66px); line-height: 1.02; letter-spacing: -.03em; margin: 14px 0 14px; text-wrap: balance; }
.home__h1 em { font-style: italic; font-weight: 400; background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home__scene { margin: 10px calc(-1 * var(--gutter)) 0; height: 200px; } .home__scene svg { width: 100%; height: 100%; display: block; }
.pillars { display: grid; gap: 12px; margin-top: 16px; }
.pillar { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 18px 14px; box-shadow: var(--sh-1); }
.pillar__n { font-family: var(--f-display); font-weight: 600; color: var(--accent); font-size: 14px; margin-bottom: 8px; }
.pillar b { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 600; font-size: 19px; letter-spacing: -.015em; display: block; margin-bottom: 6px; }
.pillar p { margin: 0; font-family: var(--f-ui); font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.units__grid { display: grid; gap: 10px; }
.unit { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; opacity: .6; }
.unit.is-live { opacity: 1; border-color: rgba(var(--accent-rgb), .35); box-shadow: var(--sh-1); }
.unit__n { font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.unit__t { font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: -.015em; margin: 2px 0 8px; }
.unit__soon { font-family: var(--f-ui); font-size: 12px; color: var(--ink-3); }
.unit__ch { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--paper); text-decoration: none; color: var(--ink); font-family: var(--f-ui); font-size: 14px; font-weight: 600; }
.unit__ch:hover { background: var(--accent-soft); }
.unit__ch span { font-family: var(--f-display); color: var(--accent); } .unit__ch small { color: var(--ink-3); font-weight: 500; }
.how__grid { display: grid; gap: 10px; }
.how__item { padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.how__item b { font-family: var(--f-ui); font-size: 14px; display: block; margin-bottom: 4px; } .how__item p { margin: 0; font-family: var(--f-ui); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(3, 1fr); } .units__grid { grid-template-columns: repeat(2, 1fr); } .how__grid { grid-template-columns: repeat(3, 1fr); } .home__scene { height: 240px; } }
@media (min-width: 1100px) { .units__grid { grid-template-columns: repeat(3, 1fr); } .home { padding-top: 56px; } }
.hero--chapter .hero__eyebrow a, .lhead__eyebrow a { color: inherit; text-decoration: none; }
.bar__crumb a { color: var(--ink-3); text-decoration: none; }

/* ---------- chapter home: concept map, skip test ---------- */
.cmap { margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-1); overflow: hidden; }
.cmap svg { width: 100%; height: auto; display: block; }
.cmap__col { font-family: var(--f-ui); font-size: 11px; font-weight: 700; fill: var(--ink-3); text-anchor: middle; }
.cmap__edge { stroke: var(--line-2); stroke-width: 1.6; fill: none; marker-end: url(#mArrow); }
.cmap__node rect { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.2; rx: 10; transition: .3s; }
.cmap__node text { font-family: var(--f-ui); font-size: 11.5px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.cmap__node.mr rect { fill: var(--accent-soft-2); stroke: rgba(var(--accent-rgb), .5); }
.cmap__node.m1 rect { fill: rgba(var(--accent-rgb), .3); stroke: var(--accent); }
.cmap__node.m2 rect { fill: var(--good-soft); stroke: var(--good); }
.cmap__node.m0 rect { fill: var(--warn-soft); stroke: var(--warn); }
.cmap__leg { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); font-family: var(--f-ui); font-size: 12px; color: var(--ink-2); }
.cmap__leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.stest { margin: 0 0 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 18px 16px; box-shadow: var(--sh-1); }
.stest__h h3 { font-family: var(--f-display); font-weight: 600; font-size: 20px; letter-spacing: -.015em; margin: 4px 0 10px; }
.stest__q { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 0; border-top: 1px dashed var(--line); }
.stest__n { font-family: var(--f-display); font-weight: 600; color: var(--accent); padding-top: 4px; }
.stest__q .check__q { margin: 0 0 8px; font-size: 16px; }
.stest__result { margin-top: 14px; padding: 14px; border-radius: var(--r); background: var(--paper-2); font-family: var(--f-ui); }
.stest__score { font-family: var(--f-display); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.stest__row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.stest__row.is-ok { color: #065F46; } .stest__row b { font-variant-numeric: tabular-nums; }
.stest__hint { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.lcard__pct { font-weight: 700; color: var(--accent); }
.lcard.is-done .lcard__pct { color: var(--good); }
.prog__foot { font-family: var(--f-ui); font-size: 12px; color: var(--ink-3); margin-top: 14px; }

/* ---------- recall (37), representations (38), gap derivation (40) ---------- */
.recall { margin: 14px 0 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--warn-soft); border: 1px solid rgba(180,83,9,.3); }
.recall .hook__k { color: var(--warn); } .recall__p { margin: 4px 0 8px; font-family: var(--f-ui); font-size: 13.5px; color: var(--ink-2); }
.recall__item { display: block; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); margin-top: 6px; text-decoration: none; color: var(--ink); font-size: 15px; }
.recall__item span { display: block; font-family: var(--f-ui); font-size: 12px; color: var(--accent); margin-top: 3px; }
.reps { margin: 22px 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.reps__tabs { display: inline-flex; background: var(--paper-2); border-radius: 999px; padding: 3px; gap: 2px; margin: 8px 0 12px; }
.reps__tabs button { font-family: var(--f-ui); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; color: var(--ink-2); }
.reps__tabs button.is-on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.reps__pane .fig { margin: 6px 0; }
.dstep__m--gap { text-align: center; font-family: var(--f-display); font-size: 28px; color: var(--accent); margin: 6px 0; }
.dstep--gap { background: var(--accent-soft); }
.gapd__opts { padding: 12px 16px 6px; border-top: 1px solid var(--line); }
.gapd .check__fb { margin: 10px 0 6px; }
.sim, .probe { margin: 22px 0; }

/* ---------- handwritten maths (notebook, journal) ---------- */
/* Layout mirrors MathJax: the fraction bar sits on the maths axis (the height of the
   "=" and "+"), which is what vertical-align: middle on an inline-block gives. */
.hm { font-family: var(--f-hand); white-space: nowrap; display: inline-block; line-height: 1.25; }
.hm sup, .hm sub { font-size: .68em; line-height: 0; position: relative; }
.hm sub { vertical-align: baseline; top: .28em; } .hm sup { vertical-align: baseline; top: -.5em; }
.hm-frac { display: inline-block; vertical-align: middle; text-align: center; margin: 0 .18em; line-height: 1.15; }
.hm-num, .hm-den { display: block; }
.hm-num { border-bottom: 1.6px solid currentColor; padding: 0 .25em .08em; }
.hm-den { padding: .08em .25em 0; }
.nb-entry__b--math .hm-frac { margin: 0 .25em; }
.hm-sqrt .hm-rad { border-top: 1.6px solid currentColor; padding: 0 .15em; margin-left: -.05em; }
.hm-box { border: 1.6px solid currentColor; border-radius: 4px; padding: .05em .3em; }
.hm-vec { position: relative; } .hm-vec::after { content: "\2192"; position: absolute; left: 0; right: 0; top: -.75em; font-size: .7em; text-align: center; }
.hm-hat { position: relative; } .hm-hat::after { content: "^"; position: absolute; left: 0; right: 0; top: -.6em; font-size: .8em; text-align: center; }
.hm-bar { text-decoration: overline; }
.nb-entry__b--math { font-size: calc(1.25em * var(--hand-scale)); text-align: center; padding: .35em 0 .15em; }
.lab__author { margin-top: 14px; border-top: 1px dashed var(--line-2); padding-top: 8px; }
.lab__author summary { cursor: pointer; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 6px 0; }
/* recall first: the missed question itself, answerable in place */
.recall__q { margin-top: 10px; }
.recall__q .check { margin: 0; }
.recall__src { font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--warn); margin: 0 0 6px 2px; }

/* ---------- the Workbook: subjective questions, solved on paper, marked by the student ---------- */
.wb-bar { position: sticky; top: calc(var(--bar-h) + 3px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; margin: 14px 0 6px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); font-family: var(--f-ui); }
.wb-bar__ring { width: 44px; height: 44px; }
.wb-bar__ring .toc__ring { width: 44px; height: 44px; font-size: 12px; }
.wb-bar__t { font-weight: 700; font-size: 14px; } .wb-bar__t small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; }
.wb-bar__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.wb-bar__chips .chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.wb-sheet { margin-top: 26px; }
.wb-sheet__h { font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 2px; }
.wb-sheet__s { font-family: var(--f-ui); font-size: 13px; color: var(--ink-3); margin: 0 0 8px; }
.wb-group { font-family: var(--f-ui); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 18px 0 6px; }
.wbq { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 6px 14px; padding: 16px 18px 14px; margin-top: 10px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line-2); transition: border-color .2s; }
.wbq.is-solved { border-left-color: var(--good); } .wbq.is-helped { border-left-color: var(--warn); } .wbq.is-stuck { border-left-color: var(--bad, #b91c1c); }
.wbq__n { font-family: var(--f-ui); font-weight: 700; font-size: 13px; color: var(--ink-3); padding-top: 3px; }
.wbq__n b { display: block; font-size: 20px; color: var(--ink); line-height: 1; margin-top: 2px; }
.wbq__body { font-size: var(--fs-body, 17px); line-height: var(--lh-body, 1.65); }
.wbq__body p { margin: 0 0 6px; }
.wbq__body .parts { margin: 6px 0 0; padding-left: 26px; list-style: lower-roman; }
.wbq__body .parts li { margin: 2px 0; }
.wbq__body .parts.row { display: flex; flex-wrap: wrap; gap: 4px 28px; padding-left: 26px; }
.wbq__fig { grid-column: 2; margin: 6px 0 2px; }
.wbq__fig img { display: block; max-width: 100%; height: auto; }
.wbq__tools { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-family: var(--f-ui); }
.wbq__tools .linkbtn { font-size: 13px; font-weight: 600; color: var(--accent); }
.wbq__reveal { grid-column: 2; padding: 10px 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); margin-top: 6px; font-size: 16px; }
.wbq__reveal b { display: block; font-family: var(--f-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.wbq__reveal .parts { padding-left: 24px; list-style: lower-roman; }
.wbq__mark { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--f-ui); }
.wbq__mark > span { font-size: 13px; color: var(--ink-2); margin-right: 4px; }
.wbq__mark button { border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--paper); }
.wbq__mark button:hover { border-color: var(--ink); color: var(--ink); }
.wbq__mark button[data-mark="solved"].is-on { background: var(--good-soft, #dcfce7); border-color: var(--good); color: var(--good); }
.wbq__mark button[data-mark="helped"].is-on { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.wbq__mark button[data-mark="stuck"].is-on { background: #fee2e2; border-color: #b91c1c; color: #b91c1c; }
.wbq__when { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.wbq.is-hidden { display: none; }
.wbcard { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; margin-top: 14px; padding: 14px 18px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.wbcard .toc__ring { width: 56px; height: 56px; font-size: 13px; }
.wbcard__t { font-family: var(--f-display); font-size: 20px; font-weight: 600; } .wbcard__s { font-family: var(--f-ui); font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.wbcard__go { font-family: var(--f-ui); font-weight: 700; font-size: 13px; color: var(--accent); }
.lfoot__wb { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 12px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-family: var(--f-ui); font-weight: 600; font-size: 14px; }
.lfoot__wb small { display: block; font-weight: 500; color: var(--ink-2); }
.err-entry__w .err-entry__c { display: block; } .err-entry__w .err-entry__f { display: block; margin-top: 4px; }
@media (max-width: 719px) { .wbq { grid-template-columns: 40px 1fr; padding: 14px 12px; } .wbq__fig, .wbq__tools, .wbq__reveal, .wbq__mark { grid-column: 1 / -1; } }
/* left to do here (lesson foot) and the lesson-card hint */
.todo { margin: 12px 0 16px; padding: 12px 16px 8px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); font-family: var(--f-ui); }
.todo__k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.todo__list { list-style: none; margin: 0; padding: 0; }
.todo__item { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 6px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.todo__list li:first-child .todo__item { border-top: 0; }
.todo__item:hover { background: var(--paper-2); border-radius: 10px; }
.todo__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--paper-2); font-weight: 700; font-size: 12px; color: var(--ink-2); }
.todo__item--retry .todo__n, .todo__item--revisit .todo__n { background: var(--warn-soft); color: var(--warn); }
.todo__item--workbook .todo__n { background: var(--accent-soft); color: var(--accent); }
.todo__go { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.todo__done { padding: 8px 4px 10px; font-size: 14px; color: var(--good); font-weight: 600; }
.is-flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 4px rgba(37,99,235,.45); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } }
.lcard__left { font-family: var(--f-ui); font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.lcard__left b { color: var(--warn); font-weight: 600; }
/* chapter progress strip (replaces the tally tiles) and the continue buttons */
.cprog { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font-family: var(--f-ui); font-size: 14px; color: var(--ink-2); }
.cprog .toc__ring { width: 48px; height: 48px; font-size: 12px; }
.btn small { display: block; font-size: 11px; font-weight: 500; opacity: .85; line-height: 1.2; margin-top: 1px; }
.btn--continue { text-align: left; }
.todo__item--workbook .todo__n { font-size: 0; }
.todo__item--workbook .todo__n::before { content: '✎'; font-size: 14px; }

/* ---------- the Mathematical Tools bridge (docs/26 section 2): doors, popover, the reverse section, the route ---------- */
.doors { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 12px 0 -4px; font-family: var(--f-ui); }
.doors__k { font-size: 11px; font-weight: 600; color: var(--ink-3); margin-right: 2px; }
.door { cursor: pointer; line-height: 1.3; transition: border-color .15s, background .15s; }
.door:hover, .door.is-open { border-color: var(--accent); color: var(--ink); }
.toolpop { position: absolute; z-index: 30; left: 0; top: calc(100% + 8px); width: min(380px, 100%); background: var(--ink); color: #fff; font-family: var(--f-ui); font-size: 14px; line-height: 1.55; padding: 14px 16px 12px; border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); animation: rise .2s both; text-align: left; }
.toolpop::before { content: ""; position: absolute; top: -6px; left: 22px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.toolpop__k { color: rgba(255,255,255,.6); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.toolpop__t { font-family: var(--f-display); font-size: 17px; font-weight: 600; margin: 2px 0 6px; }
.toolpop__r { color: rgba(255,255,255,.92); }
.toolpop__f { margin: 8px 0 2px; padding: 4px 8px; border-radius: 10px; background: rgba(255,255,255,.08); overflow-x: auto; }
.toolpop mjx-container { color: #fff; }
.toolpop__here { margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.toolpop__here b { color: #fff; font-weight: 600; }
.toolpop__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.toolpop__btns .btn { border-radius: 999px; }
.toolpop__btns [data-gotit] { background: var(--accent); color: #fff; border: 0; }
.toolpop__btns .btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); text-decoration: none; }
.toolpop__src { margin-top: 8px; font-size: 11.5px; color: rgba(255,255,255,.5); }
.leans { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--line); font-family: var(--f-ui); font-size: 13px; color: var(--ink-2); }
.leans .doors { margin: 0; display: inline-flex; position: static; }          /* the popover anchors to the whole line, not to one chip */
.leans__k { font-weight: 600; }
.todo__item--tools .todo__n { font-size: 0; background: var(--accent-soft); }
.todo__item--tools .todo__n::before { content: '\221A'; font-size: 14px; color: var(--accent); }
.toolworks { margin: 14px 0 18px; padding: 18px 18px 12px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.toolworks__h { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 21px; letter-spacing: -.02em; }
.toolworks__s { margin: 4px 0 8px; font-family: var(--f-ui); font-size: 13.5px; color: var(--ink-3); }
.toolworks__ch { margin: 14px 0 6px; font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.twcard { display: grid; gap: 2px; margin-top: 6px; padding: 10px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.twcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.twcard__where { font-family: var(--f-ui); font-size: 11.5px; color: var(--ink-3); }
.twcard__t { font-family: var(--f-ui); font-size: 14.5px; font-weight: 600; }
.twcard__why { font-size: 14.5px; color: var(--ink-2); }
.twcard__tool { font-family: var(--f-ui); font-size: 11.5px; color: var(--ink-3); }
.twcard.is-origin { border-color: var(--accent); background: var(--accent-soft); }
.twcard__origin { justify-self: start; font-family: var(--f-ui); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 9px; margin-bottom: 3px; }
.backstrip { display: inline-block; margin-top: 10px; font-family: var(--f-ui); font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.lfoot__back { display: grid; margin: 0 0 12px; border-color: var(--accent); }
.opener__route { margin: 0; padding: 12px 16px; border-radius: var(--r); background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .25); font-family: var(--f-ui); font-size: 14px; color: var(--ink); }
.sy__group { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 2px 2px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-family: var(--f-ui); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.sy__group small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.nav__toolbox { margin: 4px 0 0; border: 0; border-radius: 0; background: none; overflow: visible; padding: 0; }
.nav__toolbox > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nav__toolbox > summary::-webkit-details-marker { display: none; }
.nav__toolbox > summary::before { content: none; display: none; }
.nav__toolbox > summary small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.nav__toolbox > summary .nav__chev { margin-left: auto; }
.nav__toolbox[open] > summary .nav__chev { transform: rotate(90deg); }
.nav__toolbox > .nav__ch, .nav__toolbox > .toc__item { margin-left: 8px; }

.hm-mat { display: inline-flex; flex-direction: column; vertical-align: middle; padding: 0 .3em; margin: 0 .15em; }
.hm-mat--v { border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.hm-mat--p { border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; border-radius: .6em; }
.hm-mat--b { border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.hm-row { display: flex; gap: .8em; justify-content: space-between; }
.hm-cell { min-width: 1em; text-align: center; }
.hm-mat--g { padding: 0; gap: .2em; } .hm-mat--g .hm-row { justify-content: center; }   /* gathered, aligned: lines of working, no brackets */

/* ---------- the sign-in nudge (src/web/js/nudge.js): offered only after the second thing done ---------- */
.nudge { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 14px); z-index: 70; width: min(560px, calc(100vw - 24px)); transform: translate(-50%, 140%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px 14px 12px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 24px 60px -20px rgba(21,23,28,.45); font-family: var(--f-ui); }
.nudge.is-on { transform: translate(-50%, 0); }
.nudge__i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(208, 2, 27, .08); }
.nudge__i svg { width: 20px; height: 20px; fill: var(--brand); }
.nudge__t { display: grid; gap: 2px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.nudge__t b { font-size: 15px; color: var(--ink); }
.nudge__a { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.nudge__a .btn { min-height: 42px; padding-left: 20px; padding-right: 20px; }
.nudge__later { font-size: 14px; font-weight: 600; color: var(--ink-3); padding: 10px 12px; min-height: 42px; }
@media (min-width: 720px) { .nudge { grid-template-columns: auto 1fr auto; } .nudge__a { grid-column: auto; } }

/* ---------- the teacher stage's small entry points ---------- */
.prog__teacher { display: block; font-family: var(--f-ui); font-size: 14px; font-weight: 700; margin-top: 10px; }
@media (max-width: 480px) { .acct__dash span { display: none; } .acct__dash { padding: 6px 9px; margin-right: 4px; } }

/* ==========================================================================
   The student's path on doPhysics.in (hosted pages, 2026-10-01)
   ========================================================================== */
/* the top bar's one way across to the other half of the site: a plain link, never a button */
.bar__link { font-family: var(--f-ui); font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.bar__link:hover { color: var(--ink); background: var(--card); }
@media (max-width: 720px) { .bar__link { display: none; } }

/* the lesson says who wrote it and when, and offers the chapter's first lesson to a visitor */
.lhead__eyebrow > span { color: var(--ink-3); }
.lhead .lhead__by { font-family: var(--f-ui); font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }
.lhead__by a { color: var(--ink-2); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.lhead__new { display: inline-block; margin-top: 12px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-family: var(--f-ui); font-size: 13px; font-weight: 700; text-decoration: none; }
.lhead__new[hidden] { display: none; }

/* the end of a lesson: what the next sitting holds */
.lfoot__keep { font-family: var(--f-ui); font-size: 13px; color: var(--ink-3); margin: 2px 2px 8px; text-align: right; }

/* The Challenge card: an invitation, so it looks unlike everything else in the book. Its colours are its own and do
   not follow the Design lab's theme. Never a price here. */
.chal-slot { margin-top: 18px; }
.chal-slot--home { margin: 14px 0 0; }
.chal-slot[hidden] { display: none; }
.chal {
  --gold: #c9a24a;
  display: block; position: relative; text-decoration: none;
  background: linear-gradient(160deg, #26222a, #121114); color: #efe6d2;
  border: 1px solid var(--gold); border-radius: var(--r, 16px); padding: 20px 20px 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(201, 162, 74, .22);
  font-family: var(--f-ui);
}
.chal__k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.chal__t { font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; color: #fff; margin: 0 0 8px; }
.chal__p { font-size: 14.5px; line-height: 1.45; color: #cfc6b2; margin: 0 0 14px; }
.chal__btn { display: inline-block; padding: 10px 16px; border-radius: 10px; background: linear-gradient(#e8cc82, #c9a24a); color: #1b1505; font-weight: 700; font-size: 15px; text-decoration: none; }
.chal__btn:hover { filter: brightness(1.06); }
.chal__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(201, 162, 74, .3); font-size: 12.5px; color: #b9ae96; }
.chal__later { background: none; border: 0; padding: 4px 2px; color: #b9ae96; font: inherit; text-decoration: underline; cursor: pointer; }
.chal__later:hover { color: #efe6d2; }
.chal__bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; margin: 0 0 8px; }
.chal__bar i { display: block; height: 100%; background: var(--gold); }
.chal--slim { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 16px; }
.chal--slim .chal__k { margin: 0; }
.chal--slim .chal__line { font-size: 13.5px; color: #cfc6b2; }
.chal--slim .chal__go { margin-left: auto; color: var(--gold); font-weight: 700; }
.chal__seal { padding: 2px 9px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
a.chal--slim:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(201, 162, 74, .5); }

/* the hosted home of Understand: the chapter list (src/render/index.js, renderHostHome) */
/* The hosted home (the chapter list) has no rules here: its whole look is the site's /dp-home.css, which the site's
   /challenge links too, so that the two homes are twins (src/render/index.js renderHostHome). */

/* the main button of a lesson's end. `.navcard { color: inherit }` above outranked ui.css's white text, so the next
   lesson's title was dark on the dark card and could not be read (found 2026-10-01). */
.navcard.navcard--next { color: #fff; }
.navcard.navcard--next b { font-size: 17px; }

/* ---------- Physics begins as soon as possible (owner, 2026-10-01) ----------
   The chapter home: a short top, then the lessons. Everything about the chapter's structure opens on demand. */
.hero.hero--tight { padding-top: 18px; padding-bottom: 12px; }
.hero--tight h1 { margin: 10px 0 14px; font-size: clamp(30px, 8vw, 46px); }
.hero--tight .hero__cta { gap: 14px; }
.hero--tight .cprog { margin-top: 0; gap: 8px; font-size: 13px; color: var(--ink-3); }
.hero--tight .cprog .toc__ring { width: 42px; height: 42px; font-size: 11.5px; }
.cmore { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0; padding: 0 var(--gutter); }
.opener.cmore { margin: 0; }
.cmore__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); color: var(--ink-2); font-family: var(--f-ui); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; user-select: none; }
.cmore__chip::-webkit-details-marker { display: none; }
/* ui.css draws every <details> as a boxed "solution" with a round plus sign; a chip is neither */
.cmore__d { margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.cmore__d > summary.cmore__chip { display: inline-flex; padding: 6px 11px; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cmore__d > summary.cmore__chip::before { content: none; display: none; }
.cmore__chip:hover { border-color: var(--ink); color: var(--ink); }
summary.cmore__chip::after { content: ""; width: 6px; height: 6px; margin: -3px 2px 0 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
a.cmore__chip { color: var(--accent); }   /* a link, not an opener: no chevron, and no arrow either, so that four chips make two rows on a phone */
/* an open part takes the full row below the chips; its chip turns into the heading that closes it */
.cmore__d[open] { flex: 0 0 100%; order: 2; }
.cmore__d[open] > summary { background: var(--ink); border-color: var(--ink); color: #fff; }
.cmore__d[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.cmore__body { margin-top: 8px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); }
.cmore__body p { margin: 6px 0 0; }
.cmore__body ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 7px; font-family: var(--f-ui); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.cmore__body .opener__route { margin: 8px 0 4px; }
.h2.h2--lessons { margin-top: 18px; margin-bottom: 10px; }
.sub.sub--after { margin: 12px 0 0; }
.sub--after a { color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (min-width: 720px) { .cmore { max-width: none; margin-left: 0; margin-right: 0; } }

/* The lesson: "What you will learn" is one line until the student opens it. */
details.goals > summary { cursor: pointer; list-style: none; margin-bottom: 0; padding: 0; gap: 0; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
details.goals > summary::before { content: none; display: none; }
details.goals > summary::-webkit-details-marker { display: none; }
details.goals > summary span { margin-left: auto; }
details.goals > summary::after { content: ""; width: 7px; height: 7px; margin: -4px 4px 0 12px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
details.goals[open] > summary { margin-bottom: 8px; }
details.goals[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }

/* The chapter's page opened for its Workbook or its glossary (index.html#workbook, #glossary): reader.js moves that
   one thing into this slot, above the lesson cards. */
.cfocus { margin: 14px 0 0; padding: 0 var(--gutter); }
.cfocus > .wbcard { margin-top: 0; }
.cfocus > .cgloss { padding: 0; }
.cfocus > .cgloss > .h2, .cfocus > .cgloss > .sub { padding-left: 0; padding-right: 0; }
.cfocus > .cgloss > .h2 { margin-top: 4px; }
.cgloss { margin-top: 26px; }
.cgloss__in { padding: 0 var(--gutter); }
.cfocus .cgloss__in { padding: 0; }
@media (min-width: 720px) { .cfocus, .cgloss { max-width: none; margin-left: 0; margin-right: 0; } }

/* ---------- a short bar and a short lesson top (owner, 2026-10-02) ----------
   The bar: the menu button, the mark, the page's ring, and "All chapters". The menu holds the account, the progress
   report and the look of the page; it holds no navigation. */
.bar__chapters { padding: 7px 13px; font-size: 13px; white-space: nowrap; text-decoration: none; }
.menu { display: grid; gap: 0; align-content: start; font-family: var(--f-ui); }
.menu__acct { padding: 4px 2px 14px; }
.menu__acct:empty { display: none; }
.menu .acct { flex-wrap: wrap; gap: 6px 10px; font-size: 14.5px; color: var(--ink); }
.menu .acct__name { display: inline; max-width: 220px; color: var(--ink); text-decoration: none; font-weight: 700; }
.menu .acct__in { display: inline-flex; }
.menu__row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 2px; border-top: 1px solid var(--line); font-family: var(--f-ui); font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: left; text-decoration: none; }
.menu__row:hover { color: var(--accent); }
.menu__row small { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.menu__row > span:last-child { margin-left: auto; color: var(--ink-3); font-weight: 500; }
/* the lesson's top: one quiet line in place of the pills and the separate author line */
.lhead__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; font-family: var(--f-ui); font-size: 13px; color: var(--ink-3); }
.lhead__meta > span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--line-2); }
.lhead .lhead__by { margin: 0; font-size: 13px; }
.lhead h1 { margin-bottom: 12px; }