/* =============================================================================
   ScillintED_tokens.css — Design Token Layer (Phase 3B Block A.1)
   -----------------------------------------------------------------------------
   The single source of truth for all design tokens.
   Loaded by every HTML page via <link>; supersedes per-file token definitions.

   Naming convention (Phase 3A audit decision):
     --brand-*    Marketing/identity color (navy, coral, cream, ink)
     --color-*    Semantic role color (text, surface, border, state)
     --space-*    Spacing scale (4px grid)
     --fs-*       Font size scale
     --lh-*       Line height scale
     --ls-*       Letter spacing scale
     --cw-*       Container max-width (narrow / medium / wide / full)
     --bp-*       Breakpoint reference (sm / md / lg / xl) — JS lookups
     --z-*        Z-index scale
     --radius-*   Border radius scale
     --shadow-*   Drop shadow scale
     --duration-* Motion duration
     --ease-*     Motion easing
     --opacity-*  Opacity scale

   Brand palette = v6 design refresh (deeper navy + terracotta coral).
   Landing pages migrate to match in Phase 3D cleanup.

   IMPORTANT: Do not add hex literals to this file outside the token blocks
   below. If you need a new color/value, define it as a token here first.
============================================================================= */

:root {
  /* ── BRAND COLORS ───────────────────────────────────────────────────────── */
  --brand-navy:    #1B2A8C;  /* primary brand — UI accents, primary buttons */
  --brand-coral:   #C94E0A;  /* secondary brand — urgency, upgrade CTAs */
  --brand-cream:   #F2ECD6;  /* warm neutral background — clearly distinct from white */
  --brand-ink:     #1a1a1a;  /* deepest text */

  /* Brand tint variations (for backgrounds, hover states) */
  --brand-navy-soft:  #E8EBF7;  /* navy at ~5% — soft tinted backgrounds */
  --brand-navy-hover: #15217A;  /* navy darkened ~10% — button hover */
  --brand-coral-soft: #FBEAE0;  /* coral at ~5% — soft tinted backgrounds */
  --brand-coral-hover:#A8420A;  /* coral darkened ~10% — button hover */

  /* d228 #169 — Brand gold (celebration, achievement). Added for the icon
     system hero blobs (Admitted!, Achievement, Daily streak). Use sparingly:
     gold is a level-up signal, not a default. */
  --brand-gold:       #C9A14C;
  --brand-gold-soft:  #F8EFD7;  /* gold at ~5% — celebration background tints */
  --brand-gold-hover: #9F7D33;  /* gold darkened ~10% — hover */
  --brand-gold-light: #E0BE6E;  /* gradient end-stop for hero blob */

  /* d228 #169 — Brand color gradient end-stops (lighter shades for the
     icon-blob hero treatment's 135° linear gradient). Each end-stop is the
     same hue, lightened ~15%. */
  --brand-coral-light:   #F08570;
  --brand-navy-light:    #4263A0;
  --color-success-light: #5DAB85;
  --color-warning-light: #E89C68;

  /* d228 #169 — Icon halo glow alphas. Outer ring (sits behind the colored
     stamp ring) + diffuse drop glow (radiates outward). Both use the icon's
     own hue at low opacity so the halo feels "lit from within". */
  --icon-glow-coral:        rgba(201, 78, 10, 0.30);
  --icon-glow-coral-ring:   rgba(201, 78, 10, 0.12);
  --icon-glow-navy:         rgba(27, 42, 140, 0.30);
  --icon-glow-navy-ring:    rgba(27, 42, 140, 0.12);
  --icon-glow-gold:         rgba(201, 161, 76, 0.32);
  --icon-glow-gold-ring:    rgba(201, 161, 76, 0.13);
  --icon-glow-success:      rgba(22, 163, 74, 0.30);
  --icon-glow-success-ring: rgba(22, 163, 74, 0.12);
  --icon-glow-warning:      rgba(146, 64, 14, 0.30);
  --icon-glow-warning-ring: rgba(146, 64, 14, 0.12);

  /* ── SEMANTIC ROLE COLORS — surface ────────────────────────────────────── */
  --color-bg-page:      var(--brand-cream);  /* outermost page background */
  --color-bg-surface:   #FFFFFF;             /* default card / panel background */
  --color-bg-surface-2: #F5F2E8;             /* subtler card variant (sx-card alt) */
  --color-bg-surface-3: #EFE9D7;             /* hover / pressed surface */
  --color-bg-overlay:   rgba(15, 24, 42, 0.50);  /* modal backdrop */
  --color-bg-skim:      rgba(255, 255, 255, 0.85);  /* sticky topbar blur backing */

  /* ── SEMANTIC ROLE COLORS — text ───────────────────────────────────────── */
  /* Darkened tertiary + muted vs first draft so low-emphasis text stays
     readable at small sizes (WCAG 1.4.3 contrast ≥4.5:1 on cream backgrounds). */
  --color-text-primary:   #15182A;  /* body, headings */
  --color-text-secondary: #34373F;  /* secondary body (d437 — nudged darker) */
  --color-text-tertiary:  #4C4F58;  /* labels, meta (d437 — nudged darker) */
  --color-text-muted:     #6B675A;  /* timestamps, "loading…" — darkened from #757160 (4.45:1, failed WCAG AA) to 5.14:1 on cream (UI review 2026-07-10) */
  --color-text-on-dark:   #F2ECD6;  /* text on dark surfaces (sidebar, hero) */
  --color-text-on-brand:  #FFFFFF;  /* text on brand fills (navy buttons, coral) */
  --color-text-link:      var(--brand-navy);
  --color-text-link-hover:var(--brand-navy-hover);

  /* ── SEMANTIC ROLE COLORS — border / divider ──────────────────────────── */
  /* Opacity bumped from {0.08, 0.16, 0.32} → {0.13, 0.22, 0.38} so borders
     read more clearly on the cream page background. Card outlines, input
     borders, dividers, table cells, sidebar separator — all pop more
     without touching individual component CSS. */
  /* d200 #223 — Solid warm-gray border ramp replaces opacity-based stack.
     Per Onboarding V2 mock v3.1 + Decisions_Locked §6. Bolder borders
     give every page more confident edges. */
  --color-border-subtle:  #a7a498;  /* subtle separators (d437 — darker for pop) */
  --color-border-default: #7d7b6f;  /* card outline, input border (d437 — darker for pop) */
  --color-border-strong:  #5e5c52;  /* buttons, prominent edges, hover */
  --color-border-vivid:   #3a3933;  /* modal, "really pops" edge */
  --color-border-focus:   var(--brand-navy);

  /* d200 #223 — Tactile button thickness layer. The bottom box-shadow
     creates 3D "physical button" feel; press collapses it. Applied to
     .btn / .chip / .btn--primary / .btn--coral. */
  --btn-thickness-px:           3px;
  --btn-thickness-color-light:  #5e5c52;  /* under off-white default btn */
  --btn-thickness-color-dark:   #0c1340;  /* under navy filled btn */
  --btn-thickness-color-coral:  #952F00;  /* under coral filled btn */

  /* ── d430 #314 — Chevron button system ─────────────────────────────────── */
  /* Logo-exact mark colors for the two-tone chevron. Fixed in both modes —
     the chevron always sits on a light button fill, so it reads either way. */
  --chev-coral:   #ED5555;   /* upper half of the chevron (mark coral)  */
  --chev-navy:    #0A1A4A;   /* lower half of the chevron (mark navy)   */
  --btn-frame:    #0A1A4A;   /* d439 — deep blue frame (Janardhan prefers #0A1A4A over brand navy on buttons) */
  --chev-primary: #FFFFFF;   /* chevron on the solid Primary fill (flips dark, see dark block) */
  --btn-lift:     #0A1A4A;   /* d439 — deep blue lift line, matches the frame */

  /* ── SEMANTIC ROLE COLORS — state ──────────────────────────────────────── */
  /* Success switched to Tailwind green-600 (modern industry standard —
     vibrant but professional; was too forest/dull in v1). */
  --color-success:        #16A34A;  /* green */
  --color-success-soft:   #DCFCE7;
  --color-warning:        #92400E;  /* amber */
  --color-warning-soft:   #FFFBEB;
  --color-danger:         #B91C1C;  /* red */
  --color-danger-soft:    #FEF2F2;
  --color-info:           var(--brand-navy);
  --color-info-soft:      var(--brand-navy-soft);

  /* ── SPACING SCALE (4px grid) ──────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ── TYPE SCALE — sizes ────────────────────────────────────────────────── */
  /* Each step bumped one notch over first draft for readability. Body now
     defaults to 15px (was 14); --fs-md (card body / prose) hits 16px which
     matches Tailwind/Bootstrap/Material body baseline. */
  --fs-xs:    12px;  /* timestamps, eyebrows, micro-meta */
  --fs-sm:    13px;  /* secondary meta, table cell */
  --fs-base:  15px;  /* body text default */
  --fs-md:    16px;  /* card body, prose */
  --fs-lg:    18px;  /* card title, page title small */
  --fs-xl:    24px;  /* page title */
  --fs-2xl:   30px;  /* hero secondary */
  --fs-3xl:   38px;  /* hero primary */
  --fs-4xl:   52px;  /* landing hero, marketing */

  /* ── TYPE SCALE — line height ──────────────────────────────────────────── */
  --lh-tight:   1.20;  /* headings, hero */
  --lh-snug:    1.35;  /* sub-headings, button text */
  --lh-normal:  1.55;  /* body text default */
  --lh-relaxed: 1.75;  /* long-form prose, chat */

  /* ── TYPE SCALE — letter spacing ───────────────────────────────────────── */
  --ls-tight:  -0.01em;  /* large headings */
  --ls-normal:  0;       /* body */
  --ls-wide:    0.03em;  /* small caps, eyebrows */
  --ls-wider:   0.06em;  /* uppercase labels */

  /* ── TYPE — font families ──────────────────────────────────────────────── */
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* ── CONTAINER MAX-WIDTHS ──────────────────────────────────────────────── */
  /* These are HARD ceilings. The actual width is min(viewport - padding, cw).
     Pick the smallest token that fits the content per setContent(html, {width}). */
  --cw-narrow: 720px;   /* prose: Scill Guide chat, journal, help, legal, terms */
  --cw-medium: 1100px;  /* forms: profile, onboarding, settings, account */
  --cw-wide:   1440px;  /* dashboards: student/parent dashboard, scorecard, calendar */
  --cw-full:   100%;    /* data: admin question bank, score chart, full-bleed */

  /* ── CONTAINER PADDING — responsive gutters ────────────────────────────── */
  /* Default mobile-first. Tokens here so utilities + components reference the
     SAME padding. Overridden at breakpoints below. */
  --cp-page-x:   16px;  /* page-level horizontal padding (left + right of cw-* container) */
  --cp-page-y:   16px;  /* page-level vertical padding (top + bottom of content area) */
  --cp-card-x:   16px;  /* default card horizontal padding */
  --cp-card-y:   16px;  /* default card vertical padding */
  --cp-section:  24px;  /* gap between major page sections / cards */

  /* ── BREAKPOINT REFERENCE (for JS — @media uses raw px) ────────────────── */
  /* Mobile-first ladder. Picked to match the form-factor mix:
       sm (≥640)  iPhone landscape, small tablet portrait
       md (≥900)  iPad portrait, sidebar appears, bnav disappears
       lg (≥1200) laptop, full desktop layout
       xl (≥1600) wide desktop, extra container breathing room */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1600px;

  /* ── Z-INDEX SCALE ─────────────────────────────────────────────────────── */
  /* Single source of truth — never use raw z-index values in component CSS. */
  --z-base:      0;     /* default stacking context */
  --z-raised:    10;    /* hover lift, focused card */
  --z-dropdown:  100;   /* select menu, autocomplete */
  --z-sticky:    200;   /* sticky topbar, sticky actions */
  --z-drawer:    250;   /* slide-out drawer */
  --z-modal:     300;   /* modal dialog */
  --z-toast:     400;   /* toast notification (above modals) */
  --z-tooltip:   500;   /* tooltip / popover (above everything) */

  /* ── BORDER RADIUS SCALE ───────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   4px;   /* badges, small chips */
  --radius-md:   8px;   /* buttons, inputs, small cards */
  --radius-lg:   12px;  /* default card radius */
  --radius-xl:   14px;  /* hero / featured cards */
  --radius-2xl:  16px;  /* modal panels */
  --radius-pill: 9999px;/* pills, full-rounded badges */
  --radius-full: 50%;   /* avatars, circular icons */

  /* ── SHADOW SCALE ──────────────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(15, 24, 42, 0.04);
  --shadow-sm:    0 1px 4px rgba(15, 24, 42, 0.06);
  --shadow-md:    0 2px 8px rgba(15, 24, 42, 0.08);
  --shadow-lg:    0 4px 16px rgba(15, 24, 42, 0.10);
  --shadow-xl:    0 8px 28px rgba(15, 24, 42, 0.14);
  /* Focus ring — compound: sharp 1.5px navy border + soft 4px outer glow.
     Pattern from Tailwind UI / Vercel — strong visibility without being loud. */
  --shadow-focus: 0 0 0 1.5px var(--brand-navy), 0 0 0 4px rgba(27, 42, 140, 0.32);

  /* ── MOTION SCALE ──────────────────────────────────────────────────────── */
  --duration-instant: 100ms;  /* state toggles */
  --duration-fast:    150ms;  /* button press, hover */
  --duration-normal:  250ms;  /* default transition */
  --duration-slow:    400ms;  /* large reveal, drawer */

  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);  /* default — natural decel */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* symmetric — modal in/out */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot — playful */

  /* ── OPACITY SCALE ─────────────────────────────────────────────────────── */
  --opacity-disabled: 0.4;   /* disabled buttons, inputs */
  --opacity-muted:    0.6;   /* secondary state */
  --opacity-subtle:   0.8;   /* hover dim on overlays */

  /* ── FOCUS RING (for :focus-visible) ───────────────────────────────────── */
  --focus-ring: var(--shadow-focus);
  --focus-outline-width: 3px;
  --focus-outline-color: var(--brand-coral);  /* coral ring = high visibility */

  /* ── ACCESSIBILITY — minimum tap target ────────────────────────────────── */
  --min-tap-target: 44px;  /* iOS HIG / WCAG 2.5.5 (Level AAA) */
}

