/* ===========================================================================
   house.css — the toolkit's house style (foundation layer)
   ---------------------------------------------------------------------------
   One set of tokens for the whole site, in the startup scene's language:
   near-black, gold, Oswald for display titles only, Inter for everything else.
   Dark only. Loaded after every other stylesheet; it re-points the older token
   sets (the legacy background, maroon and gold tokens, and the v2 layer) at the house palette so
   existing screens move to it at once, then sets the site-wide base.

   Unit identity: html[data-unit="1".."9"] (set by house.js from the active
   unit) sets --unit to that unit's flame-test colour. Use --unit only for unit
   identity (cards, progress, the background tint, transitions), never for body
   text or buttons.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* ---- surfaces ---- */
  --h-ink: #0B0A09;          /* page */
  --h-panel: #141210;        /* raised surface */
  --h-panel-2: #1B1815;      /* raised, hover / nested */
  --h-panel-3: #24201B;      /* controls */
  --h-line: rgba(242,191,94,.14);
  --h-line-2: rgba(242,191,94,.30);

  /* ---- text ---- */
  --h-text: #EDE6D8;
  --h-text-2: #CFC6B6;
  --h-muted: #A39A8B;        /* 6.9:1 on ink */

  /* ---- gold ---- */
  --h-gold-1: #FFE09A; --h-gold-2: #F2BF5E; --h-gold-3: #C7832C;
  --h-gold: var(--h-gold-2);
  --h-gold-grad: linear-gradient(180deg, var(--h-gold-1) 0%, var(--h-gold-2) 52%, var(--h-gold-3) 100%);
  --h-on-gold: #1A1206;

  /* ---- states (separate from the accent) ---- */
  --h-good: #7ED3A2; --h-bad: #F0846E; --h-info: #8FB8E8;

  /* ---- unit flame-test colours ---- */
  --u1: #F2B33D;  /* sodium amber      Atomic Structure */
  --u2: #2BC4AE;  /* copper teal       Compound Structure */
  --u3: #E2475B;  /* strontium crimson Substances & Mixtures */
  --u4: #B78CF0;  /* potassium lilac   Chemical Reactions */
  --u5: #8FD45E;  /* barium green      Kinetics */
  --u6: #F07138;  /* calcium orange    Thermochemistry */
  --u7: #7E86F5;  /* cesium violet     Equilibrium */
  --u8: #3AA3F0;  /* CuCl2 blue        Acids & Bases */
  --u9: #4EDB7E;  /* boron green       Thermodynamics & Electrochemistry */
  --unit: var(--h-gold-2);

  /* ---- type ---- */
  --h-display: Oswald, "Arial Narrow", Impact, sans-serif;
  --h-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --h-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- shape ---- */
  --h-radius: 14px; --h-radius-sm: 10px; --h-pill: 999px;
  --h-tap: 44px;

  /* ---- older token sets, re-pointed ---- */
  --black: var(--h-ink);
  --bg-dark: var(--h-ink);
  --bg-card: var(--h-panel);
  --bg-card-hover: var(--h-panel-2);
  --text-primary: var(--h-text);
  --text-secondary: var(--h-text-2);
  --text-muted: var(--h-muted);
  --gold: var(--h-gold-2);
  --gold-light: var(--h-gold-1);
  --gold-dark: var(--h-gold-3);
  /* maroon is retired: its surfaces become warm dark bronze, readable under white text */
  --maroon: #3A2A17;
  --maroon-dark: #241A0F;
  --maroon-light: #4A3620;
  --success: var(--h-good); --error: var(--h-bad); --info: var(--h-info);
  --v2-canvas: var(--h-ink);
  --v2-surface: var(--h-panel);
  --v2-surface-raised: var(--h-panel-2);
  --v2-surface-soft: var(--h-panel-2);
  --v2-text: var(--h-text);
  --v2-muted: var(--h-muted);
  --v2-border: var(--h-line);
  --v2-maroon: var(--maroon);
  --v2-maroon-strong: var(--maroon-dark);
  --v2-gold: var(--h-gold-2);
  --v2-gold-text: var(--h-gold-1);
  --v2-focus: var(--h-gold-1);
  --v2-shadow: none;
  --v2-radius: var(--h-radius);
}
html[data-unit="1"] { --unit: var(--u1); } html[data-unit="2"] { --unit: var(--u2); } html[data-unit="3"] { --unit: var(--u3); }
html[data-unit="4"] { --unit: var(--u4); } html[data-unit="5"] { --unit: var(--u5); } html[data-unit="6"] { --unit: var(--u6); }
html[data-unit="7"] { --unit: var(--u7); } html[data-unit="8"] { --unit: var(--u8); } html[data-unit="9"] { --unit: var(--u9); }

/* ===== base =====
   The atmosphere lives on <html> and body stays transparent, so the lattice layer (body::before,
   z-index -1) sits above the page colour and below all content without positioning anything else. */
html {
  background-color: var(--h-ink);
  /* the intro's room: maroon haze high up, warm light under it, and the unit's flame very faintly */
  background-image:
    radial-gradient(80% 520px at 50% -140px, rgba(123,31,46,.30), transparent 70%),
    radial-gradient(60% 420px at 50% -60px, color-mix(in srgb, var(--unit) 10%, transparent), transparent 70%),
    radial-gradient(50% 340px at 50% 0, rgba(242,191,94,.05), transparent 70%);
  background-repeat: no-repeat;
}
html body {
  font-family: var(--h-sans); color: var(--h-text); background: transparent;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";   /* Inter: single-storey a, open digits */
}
/* the crystal: a barely-there hexagonal lattice behind the top of every page, tinted by the unit */
html body::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 560px; z-index: -1; pointer-events: none;
  background-color: color-mix(in srgb, var(--unit) 70%, var(--h-gold-2));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cg fill='none' stroke='black' stroke-width='.7'%3E%3Cpath d='M14 0 28 8.08v16.17L14 32.33 0 24.25V8.08Z'/%3E%3Cpath d='M14 32.33V48.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 28px 48.5px repeat,
                linear-gradient(180deg, #000 0%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cg fill='none' stroke='black' stroke-width='.7'%3E%3Cpath d='M14 0 28 8.08v16.17L14 32.33 0 24.25V8.08Z'/%3E%3Cpath d='M14 32.33V48.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 28px 48.5px repeat,
        linear-gradient(180deg, #000 0%, transparent 100%);
  opacity: .07;
}
::selection { background: rgba(242,191,94,.35); color: #fff; }

/* the page column: no panel behind the page (it read as a card holding cards) */
html body .content-area { background: transparent; box-shadow: none; border: 0; }
html body .unit-panel, html body .subtab-panel { background: transparent; }

/* ===== type =====
   Oswald is for display titles only. Every other heading and control is Inter. */
html body :is(h2, h3, h4, h5, h6, button, label, summary, legend, th, select, input, textarea, .btn, .subtab, .mode-btn,
             .tool-header, .tool-subtitle, .section-label, .how-to-use summary, .ced-topic-kicker, .student-eyebrow, .ouc-name, .ouc-number):not(.h-display, .tool-title) {
  font-family: var(--h-sans) !important;
}
html body :is(.tool-title, .ced-topic-page > header h1, .ced-topic-page h1, .student-topic-heading h1, .student-home-heading h1, .student-page-heading h1, .h-display) {
  font-family: var(--h-display) !important; font-weight: 700; letter-spacing: .005em; text-transform: none;
  background: var(--h-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-wrap: balance;
  padding-bottom: .1em;   /* gradient text is clipped to the line box; tight leading would cut off descenders */
}
html body h2 { letter-spacing: -.01em; text-wrap: balance; }
html body :is(code, kbd, samp, pre, .mono) { font-family: var(--h-mono) !important; }

/* native sliders, checkboxes, radios and progress bars take the gold, not the browser's blue */
html body :is(input, progress, meter) { accent-color: var(--h-gold-2); }

/* ===== focus: one visible ring everywhere ===== */
html body :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--h-gold-1) !important; outline-offset: 3px !important; border-radius: 6px;
}

/* ===== scrollbars: thin and warm, never the bright native bar ===== */
html { scrollbar-color: rgba(242,191,94,.28) transparent; scrollbar-width: thin; }
html ::-webkit-scrollbar { width: 10px; height: 10px; }
html ::-webkit-scrollbar-thumb { background: rgba(242,191,94,.22); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
html ::-webkit-scrollbar-thumb:hover { background-color: rgba(242,191,94,.4); }
html ::-webkit-scrollbar-track { background: transparent; }

/* ===== footer ===== */
html body .site-footer {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px;
  margin-top: 48px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px));
  background: transparent; border: 0; box-shadow: none; color: var(--h-muted);
  font: 400 .85rem/1.5 var(--h-sans);
}
html body .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--h-line-2) 22%, var(--h-line-2) 78%, transparent);
}
html body .site-footer :is(.footer-info-btn, .footer-donate) {
  display: inline-flex; align-items: center; min-height: var(--h-tap); padding: 0 12px; border-radius: var(--h-pill);
  color: var(--h-gold-1) !important; background: transparent; border: 0; text-decoration: none;
  font: 500 .85rem/1 var(--h-sans); cursor: pointer; transition: background-color .2s;
}
html body .site-footer :is(.footer-info-btn, .footer-donate):hover { background: rgba(242,191,94,.08); }

