/* Shared visual layer for every subject guide (public/<slug>/index.html).
   Loaded after each page's inline <style>, so it unifies the look across all
   guides from one file: brand-green hero instead of a different gradient per
   subject, one heading face, underline tabs, and unit rows whose meta,
   progress and read-aloud controls line up in fixed columns. The subject's
   --accent still tints small details (active tab, progress, links). */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
}

:root {
  --brand-bg: #14302a;
  --brand-bg-deep: #0e231e;
  --brand-ink: #eef2ea;
  --brand-muted: rgba(238, 242, 234, .7);
  --brand-line: rgba(238, 242, 234, .14);
  --brand-green: #4fbf85;
}

/* ---------- Hero: one brand look, compact ---------- */
html:root body .hero.hero {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--accent, #4fbf85) 22%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, var(--brand-bg) 0%, var(--brand-bg-deep) 100%) !important;
  padding: 28px 24px 0 !important;
  border-bottom: 1px solid var(--brand-line);
}
html:root body .hero.hero::before,
html:root body .hero.hero::after { display: none !important; }
html body .hero-inner { max-width: 880px; margin: 0 auto; }

html:root body .hero.hero .breadcrumb { font-size: 13px; opacity: .75; margin-bottom: 14px; }
html:root body .hero.hero .breadcrumb a { color: var(--brand-muted); }

html:root body .hero.hero .kicker {
  font-size: 12px !important;
  letter-spacing: .14em;
  color: var(--brand-green) !important;
  margin-bottom: 6px !important;
}
html:root body .hero.hero .kicker-logo { display: none; }

html:root body .hero.hero h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  letter-spacing: -.015em !important;
  line-height: 1.1 !important;
  color: var(--brand-ink) !important;
  margin-bottom: 8px !important;
}
html:root body .hero.hero h1 .grad {
  background: none !important;
  -webkit-text-fill-color: var(--brand-green);
  color: var(--brand-green) !important;
}
html:root body .hero.hero .subtitle {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--brand-muted) !important;
  margin-bottom: 18px !important;
}

/* ---------- Tabs: underline tab bar instead of pill buttons ---------- */
html:root body .hero.hero .nav {
  display: flex;
  align-items: flex-end;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow-x: auto;
  scrollbar-width: none;
}
html:root body .hero.hero .nav::-webkit-scrollbar { display: none; }
html:root body .hero.hero .tab-btn {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--brand-muted) !important;
  font: 600 15px/1 'Inter', system-ui, sans-serif !important;
  padding: 12px 12px 14px !important;
  white-space: nowrap;
  transform: none !important;
}
html:root body .hero.hero .tab-btn:hover { color: var(--brand-ink) !important; background: transparent !important; }
html:root body .hero.hero .tab-btn.active {
  color: var(--brand-ink) !important;
  border-bottom-color: var(--brand-green) !important;
  background: transparent !important;
}
html:root body .hero.hero .tab-btn:focus-visible { outline: 2px solid var(--brand-green); outline-offset: -2px; border-radius: 6px !important; }
html:root body .hero.hero #theme-toggle,
html:root body .hero.hero #dys-toggle,
html:root body .hero.hero #focus-toggle {
  margin-left: auto;
  margin-bottom: 6px;
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: 1px solid var(--brand-line) !important;
  color: var(--brand-muted) !important;
}
html:root body .hero.hero #dys-toggle,
html:root body .hero.hero #focus-toggle { margin-left: 6px; }
html:root body .hero.hero .nav { flex-wrap: nowrap !important; }
html:root body .hero.hero .tablist { display: flex !important; gap: 4px; flex-wrap: nowrap; }

/* Study timer: an inline control at the end of the tab bar, not a floating overlay */
html:root body .hero.hero #sg-timer {
  position: static !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px 8px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  white-space: nowrap;
}
html:root body .hero.hero #sg-timer .sgt-label { display: none; }
html:root body .hero.hero #sgt-time { font: 600 13px/1 'IBM Plex Mono', monospace; color: var(--brand-muted); }
html:root body .hero.hero .sgt-b { width: 28px; height: 28px; border-color: var(--brand-line) !important; color: var(--brand-muted) !important; }