/* =============================================================================
   RESPONSIVE CONTAINER PADDING
   -----------------------------------------------------------------------------
   Padding tokens override at breakpoints so containers breathe more on
   wider screens. Components that consume var(--cp-page-x) automatically
   scale across form factors without per-component media queries.
============================================================================= */

@media (min-width: 640px) {
  :root {
    --cp-page-x:  24px;
    --cp-page-y:  20px;
    --cp-card-x:  20px;
    --cp-card-y:  18px;
    --cp-section: 28px;
  }
}

@media (min-width: 900px) {
  :root {
    --cp-page-x:  32px;
    --cp-page-y:  24px;
    --cp-card-x:  24px;
    --cp-card-y:  20px;
    --cp-section: 32px;
  }
}

@media (min-width: 1200px) {
  :root {
    --cp-page-x:  40px;
    --cp-page-y:  32px;
    --cp-card-x:  28px;
    --cp-card-y:  24px;
    --cp-section: 36px;
  }
}

@media (min-width: 1600px) {
  :root {
    --cp-page-x:  56px;  /* generous gutters on wide desktop */
    --cp-page-y:  40px;
    --cp-card-x:  32px;
    --cp-card-y:  28px;
    --cp-section: 40px;
  }
}

/* =============================================================================
   DARK MODE OVERRIDES
   -----------------------------------------------------------------------------
   Activated by [data-theme="dark"] on <html>. Re-maps the SEMANTIC ROLE
   tokens (surface, text, border, state-soft) — brand colors and scales
   stay the same.

   Theme switching is handled by setTheme() in each app HTML file; the
   data-theme attribute is the only required hook.
============================================================================= */