/* ===== dark only: the colour-mode control is gone ===== */
html body .theme-toggle-wrapper { display: none !important; }

/* ===========================================================================
   NAVIGATION (house-nav.js)
   =========================================================================== */
.h-display { font: 700 clamp(2.2rem, 5vw, 3.6rem)/1.04 var(--h-display); margin: 0; }
.h-flame { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--unit); box-shadow: 0 0 10px var(--unit); flex: none; }
.h-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 .74rem/1.2 var(--h-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--h-muted); }

/* ---- the switcher bar (replaces the topic pills) ---- */
html body #subtabBar.h-bar-ready {
  position: sticky; top: 68px; z-index: 900; display: block; min-height: 0; overflow: visible;   /* the old bar scrolled sideways, which clipped the menu */
  padding: 0 clamp(16px, 3vw, 40px); border: 0; box-shadow: none;
  background: rgba(11,10,9,.80); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
}
html body #subtabBar.h-bar-ready::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--h-line) 22%, var(--h-line) 78%, transparent); }
.h-bar { display: flex; align-items: center; gap: 8px; min-height: 56px; max-width: 1480px; margin: 0 auto; }
.h-bar-unit {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--h-tap); padding: 0 14px 0 8px; margin-left: -8px;
  border-radius: var(--h-pill); color: var(--h-text); text-decoration: none; font: 600 .9rem/1 var(--h-sans); min-width: 0;
  transition: background-color .2s;
}
.h-bar-unit svg { width: 18px; height: 18px; color: var(--h-muted); flex: none; }
.h-bar-unit:hover { background: rgba(255,255,255,.05); }
.h-bar-unit-name { color: var(--h-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-switch { position: relative; margin-left: auto; min-width: 0; }
.h-switch-btn {
  display: inline-flex; align-items: center; gap: 10px; max-width: min(560px, 62vw); min-height: var(--h-tap); padding: 0 14px 0 18px;
  border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: rgba(242,191,94,.05); color: var(--h-text); cursor: pointer;
  font: 500 .9rem/1 var(--h-sans); transition: background-color .2s, border-color .2s;
}
.h-switch-btn:hover, .h-switch-btn[aria-expanded="true"] { background: rgba(242,191,94,.10); border-color: rgba(242,191,94,.55); }
.h-switch-btn svg { width: 16px; height: 16px; color: var(--h-gold-2); flex: none; transition: transform .25s; }
.h-switch-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.h-switch-label { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; }
.h-switch-k { font: 600 .66rem/1 var(--h-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--h-muted); }
.h-switch-label b { color: var(--h-gold-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.h-switch-of { color: var(--h-muted); font-size: .82rem; }
.h-switch-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.h-switch-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto;
  padding: 8px; border: 1px solid var(--h-line-2); border-radius: var(--h-radius); background: rgba(20,18,16,.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.55);
  animation: h-menu-in .22s cubic-bezier(.25,1,.5,1);
}
@keyframes h-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.h-menu-head { margin: 10px 10px 6px; font: 600 .66rem/1 var(--h-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--h-muted); }
.h-menu-item {
  display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: var(--h-tap); padding: 10px 12px; border: 0; border-radius: var(--h-radius-sm);
  background: none; color: var(--h-text-2); text-align: left; font: 500 .92rem/1.35 var(--h-sans); cursor: pointer;
}
.h-menu-item b { flex: none; min-width: 2.4rem; color: var(--h-gold-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.h-menu-item b.h-menu-lab { font: 600 .66rem/1.6 var(--h-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--h-muted); }
.h-menu-item:hover, .h-menu-item:focus-visible { background: rgba(242,191,94,.08); color: var(--h-text); }
.h-menu-item[aria-current="true"] { background: rgba(242,191,94,.12); color: var(--h-gold-1); }
/* the old controls stay in the DOM for the engines, but are superseded */
html body .ced-topic-nav, html body .student-back { display: none !important; }

/* ---- one tab style for every topic and lab: a segmented control ---- */
html body :is(.ced-topic-switch, .student-topic-tabs) {
  display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 28px; border: 1px solid var(--h-line); border-radius: var(--h-pill);
  background: rgba(20,18,16,.7); border-bottom: 1px solid var(--h-line);
}
html body :is(.ced-topic-switch, .student-topic-tabs) button {
  min-height: 40px; padding: 0 20px; margin: 0; border: 0; border-radius: var(--h-pill); background: transparent; box-shadow: none;
  color: var(--h-muted); font: 600 .92rem/1 var(--h-sans) !important; letter-spacing: .01em; cursor: pointer;
  transition: color .2s, background-color .25s;
}
html body :is(.ced-topic-switch, .student-topic-tabs) button:hover { color: var(--h-text); }
html body :is(.ced-topic-switch, .student-topic-tabs) button[aria-selected="true"] {
  color: var(--h-on-gold); background: var(--h-gold-grad); box-shadow: 0 2px 14px rgba(242,191,94,.25);
}
html body .ced-topic-page > header { border-bottom: 0; }
html body .ced-topic-page > header::after { display: none; }

/* ---- Previous / Next ---- */
.h-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; margin: 56px 0 8px; }
.h-next > button {
  display: flex; align-items: center; gap: 16px; min-height: 84px; padding: 18px 22px; min-width: 0;
  border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-panel); color: var(--h-text); text-align: left; cursor: pointer;
  transition: border-color .25s, background-color .25s, transform .25s cubic-bezier(.25,1,.5,1);
}
.h-next > button > span { display: grid; gap: 6px; min-width: 0; }
.h-next svg { width: 22px; height: 22px; flex: none; color: var(--h-gold-2); transition: transform .25s cubic-bezier(.25,1,.5,1); }
.h-next .h-k { font: 600 .68rem/1 var(--h-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--h-muted); }
.h-next .h-t { font: 600 1.05rem/1.3 var(--h-sans); overflow: hidden; text-overflow: ellipsis; }
.h-next .h-nextcard { justify-content: space-between; border-color: color-mix(in srgb, var(--unit) 45%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--unit) 12%, var(--h-panel)), var(--h-panel) 70%); }
.h-next .h-nextcard .h-t { font: 700 1.35rem/1.15 var(--h-display); letter-spacing: .005em; color: var(--h-gold-1); }
.h-next > button:hover { border-color: rgba(242,191,94,.55); transform: translateY(-2px); }
.h-next .h-nextcard:hover svg { transform: translateX(4px); }
.h-next .h-prev:hover svg { transform: translateX(-4px); }
@media (max-width: 680px) { .h-next { grid-template-columns: 1fr; } .h-next .h-prev { order: 2; } }

/* ---- unit page ---- */
html body .h-unit.active { display: block; }
html body .h-unit { display: none; max-width: 1040px; margin: 0 auto; padding-bottom: 24px; }
.h-unit-hero { display: grid; gap: 16px; justify-items: start; padding: 8px 0 40px; }
.h-back { display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-tap); padding: 0 12px 0 6px; margin-left: -6px; border-radius: var(--h-pill); color: var(--h-muted); text-decoration: none; font: 500 .9rem/1 var(--h-sans); }
.h-back svg { width: 18px; height: 18px; }
.h-back:hover { color: var(--h-text); background: rgba(255,255,255,.05); }
.h-unit-hero .h-display { background: var(--h-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-wrap: balance; max-width: 18ch; padding-bottom: .1em; }
.h-unit-meta { margin: 0; color: var(--h-text-2); font-size: 1rem; }
.h-meter { width: min(420px, 100%); height: 4px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.h-meter i { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--unit) 70%, #fff), var(--unit)); box-shadow: 0 0 12px var(--unit); }
.h-cta {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px; margin-top: 8px; padding: 0 22px 0 24px; border: 0; border-radius: var(--h-pill);
  background: var(--h-gold-grad); color: var(--h-on-gold); font: 600 1rem/1.2 var(--h-sans); cursor: pointer; text-align: left;
  box-shadow: 0 8px 30px rgba(242,191,94,.22); transition: transform .25s cubic-bezier(.25,1,.5,1), box-shadow .25s;
}
.h-cta svg { width: 20px; height: 20px; flex: none; transition: transform .25s cubic-bezier(.25,1,.5,1); }
.h-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(242,191,94,.3); }
.h-cta:hover svg { transform: translateX(4px); }
.h-unit h2 { margin: 0 0 16px; font: 600 .74rem/1.2 var(--h-sans) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--h-muted); }
.h-path ol { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 8px; }
.h-path ol::before { content: ""; position: absolute; left: 31px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--unit) 60%, transparent), var(--h-line) 80%); }
.h-step {
  position: relative; display: flex; align-items: center; gap: 18px; width: 100%; min-height: 72px; padding: 12px 18px 12px 10px;
  border: 1px solid transparent; border-radius: var(--h-radius); background: transparent; color: var(--h-text); text-align: left; cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.h-step:hover { background: var(--h-panel); border-color: var(--h-line); }
.h-hex { position: relative; display: grid; place-items: center; width: 44px; height: 50px; flex: none; }
.h-hex svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-hex path { fill: var(--h-ink); stroke: color-mix(in srgb, var(--unit) 75%, transparent); stroke-width: 1.5; transition: fill .25s; }
.h-step:hover .h-hex path { fill: color-mix(in srgb, var(--unit) 18%, var(--h-ink)); }
.h-hex b { position: relative; font: 700 .86rem/1 var(--h-sans); color: var(--h-text); font-variant-numeric: tabular-nums; }
.h-step-text { display: grid; gap: 4px; min-width: 0; flex: 1; }
.h-step-title { font: 600 1.06rem/1.3 var(--h-sans); }
.h-state { font: 500 .8rem/1.2 var(--h-sans); color: var(--h-muted); }
.h-state.is-done { color: var(--h-good); }
.h-step-go svg, .h-lab-go svg { width: 20px; height: 20px; color: var(--h-muted); transition: transform .25s cubic-bezier(.25,1,.5,1), color .25s; }
.h-step:hover .h-step-go svg, .h-lab:hover .h-lab-go svg { transform: translateX(4px); color: var(--h-gold-2); }
.h-labs { margin-top: 48px; }
.h-lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.h-lab {
  position: relative; display: grid; gap: 8px; align-content: start; min-height: 132px; padding: 18px 18px 44px;
  border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-panel); color: var(--h-text); text-align: left; cursor: pointer;
  transition: border-color .25s, transform .25s cubic-bezier(.25,1,.5,1);
}
.h-lab:hover { border-color: rgba(242,191,94,.5); transform: translateY(-2px); }
.h-lab-kind { font: 600 .66rem/1 var(--h-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--unit); }
.h-lab-title { font: 600 1.02rem/1.3 var(--h-sans); }
.h-lab-topics { font-size: .82rem; color: var(--h-muted); }
.h-lab-go { position: absolute; right: 16px; bottom: 14px; }

