/* ============================================================
   BestBrain — SHARED THEME  (light only)

   Structure comes from the Unfluke Pro design system
   (unfluke-ios/DESIGN-SPEC.md + constants/Colors.ts, light theme):
     canvas #F4F4F6 · surfaces #FFFFFF · hairline borders #E6E8EC
     radius 14–22 · generous spacing · soft shadows
     big bold tabular numbers · tiny uppercase letter-spaced labels

   Colour comes from BestBrain's own palette — the 8 accent hues are
   kept and applied identically on every page, so the platform reads
   as one product instead of fourteen.

   Text is BLACK everywhere. Colour lives on surfaces, bars, chips,
   icons and CTAs — never on the words.

   DARK MODE IS RETIRED. theme.js no longer adds html.dark-mode and
   forces html.light-mode on. The per-page html.dark-mode{} blocks
   are dead code that can never match; they are left in place so the
   decision stays reversible.
   ============================================================ */

:root{
  /* ---- Unfluke structural tokens ---- */
  --u-canvas:#F4F4F6;
  --u-surface:#FFFFFF;
  --u-border:#E6E8EC;
  --u-border-light:#F0F1F4;
  --u-input-bg:#F6F7F9;
  --u-text:#000000;        /* black, per the brief */
  --u-text-2:#3A4150;      /* secondary — still high contrast */
  --u-text-3:#5B6472;      /* tertiary / labels */
  --u-gold:#C99A2E;
  --u-gold-bright:#B8860B;
  --u-gold-tint:#FBF1D8;
  /* Primary CTA — indigo/blue (replaces the gold fill on .btn-primary etc.). */
  --u-cta:#3F5BE0;
  --u-cta-bright:#5B6CF0;
  --u-profit:#0E9E6E;
  --u-loss:#E0483B;
  --u-radius:18px;
  --u-radius-sm:14px;
  --u-radius-lg:22px;
  --u-shadow:0 1px 2px rgba(14,15,20,.04), 0 12px 28px rgba(14,15,20,.06);
  --u-shadow-lg:0 2px 4px rgba(14,15,20,.05), 0 20px 44px rgba(14,15,20,.09);

  /* ---- BestBrain accent hues (kept, unified) ---- */
  --c1:#00A88F;  /* teal   */
  --c2:#3F5BE0;  /* indigo */
  --c3:#E07B00;  /* orange */
  --c4:#E01B60;  /* pink   */
  --c5:#7B36D9;  /* violet */
  --c6:#0090D0;  /* cyan   */
  --c7:#C99A2E;  /* gold   */
  --c8:#0E9E6E;  /* green  */

  /* legacy accent names remapped onto the unified set */
  --teal:#00A88F; --peri:#3F5BE0; --amber:#E07B00;
  --rose:#E01B60; --violet:#7B36D9;
  --aurora:linear-gradient(115deg,#00A88F 0%,#3F5BE0 38%,#7B36D9 70%,#E07B00 100%);
}

/* ============================================================
   CANVAS
   ============================================================ */
body{
  /* Seamless flat white across every page (per review: "white color issue,
     left and right, check all the pages"). The tinted radial canvas pooled
     colour at the corners and made centred content read as a floating box.
     Auth pages keep their own surface via the .auth-shell rule below. */
  background-color:#FFFFFF !important;
  background-image:none !important;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* Decorative colour "blobs" (dashboard/learn/etc.) pooled tint at the left and
   right edges. Hidden everywhere so the white surface stays seamless. */
.blobs, .blob{ display:none !important; }

/* ============================================================
   TYPE — Unfluke hierarchy
   Tiny uppercase tracked labels; big bold tabular numbers.
   ============================================================ */
.eyebrow, .mono, .feat-label, .pcard__eyebrow, .hm-scale,
.roster th, .cstat span, .dlab, .role-note, .foot-mono, .rc-tag,
.cls-chip, .weak-chip, .msub{
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  color:var(--u-text-3) !important;
}
/* Numbers: bold and tabular so columns line up. */
.bar-foot .big, .cstat b, .ring-num, .stat-value, .fchip b,
.donut text, .hbar .hval, .mast-num{
  font-variant-numeric:tabular-nums;
  font-weight:800 !important;
}

/* ============================================================
   SURFACES — white cards, hairline border, soft shadow, r14–22
   Every card class in the app, so all pages match.
   ============================================================ */
.pcard, .vcard, .tablecard, .box, .feature-card, .optcard,
.notes__card, .attcard, .howcard, .qcard, .rescard, .blurbox,
.card, .container, .auth-panel{
  background:var(--u-surface) !important;
  border:1px solid var(--u-border) !important;
  border-radius:var(--u-radius) !important;
  box-shadow:var(--u-shadow);
  position:relative;
}
.pcard:hover, .vcard:hover, .feature-card:hover,
.optcard:hover, .qcard:hover, .blurbox:hover{
  box-shadow:var(--u-shadow-lg);
  border-color:color-mix(in srgb, var(--ac,var(--c2)) 40%, var(--u-border)) !important;
}

/* One accent hue per card — the colour the brief asked to keep. */
.pcard:nth-of-type(6n+1), .vcard:nth-of-type(6n+1), .card:nth-of-type(6n+1),
.feature-card:nth-of-type(6n+1), .qcard:nth-of-type(6n+1){--ac:var(--c1);}
.pcard:nth-of-type(6n+2), .vcard:nth-of-type(6n+2), .card:nth-of-type(6n+2),
.feature-card:nth-of-type(6n+2), .qcard:nth-of-type(6n+2){--ac:var(--c2);}
.pcard:nth-of-type(6n+3), .vcard:nth-of-type(6n+3), .card:nth-of-type(6n+3),
.feature-card:nth-of-type(6n+3), .qcard:nth-of-type(6n+3){--ac:var(--c3);}
.pcard:nth-of-type(6n+4), .vcard:nth-of-type(6n+4), .card:nth-of-type(6n+4),
.feature-card:nth-of-type(6n+4), .qcard:nth-of-type(6n+4){--ac:var(--c5);}
.pcard:nth-of-type(6n+5), .vcard:nth-of-type(6n+5), .card:nth-of-type(6n+5),
.feature-card:nth-of-type(6n+5), .qcard:nth-of-type(6n+5){--ac:var(--c4);}
.pcard:nth-of-type(6n+6), .vcard:nth-of-type(6n+6), .card:nth-of-type(6n+6),
.feature-card:nth-of-type(6n+6), .qcard:nth-of-type(6n+6){--ac:var(--c6);}

/* A 3px accent rule across the card top — inset so it needs no
   overflow:hidden and cannot clip dropdowns. */
.pcard::after, .vcard::after, .tablecard::after, .feature-card::after,
.optcard::after, .attcard::after, .howcard::after, .qcard::after,
.rescard::after, .blurbox::after, .card::after{
  content:'';position:absolute;top:0;left:16px;right:16px;height:3px;
  border-radius:0 0 3px 3px;
  background:var(--ac,var(--c2));
  pointer-events:none;
}

/* ============================================================
   NAV / FOOTER
   ============================================================ */
.nav, nav:not([class]){
  position:relative;
  background:var(--u-surface) !important;
  border-bottom:1px solid var(--u-border) !important;
}
.nav::after, nav:not([class])::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c5),var(--c4),var(--c3),var(--c7));
  pointer-events:none;
}
.footer__base, .footer, footer{
  background:var(--u-surface) !important;
  border-top:1px solid var(--u-border) !important;
}