/* ---------- Unit rows: fixed columns, calmer type ---------- */
html body #units .unit { border-radius: 14px; }
html body #units .unit-hd {
  display: grid !important;
  /* 22px column for .unit-drag-handle (added for drag-to-reorder), which
     renders as the unit's first child -- without its own column it was
     grabbing the 1fr slot meant for the title, shoving everything right. */
  grid-template-columns: 22px 1fr auto auto 20px;
  align-items: center;
  column-gap: 14px;
  padding: 16px 18px !important;
}
html body #units .unit-drag-handle { grid-column: 1; }
html body #units .unit-title { grid-column: 2; }
html body #units .unit-progress { grid-column: 3; }
html body #units .unit-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  min-width: 0;
}
html body #units .unit-meta {
  display: block;
  margin: 3px 0 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
}
html body #units .unit-progress { margin: 0 !important; min-width: 60px; justify-content: flex-end; }
html body #units .unit-progress-track { width: 44px; height: 4px; }
html body #units .unit-progress-label { font-size: 11.5px; }
html body #units .unit-tts-btn { grid-column: 4; }
html body #units .chevron {
  display: inline-block !important;
  grid-column: 5;
  font-size: 14px !important;
  color: var(--ink-dim) !important;
}
html body #units .unit.open .chevron { color: var(--accent) !important; }

/* The unit list already sits right below the chips; one compact select is enough. */
html body .filter-row-wrap .filter-row { display: none !important; }
html body .filter-row-wrap .mobile-only-select {
  display: block !important;
  max-width: 260px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: 500 14px 'Inter', system-ui, sans-serif;
}

@media (max-width: 640px) {
  html:root body .hero.hero { padding: 20px 16px 0 !important; }
  html body #units .unit-hd { grid-template-columns: 22px 1fr auto 20px; }
  html body #units .unit-tts-btn { display: none !important; }
  html body #units .chevron { grid-column: 4; }
  html body #units .unit-title { font-size: 17px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html:root body .hero.hero * { animation: none !important; opacity: 1 !important; }
}

/* The study-plan card used to tuck under the tall hero; with the compact hero
   that overlap covered the tabs. Give it normal flow spacing and a quieter look. */
html body #spc-card {
  margin-top: 20px !important;
  box-shadow: none !important;
  border-radius: 12px;
}

/* ---------- Dark theme: brand green-black instead of a per-subject navy ---------- */
html:root[data-theme="dark"] {
  --bg: #0e1c18 !important;
  --surface: #14281f !important;
  --surface-2: #19322a !important;
  --surface-hover: #1d3a30 !important;
  --border: #25443a !important;
  --border-strong: #33584b !important;
  --ink: #eef2ea !important;
  --ink-muted: #b9c6bd !important;
  --ink-dim: #8a9a90 !important;
}
html:root[data-theme="dark"] body { background: var(--bg) !important; }

/* Plan card and toolkit button: neutral surfaces with a brand-green accent,
   not a purple wash that competes with the content. */
html body #spc-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
html body .toolkit-fab {
  background: var(--brand-green) !important;
  color: #0e231e !important;
  box-shadow: 0 6px 20px rgb(0 0 0 / .35) !important;
}

/* ---------- Light theme: the homepage's warm off-white, not a per-subject tint ---------- */
html:root:not([data-theme="dark"]) {
  --bg: #eef1ea !important;
  --surface: #ffffff !important;
  --surface-2: #f5f7f2 !important;
  --surface-hover: #eef3ec !important;
  --border: #d3dbd0 !important;
  --border-strong: #b7c4b3 !important;
  --ink: #1b2a24 !important;
  --ink-muted: #45564d !important;
  --ink-dim: #56665d !important; /* ≥ 5.3:1 on every light surface */
}
html:root:not([data-theme="dark"]) body { background: var(--bg) !important; }

/* ---------- One brand accent on every guide ----------
   Each page still sets a per-subject --accent (purple on Physics, blue on
   Chemistry, ...) and a solid-fill .btn in that color. The subject already
   has its own chalk strip in the header; controls use the brand green so
   every guide reads as one product. Light values keep >= 4.5:1 on white. */
/* Solid fills behind white text (mission banner, filled buttons): 5.3:1. */
html:root { --accent-solid: #1f7a4d !important; }
html:root:not([data-theme="dark"]) {
  --accent: #1f7a4d !important;
  --accent-ink: #155c39 !important;
  --accent-soft: #e3f3ea !important;
  --accent-border: #a9d8bd !important;
}
html:root[data-theme="dark"] {
  --accent: #4fbf85 !important;
  --accent-ink: #a6e3c3 !important;
  --accent-soft: rgb(79 191 133 / .14) !important;
  --accent-border: rgb(79 191 133 / .4) !important;
}

/* Buttons: outlined and one size. The page base is 21px, which blew up any
   button without an inline size (Mistake Log, Challenge a Friend). Solid
   fill is reserved for the selected chip. */
html body .page .btn {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 600;
  padding: 7px 14px !important;
  box-shadow: none !important;
}
html body .page .btn:hover { background: var(--surface-hover) !important; border-color: var(--accent) !important; transform: none; }
html body .page .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html body .page .chip.on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg) !important;
}
html body .diag-btn {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-border) !important;
  color: var(--ink) !important;
}

