/* ==================================================================
   Text versions of the accent colours.

   Teal, gold and coral are fine as fills, borders and buttons, but as TEXT on
   the site's light backgrounds they measured 2.8–3.2:1 — below the 4.5:1
   needed to be comfortably readable. These deeper shades are used only where
   the accent is the text colour. In dark mode the brighter accents already
   pass, so the tokens map back to them.
   ================================================================== */
:root{ --teal-text:#176F62; --gold-text:#965F17; --coral-text:#C83022; }
html[data-theme="dark"]{ --teal-text:#35BCA6; --gold-text:#D9903A; --coral-text:#F0776A; }
/* ==================================================================
   Dark mode + theme toggle — shared by every page.

   How it works: theme.js sets data-theme="dark" on <html>. Everything
   below re-points the existing CSS variables, so pages inherit dark
   styling without their own <style> blocks changing.

   One wrinkle worth knowing: --ink does double duty in this project.
   It's the main TEXT colour on light pages, but it's also the
   BACKGROUND of the dark hero sections, streak card, active tabs, etc.
   Flipping --ink to a light colour would make those heroes light with
   light text. So the palette flip is followed by explicit overrides
   for every element that used --ink as a surface.
   ================================================================== */

/* ---------------- Toggle button (both themes) ---------------- */
.theme-toggle{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--line); background:var(--paper-card);
  cursor:pointer; font-size:1rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
  padding:0;
}
.theme-toggle:hover{ transform:translateY(-2px) rotate(-12deg); border-color:var(--gold-dark); }
.theme-toggle:active{ transform:scale(.92); }

/* Smooth the switch, but never fight a user who prefers less motion. */
html.theme-ready body,
html.theme-ready .card,
html.theme-ready .stat-card{
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
@media (prefers-reduced-motion: reduce){
  html.theme-ready body,
  html.theme-ready .card,
  html.theme-ready .stat-card,
  .theme-toggle{ transition:none; }
}

/* ======================= DARK PALETTE ======================= */
html[data-theme="dark"]{
  color-scheme: dark;                    /* native scrollbars/inputs go dark too */
}

html[data-theme="dark"] body,
html[data-theme="dark"] .wrap{
  --paper:        #0E1524;               /* page background */
  --paper-card:   #182034;               /* cards sit above the page */
  --ink:          #E9EEF8;               /* primary text (now light) */
  --ink-soft:     #9FAEC6;               /* secondary text */
  --line:         rgba(233,238,248,0.14);
  --shadow:       0 12px 30px rgba(0,0,0,0.45);
  /* Accents brightened slightly so they stay legible on a dark field */
  --gold:         #F0B45C;
  --gold-dark:    #D9903A;
  --teal:         #35BCA6;
  --coral:        #F0776A;
}

/* The variables above are scoped to body, but a few rules read them from
   :root. Redeclare at the root too so nothing is left on the light values. */
html[data-theme="dark"]{
  --paper:        #0E1524;
  --paper-card:   #182034;
  --ink:          #E9EEF8;
  --ink-soft:     #9FAEC6;
  --line:         rgba(233,238,248,0.14);
  --shadow:       0 12px 30px rgba(0,0,0,0.45);
  --gold:         #F0B45C;
  --gold-dark:    #D9903A;
  --teal:         #35BCA6;
  --coral:        #F0776A;

  /* Dedicated surface colours for elements that used --ink as a background. */
  --surface-deep-1: #131C2F;
  --surface-deep-2: #1E2942;
  --surface-deep-text: #E9EEF8;
}

html[data-theme="dark"] body{
  background:var(--paper);
  color:var(--ink);
}

/* --------- Sticky headers (were translucent white) --------- */
html[data-theme="dark"] header{
  background:rgba(14,21,36,0.9) !important;
  border-bottom-color:var(--line);
}

/* --------- Elements that used --ink as a SURFACE ---------
   Without these, each would render light-on-light in dark mode. */
html[data-theme="dark"] .lessons-hero,
html[data-theme="dark"] .bank-hero,
html[data-theme="dark"] .exam-hero,
html[data-theme="dark"] .score-hero,
html[data-theme="dark"] .admin-hero,
html[data-theme="dark"] .streak-card,
html[data-theme="dark"] .countdown-card,
html[data-theme="dark"] .start-screen,
html[data-theme="dark"] .results-card,
html[data-theme="dark"] .test-header-bar{
  background:linear-gradient(135deg, var(--surface-deep-1) 0%, var(--surface-deep-2) 100%) !important;
  color:var(--surface-deep-text);
}

/* payment.html puts its gradient on <header> itself. It gets the
   .dark-surface class from theme.js so we avoid :has() (patchy in Safari). */
html[data-theme="dark"] header.dark-surface{
  background:linear-gradient(135deg, var(--surface-deep-1) 0%, var(--surface-deep-2) 100%) !important;
}
/* .pay-hero sits INSIDE that header. Giving it its own opaque gradient (as
   this rule used to) painted over the header's glow from the nav bar down,
   leaving a hard horizontal seam in dark mode. It must stay transparent so
   the header's background and its blurred highlights show through. */
html[data-theme="dark"] .pay-hero{ background:transparent !important; }

/* --------- Buttons/pills that were dark-on-light ---------
   These used an --ink gradient with --paper text. In dark mode --ink is
   light, so they need their own surface colour to stay legible. */
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .q-btn-primary,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .section-nav button.active,
html[data-theme="dark"] .cal-nav:hover:not(:disabled){
  background:linear-gradient(135deg, #2B3A5C 0%, #3B4E75 100%);
  color:#F2F6FD;
  border-color:#3B4E75;
}

/* --------- Selected answer letter circles ---------
   These fill with an --ink gradient and use --paper for the letter, so in
   dark mode they'd be light-on-light — i.e. the selected answer would look
   blank. Give them their own surface. */
html[data-theme="dark"] .opt.selected .letter,
html[data-theme="dark"] .q-opt.selected .letter{
  background:linear-gradient(135deg, #2B3A5C, #3B4E75);
  color:#F2F6FD;
  border-color:#3B4E75;
}

/* .plan-price uses an --ink gradient as *text* fill (background-clip:text),
   so it correctly turns light in dark mode. No override needed. */

/* --------- Homepage surfaces that used --ink as a background ---------
   These pair an --ink background with hardcoded light text
   (rgba(243,246,251,…)). Flipping --ink to a light colour left light text
   on a light card — readable heading, invisible body copy. Give them a
   real dark surface instead. */
html[data-theme="dark"] .trick.flagship,
html[data-theme="dark"] .pricing{
  background:linear-gradient(135deg, var(--surface-deep-1) 0%, var(--surface-deep-2) 100%) !important;
  color:var(--surface-deep-text);
}
html[data-theme="dark"] .trick.flagship:hover{
  background:linear-gradient(135deg, #17223A 0%, #24314E 100%) !important;
}
html[data-theme="dark"] .trick.flagship h3{ color:var(--surface-deep-text); }
html[data-theme="dark"] .trick.flagship p,
html[data-theme="dark"] .pricing .section-head p,
html[data-theme="dark"] .price-note{ color:rgba(233,238,248,0.72); }

/* Same pattern elsewhere: --ink background + hardcoded light text. */
html[data-theme="dark"] .gd-cta,
html[data-theme="dark"] .drill-banner{
  background:linear-gradient(135deg, var(--surface-deep-1) 0%, var(--surface-deep-2) 100%) !important;
  color:var(--surface-deep-text);
}
html[data-theme="dark"] .gd-cta p,
html[data-theme="dark"] .drill-banner p{ color:rgba(233,238,248,0.72); }

/* Ghost buttons sitting ON those dark cards.
   They're set to color:var(--paper) so they read light against the dark
   card in light mode — but --paper flips dark in dark mode, leaving dark
   text on a dark card. Pin them to a light colour instead. */
html[data-theme="dark"] .gd-cta .btn-ghost,
html[data-theme="dark"] .drill-banner .btn-ghost,
html[data-theme="dark"] .results-card .btn-ghost,
html[data-theme="dark"] .start-screen .btn-ghost,
html[data-theme="dark"] .streak-card .btn-ghost,
html[data-theme="dark"] .countdown-card .btn-ghost{
  color:#EDF2FB !important;
  border-color:rgba(237,242,251,0.32) !important;
}
html[data-theme="dark"] .gd-cta .btn-ghost:hover,
html[data-theme="dark"] .drill-banner .btn-ghost:hover,
html[data-theme="dark"] .results-card .btn-ghost:hover,
html[data-theme="dark"] .start-screen .btn-ghost:hover{
  border-color:#EDF2FB !important;
  background:rgba(237,242,251,0.08) !important;
}

/* Same bug on the dashboard's exam-countdown button. */
html[data-theme="dark"] .countdown-card .cd-set{
  color:#EDF2FB !important;
  border-color:rgba(237,242,251,0.28) !important;
  background:rgba(237,242,251,0.1) !important;
}
html[data-theme="dark"] .countdown-card .cd-set:hover{
  border-color:var(--coral) !important;
  color:var(--coral-text) !important;
}
html[data-theme="dark"] .countdown-card input[type="date"]{
  color:#EDF2FB; background:rgba(0,0,0,0.28); border-color:rgba(237,242,251,0.25);
}

/* --------- The gold email strip ---------
   Gold background with --ink text: once --ink turned light, the heading and
   copy washed out against the gold. Deepen the gold and force dark text so
   it stays legible while keeping the brand colour. */
html[data-theme="dark"] .signup{
  background:linear-gradient(135deg, #C8913A 0%, #B27F2E 100%) !important;
}
html[data-theme="dark"] .signup h2{ color:#1A1206; }
html[data-theme="dark"] .signup p{ color:rgba(26,18,6,0.78); }
html[data-theme="dark"] .signup-form input{
  background:#FFFDF8; color:#1A1206; border-color:rgba(26,18,6,0.28);
}
html[data-theme="dark"] .signup-form input::placeholder{ color:rgba(26,18,6,0.5); }
html[data-theme="dark"] .signup-msg{ color:#1A1206; }

/* --------- Gold surfaces that used --ink as their text ---------
   --ink flips light in dark mode, which would leave light text on a bright
   gold pill. Force dark text on every gold surface instead. */
html[data-theme="dark"] .qotd-streak,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .buy-btn,
html[data-theme="dark"] .ep-btn,
html[data-theme="dark"] .ws-btn.primary,
html[data-theme="dark"] .toggle-btn.active,
html[data-theme="dark"] .user-avatar,
html[data-theme="dark"] .trend-empty a,
html[data-theme="dark"] .opt.fill,
html[data-theme="dark"] .plan-badge.rec,
html[data-theme="dark"] .start-bubbles span.filled,
html[data-theme="dark"] .trick .mark,
html[data-theme="dark"] .check:not(.desmos-box),
html[data-theme="dark"] .q-btn-ghost.active,
html[data-theme="dark"] .plan-cta{
  color:#12192A;                       /* dark text on a bright gold pill */
}

/* --------- Inputs --------- */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#101828;
  color:var(--ink);
  border-color:var(--control-line);   /* 3:1 so the field's edge is visible (see "Accessibility") */
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color:#6F7F99; }

/* --------- Odds and ends that hardcoded white --------- */
html[data-theme="dark"] .google-btn{ background:#101828; color:var(--ink); }
html[data-theme="dark"] .spot-icon{ background:var(--paper-card); }
html[data-theme="dark"] .read-pill{ background:rgba(255,255,255,0.14); color:var(--ink); }
html[data-theme="dark"] .chart-placeholder,
html[data-theme="dark"] .trend-empty,
html[data-theme="dark"] .ws-empty{ background:rgba(255,255,255,0.03); }

/* Subject-tinted lesson banners were built for a light page */
html[data-theme="dark"] .lesson-banner.math{ background:linear-gradient(135deg, rgba(53,188,166,0.14), rgba(53,188,166,0.26)); }
html[data-theme="dark"] .lesson-banner.reading{ background:linear-gradient(135deg, rgba(240,180,92,0.14), rgba(240,180,92,0.26)); }
html[data-theme="dark"] .lesson-banner.writing{ background:linear-gradient(135deg, rgba(240,119,106,0.14), rgba(240,119,106,0.26)); }

/* Mobile menu panel */
html[data-theme="dark"] .mobile-panel{ background:var(--paper); }
html[data-theme="dark"] .mobile-panel a{ color:var(--ink); border-bottom-color:var(--line); }


/* ==================================================================
   Setup page (study plan wizard)
   The step cards use a per-step accent, including a purple that isn't
   in the core palette — so it needs its own dark-mode handling.
   ================================================================== */
html[data-theme="dark"] .step-card{ background:var(--paper-card); border-color:var(--line); }
html[data-theme="dark"] .step-card:nth-of-type(4) .step-num{ background:rgba(154,139,232,0.18); color:#B3A6F2; }
html[data-theme="dark"] .step-card:nth-of-type(4) .choice.sel{
  border-color:#9A8BE8; background:rgba(154,139,232,0.12); box-shadow:0 0 0 3px rgba(154,139,232,0.2);
}
html[data-theme="dark"] .step-card:nth-of-type(4) .choice.sel .big{ color:#B3A6F2; }
html[data-theme="dark"] .step-card:nth-of-type(4) .choice.sel::after{ background:#9A8BE8; }
html[data-theme="dark"] .choice.dom[data-domain="advanced"] .big::before{ background:#9A8BE8; }
html[data-theme="dark"] .choice{ background:rgba(255,255,255,0.03); }
html[data-theme="dark"] .choice:hover{ background:rgba(255,255,255,0.06); }
html[data-theme="dark"] .adaptive .mod{ background:rgba(255,255,255,0.04); }
html[data-theme="dark"] .adaptive .key{ background:rgba(255,255,255,0.04); }
html[data-theme="dark"] .setup-hero{
  background:linear-gradient(135deg, var(--surface-deep-1) 0%, var(--surface-deep-2) 100%) !important;
}

/* Colourful choice buttons in dark mode — the light tints need lifting,
   and the solid selected fills need brighter accents to stay legible. */
html[data-theme="dark"] .choice[data-focus="both"],
html[data-theme="dark"] .choice[data-target="1200"],
html[data-theme="dark"] .choice.dom[data-domain="algebra"]{
  background:linear-gradient(135deg, rgba(53,188,166,0.16), rgba(53,188,166,0.05));
  border-color:rgba(53,188,166,0.38);
}
html[data-theme="dark"] .choice[data-target="1300"],
html[data-theme="dark"] .choice.dom[data-domain="data"]{
  background:linear-gradient(135deg, rgba(240,180,92,0.16), rgba(240,180,92,0.05));
  border-color:rgba(240,180,92,0.4);
}
html[data-theme="dark"] .choice[data-target="1400"],
html[data-theme="dark"] .choice.dom[data-domain="geometry"]{
  background:linear-gradient(135deg, rgba(240,119,106,0.16), rgba(240,119,106,0.05));
  border-color:rgba(240,119,106,0.38);
}
html[data-theme="dark"] .choice[data-focus="math"],
html[data-theme="dark"] .choice[data-target="1500"],
html[data-theme="dark"] .choice.dom[data-domain="advanced"]{
  background:linear-gradient(135deg, rgba(154,139,232,0.16), rgba(154,139,232,0.05));
  border-color:rgba(154,139,232,0.4);
}
/* Accent text needs to be lighter on dark */
html[data-theme="dark"] .choice[data-focus="both"] .big,
html[data-theme="dark"] .choice[data-target="1200"] .big,
html[data-theme="dark"] .choice.dom[data-domain="algebra"] .big{ color:#54D6BE; }
html[data-theme="dark"] .choice[data-target="1300"] .big,
html[data-theme="dark"] .choice.dom[data-domain="data"] .big{ color:#F5C377; }
html[data-theme="dark"] .choice[data-target="1400"] .big,
html[data-theme="dark"] .choice.dom[data-domain="geometry"] .big{ color:#F58C7E; }
html[data-theme="dark"] .choice[data-focus="math"] .big,
html[data-theme="dark"] .choice[data-target="1500"] .big,
html[data-theme="dark"] .choice.dom[data-domain="advanced"] .big{ color:#B3A6F2; }
/* Selected stays a solid fill with white text — already !important, just
   deepen the shadow so it reads against the dark page. */
html[data-theme="dark"] .choice.sel{ box-shadow:0 8px 24px rgba(0,0,0,0.5) !important; }

html[data-theme="dark"] .plan-prompt-icon{ background:var(--paper-card); }
html[data-theme="dark"] .plan-card{
  background:linear-gradient(135deg, rgba(240,180,92,0.1), rgba(53,188,166,0.07));
  border-color:rgba(240,180,92,0.32);
}
html[data-theme="dark"] .plan-goal .g,
html[data-theme="dark"] .plan-prio .p{ background:rgba(255,255,255,0.04); border-color:var(--line); }
html[data-theme="dark"] .plan-verdict.unknown,
html[data-theme="dark"] .plan-verdict.reached{ background:rgba(255,255,255,0.04); border-color:var(--line); }



/* ==================================================================
   NAVIGATION — one hamburger menu, all screen sizes (js/nav.js)

   Replaces the old visible link bar + "⋯" menu + mobile panel. Those
   forced the header wider than a phone viewport, which is what made
   pages scroll sideways.
   ================================================================== */

/* Nothing may exceed the viewport width. */
html, body{ max-width:100%; overflow-x:hidden; overflow-x:clip; }   /* clip: no sideways scroll, and sticky headers still stick (hidden broke them) */
*{ min-width:0; }

/* Retire the old navigation entirely. */
.nav-links, .mobile-panel, .menu-btn, .kebab-wrap{ display:none !important; }



/* ---- Hamburger button ---- */
.hm-wrap{ position:relative; display:inline-flex; align-items:center; flex-shrink:0; }
.hm-wrap.hm-floating{ position:fixed; top:18px; left:18px; z-index:120; }
.hm-btn{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; padding:0;
  border:1.5px solid var(--line); background:var(--paper-card); cursor:pointer;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .2s, transform .2s;
}
.hm-btn:hover{ border-color:var(--gold-dark); }
.hm-btn span{
  width:18px; height:2px; border-radius:2px; background:var(--ink); display:block;
  transition:transform .25s ease, opacity .2s ease;
}
.hm-wrap.open .hm-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hm-wrap.open .hm-btn span:nth-child(2){ opacity:0; }
.hm-wrap.open .hm-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- Panel ---- */
.hm-panel{
  position:fixed; top:70px; left:16px; width:268px; max-width:calc(100vw - 32px);
  background:var(--paper-card); border:1px solid var(--line); border-radius:16px; padding:8px;
  box-shadow:0 24px 60px rgba(22,33,63,0.22); z-index:300;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease, visibility .2s;
  max-height:calc(100vh - 100px); overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.hm-panel.open{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .2s ease, transform .2s ease, visibility 0s; }   /* visible at once, so keyboard focus can move in */

.hm-backdrop{
  position:fixed; inset:0; background:rgba(22,33,63,0.35); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .2s; z-index:150;
}
.hm-backdrop.on{ opacity:1; visibility:visible; }

.hm-item{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:11px 13px; border-radius:10px; text-decoration:none;
  font-family:var(--body); font-size:0.93rem; font-weight:500; color:var(--ink);
  background:none; border:none; cursor:pointer; text-align:left;
  transition:background .15s, color .15s;
}
.hm-item:hover{ background:var(--paper); }
.hm-item.active{ background:rgba(232,162,60,0.15); color:var(--gold-text); font-weight:700; }
.hm-item.cta{ background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#12192A; font-weight:700; margin-top:2px; }
.hm-item.cta:hover{ filter:brightness(1.05); }
.hm-item.danger{ color:var(--coral-text); }
.hm-item.danger:hover{ background:rgba(225,90,77,0.1); }
.hm-ic{
  width:24px; height:24px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center;
  font-size:0.74rem; background:var(--paper); color:var(--ink-soft); flex-shrink:0;
}
.hm-item.active .hm-ic{ background:var(--gold); color:#12192A; }
.hm-item.cta .hm-ic{ background:rgba(255,255,255,0.35); color:#12192A; }
.hm-sep{ height:1px; background:var(--line); margin:7px 5px; }

.hm-who{ display:flex; align-items:center; gap:11px; padding:12px 13px 13px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.hm-avatar{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#12192A;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:0.78rem;
}
.hm-who-txt{ display:flex; flex-direction:column; min-width:0; }
.hm-who-txt strong{ font-size:0.9rem; }
.hm-who-txt em{ font-style:normal; font-size:0.74rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Dark theme */
html[data-theme="dark"] .hm-panel{
  background:#182034; border-color:rgba(233,238,248,0.14); box-shadow:0 24px 60px rgba(0,0,0,0.6);
}
html[data-theme="dark"] .hm-item:hover{ background:rgba(255,255,255,0.06); }
html[data-theme="dark"] .hm-ic{ background:rgba(255,255,255,0.07); }
html[data-theme="dark"] .hm-btn span{ background:var(--ink); }
html[data-theme="dark"] .hm-backdrop{ background:rgba(0,0,0,0.55); }

/* ---- Mobile spacing so content never touches the edges ---- */
@media(max-width:640px){
  .wrap{ padding-left:16px !important; padding-right:16px !important; }
  header .nav, header .nav.wrap{ padding:12px 16px !important; gap:10px; }
  header .logo{ font-size:1.05rem; }
  .hm-panel{ width:min(280px, calc(100vw - 32px)); }
}

/* ------------------------------------------------------------------
   Stacking fix.

   header is position:sticky with z-index:50, which creates a stacking
   context. A child cannot escape it — so the menu's z-index:200 was
   effectively capped at 50, while the backdrop (150, a direct child of
   body) sat on top of it. The menu looked open but every click landed on
   the backdrop instead of the links.

   Lifting the whole header above the backdrop while the menu is open
   fixes it without moving elements around the DOM.
   ------------------------------------------------------------------ */
.hm-backdrop{ z-index:150; }
.hm-wrap.hm-floating{ z-index:210; }

/* Keep the dim subtle — this sits over content people are reading. */
.hm-backdrop{ background:rgba(22,33,63,0.28); backdrop-filter:none; }
html[data-theme="dark"] .hm-backdrop{ background:rgba(0,0,0,0.45); }

/* ------------------------------------------------------------------
   Header: menu (left) · logo (centre) · theme + account (right)

   Before this the items were loose siblings in source order, so on a phone
   they wrapped onto a second row and looked arbitrary.
   ------------------------------------------------------------------ */
header .hm-header{
  display:flex !important; align-items:center; gap:10px; flex-wrap:nowrap !important;
  max-width:1240px; width:100%; margin:0 auto;
}
.hm-centre{
  flex:1 1 auto; display:flex; justify-content:center; min-width:0;
}
.hm-centre .logo{
  margin:0 !important; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.hm-right{ display:flex; align-items:center; gap:9px; flex-shrink:0; }
header .hm-wrap{ flex-shrink:0; }

/* The avatar is now a button that opens the account menu */
.user-avatar{ cursor:pointer; flex-shrink:0; transition:transform .18s; }
.user-avatar:hover{ transform:translateY(-1px); }

.hm-acc{ width:236px; }

@media(max-width:640px){
  header .hm-header{ gap:8px; padding:10px 14px !important; }
  .hm-centre .logo{ font-size:1rem; }
  .hm-right{ gap:7px; }
  .hm-btn{ width:38px; height:38px; }
  .user-avatar{ width:34px !important; height:34px !important; font-size:0.76rem !important; }
  .theme-toggle{ width:34px !important; height:34px !important; }
}
@media(max-width:380px){
  .hm-centre .logo{ font-size:0.9rem; }
}

/* ------------------------------------------------------------------
   Touch targets. Apple's guidance is roughly 44px minimum; several
   controls were 32–34px, which is fiddly with a thumb.
   ------------------------------------------------------------------ */
@media(max-width:820px){
  .cal-nav{ width:40px !important; height:40px !important; }
  .cal-day{ min-height:38px; }
  .theme-toggle, .hm-btn{ width:40px !important; height:40px !important; }
  .user-avatar{ width:40px !important; height:40px !important; }
  .demo-controls input[type=range]{ height:26px; }
  .hm-item{ padding:13px 14px; }   /* easier to hit in the menu */
}

/* Admin charts */
html[data-theme="dark"] .hbar-track{ background:rgba(255,255,255,0.06); }
html[data-theme="dark"] .chart-empty{ background:rgba(255,255,255,0.03); border-color:var(--line); }
html[data-theme="dark"] .chart-card{ background:var(--paper-card); border-color:var(--line); }

/* Desmos hero: the graph used to sit behind the copy and was dimmed to
   .26-.42 opacity in dark mode. It now has its own row under the heading, so
   the dimming only made the curve and the "(3, 4) minimum" label unreadable. */
html[data-theme="dark"] .hero-eq{ background:rgba(24,32,52,0.78); }

/* Homepage comparison graph */
html[data-theme="dark"] .cg-grid line{ stroke:rgba(233,238,248,0.12); }
html[data-theme="dark"] .cg-axis{ stroke:rgba(233,238,248,0.45); }
html[data-theme="dark"] .cg-num{ fill:rgba(233,238,248,0.6); }
html[data-theme="dark"] .cg-vertex{ stroke:#182034; }

/* Desmos applicability boxes in the question bank */
html[data-theme="dark"] .desmos-box.check{ background:rgba(240,180,92,0.12) !important; }
html[data-theme="dark"] .desmos-box.none{ background:rgba(255,255,255,0.05) !important; }
html[data-theme="dark"] .desmos-box code{ background:rgba(255,255,255,0.1); }
html[data-theme="dark"] .da-opt{ background:var(--paper-card); }
html[data-theme="dark"] .desmos-applies{ background:rgba(53,188,166,0.09); }

/* ==================================================================
   Site footer — required policy links.
   Ameriabank's website requirements call for About Us, contact details,
   a return policy and delivery terms to be present and reachable, with
   links that genuinely work.
   ================================================================== */
.site-footer{
  border-top:1px solid var(--line); margin-top:60px; padding:28px 0 34px;
  background:var(--paper);
}
.sf-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.sf-links{
  display:flex; gap:20px; flex-wrap:wrap; justify-content:center;
  font-size:.86rem; margin-bottom:14px;
}
.sf-links a{ color:var(--ink-soft); text-decoration:none; }
.sf-links a:hover{ color:var(--teal-text); text-decoration:underline; }
.sf-note{ text-align:center; color:var(--ink-soft); font-size:.8rem; line-height:1.6; }
.sf-fill{
  background:rgba(225,90,77,.1); border:1px dashed var(--coral);
  border-radius:6px; padding:1px 7px; font-family:var(--mono); font-size:.92em; color:var(--coral-text);
}
html[data-theme="dark"] .site-footer{ background:transparent; }
@media(max-width:600px){
  .sf-links{ gap:14px; font-size:.82rem; }
}

/* The homepage "Go to Dashboard" button is relocated here by js/nav.js,
   because .nav-auth is hidden once the menu initialises. */
.hm-right .nav-cta{
  display:inline-flex; align-items:center; white-space:nowrap;
  padding:9px 18px; border-radius:100px; text-decoration:none;
  font-size:.88rem; font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#12192A;
  box-shadow:0 6px 16px rgba(232,162,60,.3);
}
.hm-right .nav-cta:hover{ transform:translateY(-1px); }
@media(max-width:520px){ .hm-right .nav-cta{ padding:8px 12px; font-size:.8rem; } }

/* ------------------------------------------------------------------
   Text sitting ON a dark header.

   payment.html styles its logo as color:var(--paper) so it reads light
   against the dark gradient. In dark mode --paper flips to the dark page
   colour while the header stays dark — so "The Answer Key" became dark text
   on a dark header and disappeared entirely.
   ------------------------------------------------------------------ */
html[data-theme="dark"] header.dark-surface .logo,
html[data-theme="dark"] header.dark-surface h1,
html[data-theme="dark"] header.dark-surface .price-tag,
html[data-theme="dark"] .pay-hero .logo,
html[data-theme="dark"] .pay-hero h1{
  color:var(--surface-deep-text) !important;
}
html[data-theme="dark"] header.dark-surface .logo .bubble{
  border-color:var(--surface-deep-text) !important;
}
html[data-theme="dark"] header.dark-surface .nav a.back,
html[data-theme="dark"] header.dark-surface .pay-sub,
html[data-theme="dark"] .pay-hero p{
  color:rgba(233,238,248,0.75) !important;
}

/* Account avatar on pages that did not define one. The account menu
   (Settings / Billing / Admin / Log out) attaches to .user-avatar, so a page
   without it silently loses that whole menu. */
header .user-avatar{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#12192A;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:0.82rem;
  border:none; transition:transform .18s;
}
header .user-avatar:hover{ transform:translateY(-1px); }


/* Study plan heading: it uses the "paper" colour, which is near-black in
   dark mode — on the dark hero it measured 1.2:1, effectively invisible. */
html[data-theme="dark"] .setup-hero h1{ color:#E9EEF8; }

/* The gold email panel keeps dark text; its paragraph was just short of
   4.5:1 in dark mode. */
html[data-theme="dark"] .signup p{ color:rgba(26,18,6,0.92); }


/* Disabled buttons: exempt from contrast rules, but at 40% opacity the label
   was unreadable (about 1.3:1). Keep them clearly "off" but legible. */
button:disabled, .btn:disabled, .q-btn:disabled, .q-btn-primary:disabled{ opacity:0.62 !important; }

/* Unfilled company-detail placeholders (they vanish once server/business.js
   is filled in) were just under 4.5:1. */
html:not([data-theme="dark"]) .fill,
html:not([data-theme="dark"]) .sf-fill{ color:#A8281C !important; }   /* light only: dark red vanishes on dark backgrounds */

/* Keeps a maths expression on one line (see mathHTML in question-source.js). */
.nb{ white-space:nowrap; }

/* ==================================================================
   Step-by-step solutions (js/steps.js)
   Every step can open to explain itself. Colours come from the page's
   own variables, so light and dark mode both work without overrides.
   ================================================================== */
.tak-steps-wrap{ margin-top:16px; }
.tak-steps-title{ font-family:var(--mono); font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--teal-text); margin-bottom:4px; }
.tak-steps-hint{ font-size:0.84rem; color:var(--ink-soft); margin:0 0 8px; }
ol.tak-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.tak-step{ border:1px solid var(--line); border-radius:12px; background:var(--paper-card); overflow:hidden; }
.tak-step-head{ display:flex; align-items:flex-start; gap:12px; width:100%; padding:11px 14px; background:none; border:0; font:inherit; font-size:0.95rem; color:var(--ink); text-align:left; line-height:1.5; }
button.tak-step-head{ cursor:pointer; transition:background .15s ease; }
button.tak-step-head:hover{ background:rgba(33,158,139,0.07); }
button.tak-step-head:focus-visible{ outline:2px solid var(--teal-text); outline-offset:-2px; }
.tak-step-n{ flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--teal-text); color:var(--paper-card);
  font-family:var(--mono); font-size:0.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.tak-step-text{ flex:1; min-width:0; overflow-wrap:anywhere; }
.tak-step-more{ flex-shrink:0; display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:0.74rem; font-weight:600;
  color:var(--teal-text); margin-top:3px; }
.tak-step-more svg{ transition:transform .2s ease; }
.tak-step-more .lbl-close{ display:none; }
.tak-step-head[aria-expanded="true"] .lbl-open{ display:none; }
.tak-step-head[aria-expanded="true"] .lbl-close{ display:inline; }
.tak-step-head[aria-expanded="true"] svg{ transform:rotate(180deg); }
.tak-step-head[aria-expanded="true"]{ background:rgba(33,158,139,0.07); }
.tak-step-detail{ padding:4px 16px 14px 50px; font-size:0.9rem; line-height:1.65; color:var(--ink-soft); }
.tak-step.plain .tak-step-head{ cursor:default; }

.tak-guide{ margin-top:18px; padding:14px; border:1.5px dashed var(--line); border-radius:14px; }
.tak-guide-top{ display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; }
.tak-guide-top + .tak-steps-hint, .tak-guide .tak-steps{ margin-top:10px; }
.tak-guide-label{ font-size:0.9rem; color:var(--ink-soft); }
.tak-guide-next{ padding:8px 16px; border-radius:100px; border:1.5px solid var(--teal-text); background:none; color:var(--teal-text);
  font:inherit; font-size:0.86rem; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease; }
.tak-guide-next:hover{ background:var(--teal-text); color:var(--paper-card); }
.tak-guide-done{ font-size:0.86rem; font-weight:600; color:var(--teal-text); }

.tak-mistake{ margin-top:14px; padding:12px 16px; border-left:3px solid var(--coral); border-radius:0 10px 10px 0;
  background:rgba(225,90,77,0.08); font-size:0.92rem; line-height:1.6; color:var(--ink); }
.tak-mistake strong{ display:block; color:var(--coral-text); margin-bottom:4px; }

.tak-another-btn{ margin-top:16px; padding:9px 18px; border-radius:100px; border:1.5px solid var(--line); background:var(--paper-card);
  color:var(--ink); font:inherit; font-size:0.88rem; font-weight:600; cursor:pointer; transition:border-color .15s ease, transform .15s ease; }
.tak-another-btn::before{ content:"↻ "; color:var(--teal-text); }
.tak-another-btn:hover{ border-color:var(--teal-text); transform:translateY(-1px); }
.tak-mini{ margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.tak-mini.loading{ color:var(--ink-soft); font-size:0.9rem; }
.tak-mini-tag{ font-family:var(--mono); font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-text); margin-bottom:8px; }
.tak-mini-pass{ margin-bottom:12px; }
.tak-mini-q{ font-weight:600; line-height:1.55; margin-bottom:14px; color:var(--ink); }
.tak-mini-opts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:520px){ .tak-mini-opts{ grid-template-columns:1fr; } }
.tak-mini-opt{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper-card);
  font:inherit; font-size:0.93rem; color:var(--ink); text-align:left; cursor:pointer; }
.tak-mini-opt:hover:not(:disabled){ border-color:var(--ink-soft); }
.tak-mini-opt .l{ width:24px; height:24px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--ink-soft); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:0.75rem; font-weight:600; }
.tak-mini-opt.correct{ border-color:var(--teal); background:rgba(33,158,139,0.1); }
.tak-mini-opt.wrong{ border-color:var(--coral); background:rgba(225,90,77,0.1); }
.tak-mini-opt:disabled{ cursor:default; color:var(--ink); opacity:1; }
.tak-mini-verdict{ margin-top:14px; font-weight:600; }
.tak-mini-verdict.ok{ color:var(--teal-text); }
.tak-mini-verdict.bad{ color:var(--coral-text); }
.tak-mini-err{ color:var(--coral-text); font-size:0.9rem; }
/* Narrow phones: the "Explain" label moves under the step so a long line of
   maths never runs into it. */
@media (max-width:480px){
  .tak-step-head{ flex-wrap:wrap; row-gap:4px; }
  .tak-step-text{ flex-basis:calc(100% - 36px); }
  .tak-step-more{ margin-left:36px; margin-top:0; }
  .tak-step-detail{ padding-left:16px; }
}

/* Passages: line breaks matter for paired texts and bulleted notes; data
   tables for evidence questions scroll sideways on narrow phones. */
.tak-ptext{ white-space:pre-line; }
.tak-table-wrap{ overflow-x:auto; margin-top:12px; }
.tak-table{ border-collapse:collapse; font-size:0.88rem; min-width:100%; color:var(--ink); }
.tak-table caption{ text-align:left; font-weight:600; margin-bottom:8px; color:var(--ink); }
.tak-table th, .tak-table td{ border:1px solid var(--line); padding:7px 12px; text-align:right; white-space:nowrap; }
.tak-table th:first-child, .tak-table thead th{ text-align:left; }
.tak-table thead th{ background:var(--paper-card); font-family:var(--mono); font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); }
.tak-table tbody th{ font-weight:600; }


/* Shortcut and Desmos trick boxes (js/steps.js → TAKSteps.tricks) */
.tak-trick{margin-top:14px;padding:13px 16px;border-radius:12px;background:rgba(232,162,60,0.10);border:1px solid rgba(232,162,60,0.35);color:var(--ink);font-size:0.93rem;line-height:1.55;}
.tak-trick-h{font-weight:700;font-size:0.82rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--gold-text, #9a6412);margin-bottom:5px;}
.tak-trick.desmos{background:rgba(33,158,139,0.08);border-color:rgba(33,158,139,0.35);}
.tak-trick.desmos .tak-trick-h{color:var(--teal-text, #157a6b);}
.tak-trick-link{display:block;margin-top:8px;font-weight:600;font-size:0.88rem;color:var(--teal-text, #157a6b);text-decoration:none;}
.tak-trick-link:hover{text-decoration:underline;}

/* Points pop-up (js/tracker.js) */
.tak-points-toast{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;align-items:center;gap:12px;
  padding:12px 18px 12px 14px;border-radius:16px;background:linear-gradient(135deg,#F0B45C,#E8A23C 45%,#C97F1F);color:#16213F;
  box-shadow:0 14px 34px rgba(201,127,31,0.35),0 4px 10px rgba(22,33,63,0.15);font-size:0.85rem;transform:translateY(30px) scale(.9);opacity:0;
  pointer-events:none;transition:transform .3s ease,opacity .3s ease;max-width:calc(100vw - 36px);overflow:hidden;}
.tak-points-toast::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.55) 50%,transparent 70%);
  transform:translateX(-120%);pointer-events:none;}
.tak-points-toast.show{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
.tak-points-toast.enter{animation:takToastIn .55s cubic-bezier(.2,1.6,.4,1) both;}
.tak-points-toast.bump{animation:takBump .4s ease;}
.tak-points-toast.show::after{animation:takShine 1s .25s ease both;}
.tak-points-toast > div{display:flex;flex-direction:column;gap:2px;}
.tak-points-toast strong{font-size:1.1rem;font-family:'IBM Plex Mono',monospace;}
.tak-points-toast strong b{font-weight:700;}
.tak-points-toast a{color:#16213F;font-weight:700;}
.tak-star{font-size:1.7rem;line-height:1;display:inline-block;color:#fff;text-shadow:0 2px 8px rgba(201,127,31,0.7);}
.tak-points-toast.show .tak-star{animation:takSpin .8s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes takToastIn{0%{transform:translateY(40px) scale(.6);opacity:0}60%{transform:translateY(-6px) scale(1.06);opacity:1}100%{transform:translateY(0) scale(1)}}
@keyframes takBump{0%,100%{transform:scale(1)}40%{transform:scale(1.09)}}
@keyframes takShine{to{transform:translateX(120%)}}
@keyframes takSpin{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.25) rotate(15deg)}100%{transform:scale(1) rotate(0)}}

/* "+10" rising from the answer that earned it */
.tak-float{position:fixed;z-index:210;transform:translate(-50%,-50%);font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:1.25rem;
  color:#C97F1F;text-shadow:0 2px 0 #fff,0 0 12px rgba(232,162,60,0.6);pointer-events:none;animation:takFloat 1.25s ease-out forwards;}
.tak-float.big{font-size:1.6rem;color:#E15A4D;}
html[data-theme="dark"] .tak-float{color:#F0B45C;text-shadow:0 2px 10px rgba(0,0,0,0.6);}
@keyframes takFloat{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-70%) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}

/* Confetti */
.tak-confetti{position:fixed;z-index:205;width:0;height:0;pointer-events:none;}
.tak-confetti i{position:absolute;left:0;top:0;width:8px;height:12px;border-radius:2px;opacity:0;
  animation:takConfetti 1.5s cubic-bezier(.15,.7,.4,1) forwards;}
@keyframes takConfetti{0%{opacity:1;transform:translate(0,0) rotate(0)}
  70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 160px)) rotate(var(--rot))}}

/* A results-screen line: "+85 points" */
.points-earned{max-width:460px;margin:0 auto 22px;padding:12px 16px;border-radius:14px;text-align:center;
  background:rgba(232,162,60,0.12);border:1px solid rgba(232,162,60,0.35);font-size:0.92rem;color:var(--ink);position:relative;overflow:hidden;}
.points-earned strong{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;color:var(--gold-text);}
.points-earned strong b{font-weight:700;}
.points-earned a{color:var(--teal-text);font-weight:600;white-space:nowrap;}
.points-earned:empty{display:none;}
.pe-star{display:inline-block;}
.points-earned.celebrate{animation:takResultPop .7s cubic-bezier(.2,1.5,.4,1) both, takGlow 2.4s 0.7s ease-in-out 2;}
.points-earned.celebrate .pe-star{animation:takSpin .9s .1s cubic-bezier(.2,1.4,.4,1) both;}
.points-earned.celebrate::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.45) 50%,transparent 70%);
  transform:translateX(-120%);animation:takShine 1.1s .5s ease both;pointer-events:none;}
@keyframes takResultPop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes takGlow{0%,100%{box-shadow:0 0 0 rgba(232,162,60,0)}50%{box-shadow:0 0 26px rgba(232,162,60,0.45)}}

@media (prefers-reduced-motion: reduce){
  .tak-points-toast,.tak-points-toast.enter,.tak-points-toast.bump,.tak-points-toast .tak-star,.points-earned.celebrate,.points-earned.celebrate .pe-star{animation:none!important;transition:opacity .2s;}
  .tak-points-toast::after,.points-earned.celebrate::after{display:none;}
  .tak-float,.tak-confetti{display:none;}
}

/* ==================================================================
   Graphs on math questions — drawn by js/figure.js (TAKFigure).

   The SVG only carries class names; every colour comes from the site's
   variables, so the dark palette above re-colours graphs automatically.
   Fallbacks are the light-mode values for pages that don't define them.
   ================================================================== */
:root{ --fig-grid:rgba(22,33,63,0.11); --fig-grid-major:rgba(22,33,63,0.22); }
html[data-theme="dark"]{ --fig-grid:rgba(233,238,248,0.10); --fig-grid-major:rgba(233,238,248,0.22); }
.tak-fig{ margin:12px 0 6px; padding:10px 10px 8px; width:100%; max-width:380px; box-sizing:border-box;
  background:var(--paper-card,#fff); border:1px solid var(--line,rgba(22,33,63,0.12)); border-radius:12px;
  color:var(--ink,#16213F); line-height:1.3; }
.tak-fig-svg{ display:block; width:100%; height:auto; overflow:visible; font-family:inherit; font-variant-numeric:tabular-nums; }
.tak-fig figcaption{ margin-top:6px; font-size:0.82rem; text-align:center; color:var(--ink-soft,#2C3A63); }
.tak-fig-grid line{ stroke:var(--fig-grid); stroke-width:1; shape-rendering:crispEdges; }
.tak-fig-grid.major line{ stroke:var(--fig-grid-major); }
.tak-fig-axis line{ stroke:var(--ink,#16213F); stroke-width:1.5; shape-rendering:crispEdges; }
.tak-fig-tick text{ fill:var(--ink-soft,#2C3A63); font-size:10.5px; }
.tak-fig-tick .tak-fig-origin{ font-style:italic; }
.tak-fig-title text{ fill:var(--ink,#16213F); font-size:11.5px; font-weight:600; }
.tak-fig-title text.v{ font-style:italic; font-size:13px; font-family:Georgia,'Times New Roman',serif; }
/* Numbers drawn over the grid get a paper-coloured outline so lines never cut through them. */
.tak-fig-halo{ paint-order:stroke; stroke:var(--paper-card,#fff); stroke-width:3.5px; stroke-linejoin:round; }
.tak-fig-curve{ fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.tak-fig-curve.dash{ stroke-dasharray:7 5; }
.tak-fig-curve.tak-fig-c-teal{ stroke:var(--teal,#219E8B); }
.tak-fig-curve.tak-fig-c-gold{ stroke:var(--gold-dark,#C97F1F); }
.tak-fig-curve.tak-fig-c-coral{ stroke:var(--coral,#E15A4D); }
.tak-fig-curve.tak-fig-c-ink{ stroke:var(--ink,#16213F); }
.tak-fig-dot{ stroke:var(--paper-card,#fff); stroke-width:1.2; }
.tak-fig-dot.tak-fig-c-teal{ fill:var(--teal,#219E8B); }
.tak-fig-dot.tak-fig-c-gold{ fill:var(--gold-dark,#C97F1F); }
.tak-fig-dot.tak-fig-c-coral{ fill:var(--coral,#E15A4D); }
.tak-fig-dot.tak-fig-c-ink{ fill:var(--ink,#16213F); }
.tak-fig-dot.open{ fill:var(--paper-card,#fff); stroke-width:1.8; }
.tak-fig-dot.open.tak-fig-c-teal{ stroke:var(--teal,#219E8B); }
.tak-fig-dot.open.tak-fig-c-gold{ stroke:var(--gold-dark,#C97F1F); }
.tak-fig-dot.open.tak-fig-c-coral{ stroke:var(--coral,#E15A4D); }
.tak-fig-dot.open.tak-fig-c-ink{ stroke:var(--ink,#16213F); }
.tak-fig-lbl{ font-size:12px; font-weight:600; font-style:italic; }
.tak-fig-lbl.tak-fig-c-teal{ fill:var(--teal-text,#176F62); }
.tak-fig-lbl.tak-fig-c-gold{ fill:var(--gold-text,#965F17); }
.tak-fig-lbl.tak-fig-c-coral{ fill:var(--coral-text,#C83022); }
.tak-fig-lbl.tak-fig-c-ink{ fill:var(--ink,#16213F); }
/* .tak-fig-lbl also has .tak-fig-halo; keep its outline the paper colour, not the item colour. */
.tak-fig-lbl.tak-fig-halo{ stroke:var(--paper-card,#fff); }

/* ==================================================================
   Report a problem (js/report.js)
   ================================================================== */
.tak-report-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  background:none; border:0; padding:4px 0; cursor:pointer;
  font:inherit; font-size:0.8rem; color:var(--ink-soft);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:color .15s, text-decoration-color .15s;
}
.tak-report-link:hover, .tak-report-link:focus-visible{ color:var(--coral-text); text-decoration-color:currentColor; }
.tak-report-link svg{ flex:none; }
.tak-report-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:16px; }
.tak-report-modal[hidden]{ display:none; }
.tak-report-back{ position:absolute; inset:0; background:rgba(14,21,36,0.55); backdrop-filter:blur(2px); }
.tak-report-box{
  position:relative; width:100%; max-width:440px; max-height:calc(100vh - 32px); overflow:auto;
  background:var(--paper-card,#fff); color:var(--ink); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.3); padding:22px 22px 16px; animation:takReportIn .18s ease-out;
}
@keyframes takReportIn{ from{ transform:translateY(10px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.tak-report-box h2{ margin:0 0 4px; font-family:'Fraunces',Georgia,serif; font-size:1.3rem; }
.tak-report-sub{ margin:0 0 14px; font-size:0.88rem; color:var(--ink-soft); }
.tak-report-x{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; border:0; background:none; color:var(--ink-soft); cursor:pointer; font-size:1rem; }
.tak-report-x:hover{ background:var(--line); }
.tak-report-box fieldset{ border:0; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:4px; }
.tak-report-box legend{ font-weight:600; font-size:0.9rem; margin-bottom:6px; }
.tak-report-box fieldset label{ display:flex; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:0.9rem; }
.tak-report-box fieldset label:has(input:checked){ border-color:var(--teal); background:rgba(33,158,139,0.08); }
.tak-report-box input[type=radio]{ accent-color:var(--teal); margin:0; }
.tak-report-msg-l{ display:block; font-weight:600; font-size:0.9rem; margin-bottom:6px; }
.tak-report-msg-l span{ font-weight:400; color:var(--ink-soft); font-size:0.8rem; }
.tak-report-box textarea{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:10px; font:inherit; font-size:0.9rem; background:var(--paper,#fff); color:var(--ink); resize:vertical; }
.tak-report-err{ color:var(--coral-text); font-size:0.85rem; min-height:1.2em; margin:6px 0; }
.tak-report-actions{ display:flex; justify-content:flex-end; gap:10px; }
.tak-report-cancel, .tak-report-send{ border-radius:10px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; border:1px solid var(--line); background:none; color:var(--ink); }
.tak-report-send{ background:var(--ink,#16213F); color:var(--paper-card,#fff); border-color:transparent; }
html[data-theme="dark"] .tak-report-send{ background:var(--gold); color:#16213F; }
.tak-report-send:disabled{ opacity:.6; cursor:wait; }
.tak-report-done{ text-align:center; padding:8px 0 4px; }
.tak-report-tick{ width:52px; height:52px; margin:0 auto 10px; border-radius:50%; display:grid; place-items:center; background:rgba(33,158,139,0.14); color:var(--teal-text); font-size:1.5rem; font-weight:700; }
.tak-report-id{ margin:10px 0 0; font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ink-soft); text-align:right; }
html.tak-report-open{ overflow:hidden; }

/* ==================================================================
   Built-in Desmos calculator (js/desmos.js)
   ================================================================== */
.tak-desmos{
  position:fixed; right:16px; bottom:16px; z-index:1500;
  width:420px; height:min(560px, calc(100vh - 32px));
  min-width:300px; min-height:320px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px);
  display:flex; flex-direction:column; resize:both; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 22px 50px rgba(14,21,36,0.28);
}
.tak-desmos[hidden]{ display:none; }
.tak-desmos.big{ width:min(780px, calc(100vw - 32px)); height:calc(100vh - 32px); }
.tak-desmos-bar{
  display:flex; align-items:center; gap:8px; padding:6px 6px 6px 12px; cursor:grab; user-select:none; touch-action:none;
  background:#16213F; color:#fff; font-size:0.9rem;
}
.tak-desmos-bar:active{ cursor:grabbing; }
.tak-desmos-grip{ opacity:.55; letter-spacing:-2px; }
.tak-desmos-sp{ flex:1; }
.tak-desmos-bar button{ width:32px; height:32px; border-radius:8px; border:0; background:rgba(255,255,255,0.1); color:#fff; cursor:pointer; font-size:0.95rem; }
.tak-desmos-bar button:hover{ background:rgba(255,255,255,0.22); }
.tak-desmos-calc{ flex:1; min-height:0; }
@media (max-width:700px){
  .tak-desmos, .tak-desmos.big{ left:0 !important; right:0 !important; top:auto !important; bottom:0 !important; width:100%; max-width:100%; height:62vh; border-radius:16px 16px 0 0; resize:none; }
  .tak-desmos-bar{ cursor:default; }
}

/* ==================================================================
   Projected score (dashboard)
   ================================================================== */
.proj-card{ position:relative; }
.proj-label{ display:inline-flex; align-items:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text); background:rgba(232,162,60,0.12); border-radius:999px; padding:3px 9px; }
.proj-main{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin:10px 0 6px; }
.proj-total{ font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:3rem; line-height:1; color:var(--ink); }
.proj-range{ font-size:0.85rem; color:var(--ink-soft); }
.proj-secs{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
.proj-sec{ flex:1 1 140px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.proj-sec b{ display:block; font-family:'IBM Plex Mono',monospace; font-size:1.25rem; color:var(--ink); }
.proj-sec span{ font-size:0.78rem; color:var(--ink-soft); }
.proj-spark{ width:100%; height:70px; display:block; margin-top:6px; }
.proj-spark .ln{ fill:none; stroke:var(--teal); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.proj-spark .ar{ fill:var(--teal); opacity:.1; }
.proj-spark circle{ fill:var(--paper-card,#fff); stroke:var(--teal); stroke-width:2; }
.proj-spark circle.now{ fill:var(--teal); }
.proj-spark text{ fill:var(--ink-soft); font-size:10px; font-family:'IBM Plex Mono',monospace; }
.proj-note{ font-size:0.78rem; color:var(--ink-soft); margin:8px 0 0; line-height:1.45; }
.proj-need{ height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin:8px 0 4px; }
.proj-need i{ display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:inherit; }

/* ==================================================================
   Last week's winners (leaderboard)
   ================================================================== */
.winners{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.winner{ border:1px solid var(--line); border-radius:14px; padding:14px 12px; text-align:center; background:var(--paper-card,#fff); }
.winner .medal{ font-size:1.8rem; line-height:1; }
.winner .wn{ font-weight:700; margin-top:6px; overflow-wrap:anywhere; }
.winner .wp{ font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--ink-soft); }
.winner .wz{ display:inline-block; margin-top:6px; font-size:0.72rem; color:var(--teal-text); background:rgba(33,158,139,0.1); border-radius:99px; padding:2px 8px; }
.winner.first{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
@media (max-width:520px){ .winners{ grid-template-columns:1fr; } .winner{ display:flex; align-items:center; gap:12px; text-align:left; } .winner .wn{ margin:0; flex:1; } }

/* Desmos button in practice and skill-test headers */
.calc-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--paper-card,#fff); color:var(--ink); border-radius:999px; padding:6px 12px; font:inherit; font-size:0.82rem; font-weight:600; cursor:pointer; }
.calc-btn:hover{ border-color:var(--teal); color:var(--teal-text); }
.calc-btn[hidden]{ display:none; }
.calc-btn, .test-header #qCounter, .test-header .aim{ white-space:nowrap; }
@media (max-width:480px){
  .test-header > div{ gap:8px !important; }
  .calc-btn{ padding:6px 10px; }
}

/* Answers checked by the server ("Try another like this") */
.tak-mini-opt.picked{ border-color:var(--ink-soft); }
.tak-mini-wait{ margin-top:14px; color:var(--ink-soft); font-size:0.9rem; }
.tak-guide-err{ margin:8px 0 0; }

/* ==================================================================
   Accessibility (README, "Accessibility")
   ================================================================== */

/* Text for screen readers only. */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* "Skip to content" — added to every page by js/nav.js; shown when focused. */
.skip-link{
  position:fixed; left:12px; top:-80px; z-index:4000;
  padding:10px 18px; border-radius:10px; text-decoration:none;
  background:#16213F; color:#FFFFFF; font:700 0.95rem/1.2 system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
.skip-link:focus{ top:12px; }
html[data-theme="dark"] .skip-link{ background:#F0B45C; color:#12192A; }

/* Visible keyboard focus, everywhere. A blue ring on light pages, a light
   blue ring in dark mode, and a warm light ring on the dark hero cards and
   bars (where blue would disappear into the navy). Only for keyboard focus
   (:focus-visible) — a mouse click never shows it. !important because many
   page styles set outline:none on their inputs and buttons. */
:root{ --focus-ring:#1D5BD6; }
html[data-theme="dark"]{ --focus-ring:#8DB8FF; }
.lessons-hero, .bank-hero, .exam-hero, .score-hero, .admin-hero, .streak-card, .countdown-card,
.start-screen, .results-card, .test-header-bar, .trick.flagship, .pricing, .gd-cta, .drill-banner,
.setup-hero, header.dark-surface, .pay-hero, .tak-desmos-bar, .hm-item.cta{ --focus-ring:#FFD27A; }
html[data-theme="dark"] .skip-link{ --focus-ring:#8DB8FF; }
:focus-visible{ outline:3px solid var(--focus-ring) !important; outline-offset:2px !important; }
/* Things that receive focus only from a script (the skip-link target, a
   heading after a screen change) don't need a ring round the whole area. */
[tabindex="-1"]:focus{ outline:none !important; }
/* Inside scrolling boxes the ring is drawn inside the edge so it is never clipped. */
.hm-item:focus-visible, .tak-step-head:focus-visible, .tak-report-box fieldset label:focus-within{ outline-offset:-3px !important; }
.tak-report-box fieldset label:focus-within{ outline:3px solid var(--focus-ring); }
.tak-report-box fieldset input:focus-visible{ outline:none !important; }

/* Text fields: their outline is what tells you there is a field at all, so
   it needs 3:1 against the page (the shared --line border measured ~1.3:1). */
:root{ --control-line:rgba(22,33,63,0.5); }
html[data-theme="dark"]{ --control-line:rgba(233,238,248,0.42); }
input:is([type=text],[type=email],[type=password],[type=search],[type=number],[type=tel],[type=url],[type=date],[type=time],:not([type])),
select, textarea{ border-color:var(--control-line); }

/* The avatar became a <button> (js/nav.js) — keep it looking the same. */
button.user-avatar{ padding:0; border:none; font-family:var(--mono, 'IBM Plex Mono', monospace); }

/* Less motion when the device asks for it: no entrance animations, pulsing
   timers, shimmer or smooth scrolling. Confetti, floating points and number
   count-ups are already skipped in js/tracker.js. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important;
    transition-duration:0.001ms !important; transition-delay:0s !important; scroll-behavior:auto !important;
  }
}

/* Touch targets: small icon buttons get at least 24×24 px (44 on phones where it fits). */
.tak-report-link{ min-height:24px; }
@media (pointer:coarse){
  .tak-desmos-bar button{ width:40px; height:40px; }
  .tak-report-x{ width:44px; height:44px; top:6px; right:6px; }
}

/* Footer links and other small text links: at least 24 px tall to tap. */
.sf-links a, .flinks a{ display:inline-block; padding:5px 0; }
header .logo{ padding:2px 0; }
.link-btn{ min-height:24px; }
/* Unfilled company-detail placeholders are long unbroken strings; let them
   wrap rather than push a table wider than a phone. */
.fill, .sf-fill{ overflow-wrap:anywhere; }
/* 320 px wide: the signed-in homepage header (menu, logo, Dashboard button,
   theme, avatar) must still fit. */
@media (max-width:360px){
  .hm-right{ gap:5px; }
  .hm-right .nav-cta{ padding:7px 9px; font-size:.74rem; }
  .hm-centre .logo{ font-size:.85rem; }
}
.back-link{ padding:3px 0; }
.ep-skip{ min-height:24px; }
/* Phones: a long word in a table cell (Armenian has many) may break rather
   than push the table off the screen, where overflow-x:clip would hide it. */
@media (max-width:420px){
  table:not(.tak-table) th, table:not(.tak-table) td{ overflow-wrap:anywhere; }
}

/* The dashboard's projected-score card uses .btn links but the dashboard
   never styled them: in dark mode the gold button's dark label sat on the
   dark card (1.1:1). Same look as the buttons on the other pages. */
.proj-card .btn{ display:inline-block; padding:10px 20px; border-radius:100px; font-weight:600; font-size:0.9rem; text-decoration:none; text-align:center; }
.proj-card .btn-primary{ background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#12192A; }
.proj-card .btn-ghost{ border:1.5px solid var(--line); color:var(--ink); background:none; }

/* Headings inherited the pages' 1.6 body line-height, so two-line display
   titles (question bank, skill tests, setup heroes) looked double-spaced.
   :where() keeps this at zero specificity: any page rule still wins. */
:where(h1, h2, h3){ line-height:1.25; }

/* Form controls don't inherit the page font by default, so a few buttons
   (payment's "Get 1 month", "End my access early") rendered in Arial.
   Zero specificity: any page rule that sets its own font still wins. */
:where(button, input, select, textarea){ font-family:inherit; }

/* Answer choices are disabled once checked, and the blanket disabled-button
   fade above greyed out the right answer too, exactly when it matters most.
   The marked right/wrong choices stay at full strength; the others recede a
   little but stay readable. */
:is(.q-bank-opt, .tak-mini-opt, .opt):disabled{ opacity:0.78 !important; }
:is(.q-bank-opt, .tak-mini-opt, .opt):disabled:is(.correct, .wrong){ opacity:1 !important; }

/* "Report a problem" and "Try another like this" can share a line; they
   touched with no space between them. */
.tak-report-link{ margin-right:16px; }

/* ==================================================================
   Figures: inequality shading, geometry figures and data charts
   (js/figure.js). Colours come from the same variables as the graphs
   above, so dark mode re-colours them automatically.
   ================================================================== */
.tak-fig:has(.tak-fig-chart){ max-width:460px; }
/* Shaded half-planes: a light tint plus hatching (a different direction per region). */
.tak-fig-region{ stroke:none; fill-opacity:0.13; }
.tak-fig-region.tak-fig-c-teal{ fill:var(--teal,#219E8B); }
.tak-fig-region.tak-fig-c-gold{ fill:var(--gold-dark,#C97F1F); }
.tak-fig-region.tak-fig-c-coral{ fill:var(--coral,#E15A4D); }
.tak-fig-region.tak-fig-c-ink{ fill:var(--ink,#16213F); }
.tak-fig-hatch{ stroke-width:1; stroke-opacity:0.45; }
.tak-fig-hatch.tak-fig-c-teal{ stroke:var(--teal,#219E8B); }
.tak-fig-hatch.tak-fig-c-gold{ stroke:var(--gold-dark,#C97F1F); }
.tak-fig-hatch.tak-fig-c-coral{ stroke:var(--coral,#E15A4D); }
.tak-fig-hatch.tak-fig-c-ink{ stroke:var(--ink,#16213F); }
/* Geometry */
.tak-fig-geo-line{ fill:none; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round; }
.tak-fig-geo-line.dash{ stroke-dasharray:6 4; stroke-width:1.5; }
.tak-fig-mark, .tak-fig-amark{ fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tak-fig-head{ stroke:none; }
.tak-fig-shade{ stroke:none; fill-opacity:0.12; }
.tak-fig-geo-line.tak-fig-c-ink, .tak-fig-mark.tak-fig-c-ink, .tak-fig-amark.tak-fig-c-ink{ stroke:var(--ink,#16213F); }
.tak-fig-geo-line.tak-fig-c-teal, .tak-fig-mark.tak-fig-c-teal, .tak-fig-amark.tak-fig-c-teal{ stroke:var(--teal,#219E8B); }
.tak-fig-geo-line.tak-fig-c-gold, .tak-fig-mark.tak-fig-c-gold, .tak-fig-amark.tak-fig-c-gold{ stroke:var(--gold-dark,#C97F1F); }
.tak-fig-geo-line.tak-fig-c-coral, .tak-fig-mark.tak-fig-c-coral, .tak-fig-amark.tak-fig-c-coral{ stroke:var(--coral,#E15A4D); }
.tak-fig-head.tak-fig-c-ink, .tak-fig-gdot.tak-fig-c-ink, .tak-fig-shade.tak-fig-c-ink{ fill:var(--ink,#16213F); }
.tak-fig-head.tak-fig-c-teal, .tak-fig-gdot.tak-fig-c-teal, .tak-fig-shade.tak-fig-c-teal{ fill:var(--teal,#219E8B); }
.tak-fig-head.tak-fig-c-gold, .tak-fig-gdot.tak-fig-c-gold, .tak-fig-shade.tak-fig-c-gold{ fill:var(--gold-dark,#C97F1F); }
.tak-fig-head.tak-fig-c-coral, .tak-fig-gdot.tak-fig-c-coral, .tak-fig-shade.tak-fig-c-coral{ fill:var(--coral,#E15A4D); }
.tak-fig-name{ fill:var(--ink,#16213F); font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:14px; }
.tak-fig-meas{ fill:var(--ink,#16213F); font-size:12.5px; font-weight:600; }
.tak-fig-note{ fill:var(--ink-soft,#2C3A63); font-size:11px; font-style:italic; }
/* Charts */
.tak-fig-chart .tak-fig-tick text, .tak-fig-num{ fill:var(--ink-soft,#2C3A63); font-size:11px; }
.tak-fig-leg, .tak-fig-ptitle, .tak-fig-axt{ fill:var(--ink,#16213F); font-size:11.5px; font-weight:600; }
.tak-fig-val{ fill:var(--ink,#16213F); font-size:10.5px; font-weight:600; }
.tak-fig-bar{ stroke-width:1.2; }
.tak-fig-bar.solid{ fill-opacity:0.9; }
.tak-fig-bar.solid.tak-fig-c-teal{ fill:var(--teal,#219E8B); }
.tak-fig-bar.tak-fig-c-teal{ stroke:var(--teal-text,#176F62); }
.tak-fig-bar.tak-fig-c-gold{ stroke:var(--gold-text,#965F17); }
.tak-fig-bar.tak-fig-c-coral{ stroke:var(--coral-text,#C83022); }
.tak-fig-bar.tak-fig-c-ink{ stroke:var(--ink,#16213F); }
.tak-fig-pbg{ fill-opacity:0.28; stroke:none; }
.tak-fig-pbg.tak-fig-c-gold{ fill:var(--gold-dark,#C97F1F); }
.tak-fig-pbg.tak-fig-c-coral{ fill:var(--coral,#E15A4D); }
.tak-fig-pbg.tak-fig-c-ink{ fill:var(--ink,#16213F); fill-opacity:0.14; }
.tak-fig-pln{ stroke-width:1.7; }
.tak-fig-pln.tak-fig-c-gold{ stroke:var(--gold-dark,#C97F1F); }
.tak-fig-pln.tak-fig-c-ink{ stroke:var(--ink,#16213F); stroke-width:1.2; }
.tak-fig-pdot.tak-fig-c-coral{ fill:var(--coral-text,#C83022); }
html[data-theme="dark"] .tak-fig-pdot.tak-fig-c-coral{ fill:var(--coral,#F0776A); }
.tak-fig-curve.ld1{ stroke-dasharray:7 4; }
.tak-fig-curve.ld2{ stroke-dasharray:2 4; }
.tak-fig-curve.ld3{ stroke-dasharray:9 3 2 3; }
.tak-fig-mk{ stroke:var(--paper-card,#fff); stroke-width:1.2; }
.tak-fig-mk.tak-fig-c-teal{ fill:var(--teal,#219E8B); }
.tak-fig-mk.tak-fig-c-gold{ fill:var(--gold-dark,#C97F1F); }
.tak-fig-mk.tak-fig-c-coral{ fill:var(--coral,#E15A4D); }
.tak-fig-mk.tak-fig-c-ink{ fill:var(--ink,#16213F); }
.tak-fig-hbar{ fill:var(--teal,#219E8B); fill-opacity:0.55; stroke:var(--teal-text,#176F62); stroke-width:1.2; }
.tak-fig-pdotc{ fill:var(--teal,#219E8B); stroke:var(--teal-text,#176F62); stroke-width:1; }
.tak-fig-nl{ stroke:var(--ink,#16213F); stroke-width:1.4; }
.tak-fig-box line{ stroke:var(--ink,#16213F); stroke-width:1.6; }
.tak-fig-boxr{ fill:var(--teal,#219E8B); fill-opacity:0.2; stroke:var(--ink,#16213F); stroke-width:1.6; }
.tak-fig-box .tak-fig-med{ stroke-width:3; }