/* ===========================================================================
   HOME (house-home.js)
   =========================================================================== */
html body .student-home-heading { max-width: 860px; margin: 40px auto 56px; text-align: center; }
html body .student-home-heading .student-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .74rem/1.2 var(--h-sans); letter-spacing: .22em; color: var(--h-muted); }
html body .student-home-heading .student-eyebrow::before, html body .student-home-heading .student-eyebrow::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--h-line-2)); }
html body .student-home-heading .student-eyebrow::after { transform: scaleX(-1); }
html body .student-home-heading h1 { font-size: clamp(3rem, 8vw, 5.6rem) !important; line-height: 1 !important; letter-spacing: .005em !important; margin: 18px 0 18px !important; filter: drop-shadow(0 0 28px rgba(242,191,94,.18)); }
html body .student-home-heading p { font-size: 1.12rem; color: var(--h-text-2); }
html body .student-topic-search {
  position: relative; align-items: center; max-width: 640px; margin: 34px auto 0; padding: 6px 6px 6px 48px;
  border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: rgba(20,18,16,.75);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0,0,0,.35);
  transition: border-color .2s, box-shadow .2s;
}
html body .student-topic-search:focus-within { border-color: rgba(242,191,94,.6); box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 0 4px rgba(242,191,94,.10); }
html body .student-topic-search .h-search-icon { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--h-muted); }
html body .student-topic-search input { font: 400 1rem/1.2 var(--h-sans); padding: 12px 8px; color: var(--h-text); }
html body .student-topic-search input::placeholder { color: var(--h-muted); }
html body .student-topic-search input:focus-visible { outline: none !important; }
html body .student-topic-search button { min-height: var(--h-tap); padding: 0 22px; border-radius: var(--h-pill); background: var(--h-gold-grad); color: var(--h-on-gold); font: 600 .95rem/1 var(--h-sans) !important; box-shadow: 0 4px 18px rgba(242,191,94,.25); }