/* ---------- Toolkit button: labeled pill, not a mystery circle ---------- */
html body .toolkit-fab {
  width: auto !important;
  height: 48px !important;
  padding: 0 18px 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font: 700 14.5px 'Inter', system-ui, sans-serif;
}
html body .toolkit-fab[aria-expanded="true"] { transform: none !important; }

/* ---------- "Why" card after a quiz answer ---------- */
html body #q-exp.q-why {
  border: 1px solid var(--border) !important;
  border-left: 4px solid #d98a3a !important;
  border-radius: 12px !important;
  background: var(--surface-2) !important;
}
html body #q-exp.q-why.q-why-right { border-left-color: var(--accent) !important; }
html body .q-why-hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 8px;
  font-size: 15.5px;
  color: var(--ink);
}
html body .q-why-hd .sage { flex-shrink: 0; }
html body .q-why-hd p { margin: 0; flex: 1; min-width: 0; line-height: 1.45; }

/* ---------- Continue where you left off ---------- */
html body .ss-continue {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: var(--ink);
  font: 500 15px 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
html body .ss-continue b { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .ss-continue:hover { border-color: var(--accent); }
html body .ss-continue:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Unit path: numbered markers joined by a line ---------- */
html body #units.ss-path { position: relative; padding-left: 44px; }
html body #units.ss-path::before {
  content: "";
  position: absolute;
  left: 15px; top: 24px; bottom: 24px;
  width: 2px;
  background: var(--border);
}
html body #units.ss-path > .unit { position: relative; overflow: visible; }
html body #units.ss-path > .unit::before {
  content: var(--n);
  position: absolute;
  left: -44px; top: 22px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink-muted);
  font: 700 13px 'Inter', system-ui, sans-serif;
}
html body #units.ss-path > .unit[data-path="started"]::before { border-color: var(--accent); color: var(--accent); }
html body #units.ss-path > .unit[data-path="done"]::before { border-color: var(--accent); background: var(--accent); color: var(--bg); }
@media (max-width: 640px) {
  html body #units.ss-path { padding-left: 34px; }
  html body #units.ss-path::before { left: 11px; }
  html body #units.ss-path > .unit::before { left: -34px; width: 24px; height: 24px; font-size: 11px; top: 18px; }
}

/* ---------- Streak / XP pill (signed-in only) ---------- */
html:root body .hero.hero .ss-stats-pill {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font: 600 13px 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  text-decoration: none;
}
html:root body .hero.hero .ss-stats-pill:hover { border-color: var(--brand-green); }

/* ---------- Flashcard loading state ---------- */
html body #scene.ss-loading .front .term::after {
  content: "Loading cards…";
  color: var(--ink-dim);
  font-size: 16px;
}
html body #scene { touch-action: pan-y; }

@media (max-width: 640px) {
  /* Icon-only toolkit button on phones so it doesn't cover content; the
     aria-label still names it. */
  html body .toolkit-fab { width: 48px !important; padding: 0 !important; justify-content: center; }
  html body .toolkit-fab .toolkit-fab-label { display: none; }
}
html body .page .btn { white-space: nowrap; }
/* The Know it / Still learning row has inline display:flex without wrap. */
html body #view-cards .fc-nav + div { flex-wrap: wrap; }

/* Seven tabs don't fit beside the theme/focus/timer controls; let the tab
   list scroll sideways instead of pushing the controls out of the bar. */