/* Dark mode is retired — hide every toggle so it is not reachable.
   #acctTheme is the floating toggle injected by account-menu.js, and
   the settings panel's Theme <select> goes with it. */
.nav-theme-toggle, .nav__theme, .theme-toggle, [data-theme-toggle],
#acctTheme, .acct-field:has(#acctThemeSel){
  display:none !important;
}

/* ============================================================
   TEXT IS BLACK
   ============================================================ */
body, h1, h2, h3, h4, h5, h6, p, li, span, td, th, label, div, a,
.card-title, .cname, .mlab, .hlab, .stud-cell, .atxt, .fc-title,
.cont-card h4, .reco-card h4, .sub, .subtitle{
  color:var(--u-text);
}
.muted, .fc-sub, .ccsub, .empty-hint, .greet-date, .text-secondary,
.foot-cols a, .foot-cols li, .atime, .rail-mini{
  color:var(--u-text-2);
}
/* Un-clip gradient headings — background-clip:text with a transparent
   fill is what makes them render as a gradient; both must be undone or
   the text stays invisible. */
h1 em, h2 em, h3 em, .grad, .greet h1 em, .hero-title em, .bar-foot .big{
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:var(--u-text) !important;
  color:var(--u-text) !important;
}

/* --- the exceptions: text on a genuinely dark/saturated surface ---
   index.html's hero is a saturated brand block (white on purple reads
   fine). login/signup's brand panel is NOT in this list — it used to be
   a near-black split screen, which read as dark mode on a light-only
   product, so it is converted to a light surface below instead. */
.hero-title, .hero-title em, .hero-eyebrow, .hero-subtitle,
.hero-proof, .hero-proof *,
.stats-band, .stats-band *{
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
}

/* login + signup brand panel: light surface, black text, colour kept as a
   soft wash so the split screen still has personality. */
.brand-panel{
  background:
    radial-gradient(760px 560px at 8% 6%,   rgba(0,168,143,.16), transparent 62%),
    radial-gradient(820px 600px at 92% 94%, rgba(123,54,217,.16), transparent 62%),
    radial-gradient(620px 460px at 70% 22%, rgba(63,91,224,.12), transparent 64%),
    #FFFFFF !important;
  border-right:1px solid var(--u-border);
}
.brand-panel, .brand-panel *{
  color:var(--u-text) !important;
  -webkit-text-fill-color:var(--u-text) !important;
}
/* the little feature bullets on that panel were white-on-dark pills */
.brand-panel .fi, .brand-feat .fi{
  background:var(--u-gold-tint) !important;
  border:1px solid color-mix(in srgb, var(--u-gold) 30%, transparent) !important;
  color:var(--u-gold-bright) !important;
}
.auth-shell, body:has(.auth-shell){
  background:var(--u-canvas) !important;
}
/* ...but the white chips floating inside that hero go the other way. */
.fchip, .fchip *, .fchip b{
  color:var(--u-text) !important;
  -webkit-text-fill-color:var(--u-text) !important;
}
.fchip span{ color:var(--u-text-3) !important; -webkit-text-fill-color:var(--u-text-3) !important; }

/* ============================================================
   CHIPS / TAGS / PILLS — coloured fill, black label
   ============================================================ */