/* continue studying */
html body .student-continue {
  max-width: 1040px; margin: 0 auto 56px; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--c, var(--h-gold-2)) 40%, transparent); border-radius: var(--h-radius);
  background: linear-gradient(110deg, color-mix(in srgb, var(--c, var(--h-gold-2)) 12%, var(--h-panel)), var(--h-panel) 65%);
}
html body .student-continue .student-eyebrow { font: 600 .68rem/1 var(--h-sans); letter-spacing: .18em; color: var(--c, var(--h-gold-2)); }
html body .student-continue h2 { font: 600 1.3rem/1.3 var(--h-sans) !important; margin: 10px 0 4px; color: var(--h-text); }
html body .student-continue .v2-btn.primary { min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--h-pill); background: var(--h-gold-grad); color: var(--h-on-gold); font: 600 .95rem/1 var(--h-sans) !important; box-shadow: 0 6px 22px rgba(242,191,94,.22); }

/* the unit grid */
html body #student-units { max-width: 1040px; margin: 0 auto; }
html body #student-units .overview-section-title { text-align: left; margin: 0 0 18px; font: 600 .74rem/1.2 var(--h-sans) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--h-muted); background: none; -webkit-text-fill-color: currentColor; }
html body #student-units .overview-unit-grid { gap: 14px; }
html body .overview-unit-card.h-unitcard {
  position: relative; display: grid; grid-template-rows: 116px auto; min-height: 0; padding: 0 !important; overflow: hidden;
  border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-panel); text-align: left; cursor: pointer;
  transition: border-color .3s, transform .3s cubic-bezier(.25,1,.5,1), box-shadow .3s;
}
html body .overview-unit-card.h-unitcard::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .55; transition: opacity .3s;
}
html body .overview-unit-card.h-unitcard:hover, html body .overview-unit-card.h-unitcard:focus-visible {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
}
html body .overview-unit-card.h-unitcard:hover::after { opacity: 1; }
.h-scene { display: block; width: 100%; height: 116px; background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--c) 9%, transparent), transparent 70%); border-bottom: 1px solid var(--h-line); }
.h-uc-body { display: grid; gap: 6px; padding: 16px 52px 18px 18px; }
.h-uc-k { display: flex; align-items: center; gap: 8px; font: 600 .68rem/1 var(--h-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--h-muted); }
.h-uc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.h-uc-name { font: 600 1.08rem/1.3 var(--h-sans); color: var(--h-text); text-wrap: balance; }
.h-uc-meta { font: 400 .84rem/1.3 var(--h-sans); color: var(--h-muted); }
.h-uc-meta b { color: var(--h-good); font-weight: 500; }
.h-uc-go { position: absolute; right: 16px; bottom: 18px; width: 22px; height: 22px; color: var(--h-muted); transition: transform .3s cubic-bezier(.25,1,.5,1), color .3s; }
.h-uc-go svg { width: 100%; height: 100%; }
html body .overview-unit-card.h-unitcard:hover .h-uc-go { transform: translateX(4px); color: var(--c); }

/* the Course Review card, after the nine units (house-home.js) */
.h-cr { position: relative; margin-top: 14px; padding: 22px; overflow: hidden; border: 1px solid rgba(242,191,94,.38); border-radius: var(--h-radius);
  background: radial-gradient(90% 140% at 0% 0%, rgba(242,191,94,.13), transparent 60%), var(--h-panel); }
.h-cr::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--u1), var(--u2), var(--u3), var(--u4), var(--u5), var(--u6), var(--u7), var(--u8), var(--u9)); opacity: .7; }
.h-cr-head { display: grid; gap: 6px; margin-bottom: 18px; max-width: 70ch; }
.h-cr-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 .68rem/1.2 var(--h-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--h-gold-2); }
.h-cr-dots { display: inline-flex; gap: 4px; }
.h-cr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
html body .h-cr-head h3 { margin: 0; font-size: 1.7rem !important; line-height: 1.15; }
.h-cr-head p { margin: 0; color: var(--h-text-2); line-height: 1.5; }
.h-cr-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
html body .h-cr-tile { position: relative; display: grid; align-content: start; gap: 10px; min-height: 132px; padding: 14px 14px 16px; border: 1px solid var(--h-line); border-radius: 14px; background: var(--h-panel-2); color: var(--h-text); text-decoration: none;
  transition: border-color .3s, transform .3s cubic-bezier(.25,1,.5,1), box-shadow .3s; }
html body .h-cr-tile:hover, html body .h-cr-tile:focus-visible { transform: translateY(-3px); border-color: rgba(242,191,94,.6); box-shadow: 0 14px 32px rgba(0,0,0,.4); }
html body .h-cr-tile:focus-visible { outline: 2px solid var(--h-gold-1); outline-offset: 2px; }
.h-cr-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(242,191,94,.12); color: var(--h-gold-1); }
.h-cr-icon svg { width: 22px; height: 22px; }
.h-cr-text { display: grid; gap: 4px; padding-right: 18px; }
.h-cr-text b { font: 600 1rem/1.3 var(--h-sans); }
.h-cr-text small { font: 400 .84rem/1.4 var(--h-sans); color: var(--h-muted); }
.h-cr-go { position: absolute; right: 12px; top: 18px; width: 20px; height: 20px; color: var(--h-muted); transition: transform .3s cubic-bezier(.25,1,.5,1), color .3s; }
.h-cr-go svg { width: 100%; height: 100%; }
html body .h-cr-tile:hover .h-cr-go { transform: translateX(4px); color: var(--h-gold-1); }
@media (max-width: 760px) { .h-cr { padding: 18px 16px; } }
@media (max-width: 979px) {
  .h-cr-tiles { grid-template-columns: 1fr; gap: 8px; }
  html body .h-cr-tile { grid-template-columns: auto 1fr; align-items: center; min-height: 0; padding: 12px 14px; }
  .h-cr-go { top: 50%; margin-top: -10px; }
  .h-cr-text { padding-right: 24px; }
}