html:root body .hero.hero .tablist {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
html:root body .hero.hero .tablist::-webkit-scrollbar { display: none; }
html:root body .hero.hero .tablist .tab-btn { flex-shrink: 0; }
html:root body .hero.hero .nav > :not(.tablist) { flex-shrink: 0; }

/* ---------- Free textbook card (end of the Study Guide tab) ---------- */
html body .ss-textbook {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}
html body .ss-textbook b { color: var(--ink); }
html body .ss-textbook a { display: inline-block; margin-top: 6px; color: var(--accent); font-weight: 700; }
html body #units .unit-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
html body .q-review { margin: 12px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font-size: 14.5px; color: var(--ink-muted); }
.q-report{display:block;margin-top:.6rem;background:none;border:0;padding:.25rem 0;min-height:24px;color:var(--ink-dim);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer}
.q-report:disabled{text-decoration:none;cursor:default}

/* ---------- Purposeful motion: answer feedback ----------
   Transform/opacity only, short, and off entirely for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  html body .q-opt.correct { animation: ssOptPop .32s ease; }
  html body .q-opt.wrong { animation: ssOptNudge .32s ease; }
  html body .q-exp.show { animation: ssViewIn .25s ease both; }
}
@keyframes ssViewIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes ssOptPop { 50% { transform: scale(1.02); } }
@keyframes ssOptNudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* The pages' own tab and unit fade-ins ignore reduced motion; switch them off here. */
@media (prefers-reduced-motion: reduce) {
  html body .view.active, html body .unit-body, html body .scene .inner { animation: none !important; transition: none !important; }
}

/* ---------- Diagram questions: figures and drawn answer choices ----------
   Figures and SVG options draw with currentColor, so they follow the theme. */
html body .q-fig { margin: 10px 0 14px; display: flex; justify-content: center; }
html body .q-fig svg { max-width: 100%; height: auto; color: var(--ink); }
html body .q-opt svg.vec { display: block; max-width: 100%; height: auto; }
html body .q-opt:has(svg.vec) { justify-content: flex-start; padding-top: 10px !important; padding-bottom: 10px !important; }
html body svg.vec text { font: 600 13px/1 'Inter', system-ui, sans-serif; fill: currentColor; }
html body .qb-opts svg.vec, html body .q-fig svg.vec { color: var(--ink); }

/* Links inside concept notes (e.g. the Watch: video lessons): brand green in
   both themes instead of the browser's default blue/purple. */
html body .c-list a, html body .c-text a,
html body .c-list a:visited, html body .c-text a:visited {
  color: var(--accent-ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
html body .c-list a:hover, html body .c-text a:hover { text-decoration-thickness: 2px; }
html body .c-list a:focus-visible, html body .c-text a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- Search result deep-link: flash the matched concept/formula
   block so landing mid-unit is obvious, not just "the page scrolled". ---------- */
html body .ss-search-hit {
  animation: ssSearchHitFlash 2.2s ease;
  border-radius: var(--radius-sm);
}
@keyframes ssSearchHitFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; background-color: transparent; }
  12% { box-shadow: 0 0 0 3px var(--accent-bright); background-color: color-mix(in srgb, var(--accent) 14%, transparent); }
  70% { box-shadow: 0 0 0 3px var(--accent-bright); background-color: color-mix(in srgb, var(--accent) 14%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  html body .ss-search-hit { animation: none; box-shadow: 0 0 0 3px var(--accent-bright); background-color: color-mix(in srgb, var(--accent) 14%, transparent); }
}

/* ---------- Drag-to-reorder units: a grip handle in the unit header, and
   visual feedback while a row is being dragged/dropped over. ---------- */
html body .unit { position: relative; }
html body .unit-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 2px; flex-shrink: 0;
  color: var(--ink-dim); cursor: grab; border-radius: 6px;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
html body .unit-drag-handle:hover { color: var(--ink); background: var(--surface-2); }
html body .unit-drag-handle:active { cursor: grabbing; }
html body .unit.ss-dragging { opacity: .45; }
html body .unit.ss-drop-before { box-shadow: inset 0 3px 0 0 var(--accent-bright); }
html body .unit.ss-drop-after { box-shadow: inset 0 -3px 0 0 var(--accent-bright); }
html body .unit-order-reset {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-muted);
  background: none; border: 1px dashed var(--border); border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
}
html body .unit-order-reset:hover { color: var(--ink); border-color: var(--ink-dim); }

/* ---------- Dyslexia-friendly reading mode (html[data-dys]) ---------- */
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url('/fonts/atkinson-400-latin.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url('/fonts/atkinson-700-latin.woff2') format('woff2')}
#dys-toggle{display:flex;align-items:center;justify-content:center;cursor:pointer}
#dys-toggle svg{width:17px;height:17px}
html:root body .hero.hero #dys-toggle[aria-pressed="true"]{background:var(--brand-green)!important;border-color:var(--brand-green)!important;color:#0e231e!important}
/* Math (MathJax) keeps its own fonts; everything else switches. */
/* :not(#x) adds ID-level specificity so this beats the page's #units / .hero rules. */
html[data-dys] body :not(mjx-container):not(mjx-container *):not(#x){
  font-family:'Atkinson Hyperlegible',Verdana,sans-serif!important;
  font-style:normal!important;
  letter-spacing:.04em!important;
  word-spacing:.12em!important;
  text-align:left!important;
}
html[data-dys] body :is(p,li,.concept,.trap,.fm,.dcap,td){line-height:1.8!important}
html[data-dys] body :is(p,li){max-width:70ch}

/* ---------- Study plan: add-to-calendar row ---------- */
.spc-cal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:14px 0 6px}
.spc-cal label{font-size:14px;font-weight:600}
.spc-cal input[type="time"]{font:inherit;padding:6px 8px;border:1px solid var(--border-strong,var(--border));border-radius:8px;background:var(--surface,transparent);color:inherit}
.spc-cal-btn{font:inherit;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;border:0;cursor:pointer;background:var(--accent-solid,var(--accent));color:#fff}
.spc-cal-btn:hover{filter:brightness(1.08)}
.spc-cal-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.spc-cal-note{flex-basis:100%;font-size:13px;color:var(--ink-muted,inherit);min-height:1em}

/* ---------- Spaced repetition: due chip + tab badge ---------- */
.fc-due-chip{display:block;margin:12px auto 0;font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid var(--border-strong,var(--border));background:transparent;color:var(--ink-muted,inherit);cursor:default}
.fc-due-chip.has-due{cursor:pointer;background:var(--accent-solid,var(--accent));border-color:var(--accent);color:#fff}
.fc-due-chip.has-due:hover{filter:brightness(1.08)}
.fc-due-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-due-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--accent-solid,var(--accent));color:#fff;font-size:11px;font-weight:700;vertical-align:middle}

/* ---------- Read-aloud voice dialog ---------- */
.ss-voice-dlg{position:fixed;inset:0;margin:auto;height:fit-content;width:min(440px,92vw);box-sizing:border-box;border:1px solid var(--border-strong,var(--border));border-radius:14px;padding:22px 24px;max-width:min(440px,92vw);background:var(--surface,var(--bg));color:var(--ink,inherit);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ss-voice-dlg::backdrop{background:rgba(0,0,0,.5)}
.ss-voice-dlg h2{margin:0 0 14px;font-size:20px}
.ss-voice-dlg label{display:flex;justify-content:space-between;margin:12px 0 6px;font-size:14px;font-weight:600}
.ss-voice-dlg select,.ss-voice-dlg input[type="range"]{width:100%;font:inherit;padding:6px 8px;border:1px solid var(--border-strong,var(--border));border-radius:8px;background:var(--bg);color:inherit}
.ss-voice-dlg input[type="range"]{padding:0;accent-color:var(--accent)}
.ss-voice-tip{font-size:13px;line-height:1.5;color:var(--ink-muted,inherit);margin:14px 0 0}
.ss-voice-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.ss-voice-actions button{font:inherit;font-weight:600;font-size:14px;padding:8px 16px;border-radius:999px;border:1px solid var(--border-strong,var(--border));background:transparent;color:inherit;cursor:pointer}
.ss-voice-actions button.primary{background:var(--accent-solid,var(--accent));border-color:var(--accent);color:#fff}
.ss-voice-actions button:focus-visible,.ss-voice-dlg select:focus-visible,.ss-voice-dlg input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Diagram captions: the base #5c6a63 is unreadable on the dark diagram background. */
html body .diagram .dcap{color:var(--ink-muted,var(--ink-dim,#5c6a63))}

/* ---------- Pomodoro mode on the study timer ---------- */
html:root body .hero.hero .sgt-mode[aria-pressed="true"] { background: var(--brand-green) !important; border-color: var(--brand-green) !important; color: #0e231e !important; }
html:root body .hero.hero #sgt-time[data-phase="break"] { color: var(--brand-green); }

/* ---------- Sticky "next concept" bar ---------- */
.unit .concept{scroll-margin-top:140px}
.ss-cnav{position:fixed;z-index:60;bottom:20px;left:50%;width:min(560px,calc(100vw - 300px));display:flex;align-items:center;gap:10px;box-sizing:border-box;padding:8px 8px 8px 16px;background:var(--surface);border:1px solid var(--border-strong,var(--border));border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.28);transform:translate(-50%,0);transition:transform .2s ease,opacity .2s ease}
.ss-cnav[hidden]{display:flex;opacity:0;transform:translate(-50%,24px);pointer-events:none;visibility:hidden}
.ss-cnav-where{flex:1;min-width:0;font-size:14px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-cnav-where b{color:var(--ink);font-weight:700}
.ss-cnav button{min-height:44px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2,var(--surface));color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:0 16px}
.ss-cnav button:hover{border-color:var(--accent)}
.ss-cnav .ss-cnav-next{background:var(--accent-solid,var(--accent));border-color:var(--accent);color:#fff;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-cnav .ss-cnav-prev{width:44px;padding:0;flex:none}
@media(max-width:900px){.ss-cnav{width:calc(100vw - 106px);left:16px;bottom:84px;transform:none}.ss-cnav[hidden]{transform:translateY(24px)}.ss-cnav-where{display:none}.ss-cnav .ss-cnav-next{max-width:none;flex:1}}
@media(prefers-reduced-motion:reduce){.ss-cnav{transition:none}}
@media print{.ss-cnav{display:none!important}}
html.ss-focus-mode .ss-cnav{display:none}

/* ---------- Flashcards: swipe-to-rate + bigger rating buttons ---------- */
#view-cards .scene{touch-action:pan-y;position:relative;user-select:none;-webkit-user-select:none}
#view-cards .scene.swiping{transition:none;will-change:transform}
#view-cards .scene.swipe-out{transition:transform .18s ease,opacity .18s ease}
#view-cards .scene::after{content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;opacity:0;border:3px solid transparent}
#view-cards .scene.swiping::after{opacity:var(--sw,0)}
#view-cards .scene[data-dir="known"]::after{border-color:#7fc98f;background:rgba(127,201,143,.16)}
#view-cards .scene[data-dir="learning"]::after{border-color:#e07a82;background:rgba(224,122,130,.16)}
html body #view-cards button[onclick^="rateFC"]{flex:1 1 150px;max-width:240px;min-height:56px;font-size:19px;font-weight:700}
@media(prefers-reduced-motion:reduce){#view-cards .scene.swipe-out{transition:none}}

/* ---------- Phones: the seven tabs get their own full-width row ----------
   Beside the theme / focus / timer controls only ~58px of the tab strip was visible at 375px and nothing hinted that more tabs
   existed. Below 640px the tab list drops to its own row, edge-to-edge, with a fade on the right to show it scrolls. */
@media (max-width: 640px) {
  html:root body .hero.hero .nav { flex-wrap: wrap !important; row-gap: 8px; }
  html:root body .hero.hero .tablist {
    order: 3;
    flex: 1 1 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    scroll-snap-type: x proximity;
  }
  html:root body .hero.hero .tablist .tab-btn { scroll-snap-align: center; }
}

/* Native controls and scrollbars follow the page theme (A11Y-19). */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* "Check yourself" block at the end of each unit (GUIDE-10). */
.unit-check{margin:18px 0 4px;padding:14px 16px;border:1px dashed var(--border-strong,var(--border));border-radius:12px}
.unit-check-h{margin:0 0 10px;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink,var(--accent))}
.unit-check-q{margin-bottom:14px}
.unit-check-text{margin:0 0 8px;font-weight:600}
.unit-check-opts{display:grid;gap:6px}
.unit-check-opt{text-align:left;padding:10px 12px;min-height:44px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.unit-check-opt:hover:not(:disabled){border-color:var(--accent)}
.unit-check-opt.correct{border-color:var(--success);background:var(--success-soft)}
.unit-check-opt.wrong{border-color:var(--danger);background:var(--danger-soft)}
.unit-check-opt:disabled{cursor:default}
.unit-check-fb{margin:8px 0 0;font-size:14px;color:var(--ink-muted)}

/* Notched phones (MOB-3): the page extends under the notch/home indicator (viewport-fit=cover), so keep content and
   the fixed controls clear of them. env() is 0 everywhere else. */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.back-to-top{bottom:calc(22px + env(safe-area-inset-bottom))}
.toolkit-fab{bottom:calc(90px + env(safe-area-inset-bottom))}
.toolkit-menu{bottom:calc(156px + env(safe-area-inset-bottom))}
.ss-cnav{bottom:calc(20px + env(safe-area-inset-bottom))}
@media(max-width:900px){
  .ss-cnav{bottom:calc(84px + env(safe-area-inset-bottom))}
  .toolkit-fab{bottom:calc(82px + env(safe-area-inset-bottom))}
  .toolkit-menu{bottom:calc(148px + env(safe-area-inset-bottom))}
  #cbot-panel{max-height:calc(100dvh - 120px)}
}