[data-theme="dark"] {
  /* ── Surface — invert the cream/white stack ──────────────────────────── */
  --color-bg-page:      #12121E;  /* deepest */
  --color-bg-surface:   #1F1F2E;  /* card */
  --color-bg-surface-2: #252538;  /* alt card */
  --color-bg-surface-3: #2D2D42;  /* hover */
  --color-bg-overlay:   rgba(0, 0, 0, 0.70);
  --color-bg-skim:      rgba(31, 31, 46, 0.85);

  /* ── Brand colors LIGHTER for visibility on dark surfaces ─────────────
     The dark navy + deep terracotta of light mode are unreadable against
     dark surfaces. Use Tailwind blue-400 + orange-400 equivalents instead.
     Identity assets that need the literal brand hex (logos, marketing
     splash) use raw values directly, not these tokens. */
  --brand-navy:        #6B85FF;  /* was #1B2A8C */
  --brand-coral:       #FF9466;  /* was #C94E0A */
  --brand-navy-soft:   rgba(107, 133, 255, 0.18);
  --brand-coral-soft:  rgba(255, 148, 102, 0.18);
  --brand-navy-hover:  #8FA3FF;
  --brand-coral-hover: #FFAA7E;

  /* ── Semantic state colors LIGHTER for dark mode (Tailwind 400 family) ─ */
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-danger:  #F87171;
  --color-info:    var(--brand-navy);  /* tracks the new lighter navy */

  --color-success-soft: rgba(74, 222, 128, 0.18);
  --color-warning-soft: rgba(251, 191, 36, 0.18);
  --color-danger-soft:  rgba(248, 113, 113, 0.18);
  --color-info-soft:    var(--brand-navy-soft);

  /* ── Text — bumped for readability on dark surfaces ──────────────────── */
  --color-text-primary:   #F2F2F5;  /* was #E8E8EC */
  --color-text-secondary: #D8D8DD;  /* was #C8C8D0 */
  --color-text-tertiary:  #ACACBA;  /* was #9999A8 (too washed) */
  --color-text-muted:     #9FA0AC;  /* was #8E8E9C — failed AA (4.15:1) against --color-bg-surface-3; bumped for 4.6:1+ margin (2026-07-13 dark-mode audit) */
  /* Text on brand fills FLIPS to dark in dark mode — because the brand
     fills are now lighter, they need dark text for WCAG AA contrast.
     Material 3's "on-primary" pattern. */
  --color-text-on-brand:  #15182A;

  /* ── Border — white-tinted, matching the light-side lift ─────────────── */
  /* d200 #223 — dark-mode borders also bumped for more confident edges */
  --color-border-subtle:  rgba(255, 255, 255, 0.20);
  --color-border-default: rgba(255, 255, 255, 0.32);
  --color-border-strong:  rgba(255, 255, 255, 0.52);
  --color-border-vivid:   rgba(255, 255, 255, 0.72);

  /* ── Shadows stronger for dark backgrounds ───────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-xl:    0 8px 28px rgba(0, 0, 0, 0.60);
  /* Focus ring picks up the new lighter brand-navy automatically via cascade */
  --shadow-focus: 0 0 0 1.5px var(--brand-navy), 0 0 0 4px rgba(107, 133, 255, 0.32);

  /* d430 #314 — In dark mode the solid Primary inverts to a light fill (driven
     by --color-text-primary, which is light here), so its chevron must darken. */
  --chev-primary: #15182A;
}