/* beyond the CED */
html body .student-enrichment { max-width: 1040px; margin: 48px auto 0; padding: 24px; border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-panel); }
html body .student-enrichment h2 { font: 600 1.15rem/1.3 var(--h-sans) !important; margin: 0 0 6px; }
html body .student-enrichment p { color: var(--h-muted); margin: 0 0 16px; }
html body .student-enrichment .ced-progress-list { display: flex; flex-wrap: wrap; gap: 10px; }
html body .student-enrichment .v2-btn { min-height: var(--h-tap); padding: 0 18px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: transparent; color: var(--h-text); font: 500 .92rem/1 var(--h-sans) !important; }
html body .student-enrichment .v2-btn:hover { background: rgba(242,191,94,.08); border-color: rgba(242,191,94,.55); }
@media (max-width: 760px) {
  html body .student-home-heading { margin: 20px auto 36px; }
  html body .student-topic-search { flex-direction: row; padding-left: 42px; }
  html body .student-topic-search .h-search-icon { left: 14px; }
  html body .student-topic-search button { padding: 0 16px; }
  html body .student-continue { flex-direction: column; align-items: stretch; }
}
@media (max-width: 420px) { html body .student-topic-search button { font-size: 0 !important; width: 44px; padding: 0; } html body .student-topic-search button span { font-size: 1.1rem; } }

/* ===========================================================================
   TOPIC PAGES (house-topic.js)
   =========================================================================== */
/* ---- header of a numbered topic ---- */
html body .ced-topic-page > header .ced-topic-kicker { display: flex; align-items: center; gap: 10px; font: 600 .74rem/1.2 var(--h-sans) !important; letter-spacing: .2em; color: var(--unit); }
html body .ced-topic-page > header .ced-topic-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--unit); box-shadow: 0 0 10px var(--unit); }
html body .ced-topic-page > header h1 { font-size: clamp(2.2rem, 5vw, 3.4rem) !important; line-height: 1.04 !important; margin: 14px 0 10px !important; }
html body .ced-topic-page > header .ced-topic-meta { color: var(--h-muted); }

/* ---- Learn: open reading, not cards in a card ---- */
html body section[id$="-learn"] > .ced-topic-card {
  padding: 28px 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  border-top: 1px solid var(--h-line);
}
html body section[id$="-learn"] > .ced-topic-card:first-child {
  padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--unit) 35%, transparent); border-radius: var(--h-radius);
  background: linear-gradient(110deg, color-mix(in srgb, var(--unit) 9%, var(--h-panel)), var(--h-panel) 70%);
}
html body section[id$="-learn"] > .ced-topic-card:first-child + .ced-topic-card { border-top: 0; }
html body section[id$="-learn"] > .ced-topic-card h2 { font: 600 1.4rem/1.25 var(--h-sans) !important; color: var(--h-text); margin: 0 0 12px; }
html body section[id$="-learn"] > .ced-topic-card:first-child h2 { font: 600 .72rem/1.2 var(--h-sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--unit); }
html body section[id$="-learn"] > .ced-topic-card:first-child p { font-size: 1.12rem; line-height: 1.6; color: var(--h-text); }
html body section[id$="-learn"] > .ced-topic-card h3 { font: 600 .78rem/1.2 var(--h-sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--h-gold-2); margin: 22px 0 8px; }
html body :is(section[id$="-learn"], section[id$="-practice"], .student-topic-section) p { font-size: 1.02rem; line-height: 1.72; color: var(--h-text-2); max-width: 72ch; }
.h-chem sub, .h-chem sup { font-size: .72em; line-height: 0; }
.h-chem sub { vertical-align: -.28em; } .h-chem sup { vertical-align: .55em; }

/* In-page jumps (lesson chips, anchors) land below the pinned header and switcher, not under them */
html body .ced-topic-page [id], html body .student-topic-section [id] { scroll-margin-top: 140px; }
@media (max-width: 760px) { html body .ced-topic-page [id], html body .student-topic-section [id] { scroll-margin-top: 124px; } }

/* ---- Explore: one tool. The generic engine card steps aside when a real lab is mounted. ---- */
html body section[id$="-explore"]:has(> .ced-mounted-lab > *) > .ced-topic-card:has(.ced-explore-controls) { display: none; }
html body section[id$="-explore"] > .ced-topic-card { border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-panel); box-shadow: none; }

/* ---- the older labs' controls in house form ---- */
html body :is(.subtab-panel, .h-unit) :is(select, input[type="number"], input[type="text"]) {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--h-line-2); border-radius: var(--h-radius-sm);
  background-color: var(--h-panel-3); color: var(--h-text); font: 500 .92rem/1.2 var(--h-sans) !important; box-shadow: none;
}
html body .subtab-panel select:hover { border-color: rgba(242,191,94,.55); }
/* !important on the shape and colour: a legacy rule styles these through a list of ~30 lab ids,
   and id specificity would otherwise win */
html body .subtab-panel :is(.mode-btn, .btn, .btn-primary, .btn-gold, .btn-outline, .v2-btn):not(.h-qnext) {
  min-height: 40px !important; padding: 0 16px !important; border: 1px solid var(--h-line-2) !important; border-radius: var(--h-pill) !important;
  background: transparent !important; box-shadow: none !important;
  color: var(--h-text) !important; font: 600 .84rem/1 var(--h-sans) !important; letter-spacing: .02em !important; text-transform: none !important; transform: none !important;
  transition: background-color .2s, border-color .2s, color .2s;
}
html body .subtab-panel :is(.mode-btn, .btn, .btn-outline, .v2-btn):not(.active, .btn-primary, .btn-gold, .primary):hover { background: rgba(242,191,94,.08) !important; border-color: rgba(242,191,94,.55) !important; }
html body .subtab-panel :is(.mode-btn.active, .btn-primary, .btn-gold, .v2-btn.primary):not(.h-qnext) { border-color: transparent !important; background: var(--h-gold-grad) !important; color: var(--h-on-gold) !important; }
html body .subtab-panel :is(.tool-container, .chart-container, .explanation-box, .lesson-section, .ap-review-section, .control-group, .viz-panel) {
  border-color: var(--h-line) !important; border-radius: var(--h-radius); box-shadow: none !important;
}
html body .subtab-panel :is(.chart-container, .viz-panel) { background: var(--h-panel) !important; }
html body .subtab-panel .how-to-use { border: 1px solid var(--h-line); border-top: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-panel); box-shadow: none; }
html body .subtab-panel .how-to-use::before { display: none; }
html body .subtab-panel .how-to-use summary { min-height: var(--h-tap); display: flex; align-items: center; font: 600 .78rem/1 var(--h-sans) !important; letter-spacing: .14em; color: var(--h-gold-2); }
/* Light-drawn canvases (white grounds, dark ink) read as dark until each lab is redrawn:
   inverting lightness and rotating hue 180 deg keeps the colours' hues. */
html body .subtab-panel canvas:is([style*="rgba(255,255,255,0.95)"], [style*="rgba(255, 255, 255, 0.95)"]),
html body .subtab-panel div:is([style*="background:rgba(255,255,255,0.95)"], [style*="background: rgba(255,255,255,0.95)"]) {
  filter: invert(.93) hue-rotate(180deg) saturate(1.15); border: 1px solid rgba(255,255,255,.1);
}

/* Maroon was also a text colour in the labs (readouts, the left shift arrow). Maroon surfaces became
   dark bronze, which would hide that text, so maroon text becomes a readable warm rose.
   The selectors match the color property only, not background-color. */