.chip, .tag, .pill, .fchip, .modchip, .dchip, .wchip, .tagchip,
.handchip, .streakchip, .lvlpill, .badge, .rolebadge, .cls-chip,
.rc-tag, .weak-chip, .lang-chip{
  background:var(--u-gold-tint);
  border:1px solid color-mix(in srgb, var(--u-gold) 30%, transparent);
  border-radius:999px;
}
.pill.student{background:color-mix(in srgb,var(--c1) 14%,#fff);border-color:color-mix(in srgb,var(--c1) 34%,transparent);}
.pill.teacher{background:color-mix(in srgb,var(--c2) 14%,#fff);border-color:color-mix(in srgb,var(--c2) 34%,transparent);}
.pill.parent {background:color-mix(in srgb,var(--c3) 14%,#fff);border-color:color-mix(in srgb,var(--c3) 34%,transparent);}

/* ============================================================
   BUTTONS — gold gradient primary, outlined secondary
   ============================================================ */
.btn-primary, .btn, .btn-book, .btn-join, .btn-new, .btn-resume, .btn-fix{
  background:linear-gradient(135deg, var(--u-cta-bright), var(--u-cta)) !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  border:none !important;
  border-radius:999px;
  font-weight:800;
  box-shadow:0 6px 18px color-mix(in srgb, var(--u-cta) 34%, transparent);
}
.btn-primary:hover, .btn:hover, .btn-fix:hover{
  box-shadow:0 10px 26px color-mix(in srgb, var(--u-cta) 46%, transparent);
}
.btn-ghost, .social-btn{
  background:var(--u-surface) !important;
  border:1px solid var(--u-border) !important;
  color:var(--u-text) !important;
  border-radius:999px;
}
.btn-ghost:hover{ border-color:var(--u-cta) !important; }

/* ============================================================
   INPUTS
   ============================================================ */
input, textarea, select{
  background:var(--u-input-bg) !important;
  border:1px solid var(--u-border) !important;
  border-radius:var(--u-radius-sm) !important;
  color:var(--u-text) !important;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--u-gold) !important;
  outline:none;
}

/* ============================================================
   TABLES
   ============================================================ */
table{ background:var(--u-surface) !important; }
th, td{ border-color:var(--u-border) !important; color:var(--u-text) !important; }

/* ============================================================
   SURFACES THAT MUST STAY COLOUR-FIXED
   Video chrome and live.html's skeuomorphic chalkboard are outside
   the token system on purpose — a wash over them reads as a bug.
   ============================================================ */
.vstage, .vstage *, .stage__video, .playbadge,
.board, .board__grid, .chalkboard{
  background-image:none;
}

/* ============================================================
   FALLBACK — color-mix() is baseline, but if it is missing every
   rule using it drops out and leaves a half-applied theme.
   ============================================================ */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .pcard:hover, .vcard:hover, .feature-card:hover{border-color:var(--u-border) !important;}
  .chip, .tag, .pill{border-color:var(--u-gold);}
  .btn-primary, .btn{box-shadow:0 6px 18px rgba(63,91,224,.34);}
}

/* ============================================================
   BLACK OUTLINES + BOLD BLACK TEXT
   Every block gets a real black border instead of a hairline that
   disappears on a white page, and all copy is bold black.
   ============================================================ */
.pcard, .vcard, .tablecard, .box, .feature-card, .optcard,
.notes__card, .attcard, .howcard, .qcard, .rescard, .blurbox,
.card, .container, .auth-panel, .chrow, .subjcard, .cont-card,
.reco-card, .cstat, .lang-chip, .sync-tip, .role-switch,
.filters, .drop, .link-box, .opt, .tbl-wrap, .modal{
  border:1.5px solid #000000 !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
/* the accent rule across the top of a card sits INSIDE the black
   outline, so the hue still identifies the card */
.pcard::after, .vcard::after, .tablecard::after, .feature-card::after,
.optcard::after, .attcard::after, .howcard::after, .qcard::after,
.rescard::after, .blurbox::after, .card::after{
  left:10px; right:10px; height:4px; border-radius:0 0 4px 4px;
}

/* ============================================================
   NAV — glassmorphic, premium, identical on every screen
   ------------------------------------------------------------
   Real glass needs three things together: a translucent (not solid)
   background, an actual backdrop-filter blur, and a light top edge
   so the pane catches an implied light source. A solid white bar
   with a shadow is NOT glass, which is what this was before.
   ============================================================ */
.nav, nav:not([class]){
  position:sticky; top:0; z-index:200;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)) !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom:2px solid #000000 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),      /* top light-catch edge */
    0 8px 28px rgba(14,15,20,.10) !important; /* lift off the canvas */
}
/* Safari/Firefox without backdrop-filter would render an 82%-opaque bar with
   text showing through from beneath — opaque it up instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .nav, nav:not([class]){ background:#FFFFFF !important; }
}

/* Every property below is !important ON PURPOSE.
   Six pages carry their OWN .nav rules (learn 17, live 11, challenge 11,
   mocktest 10, pal 8, lesson 6). Several use higher-specificity selectors
   like `.nav .nav__link`, which beat this sheet on specificity even though
   it loads later — so the bar rendered at a different height, padding and
   type size depending on which page you opened. Forcing them is what makes
   the nav genuinely identical everywhere. */
.nav__inner, .nav-inner{
  /* 3-column grid (1fr auto 1fr) so the links sit at the TRUE centre of the bar
     — the flex version only centred them within the leftover space between the
     brand and the right actions, which is off-centre when those two differ in
     width. Equal 1fr side columns guarantee the middle column is viewport-centred. */
  max-width:none !important; margin:0 !important; padding:0 clamp(24px,2.6vw,60px) !important;
  height:66px !important; display:grid !important;
  grid-template-columns:1fr auto 1fr !important; align-items:center !important;
  gap:26px !important;
}
.brand, .logo{ justify-self:start !important; }
.nav__links, .nav-links{
  display:flex !important; gap:4px !important; justify-self:center !important;
  align-items:center !important;
}

/* BOLD nav letters */
.nav__link, .nav-link, nav:not([class]) a.nav__link{
  position:relative;
  padding:9px 15px !important;
  border-radius:11px !important;
  font-family:'Nunito',sans-serif !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
  line-height:1 !important;
  text-transform:none !important;
  color:#000000 !important;
  background:transparent;
  border:none !important;
  transition:background .22s ease, transform .22s ease;
}
.nav__link:hover, .nav-link:hover{
  background:rgba(14,15,20,.06);
  transform:translateY(-1px);
}
/* current page: a solid black pill — unmistakable, and it reads as
   "premium" far better than a 3px underline */
.nav__link.is-current, .nav-link.current, .nav__link[aria-current="page"]{
  background:#000000 !important;
  color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  box-shadow:0 4px 14px rgba(14,15,20,.28);
}
/* Each page's own CSS draws a small underline/aurora bar under the active
   link via ::after. With the black pill that indicator is redundant and pokes
   out below it, so suppress every nav-link pseudo-element. */
.nav__link::after, .nav__link::before,
.nav-link::after, .nav-link::before,
.nav__link.is-current::after, .nav-link.current::after{
  display:none !important;
  content:none !important;
}
.brand, .logo{
  display:flex !important; align-items:center !important;
  gap:10px !important; flex-shrink:0 !important; text-decoration:none !important;
}
.brand__mark, .logo svg{ width:26px !important; height:26px !important; }
.brand__word, .wordmark{
  font-family:'Fraunces',serif !important;
  font-size:21px !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  color:#000000 !important;
}
.nav__right, .nav-right{
  display:flex !important; align-items:center !important;
  gap:12px !important; flex-shrink:0 !important; justify-self:end !important;
}
/* The nav CTA is a small pill on every page, never a full-width block. */
.nav__right .btn-primary, .nav-right .btn-primary{
  padding:9px 18px !important; font-size:14px !important; white-space:nowrap !important;
}

@media (max-width:1080px){
  /* This block used to also carry `.nav__links{display:none}`. It never once
     applied — `.nav__links{display:flex !important}` above outranks a plain
     declaration however late it appears — so the links stayed in the bar and
     forced the document to ~638px wide at phone widths. The collapse now lives
     in the mobile layer at the end of this file, at 900px, paired with a burger
     that gives those links somewhere to go. Do not re-add it here: between
     900px and 1080px the links still fit, and hiding them at 1080 would leave
     that range with no navigation at all. */
  .nav__inner, .nav-inner{ padding:0 18px; }
}
.footer__base, .footer, footer{ border-top:2px solid #000000 !important; }
/* The main feature pages now render one shared React <FeatureFooter/> (see
   App.tsx); hide the per-page footers they used to ship (learn's mega, the
   live/arena/tests one-liner) so it never doubles. The dashboard's own bare
   <footer> and the landing's `.sf`/`.feat-foot` use different selectors and are
   untouched. */
footer.footer, footer.footer__base{ display:none !important; }
th, td{ border-color:#000000 !important; }
.roster th{ border-bottom:2px solid #000000 !important; }

/* inputs + buttons */
input, textarea, select, .search, .searchbox{
  border:1.5px solid #000000 !important;
  border-radius:12px !important;
  color:#000000 !important;
  font-weight:700 !important;
}
input::placeholder, textarea::placeholder{
  color:#000000 !important; opacity:.62; font-weight:700;
}
.btn-primary, .btn, .btn-ghost, .social-btn, .btn-fix,
.btn-book, .btn-join, .btn-new, .btn-resume{
  border:1.5px solid #000000 !important;
  font-weight:800 !important;
}
/* chips keep their tint but gain the outline */
.chip, .tag, .pill, .fchip, .modchip, .dchip, .wchip, .tagchip,
.handchip, .streakchip, .lvlpill, .badge, .rolebadge, .cls-chip,
.rc-tag, .weak-chip, .sub-pill, .subjtag{
  border:1.5px solid #000000 !important;
  color:#000000 !important;
  font-weight:700 !important;
}

/* ---- ALL TEXT BOLD + BLACK ---- */
body, p, li, span, div, a, td, th, label, h1, h2, h3, h4, h5, h6,
.card-title, .fc-title, .fc-sub, .ccsub, .muted, .sub, .subtitle,
.eyebrow, .mono, .empty-hint, .chnum, .chrow__title, .dlab,
.greet-date, .cstat span, .text-secondary{
  color:#000000 !important;
  font-weight:700 !important;
}
h1, h2, h3, .card-title, .foot-tag, .cname{ font-weight:800 !important; }
/* the tiny uppercase labels stay small but go black + bold */
.eyebrow, .mono, .feat-label, .pcard__eyebrow, .roster th,
.cstat span, .dlab, .role-note, .foot-mono, .rc-tag, .cls-chip,
.weak-chip, .msub{
  color:#000000 !important;
  font-weight:700 !important;
}
/* chapter numbers and any inline-coloured accent text go black —
   these carry inline style="color:var(--amber)" in the markup */
.chnum, .chrow__num, .chapnum, [class*="num"]{
  color:#000000 !important;
  font-weight:800 !important;
}

/* the exceptions stay: text on a genuinely dark/saturated surface */
.hero-title, .hero-title em, .hero-eyebrow, .hero-subtitle,
.hero-proof, .hero-proof *, .stats-band, .stats-band *{
  color:#FFFFFF !important;
  font-weight:800 !important;
}

/* ============================================================
   HIGH-CONTRAST COMPONENT PASS
   Every component gets a hard black edge and heavier type, so the
   page reads as distinct blocks rather than white-on-white.
   Covers the test/mocktest surfaces plus their siblings elsewhere.
   ============================================================ */
.attcard, .howcard, .qcard, .rescard, .blurbox, .pcard,
.opt, .optcard, .stage, .board__grid, .roster, .tbl-wrap,
.reco-card, .cont-card, .child-card, .alerts{
  border:2px solid #000000 !important;
  border-radius:14px !important;
  background:#FFFFFF !important;
  box-shadow:4px 4px 0 rgba(14,15,20,.10) !important;  /* hard offset = crisp, not fuzzy */
}
/* Page-specific block classes that the generic list above misses. Found by
   scanning every rule with a card-like border-radius across all 15 pages —
   .pick (the mocktest test cards) was the visible gap. */
.pick, .feat-card, .qz__opt, .ph-opt, .solution, .report,
.stat, .stats, .ladder, .lb__row, .rung, .hist__row, .roster__row,
.sess, .starter, .mini-row, .vpitem, .vtoggle,
.role-tabs, .otp-digit, .composer__field, .demo-info, .sentbanner,
.calledon, .cam-consent, .lap-screen, .selftile, .feature-icon,
.chatitem, .chat{
  border:2px solid #000000 !important;
  border-radius:14px !important;
  box-shadow:4px 4px 0 rgba(14,15,20,.10) !important;
}
/* ...but these must NOT get an edge: avatars, skeleton loaders and the
   video-player chrome, where a hard border reads as a rendering fault. */
.av, .sess__avatar, .skel, .player, .vplayer-wrap, .vstage,
.stage__video, .playbadge, .brand__mark{
  border:none !important;
  box-shadow:none !important;
}

/* section eyebrows: black, bold, tracked */
.pcard__eyebrow, .feat-label, .eyebrow{
  color:#000000 !important;
  font-weight:800 !important;
  letter-spacing:1.3px !important;
}
/* the little coloured dot before an eyebrow stays coloured — it is the
   only remaining hue on these labels and it aids scanning */
.pcard__eyebrow::before, .eyebrow::before{ opacity:1; }

/* chips/pills on the test pages: solid outline, bold black label */
.chip, .hero__chips .chip, .dchip, .wchip, .lvlpill, .tag,
.streakchip, .handchip, .tagchip{
  border:2px solid #000000 !important;
  background:#FBF1D8 !important;
  color:#000000 !important;
  font-weight:800 !important;
  border-radius:999px !important;
}
/* difficulty chips keep a semantic tint but gain the black edge */
.dchip.easy,  .chip--easy  { background:#E3F7EE !important; }
.dchip.med,   .chip--med   { background:#E9EDFF !important; }
.dchip.hard,  .chip--hard  { background:#FDE7EC !important; }

/* primary CTAs: gold fill, black edge, hard shadow */
.btn-primary, .btn, .btn-fix, .btn-book, .btn-join, .btn-new, .btn-resume{
  border:2px solid #000000 !important;
  box-shadow:3px 3px 0 #000000 !important;
  font-weight:800 !important;
}
.btn-primary:hover, .btn:hover{
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 #000000 !important;
}
.btn-primary:active, .btn:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 #000000 !important;
}
/* headings on these pages */
.t-head h2, .hero__title, .pcard h3, .qcard h3, .rescard h3{
  color:#000000 !important;
  font-weight:800 !important;
}
/* progress + meter tracks get an edge so they are visible when empty */
.prog, .htrack, .mini-bar, .bar-track, .meter{
  border:1.5px solid #000000 !important;
  border-radius:999px !important;
  background:#FFFFFF !important;
}

/* ============================================================
   LEARN — colourful + premium
   Both .subj (subject buttons) and .chrow (chapter rows) expose the
   subject's own hue as --sa, so every surface here can be coloured
   by its subject rather than all being the same white box.
   Text stays black on light tints; the hue does the work.
   ============================================================ */

/* ---- subject picker: real colour blocks, not white chips ---- */
.subj{
  position:relative;
  display:flex !important; flex-direction:column; gap:6px;
  padding:0 0 16px !important;
  border:2px solid #000 !important;
  border-radius:16px !important;
  background:color-mix(in srgb, var(--sa) 15%, #fff) !important;
  box-shadow:4px 4px 0 var(--sa) !important;
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.subj:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--sa) !important; }
/* a solid colour cap so the subject is identifiable at a glance */
.subj::before{
  content:''; display:block; height:44px; background:var(--sa);
  border-bottom:2px solid #000; margin-bottom:12px;
}
.subj__icon{
  position:absolute; top:9px; left:14px;
  color:#fff !important; height:26px; display:flex; align-items:center; z-index:1;
}
.subj__name{ padding:0 14px; font-size:16px !important; font-weight:800 !important; color:#000 !important; }
.subj__count{
  padding:0 14px;
  font-family:'Fragment Mono',monospace; font-size:11px !important; font-weight:700 !important;
  letter-spacing:1.1px; text-transform:uppercase; color:#000 !important; opacity:.75;
}
/* the selected subject reads as pressed-in, not just outlined */
.subj.is-active{
  background:color-mix(in srgb, var(--sa) 30%, #fff) !important;
  box-shadow:2px 2px 0 #000 !important;
  transform:translate(2px,2px);
}

/* ---- chapter rows: subject-tinted, premium spacing ---- */
.chrow{
  position:relative;
  border:2px solid #000 !important;
  border-radius:14px !important;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--sa) 13%, #fff) 0%,
    color-mix(in srgb, var(--sa) 4%,  #fff) 34%,
    #fff 70%) !important;
  box-shadow:4px 4px 0 rgba(14,15,20,.10) !important;
  padding:18px 20px !important;
  transition:transform .16s ease, box-shadow .16s ease;
}
.chrow:hover{
  transform:translate(-3px,-3px);
  box-shadow:7px 7px 0 var(--sa) !important;
}
/* the chapter number becomes a solid colour tile — the single strongest
   colour cue in the list, and it makes scanning by number effortless */
.chrow__num{
  display:flex !important; align-items:center; justify-content:center;
  width:52px; height:52px; flex:none;
  background:var(--sa) !important;
  border:2px solid #000; border-radius:13px;
  box-shadow:2px 2px 0 #000;
  font-family:'Fraunces',serif !important;
  font-size:21px !important; font-weight:800 !important;
  font-style:normal !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
}
.chrow__name{ font-size:17px !important; font-weight:800 !important; color:#000 !important; }
.chrow__dur{
  font-family:'Fragment Mono',monospace; font-size:11px !important; font-weight:700 !important;
  letter-spacing:1px; text-transform:uppercase; color:#000 !important;
  border:2px solid #000; border-radius:999px; padding:5px 11px;
  background:#fff;
}
.chrow__subjtag{
  border:2px solid #000 !important; border-radius:999px !important;
  color:#000 !important; font-weight:800 !important; font-size:11px !important;
  padding:4px 10px !important;
}
/* the little video/notes/test module chips */
.chrow .mod, .mod{
  border:2px solid #000 !important; border-radius:9px !important;
  background:#fff !important; color:#000 !important;
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
}
.chrow:hover .mod{ background:color-mix(in srgb, var(--sa) 22%, #fff) !important; }
.chrow__arrow{
  border:2px solid #000; border-radius:50%;
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--sa); color:#fff;
}
.badge-mastered{
  border:2px solid #000 !important; border-radius:999px !important;
  background:#0E9E6E !important; color:#fff !important; font-weight:800 !important;
  padding:5px 12px !important;
}
/* progress track on a row */
.chrow .prog, .chrow__pct{ color:#000 !important; font-weight:800 !important; }

/* ---- the class selector pill ---- */
.classpill, .cls-pick, .classbtn{
  border:2px solid #000 !important; box-shadow:3px 3px 0 #000 !important;
  font-weight:800 !important;
}

/* ---- list heading ---- */
.listhead__title{ font-weight:800 !important; color:#000 !important; }
.listhead__title .subj-accent{ font-style:italic; }

/* ============================================================
   FOOTER — bold, large, black
   The column headings were 10px grey at weight 400 and the links
   13px grey; the Class 6–9 links additionally carry INLINE
   style="color:var(--teal|amber|peri|rose)", and an inline style
   beats any stylesheet rule, so those specifically need
   !important to come back to black.
   ============================================================ */
footer .foot-cols h5,
.foot-cols h5{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  color:var(--u-text) !important;
  margin-bottom:14px;
}
footer .foot-cols a,
footer .foot-cols li,
.foot-cols a, .foot-cols li{
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.5;
  color:var(--u-text) !important;   /* !important beats the inline colours */
  margin-bottom:11px;
}
.foot-cols a:hover{
  color:var(--u-gold-bright) !important;
  text-decoration:underline;
}
/* brand column */
.foot-tag, footer .foot-tag{
  font-size:19px !important;
  font-weight:800 !important;
  color:var(--u-text) !important;
}
.foot-mono, footer .foot-mono{
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  color:var(--u-text) !important;
}
.logo .wordmark, footer .wordmark{
  font-weight:700;
  color:var(--u-text) !important;
}
/* the giant watermark stays a faint tint — making it black would
   swamp the column text sitting on top of it. .footer__mark is the same
   watermark on the Learn footer; without it here the global "all text black"
   rule turns it into a huge solid-black BestBrain that overflows the footer. */
.foot-word, .footer__mark{ color:rgba(14,15,20,.05) !important; }


/* ---------- signed-in user chip (shared) ---------- */
.userchip__txt{ font-size:15px !important; font-weight:700 !important; color:#000 !important; }
.userchip__out{ font-size:14px !important; font-weight:800 !important; }

@media print{
  body{background-image:none;}
  .nav::after, nav:not([class])::after{display:none;}
}

/* Subtle aurora background so the page never reads as empty, even in the gutters. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(760px 600px at -6% -10%,rgba(61,232,197,.09),transparent 62%),radial-gradient(820px 640px at 106% 10%,rgba(124,155,255,.10),transparent 62%),radial-gradient(640px 580px at 42% 116%,rgba(255,180,84,.07),transparent 62%);}


/* ================================================================
   MOBILE LAYER — phones and small tablets
   ================================================================
   Last block in the file, and heavy on !important, both on purpose.
   Everything above was authored desktop-first and already forces its
   values (see the "Every property below is !important ON PURPOSE"
   note in the nav section). An !important declaration is not beaten
   by source order alone, so a mobile rule that has to win one has to
   be !important too. The nav is the clearest case: line ~377 sets
   `.nav__links{display:flex !important}` while the old max-width:1080px
   rule below it said plain `display:none` — which is why the links
   never collapsed and every page scrolled sideways at phone widths.

   There is deliberately NO blanket `overflow-x:hidden` on html/body.
   The nav is position:sticky and an overflow clip on an ancestor
   silently disables sticky. Each real overflow source is fixed at
   the source instead.
   ================================================================ */

/* ---------- nav: burger + drawer (hidden until mobile) ---------- */
.nav__burger{
  display:none;
  /* 44px is the floor everywhere on this site: iOS HIG's 44pt and WCAG 2.5.5
     (Target Size, AAA) agree on it, and it is the size the rest of the mobile
     controls below are held to. */
  width:44px; height:44px; padding:0; flex:none;
  align-items:center; justify-content:center;
  border:1.5px solid #000000; border-radius:12px;
  background:#FFFFFF; color:#000000; cursor:pointer;
}
.nav__scrim, .nav__drawer{ display:none; }

@media (max-width:900px){
  /*
    Everything that collapses the bar is scoped to .nav__inner--mobilenav,
    the marker the React <Navbar/> sets because it also renders the burger and
    the drawer.

    This file is shared: the legacy static pages under /edulearn-frontend/ link
    it too, and their nav is hand-written HTML with no burger in it. Hiding
    .nav__links unconditionally would leave those pages with no navigation at
    all on a phone. Scoping means a page opts into the collapse by shipping the
    control that reopens the links. Do not lift these rules out of the scope.
  */

  /* Burger | brand | actions. .nav__links is display:none so it claims no
     track, leaving exactly three items for three columns. */
  .nav__inner--mobilenav{
    grid-template-columns:auto 1fr auto !important;
    gap:12px !important;
    padding:0 14px !important;
    height:60px !important;
  }
  .nav__inner--mobilenav .nav__burger{ display:inline-flex !important; }
  .nav__inner--mobilenav .nav__links,
  .nav__inner--mobilenav .nav-links{ display:none !important; }
  .nav__inner--mobilenav .brand,
  .nav__inner--mobilenav .logo{ justify-self:start !important; min-width:0 !important; }
  .brand__word{ font-size:19px !important; }
  .nav__inner--mobilenav .nav__right,
  .nav__inner--mobilenav .nav-right{ justify-self:end !important; gap:8px !important; }

  .nav__scrim{
    display:block; position:fixed; inset:0;
    background:rgba(14,15,20,.44);
    opacity:0; pointer-events:none;
    transition:opacity .24s ease;
    z-index:9300;
  }
  .nav__scrim.is-open{ opacity:1; pointer-events:auto; }

  /* Slides from the LEFT because the burger is on the left — a drawer that
     flies in from the opposite side to the control that opened it reads as a
     different surface entirely. */
  .nav__drawer{
    display:block; position:fixed; top:0; left:0; bottom:0;
    width:min(300px,84vw);
    padding:12px 14px calc(24px + env(safe-area-inset-bottom,0px));
    background:#FFFFFF;
    border-right:2px solid #000000;
    box-shadow:14px 0 46px rgba(15,23,42,.20);
    transform:translateX(-102%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:9400;
  }
  .nav__drawer.is-open{ transform:translateX(0); }
  /* Aligns the X with the burger underneath it: the bar is 60px tall and the
     drawer's own top padding is 12px, so a 42px control lands on the same
     optical row. */
  .nav__drawer-head{ display:flex; align-items:center; height:44px; margin-bottom:14px; }
  .nav__drawer-close{
    width:44px; height:44px; padding:0; flex:none;
    display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid #000000; border-radius:12px;
    background:#FFFFFF; color:#000000; cursor:pointer;
  }
  .nav__drawer-links{ display:flex; flex-direction:column; gap:4px; }
  /* Stacked full-width rows, not the desktop pill row. */
  .nav__drawer .nav__link{
    display:block !important;
    padding:14px 16px !important;
    font-size:17px !important;
    line-height:1.25 !important;
    border-radius:12px !important;
    min-height:48px;
  }
  /* Floating buttons belong to body, not to this component's tree — they are
     hidden by class while the drawer owns the screen (see Navbar.tsx). */
  body.nav-drawer-open .acct-fab,
  body.nav-drawer-open #efp-btn{ display:none !important; }
}

@media (min-width:901px){
  /* The drawer never participates above the breakpoint, whatever its state. */
  .nav__drawer, .nav__scrim{ display:none !important; }
}

/* ---------- readable type floor ---------- */
/* 900px, not 600px.
   This floor was written for phones and stopped at 600px, which left the two
   viewports either side of it untouched: a phone held sideways is 667px wide
   and a tablet is 768px, and neither of them is read from any further away
   than a phone held upright. The audit counted 60 sub-12px labels at 667px
   and 66 at 768px against 11 at 390px — all of them these same selectors,
   simply out of range.

   900px is the breakpoint the rest of this file already uses, and it is where
   the rail becomes a drawer, so the whole touch layout now turns on together.
   Above it nothing changes. */
@media (max-width:900px){
  /* 11px eyebrow/mono labels read fine on a monitor at arm's length and not
     on a phone held at 30cm. 12px is the floor. These are the same selectors
     that set the small sizes earlier in this file, plus the per-page
     equivalents the page stylesheets set themselves — the audit found text
     down to 9.5px on live and pal. */
  .eyebrow, .mono, .feat-label, .pcard__eyebrow, .hm-scale,
  .roster th, .cstat span, .dlab, .role-note, .foot-mono, .rc-tag,
  .cls-chip, .weak-chip, .msub,
  .subj__count, .chrow__dur, .chrow__pct, .chrow__subjtag,
  .ctab__count, .subjcard__go, .nextup__kicker, .greet-date,
  .how__num, .faqc__tag, .pick__subj, .qnum, .sylc__count,
  .joinband__eyebrow, .side__foot, .composer__note, .rolebadge,
  .tag, .count,
  /* found by the audit after the range widened — same kind of label, same
     job, they were simply never in the list */
  .wtile__unit, .chrow__meta, .feat-foot__inner span, .fcol h4{
    font-size:12px !important;
    letter-spacing:.6px !important;
  }
}

@media (max-width:900px){
  /* ---------- tables scroll instead of being cut off ---------- */
  /* .tablecard uses overflow:hidden to clip its own rounded corners, which
     also clipped the roster's right-hand columns clean off — the table was
     168px wider than the screen with no way to reach the rest. Scrolling it
     horizontally keeps the corners and gives the columns back. */
  .tablecard{
    overflow-x:auto !important; overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
  .tablecard table{ min-width:640px; }

  /* ---------- form controls ---------- */
  /* Mobile Safari zooms the whole page when a focused control's text is
     smaller than 16px, and leaves the page scrolled sideways afterwards.
     Every form on the site was between 11px and 15.5px. */
  input, textarea, select, .box textarea{ font-size:16px !important; }
  /* A long placeholder in a rows=1 textarea wraps and gets sliced through the
     middle of the glyphs; one ellipsised line reads as deliberate. */
  .box textarea::placeholder{
    white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
  }

  /* ---------- touch targets ---------- */
  /* Padding rather than height so these keep their current display and do not
     reflow the rows they sit in; on inline elements padding still grows the
     hit area even though it does not grow the line box. */
  a.foot-learn-link, a.top-link, a.mod, .filters button, .tabs button{
    padding-top:11px !important; padding-bottom:11px !important;
  }

  /* ---------- nothing hides under the floating Features button ---------- */
  /* #efp-btn is fixed to the bottom-right corner at z-index 99998, so the last
     line of a footer — and PAL's composer note — sat underneath it. */
  .foot-inner, .composer{ padding-bottom:64px !important; }

  /* Media never widens the document. */
  img, video, canvas, iframe{ max-width:100%; height:auto; }
}

@media (max-width:900px){
  /* The per-chapter video/notes/test chips and the chapter arrow are sized in
     px above (30px and 34px), so the touch-target padding further up cannot
     grow them — a fixed height wins over padding. On a phone these are the
     primary way into a chapter, so they get a proper finger-sized box. */
  .chrow .mod, .mod{ width:40px !important; height:40px !important; }
  .chrow__arrow{ width:40px !important; height:40px !important; }
  .mods{ gap:10px !important; }
}

@media (max-width:900px){
  /* Second pass on the type floor: these turned up only once the first pass
     removed the louder offenders — live's stage/roster furniture ran as small
     as 8.5px, which is unreadable at arm's length.

     900px for the same reason as the first pass: a phone on its side and a
     tablet are touch screens read at the same distance, and capping this at
     600px left both of them with the original sizes. */
  .wtile__unit, .hm-dow, .chart-tip, .footer__boards,
  .handchip, .gaze-badge, .st, .stage__note, .roster__count,
  .vcard__meta, .sylc__label, .lvlpill, .streakchip,
  /* the chapter reader's "notes"/"video" chips and the tutor call's hint and
     transcript footer — the running commentary on what the call is doing */
  #notesTagText, #videoTagText, .transcript__foot, #kx-hint{
    font-size:12px !important;
  }

  /* SVG chart labels. These sit inside the viewBox and scale with the chart,
     so raising them cannot reflow anything outside it — and on a phone the
     chart is a third of its desktop width, which is exactly where the day
     names and axis stop being readable. */
  .barchart text, .barchart .today-lab, .areachart .axis, .ring-sub{
    font-size:13px !important;
  }
}

@media (max-width:900px){
  /* A chapter row's meta strip (module chips, percent, duration) is a
     no-wrap flex row sized for a desktop column. Once the module chips grew
     to a finger-sized 40px it no longer fit a phone, so let it wrap rather
     than shrinking the targets back. */
  .chrow__meta{ flex-wrap:wrap !important; row-gap:8px !important; }

  /* `minmax(340px,1fr)` cannot go below 340px, so on a 320px screen the card
     is wider than the screen it sits on. min() lets the track collapse to the
     container while keeping the multi-column behaviour on wider screens. */
  .syl__grid{ grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)) !important; }
  .faq__grid{ grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)) !important; }

  /* The roster's segmented filter is width:max-content — four tabs are wider
     than a small phone. Scrolling it keeps the segmented-control look instead
     of wrapping it into a ragged block. */
  .filters{
    width:auto !important; max-width:100% !important;
    overflow-x:auto !important; flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }
  .filters button{ flex:none !important; }
}

/* ================================================================
   MOBILE STANDARDS PASS — target size and type floor
   ================================================================
   Two published minimums, applied uniformly rather than per page:

     · touch targets 44x44 CSS px  (Apple HIG 44pt, WCAG 2.5.5 Target
       Size AAA; WCAG 2.5.8 AA only asks 24px, so 44 clears both)
     · body/label text never below 12px

   Applied by role — every standalone control — instead of listing the
   pages, so a control added later inherits the floor for free. Inline
   links inside running prose are deliberately NOT included: WCAG
   exempts them, and padding them out would wreck the line box.
   ================================================================ */
@media (max-width:900px){
  a.btn, a.btn-primary, a.btn-ghost, a.btn-back, a.top-link, a.mod,
  a.eyebrow, a.foot-learn-link, a.brand,
  button, .btn, .btn-primary, .btn-ghost, .btn-join, .btn-back, .btn-fix,
  .btn-book, .btn-new, .btn-resume, .cbtn, .send, .menu-btn, .remove,
  .userchip__out, .chrow__arrow,
  input[type="submit"], input[type="button"], select{
    min-height:44px;
  }

  /* Icon-only controls need the width too — a 19px-wide "×" is a 19px
     target however tall it is. */
  .mod, .remove, .send, .menu-btn, .cbtn, .chrow__arrow,
  .vtoggle button, .filters button, .nav__burger, .nav__drawer-close{
    min-width:44px;
  }
  /* These were sized in px further up, which beats min-width/min-height. */
  .chrow .mod, .mod{ width:44px !important; height:44px !important; }
  .chrow__arrow{ width:44px !important; height:44px !important; }

  /* Checkboxes and radios ship at the browser's 13–18px default. 24px is the
     WCAG 2.5.8 AA minimum and about as large as these read well; the row
     label next to them extends the effective target. */
  input[type="checkbox"], input[type="radio"]{
    width:24px !important; height:24px !important;
  }

  /* PAL's composer is a rows=1 textarea, so its height comes from the line
     box rather than from a box model the min-height above can reach. */
  .box textarea{ min-height:44px; }
}

@media (max-width:600px){
  /* Type floor, second sweep. `small` is the generic offender — the live
     board caption, the videos skip counter and the mocktest ring label all
     use it and all landed between 9px and 9.3px. */
  small,
  .fcol h4, .feat-foot__inner span, .board__head small, .calledon__x,
  .filters button, .roster th, table th, .cbtn small, .bigring__num small{
    font-size:12px !important;
  }
}

@media (max-width:900px){
  /* Footer column links are stacked block links — real navigation, not prose —
     so they take the 44px floor like every other control. Centring the text
     keeps the label optically in the middle of the taller row. */
  .foot-cols a, .fcol a, .footer__cols a{
    min-height:44px; display:flex; align-items:center;
  }

  /* features-panel.js builds an off-canvas panel of links at 24–33px. It is a
     real navigation surface once opened, so it gets the same floor. */
  #efp a, .efp-it, .efp-open{
    min-height:44px; display:flex; align-items:center;
  }
}