/* =============================================================================
   GLOBAL BASE — applied via tokens.css so every page gets the same defaults
   -----------------------------------------------------------------------------
   Minimal base. Component-level styling lives in components.css.
============================================================================= */

html {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

/* Focus ring — applies anywhere :focus-visible fires (keyboard nav).
   Per WCAG 2.4.7 + 2.4.11 (focus appearance). Components can override
   on a per-element basis but should keep the same coral color. */
*:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Respect reduced motion preference — required for WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* d324 [#255] Site-wide dark-mode patch.
   The d166 dark-mode work patched bnav only; this is the catch-up pass for
   every other surface that was missed when the foundation tokens shipped.
   Single source covering: student, parent, admin, practice, auth, confirm,
   help, app101, onboarding (every HTML page loading this token file).

   Three classes of issue this patches:
   (a) Brand logo invisible — dark navy SVG against dark bg
   (b) Hardcoded #FFF / light card backgrounds on .card-*, .gs-*, .cl-rail-card,
       .cl-insights, .briefing, .act-row → ghost rectangles
   (c) Hardcoded dark hex text colors on .sx-* v6 dashboard classes that
       don't flip with theme variables

   All rules apply to both manual [data-theme="dark"] AND the system
   @media(prefers-color-scheme: dark) fallback — matches the d166 dual-
   coverage pattern. Selectors use !important to override per-page inline
   styles. */

/* ── Logo (universal) ─────────────────────────────────────────────────────── */
/* Brand-preserving treatment: keep the original navy + coral logo intact
   and frame it on a cream surface so the dark navy "S" mark and the
   tagline read properly against the dark page. NOT a white-wash filter —
   per Janardhan, the brand identity stays. */
[data-theme="dark"] .sidebar-logo img,
[data-theme="dark"] .nav-logo img,
[data-theme="dark"] .footer-logo img,
[data-theme="dark"] .sx-sb-mark img,
[data-theme="dark"] .brand img {
  background: #F5F4F1;
  padding: 8px;
  border-radius: 10px;
  box-sizing: border-box;
  filter: none;
}

/* ── Card surfaces (universal) ────────────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .card-inner,
[data-theme="dark"] .card-top,
[data-theme="dark"] .card-head,
[data-theme="dark"] .gs-card,
[data-theme="dark"] .cl-rail-card,
[data-theme="dark"] .cl-insights,
[data-theme="dark"] .briefing,
[data-theme="dark"] .briefing-row,
[data-theme="dark"] .act-row,
[data-theme="dark"] .sx-card,
[data-theme="dark"] .sx-sb,
[data-theme="dark"] .pdr-card,
[data-theme="dark"] .admin-card {
  background: var(--card-bg, #252538) !important;
  border-color: var(--rule, rgba(255,255,255,0.12)) !important;
  color: var(--ink, #e8e8ec) !important;
}

/* ── Completed / success states (universal) ───────────────────────────────── */
[data-theme="dark"] .gs-card.is-complete {
  background: rgba(99,153,34,0.15) !important;
  border-color: rgba(99,153,34,0.35) !important;
}
[data-theme="dark"] .gs-card.is-complete .gs-card__title,
[data-theme="dark"] .gs-card.is-complete .gs-card__desc,
[data-theme="dark"] .gs-card.is-complete .gs-card__sub {
  color: var(--ink, #e8e8ec) !important;
}

/* ── Card hover (universal) ───────────────────────────────────────────────── */
[data-theme="dark"] .cl-insights-head:hover,
[data-theme="dark"] .gs-card:hover,
[data-theme="dark"] .act-row:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* ── Headings + body text inside dark cards (universal) ───────────────────── */
[data-theme="dark"] .cl-rail-card h2,
[data-theme="dark"] .cl-rail-card h3,
[data-theme="dark"] .cl-rail-card h4,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card-head,
[data-theme="dark"] .briefing strong,
[data-theme="dark"] .act-title,
[data-theme="dark"] .gs-card__title {
  color: var(--ink, #e8e8ec) !important;
}

/* ── v6 student dashboard text (.sx-* — also used in admin) ───────────────── */
[data-theme="dark"] .sx-topbar-greeting,
[data-theme="dark"] .sx-hero-h,
[data-theme="dark"] .sx-hero-sub,
[data-theme="dark"] .sx-c-h,
[data-theme="dark"] .sx-br-h,
[data-theme="dark"] .sx-micro-val,
[data-theme="dark"] .sx-act-title,
[data-theme="dark"] .sx-pulse-row strong,
[data-theme="dark"] .sx-pulse-row em {
  color: var(--ink, #e8e8ec) !important;
}
[data-theme="dark"] .sx-micro-lbl,
[data-theme="dark"] .sx-hero-eyebrow,
[data-theme="dark"] .sx-c-h-meta,
[data-theme="dark"] .sx-act-desc,
[data-theme="dark"] .sx-br-meta,
[data-theme="dark"] .sx-feed-time,
[data-theme="dark"] .sx-sb-user-tier,
[data-theme="dark"] .sx-pulse-meta {
  color: var(--muted, #9999a8) !important;
}

/* ── d336 #255 — Essay coach Common App header card ───────────────────────── */
/* Hardcoded #FCFAF5 background in student.html washes out the school name +
   tier chip on the Common App header card in dark mode. Swap to dark surface. */
[data-theme="dark"] .essay-school-header {
  background: var(--card-bg, #252538) !important;
  border-bottom-color: var(--rule, rgba(255,255,255,0.12)) !important;
}
[data-theme="dark"] .essay-prompt-row:hover,
[data-theme="dark"] .essay-add-custom:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* ── d336 #255 — Career Explorer rating segments ──────────────────────────── */
/* The 1-2-3-4-5 segments use background:var(--rule) which collapses to
   rgba(255,255,255,0.12) in dark — segments become near-invisible. Bump
   visibility AND give them a button affordance (subtle inner border + the
   value number stays legible). 'Not interested' / 'Very interested' labels
   were also muted-on-muted; bump to --ink2 for legible contrast. */
[data-theme="dark"] .ce-cluster-seg {
  background: rgba(255,255,255,0.10) !important;
  color: var(--ink2, #c5c5cd) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}
[data-theme="dark"] .ce-cluster-seg:hover {
  background: var(--brand-navy-soft, rgba(107,133,255,0.18)) !important;
  color: var(--ink, #e8e8ec) !important;
  border-color: var(--brand-navy, #6B85FF) !important;
}
[data-theme="dark"] .ce-cluster-seg.is-filled,
[data-theme="dark"] .ce-cluster-seg.is-selected {
  border-color: var(--brand-coral, #ED5555) !important;
}
[data-theme="dark"] .ce-cluster-foot,
[data-theme="dark"] .ce-cluster-foot span {
  color: var(--ink2, #c5c5cd) !important;
}

/* ── System dark-mode fallback (matches every rule above) ─────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sidebar-logo img,
  :root:not([data-theme="light"]) .nav-logo img,
  :root:not([data-theme="light"]) .footer-logo img,
  :root:not([data-theme="light"]) .sx-sb-mark img,
  :root:not([data-theme="light"]) .brand img {
    background: #F5F4F1;
    padding: 8px;
    border-radius: 10px;
    box-sizing: border-box;
    filter: none;
  }
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .card-inner,
  :root:not([data-theme="light"]) .card-top,
  :root:not([data-theme="light"]) .card-head,
  :root:not([data-theme="light"]) .gs-card,
  :root:not([data-theme="light"]) .cl-rail-card,
  :root:not([data-theme="light"]) .cl-insights,
  :root:not([data-theme="light"]) .briefing,
  :root:not([data-theme="light"]) .briefing-row,
  :root:not([data-theme="light"]) .act-row,
  :root:not([data-theme="light"]) .sx-card,
  :root:not([data-theme="light"]) .sx-sb,
  :root:not([data-theme="light"]) .pdr-card,
  :root:not([data-theme="light"]) .admin-card {
    background: var(--card-bg, #252538) !important;
    border-color: var(--rule, rgba(255,255,255,0.12)) !important;
    color: var(--ink, #e8e8ec) !important;
  }
  :root:not([data-theme="light"]) .gs-card.is-complete {
    background: rgba(99,153,34,0.15) !important;
    border-color: rgba(99,153,34,0.35) !important;
  }
  :root:not([data-theme="light"]) .gs-card.is-complete .gs-card__title,
  :root:not([data-theme="light"]) .gs-card.is-complete .gs-card__desc,
  :root:not([data-theme="light"]) .gs-card.is-complete .gs-card__sub {
    color: var(--ink, #e8e8ec) !important;
  }
  :root:not([data-theme="light"]) .cl-insights-head:hover,
  :root:not([data-theme="light"]) .gs-card:hover,
  :root:not([data-theme="light"]) .act-row:hover {
    background: rgba(255,255,255,0.04) !important;
  }
  :root:not([data-theme="light"]) .cl-rail-card h2,
  :root:not([data-theme="light"]) .cl-rail-card h3,
  :root:not([data-theme="light"]) .cl-rail-card h4,
  :root:not([data-theme="light"]) .card h2,
  :root:not([data-theme="light"]) .card h3,
  :root:not([data-theme="light"]) .card-head,
  :root:not([data-theme="light"]) .briefing strong,
  :root:not([data-theme="light"]) .act-title,
  :root:not([data-theme="light"]) .gs-card__title {
    color: var(--ink, #e8e8ec) !important;
  }
  :root:not([data-theme="light"]) .sx-topbar-greeting,
  :root:not([data-theme="light"]) .sx-hero-h,
  :root:not([data-theme="light"]) .sx-hero-sub,
  :root:not([data-theme="light"]) .sx-c-h,
  :root:not([data-theme="light"]) .sx-br-h,
  :root:not([data-theme="light"]) .sx-micro-val,
  :root:not([data-theme="light"]) .sx-act-title,
  :root:not([data-theme="light"]) .sx-pulse-row strong,
  :root:not([data-theme="light"]) .sx-pulse-row em {
    color: var(--ink, #e8e8ec) !important;
  }
  :root:not([data-theme="light"]) .sx-micro-lbl,
  :root:not([data-theme="light"]) .sx-hero-eyebrow,
  :root:not([data-theme="light"]) .sx-c-h-meta,
  :root:not([data-theme="light"]) .sx-act-desc,
  :root:not([data-theme="light"]) .sx-br-meta,
  :root:not([data-theme="light"]) .sx-feed-time,
  :root:not([data-theme="light"]) .sx-sb-user-tier,
  :root:not([data-theme="light"]) .sx-pulse-meta {
    color: var(--muted, #9999a8) !important;
  }
  /* d336 #255 mirrors */
  :root:not([data-theme="light"]) .essay-school-header {
    background: var(--card-bg, #252538) !important;
    border-bottom-color: var(--rule, rgba(255,255,255,0.12)) !important;
  }
  :root:not([data-theme="light"]) .essay-prompt-row:hover,
  :root:not([data-theme="light"]) .essay-add-custom:hover {
    background: rgba(255,255,255,0.04) !important;
  }
  :root:not([data-theme="light"]) .ce-cluster-seg {
    background: rgba(255,255,255,0.10) !important;
    color: var(--ink2, #c5c5cd) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
  }
  :root:not([data-theme="light"]) .ce-cluster-seg:hover {
    background: var(--brand-navy-soft, rgba(107,133,255,0.18)) !important;
    color: var(--ink, #e8e8ec) !important;
    border-color: var(--brand-navy, #6B85FF) !important;
  }
  :root:not([data-theme="light"]) .ce-cluster-seg.is-filled,
  :root:not([data-theme="light"]) .ce-cluster-seg.is-selected {
    border-color: var(--brand-coral, #ED5555) !important;
  }
  :root:not([data-theme="light"]) .ce-cluster-foot,
  :root:not([data-theme="light"]) .ce-cluster-foot span {
    color: var(--ink2, #c5c5cd) !important;
  }
}

/* d552 mobile decision #1 (founder call 2026-07-13): sitewide 16px input floor
   on phones. iOS Safari auto-zooms the viewport on focus of any form control
   under 16px; one token-level rule kills the class of bug permanently instead
   of per-form patches. Dense forms may be revisited individually if needed. */
@media (max-width: 480px) {
  input, select, textarea { font-size: max(16px, 1em); }
}