html body :is([style^="color:var(--maroon"], [style^="color: var(--maroon"], [style*="; color:var(--maroon"], [style*=";color:var(--maroon"], [style*="; color: var(--maroon"]),
html body .shift-arrow.left { color: #EE9C84 !important; }
/* the same for maroon drawn into inline SVG diagrams (labels, arrows, outlines); CSS beats presentation attributes */
html body svg :is([fill="#7B1F2E" i], [fill="#9B2F3E" i], [fill="#5A1621" i]) { fill: #EE9C84; }
html body svg :is([stroke="#7B1F2E" i], [stroke="#9B2F3E" i], [stroke="#5A1621" i]) { stroke: #EE9C84; }

/* ---- Practice, one question at a time ---- */
.h-qbar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; margin: 0 0 18px; }
.h-qcount { font: 600 .78rem/1 var(--h-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--h-muted); }
.h-qcount b { color: var(--h-gold-1); font-variant-numeric: tabular-nums; }
.h-qscore { font: 500 .86rem/1 var(--h-sans); color: var(--h-muted); }
.h-qmeter { grid-column: 1 / -1; display: flex; gap: 4px; }
.h-qmeter i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); transition: background-color .3s; }
.h-qmeter i.is-cur { background: rgba(242,191,94,.45); }
.h-qmeter i.is-right { background: var(--h-good); }
.h-qmeter i.is-wrong { background: var(--h-bad); }
html body .ced-question.h-q { padding: 26px 26px 22px; border: 1px solid var(--h-line); border-radius: 18px; background: var(--h-panel); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
html body .ced-question.h-q h3 { display: none; }
html body .ced-question.h-q p { color: var(--h-text); font-size: 1.12rem; line-height: 1.6; }
html body .ced-question .ced-quiz-choice {
  display: block; width: 100%; min-height: 52px; margin: 10px 0 0; padding: 12px 18px; text-align: left;
  border: 1px solid var(--h-line-2); border-radius: 12px; background: var(--h-panel-2); color: var(--h-text);
  font: 500 1rem/1.4 var(--h-sans) !important; box-shadow: none; transform: none; cursor: pointer;
  transition: border-color .2s, background-color .2s, transform .2s;
}
html body .ced-question .ced-quiz-choice:not(:disabled):hover { border-color: rgba(242,191,94,.6); background: rgba(242,191,94,.07); transform: translateX(3px); }
html body .ced-question .ced-quiz-choice:disabled { cursor: default; opacity: .55; }
html body .ced-question .ced-quiz-choice.correct { opacity: 1; border-color: var(--h-good); background: color-mix(in srgb, var(--h-good) 12%, var(--h-panel-2)); color: var(--h-text); }
html body .ced-question .ced-quiz-choice.incorrect { opacity: 1; border-color: var(--h-bad); background: color-mix(in srgb, var(--h-bad) 12%, var(--h-panel-2)); color: var(--h-text); }
html body .ced-question .ced-feedback { margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 0; background: rgba(255,255,255,.04); color: var(--h-text-2); font-size: .98rem; line-height: 1.6; }
html body .ced-question.h-q-right .ced-feedback { box-shadow: inset 3px 0 0 var(--h-good); }
html body .ced-question.h-q-wrong .ced-feedback { box-shadow: inset 3px 0 0 var(--h-bad); }
.h-qnext {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 18px; padding: 0 22px; border: 0; border-radius: var(--h-pill);
  background: var(--h-gold-grad); color: var(--h-on-gold); font: 600 .95rem/1 var(--h-sans) !important; cursor: pointer; box-shadow: 0 6px 22px rgba(242,191,94,.22);
}
.h-qnext svg { width: 18px; height: 18px; transition: transform .25s; }
.h-qnext:hover svg { transform: translateX(4px); }
.h-q-enter { animation: h-q-in .42s cubic-bezier(.25,1,.5,1); }
@keyframes h-q-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
/* right: the card crystallizes, a gold ring blooming out from it; wrong: a short settle */
html body .ced-question.h-q-right { animation: h-q-right .7s cubic-bezier(.25,1,.5,1); border-color: color-mix(in srgb, var(--h-good) 50%, transparent); }
@keyframes h-q-right { 0% { box-shadow: 0 0 0 0 rgba(255,224,154,.55), 0 20px 50px rgba(0,0,0,.35); } 100% { box-shadow: 0 0 0 18px rgba(255,224,154,0), 0 20px 50px rgba(0,0,0,.35); } }
html body .ced-question.h-q-wrong { animation: h-q-wrong .4s ease; }
@keyframes h-q-wrong { 0%, 100% { transform: none; } 30% { transform: translateX(-6px); } 60% { transform: translateX(4px); } }
section.h-q-all > .ced-question { margin-bottom: 18px; }
.h-qsummary { display: grid; justify-items: start; gap: 6px; padding: 32px 30px; border: 1px solid var(--h-line-2); border-radius: 18px; background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--unit) 12%, var(--h-panel)), var(--h-panel) 70%); }
.h-qs-k { margin: 0; font: 600 .72rem/1.2 var(--h-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--h-muted); }
.h-qs-score { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.h-qs-score b { font: 700 4.6rem/1 var(--h-display); background: var(--h-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h-qs-score span { font: 600 1.4rem/1 var(--h-sans); color: var(--h-muted); }
.h-qs-msg { margin: 4px 0 10px; font-size: 1.1rem; color: var(--h-text); }
.h-qs-missed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.h-qs-missed .h-qs-k { width: 100%; }
.h-qs-item, .h-qs-all { display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-tap); padding: 0 16px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: transparent; color: var(--h-text); font: 500 .9rem/1 var(--h-sans) !important; cursor: pointer; }
.h-qs-item svg { width: 16px; height: 16px; color: var(--h-gold-2); }
.h-qs-item:hover, .h-qs-all:hover { background: rgba(242,191,94,.08); border-color: rgba(242,191,94,.55); }
@media (prefers-reduced-motion: reduce) { .h-q-enter, html body .ced-question.h-q-right, html body .ced-question.h-q-wrong { animation: none; } }

/* ===========================================================================
   HUBS AND OVERLAYS (house-hubs.js)
   =========================================================================== */
.h-btn-gold, .h-btn-line {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; border-radius: var(--h-pill); cursor: pointer;
  font: 600 .95rem/1 var(--h-sans) !important; transition: transform .25s cubic-bezier(.25,1,.5,1), background-color .2s, border-color .2s;
}
.h-btn-gold { border: 0; background: var(--h-gold-grad); color: var(--h-on-gold); box-shadow: 0 6px 22px rgba(242,191,94,.22); }
.h-btn-gold svg { width: 18px; height: 18px; }
.h-btn-gold:hover { transform: translateY(-2px); }
.h-btn-line { border: 1px solid var(--h-line-2); background: transparent; color: var(--h-text); }
.h-btn-line:hover { background: rgba(242,191,94,.08); border-color: rgba(242,191,94,.55); }

/* ---- Progress ---- */
html body .student-progress { max-width: 1040px; }
html body .student-page-heading { margin: 16px 0 32px; }
html body .student-page-heading h1 { font-size: clamp(2.4rem, 6vw, 3.8rem) !important; line-height: 1.02 !important; margin: 12px 0 10px !important; }
html body .student-page-heading .student-eyebrow { font: 600 .74rem/1.2 var(--h-sans); letter-spacing: .2em; color: var(--h-muted); }
html body #ced-topic-progress { display: none; }   /* superseded by #h-progress */
.h-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding: 32px; border: 1px solid var(--h-line); border-radius: 18px;
  background: radial-gradient(90% 140% at 0% 0%, rgba(242,191,94,.07), var(--h-panel) 60%); }
.h-empty-art { width: 140px; color: var(--h-gold-2); }
.h-empty h2 { font: 600 1.4rem/1.25 var(--h-sans) !important; margin: 0 0 10px; }
.h-empty p { color: var(--h-text-2); margin: 0 0 20px; max-width: 58ch; line-height: 1.65; }
.h-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .h-empty { grid-template-columns: 1fr; padding: 24px; } .h-empty-art { width: 100px; } }
.h-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--h-line); border-radius: 18px; background: var(--h-line); }
.h-stat { padding: 22px 22px 20px; background: var(--h-panel); }
.h-stat b { display: block; font: 700 clamp(2.4rem, 5vw, 3.2rem)/1 var(--h-display); background: var(--h-gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.h-stat b small { font-size: .5em; }
.h-stat span { display: block; margin-top: 10px; color: var(--h-muted); font-size: .9rem; }
@media (max-width: 560px) { .h-stats { grid-template-columns: 1fr; } }
.h-sec, .h-mixed-head { margin: 40px 0 14px; font: 600 .74rem/1.2 var(--h-sans) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--h-muted); }
.h-review { display: grid; gap: 8px; }
.h-review-item, .h-urow {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 12px 18px; border: 1px solid var(--h-line); border-radius: var(--h-radius);
  background: var(--h-panel); color: var(--h-text); text-align: left; cursor: pointer; transition: border-color .25s, transform .25s cubic-bezier(.25,1,.5,1);
}
.h-review-item:hover, .h-urow:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateX(3px); }
.h-review-num { min-width: 2.6rem; font: 700 .95rem/1 var(--h-sans); color: var(--c); font-variant-numeric: tabular-nums; }
.h-review-title { flex: 1; font-weight: 600; min-width: 0; }
.h-review-acc { color: var(--h-bad); font-size: .86rem; white-space: nowrap; }
.h-review-item svg { width: 18px; height: 18px; color: var(--h-muted); flex: none; }
.h-units { display: grid; gap: 8px; }
.h-urow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(80px, 1fr) auto; }
.h-urow-name { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 600; }
.h-urow-name > span:last-child { display: grid; gap: 3px; min-width: 0; }
.h-urow-k { font: 600 .66rem/1 var(--h-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--h-muted); }
.h-urow-meter { height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.h-urow-meter i { display: block; height: 100%; border-radius: inherit; background: var(--c); box-shadow: 0 0 10px var(--c); }
.h-urow-num { color: var(--h-muted); font-size: .86rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .h-urow { grid-template-columns: 1fr; gap: 10px; } }
/* the older mixed-practice panels, in house form */
html body .student-progress :is(.exam-readiness-panel, .weak-spots-section) { margin-top: 0; padding: 22px; border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-panel); box-shadow: none; }
html body .student-progress .weak-spots-section { margin-top: 12px; }
html body .student-progress :is(.exam-readiness-panel h2, .weak-spots-section .overview-section-title) { font: 600 1.05rem/1.3 var(--h-sans) !important; color: var(--h-text); text-align: left; text-transform: none; letter-spacing: 0; background: none; -webkit-text-fill-color: currentColor; }
html body .student-progress .weak-spots-empty { color: var(--h-muted); }

/* ---- Practice hub ---- */
html body #u10-practice > .tool-header { text-align: left; margin: 8px 0 28px; }
html body #u10-practice > .tool-header .tool-title { font-size: clamp(2.4rem, 6vw, 3.6rem) !important; line-height: 1.02 !important; text-transform: none; }
html body #u10-practice .practice-coach-panel { padding: 22px 24px; border: 1px solid var(--h-line-2); border-radius: 18px; background: radial-gradient(90% 140% at 0% 0%, rgba(242,191,94,.08), var(--h-panel) 60%); box-shadow: none; }
html body #u10-practice .practice-coach-panel h4 { font: 600 .72rem/1.2 var(--h-sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--h-gold-2); margin: 0 0 10px; }
html body #u10-practice .practice-coach-action { border: 0; background: transparent; padding: 0; }
html body #u10-practice .practice-coach-action strong { font: 600 1.25rem/1.3 var(--h-sans); color: var(--h-text); }
html body #u10-practice .practice-coach-action button { min-height: 48px; margin-top: 14px; padding: 0 22px; border: 0; border-radius: var(--h-pill); background: var(--h-gold-grad); color: var(--h-on-gold); font: 600 .95rem/1 var(--h-sans) !important; box-shadow: 0 6px 22px rgba(242,191,94,.22); }
html body #u10-practice .mixed-practice-shell > h3 { margin: 40px 0 14px; font: 600 .74rem/1.2 var(--h-sans) !important; letter-spacing: .2em; text-transform: uppercase; color: var(--h-muted); }
html body #u10-practice .mixed-practice-toolbar { gap: 12px; }
html body #u10-practice .mixed-practice-toolbar label { color: var(--h-muted); font: 500 .82rem/1.3 var(--h-sans) !important; }
html body #u10-practice .mixed-practice-shell > .btn.btn-gold { min-height: 52px; margin-top: 18px; padding: 0 26px; font-size: 1rem !important; }

/* ---- search and About & settings ---- */
html body :is(.search-overlay-v2, .info-overlay-v2) { background: rgba(6,5,4,.72); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }
html body :is(.search-dialog-v2, .info-dialog-v2) { padding: 20px; border: 1px solid var(--h-line-2); border-radius: 20px; background: rgba(20,18,16,.96); box-shadow: 0 40px 100px rgba(0,0,0,.6); animation: h-menu-in .26s cubic-bezier(.25,1,.5,1); }
html body .search-head-v2 input { min-height: 54px; padding: 0 18px; border: 1px solid var(--h-line-2); border-radius: 14px; background: var(--h-panel-2); color: var(--h-text); font: 400 1.05rem/1.2 var(--h-sans) !important; }
html body .search-head-v2 input:focus-visible { outline: none !important; border-color: rgba(242,191,94,.6); box-shadow: 0 0 0 4px rgba(242,191,94,.10); }
html body .search-result-v2 { min-height: 64px; padding: 12px 16px; border-radius: 12px; font: 600 1rem/1.3 var(--h-sans) !important; }
html body .search-result-v2:hover, html body .search-result-v2[aria-selected="true"] { border-color: var(--h-line-2); background: rgba(242,191,94,.06); }
html body .search-result-v2 small { color: var(--h-muted); font-weight: 400; font-size: .84rem; }
html body .info-dialog-v2 h2 { font: 600 1.2rem/1.3 var(--h-sans) !important; }
html body .info-dialog-v2 p { color: var(--h-text-2); line-height: 1.65; }
html body .info-dialog-v2 .ap-trust-strip { border: 1px solid var(--h-line); border-radius: var(--h-radius); background: var(--h-panel-2); }

/* ---- the tour, in house colours ---- */
html body #tourTooltip { border-color: var(--h-line-2); border-radius: 18px; background: rgba(20,18,16,.97); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
html body :is(#tourTitle, #tourBody, #tourStepCount) { font-family: var(--h-sans) !important; }
html body #tourStepCount { color: var(--h-gold-2); letter-spacing: .16em; }
html body #tourTooltip .tour-btn { border-radius: var(--h-pill); }
html body #tourTooltip .tour-btn.primary { background: var(--h-gold-grad); border-color: transparent; color: var(--h-on-gold); }
html body #tourSpotlight { border-color: var(--h-gold-1); border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 30px rgba(242,191,94,.35); }

/* ---- the equation sheet: the official image on a soft paper tone, zoomable ---- */
html body .ref-modal-overlay { flex-direction: column; gap: 12px; padding: 16px; background: rgba(6,5,4,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.h-ref-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1180px, 100%); padding-right: 56px; }
.h-ref-title { font: 600 .74rem/1.2 var(--h-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--h-muted); }
.h-ref-zoom { min-height: var(--h-tap); padding: 0 18px; border: 1px solid var(--h-line-2); border-radius: var(--h-pill); background: transparent; color: var(--h-gold-1); font: 600 .88rem/1 var(--h-sans) !important; cursor: pointer; }
.h-ref-zoom:hover { background: rgba(242,191,94,.08); }
html body .ref-modal-content { width: min(1180px, 100%); max-height: calc(100dvh - 100px); border: 1px solid var(--h-line-2); border-radius: 14px; background: #D9D3C4; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
html body .ref-modal-content img { min-width: 0; width: 100%; filter: sepia(.12) brightness(.86) contrast(1.06); }   /* a soft paper tone, not glaring white */
html body .ref-modal-content.is-zoomed img { width: 200%; max-width: none; }
html body .ref-modal-close { top: 16px; right: 16px; border: 1px solid var(--h-line-2); background: rgba(20,18,16,.9); color: var(--h-gold-1); box-shadow: none; font-size: 1.6rem; }
html body .ref-modal-close:hover { background: var(--h-panel-3); }
@media (max-width: 760px) { html body .ref-modal-content.is-zoomed img { width: 320%; } .h-ref-title { display: none; } }

/* ---- lattice wipe (house-motion.js) ---- */
.h-wipe { position: fixed; z-index: 950; pointer-events: none; }    /* above content and the switcher's shadow, below the header (1000) */
.h-fade-in { animation: h-fade .15s linear; }
@keyframes h-fade { from { opacity: 0; } }

/* ---- phone bar ---- */
@media (max-width: 760px) {
  html body #subtabBar.h-bar-ready { top: 60px; padding: 0 12px; }
  .h-bar { min-height: 52px; gap: 4px; }
  .h-bar-unit-name { display: none; }
  .h-bar-unit { padding-right: 10px; }
  .h-switch-btn { max-width: calc(100vw - 140px); padding: 0 10px 0 14px; }
  .h-switch-of { display: none; }
  html body .mobile-bottom-nav {
    grid-template-columns: repeat(4, 1fr); min-height: 64px;
    background: rgba(11,10,9,.86); border-top: 0; -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
  }
  html body .mobile-bottom-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--h-line-2) 22%, var(--h-line-2) 78%, transparent); }
  html body .mobile-bottom-nav button { gap: 4px; color: var(--h-muted); font: 600 .68rem/1 var(--h-sans) !important; letter-spacing: .02em; }
  html body .mobile-bottom-nav button svg { width: 22px; height: 22px; }
  html body .mobile-bottom-nav button.active { color: var(--h-gold-1); }
  html body .mobile-bottom-nav button.active svg { filter: drop-shadow(0 0 6px rgba(242,191,94,.55)); }
  html body .student-topic-section, html body .ced-topic-page { scroll-margin-top: 120px; }
  .h-path ol::before { left: 29px; }
}

/* lecture slides (class-slides.js): the Lecture slides tab before each unit's first topic, and the card on the summary pages */
.h-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.h-cta-row .h-cta { margin-top: 0; }
.h-hex-icon { display: grid; place-items: center; }
.h-hex .h-hex-icon svg { position: static; inset: auto; width: 20px; height: 20px; color: var(--h-gold-2); }
.h-hex .h-hex-icon path, .h-hex .h-hex-icon rect { fill: none; stroke: currentColor; stroke-width: 2; }
.cs-hero { display: grid; gap: 18px; max-width: 980px; margin: 8px 0 12px; text-decoration: none; color: inherit; }
.cs-hero-cover { position: relative; display: block; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 9; background: #0d0b09;
  border: 1px solid color-mix(in srgb, var(--h-gold-2) 35%, transparent); box-shadow: 0 22px 60px rgba(0,0,0,.45); }
.cs-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.25,1,.5,1); }
.cs-hero:hover .cs-hero-cover img { transform: scale(1.03); }
.cs-hero-btn { order: -1; justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 26px 0 22px; border-radius: var(--h-pill);
  background: var(--h-gold-grad); color: var(--h-on-gold); font: 600 1.08rem/1.2 var(--h-sans); box-shadow: 0 10px 34px rgba(242,191,94,.28);
  transition: transform .25s cubic-bezier(.25,1,.5,1), box-shadow .25s; }
.cs-hero-btn svg { width: 22px; height: 22px; flex: none; }
.cs-hero-btn svg:last-child { width: 18px; height: 18px; opacity: .8; }
.cs-hero:hover .cs-hero-btn { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(242,191,94,.36); }
.cs-hero-note { margin: 0 0 8px; max-width: 64ch; color: var(--h-text-2); }
/* the summary card */
.cs-card { display: flex !important; align-items: center; gap: 18px; text-decoration: none; color: inherit; transition: border-color .2s, transform .25s cubic-bezier(.25,1,.5,1); }
.cs-card:hover { border-color: color-mix(in srgb, var(--h-gold-2) 60%, transparent); transform: translateY(-2px); }
.cs-card-cover { position: relative; flex: none; display: block; width: min(220px, 38%); overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background: #0d0b09; }
.cs-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-text { display: grid; gap: 3px; min-width: 0; }
.cs-k { font: 600 .72rem/1.2 var(--h-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--h-gold-2); }
.cs-title { font: 600 1.1rem/1.3 var(--h-sans); color: var(--h-text); }
.cs-sub { font-size: .9rem; color: var(--h-text-2); }
.cs-go { margin-left: auto; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(242,191,94,.5); color: var(--h-gold-2); }
.cs-go svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .h-cta-row { flex-direction: column; align-items: stretch; }
  .cs-hero-btn { justify-self: stretch; justify-content: center; text-align: center; }
  .cs-card { flex-wrap: wrap; } .cs-card-cover { width: 100%; } .cs-go { display: none; }
}