/* ==========================================================================
   Navaratnas — central theme  (/assets/css/theme.css)

   The ONE source of truth for colour, type, space, radius, shadow, motion
   and breakpoints. Pages link this file AFTER their own <style> block, so
   everything here wins ties in the cascade.

   Tiers
     1. Primitives      --neutral-*, --pastel-*, --gem-*, --space-*, ...
     2. Semantic tokens --color-*, --text-*, --radius-*, --motion-*, ...
     3. Legacy aliases  --bg, --text, --line ... (the names the page CSS
                        already consumes; they now resolve to tier 2)

   Rule: no page may declare a raw colour / size for something that has a
   token here. Add the token first, then use it.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. PRIMITIVES
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* warm neutrals */
  --neutral-0:  #FFFFFF;
  --neutral-1:  #FAF6F0;   /* paper */
  --neutral-2:  #F3EEE6;
  --neutral-3:  #ECE6DD;   /* hairline */
  --neutral-4:  #D8D0C2;   /* strong hairline (hover borders, underlines) */
  --neutral-5:  #8F877B;   /* 3.3:1 on paper — control borders */
  --neutral-7:  #5C5C5C;   /* 6.2:1 on paper, >=5:1 on every pastel */
  --neutral-9:  #2A2A2A;   /* ink (soft off-black) */
  --neutral-10: #28282E;
  --neutral-11: #18181C;   /* night */
  --cream-1:    #F5EFE5;   /* text on night */
  --cream-2:    #F8F2E6;
  --cream-3:    #C9C5BD;   /* muted text on night, 10.3:1 */
  --cream-4:    #A39E94;   /* faint text on night 6.7:1, on night-soft 5.5:1 */

  /* pastels (surfaces only, never text) */
  --pastel-lavender: #E8DDFF;
  --pastel-mint:     #DCEAE2;
  --pastel-peach:    #FFE4D9;
  --pastel-peach-strong: #FFCFC1;   /* alarm / exit pills */
  --pastel-sand:     #F5EFE3;   /* neutral chip */
  --pastel-rose:     #FFE0EC;
  --pastel-sky:      #DCE9F5;

  /* brand accents */
  --gold-5:  #E8C56B;
  --gold-7:  #8A6A12;      /* gold that passes 4.5:1 as text on paper */
  --blue-5:  #5B8DEF;

  /* status */
  --green-5: #67C18B;
  --green-1: #E3FCEF;
  --green-7: #1F7A4D;      /* 4.9:1 on paper, 5.3:1 on white */
  --green-8: #006644;      /* 6.4:1 on --green-1 */
  --red-5:   #E3735C;
  --red-1:   #FFEBE6;
  --red-7:   #B5392B;      /* 5.5:1 on paper */
  --red-8:   #BF2600;      /* 5.3:1 on --red-1 */
  --red-3:   #FFA08F;      /* loss figure on night, 9.0:1 */
  --ink-mint:     #0F4F31; /* 7.8:1 on mint */
  --ink-peach:    #5C2C19; /* 9.5:1 on peach, 8.2:1 on peach-strong */
  --ink-lavender: #382C5F; /* 9.6:1 on lavender */
  --ink-sand:     #6B5B33; /* 5.8:1 on sand */

  /* the nine gems */
  --gem-1: #E54B6B;  --gem-2: #BAA882;  --gem-3: #F08552;
  --gem-4: #4FB397;  --gem-5: #D4A020;  --gem-6: #7BB8DD;
  --gem-7: #5C6FCC;  --gem-8: #A56A3D;  --gem-9: #9FAE3F;

  /* space — 4px base */
  --space-0: 0;      --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;   --space-5: 24px;  --space-6: 32px;  --space-7: 48px;
  --space-8: 64px;   --space-9: 96px;  --space-10: 128px;

  /* type scale */
  --font-size-0: 0.75rem;   /* 12 — floor, nothing renders smaller */
  --font-size-1: 0.875rem;  /* 14 */
  --font-size-2: 1rem;      /* 16 */
  --font-size-3: 1.125rem;  /* 18 */
  --font-size-4: 1.25rem;   /* 20 */
  --font-size-5: 1.5rem;    /* 24 */
  --font-size-6: 1.875rem;  /* 30 */
  --font-size-7: 2.25rem;   /* 36 */
  --font-size-8: 3rem;      /* 48 */
  --font-size-9: 3.75rem;   /* 60 */
  --font-size-10: 4.5rem;   /* 72 */

  --radius-1: 6px;  --radius-2: 12px;  --radius-3: 18px;
  --radius-4: 28px; --radius-5: 9999px;

  --duration-1: 120ms; --duration-2: 200ms; --duration-3: 300ms; --duration-4: 600ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* -------------------------------------------------------------------------
   2. SEMANTIC TOKENS
   ------------------------------------------------------------------------- */
:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --color-bg:             var(--neutral-1);
  --color-bg-subtle:      var(--neutral-2);
  --color-surface:        var(--neutral-0);
  --color-border:         var(--neutral-3);
  --color-border-strong:  var(--neutral-4);
  --color-border-control: var(--neutral-5);
  --color-text:           var(--neutral-9);
  --color-text-muted:     var(--neutral-7);
  --color-accent:         var(--neutral-11);   /* the brand's single filled action is ink-black */
  --color-on-accent:      var(--cream-1);
  --color-inverse-bg:     var(--neutral-11);
  --color-inverse-soft:   var(--neutral-10);
  --color-inverse-text:   var(--cream-1);
  --color-inverse-text-muted: var(--cream-3);
  --color-inverse-text-faint: var(--cream-4);
  --color-loss-on-dark:   var(--red-3);
  --color-on-mint:        var(--ink-mint);
  --color-on-peach:       var(--ink-peach);
  --color-on-lavender:    var(--ink-lavender);
  --color-chip-bg:        var(--pastel-sand);
  --color-chip-text:      var(--ink-sand);
  --color-on-badge:       var(--neutral-11);  /* glyphs on gold/blue/green/red dots: white was 1.7-3.2:1 */
  --color-focus:          var(--neutral-11);
  --color-highlight:      var(--gold-5);
  --color-highlight-text: var(--gold-7);
  --color-success:        var(--green-5);
  --color-success-bg:     var(--green-1);
  --color-success-text:   var(--green-8);
  --color-danger:         var(--red-5);
  --color-danger-bg:      var(--red-1);
  --color-danger-text:    var(--red-8);
  --color-gain-text:      var(--green-7);   /* performance numbers, AA on paper + white */
  --color-loss-text:      var(--red-7);

  --text-floor: var(--font-size-0);
  --text-small: var(--font-size-1);
  --text-body:  var(--font-size-2);

  --gutter-screen:  clamp(1rem, 5vw, 2rem);
  --space-section:  clamp(4rem, 8vw, 7.5rem);
  --container-max:  1180px;
  --measure:        68ch;

  --radius-control: var(--radius-5);  /* brand controls are pills, everywhere */
  --radius-card:    var(--radius-4);
  --radius-pill:    var(--radius-5);

  --shadow-hairline: 0 0 0 1px var(--color-border);
  --shadow-1: 0 8px 24px -10px rgba(24,24,28,0.30);
  --shadow-2: 0 24px 48px -28px rgba(24,24,28,0.22);
  --shadow-3: 0 30px 60px -20px rgba(24,24,28,0.25);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

  --motion-fast: var(--duration-1);
  --motion-base: var(--duration-2);
  --motion-slow: var(--duration-3);
  --motion-reveal: var(--duration-4);
  --motion-distance: 16px;

  --nav-height: 72px;
  --target-min: 44px;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  --z-base: 0; --z-sticky: 50; --z-dropdown: 60; --z-overlay: 80; --z-modal: 90; --z-toast: 100;
}

/* -------------------------------------------------------------------------
   3. LEGACY ALIASES (what page CSS consumes today)
   ------------------------------------------------------------------------- */
:root {
  --bg:        var(--color-bg);
  --surface:   var(--color-surface);
  --text:      var(--color-text);
  --text-soft: var(--color-text-muted);
  --line:      var(--color-border);
  --lavender:  var(--pastel-lavender);
  --mint:      var(--pastel-mint);
  --peach:     var(--pastel-peach);
  --rose:      var(--pastel-rose);
  --sky:       var(--pastel-sky);
  --dark:      var(--color-inverse-bg);
  --dark-soft: var(--color-inverse-soft);
  --gold:      var(--color-highlight);
  --green:     var(--color-success);
  --red:       var(--color-danger);
}

/* Dark dashboards (index performance, holdings) opt in with <html data-theme="dark"> */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:     #0B0E14;
  --panel:  #141925;
  --panel2: #1B2230;
  --ink:    #E6EDF3;
  --muted:  #8B97A8;      /* 6.5:1 on --bg */
  --line:   #263041;
  --line-strong: #3A475C;
  --up:     #4ADE80;
  --down:   #F87171;
  --spy:    #60A5FA;
  --rsp:    #F59E0B;
  --qqq:    #A78BFA;
  --iwm:    #F472B6;
  --n1:     #4ADE80;
  --n2:     #A78BFA;
  --n3:     #FB923C;
  --series-teal: #34D399;   /* QQQ line on pages where the index itself is purple/orange */
  --color-bg: var(--bg);
  --color-surface: var(--panel);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-border: var(--line);
  --color-border-control: #5B6B82;
  --color-focus: var(--ink);
  --color-accent: var(--panel2);
  --color-on-accent: var(--ink);
}

/* -------------------------------------------------------------------------
   4. BASE — applies to every page
   ------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
  -webkit-tap-highlight-color: transparent;
}
body { overflow-wrap: break-word; }

img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }

a, button, input, select, textarea, summary, label { touch-action: manipulation; }

/* numbers line up everywhere they are compared */
table, .v, .price, .stat-row, .big, .change, time,
[class*="stat"], [class*="score"], [class*="pct"] { font-variant-numeric: tabular-nums; }

/* containers: fluid gutter + hardware safe areas */
.container, .narrow, .prose-container, .wrap {
  padding-left:  max(var(--gutter-screen), var(--safe-left));
  padding-right: max(var(--gutter-screen), var(--safe-right));
}
body { padding-bottom: var(--safe-bottom); }

/* ---- focus: dual ring, visible on every surface ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid transparent;          /* forced-colors fallback */
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-1);
}
.nav-links .pill:focus-visible, button:focus-visible, .cta:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.upg-cta:focus-visible, .btn:focus-visible { border-radius: var(--radius-pill); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--color-focus);
}
.tier.dark :focus-visible, .dark-section :focus-visible, .mid-cta :focus-visible {
  box-shadow: 0 0 0 2px var(--color-inverse-bg), 0 0 0 4px var(--color-inverse-text);
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ---- utilities ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: calc(var(--space-3) + var(--safe-top));
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent); color: var(--color-on-accent);
  border-radius: var(--radius-pill); text-decoration: none;
  font-size: var(--text-small); font-weight: 400;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* horizontally scrollable region for wide tables / code (never the page) */
.table-scroll {
  max-width: 100%; overflow-x: auto;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--color-border-control) transparent;
}
.table-scroll > table { min-width: 100%; }
.hist-table td, .hist-table th, .pos-table td, .pos-table th { white-space: nowrap; }
@media (max-width: 600px) {
  /* columns stay readable; the region scrolls, the page never does */
  .table-scroll > table:has(th:nth-child(3), td:nth-child(3)) { min-width: 560px; }
}
.chart-data { margin-top: var(--space-3); }
.chart-data summary {
  display: inline-flex; align-items: center; min-height: var(--target-min);
  cursor: pointer; font-size: var(--text-small); color: var(--color-text-muted);
}
.chart-data[open] summary { margin-bottom: var(--space-2); }
.chart-data .table-scroll { max-height: 60vh; overflow-y: auto; }
.chart-data th[scope="row"] { font-weight: 400; white-space: nowrap; }
pre { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
code { overflow-wrap: anywhere; }

/* ---- form controls ---- */
input[type="email"], input[type="text"], input[type="search"], input[type="number"],
input[type="date"], input[type="password"], select, textarea {
  font-size: max(1rem, 16px);              /* iOS never zooms on focus */
  border-color: var(--color-border-control);
  min-height: var(--target-min);
  min-width: 0;
  -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
button, .nav-links .pill, .cta, .upg-cta, .btn { min-height: var(--target-min); }
.nav-links .pill, .cta, .upg-cta {
  display: inline-flex; align-items: center; justify-content: center;
}
button:disabled, button[disabled] { cursor: progress; opacity: 0.7; }
form { min-width: 0; }
form > * { min-width: 0; }

/* status line under subscribe forms (written by site.js / nav-auth.js) */
.form-status {
  min-height: 1.5em; margin-top: var(--space-3);
  font-size: var(--text-small); color: var(--color-text-muted);
}
.form-status[data-state="error"] { color: var(--color-danger-text); }
.form-status[data-state="ok"]    { color: var(--color-success-text); }
.tier.dark .form-status, .tier.dark .form-status[data-state] { color: var(--color-inverse-text); }

/* ---- hover only where a real pointer exists ---- */
@media (hover: none) {
  .tier:hover, .upg:hover, .post-card:hover, .rel-card:hover, .ind-card:hover {
    transform: none; box-shadow: none;
  }
}
button:active, .nav-links .pill:active, .cta:active, .upg-cta:active { transform: scale(0.98); opacity: 0.92; }

/* ---- reveal animations: shorter, and never hide content without JS ---- */
.fade-in { animation-duration: var(--motion-reveal); }
.reveal  { transition-duration: var(--motion-reveal), var(--motion-reveal); }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .reveal, .fade-in { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  header { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* -------------------------------------------------------------------------
   5. SITE HEADER + NAVIGATION
   ------------------------------------------------------------------------- */
header:has(> .nav-links) {
  position: sticky; top: 0; z-index: var(--z-sticky);
  min-height: var(--nav-height);
  padding-top: max(var(--space-3), var(--safe-top));
  padding-bottom: var(--space-3);
  margin-top: var(--space-4);
  gap: var(--space-4);
  background: var(--color-bg);
  /* full-bleed paper band behind a contained header */
  box-shadow: 0 0 0 100vmax var(--color-bg);
  clip-path: inset(0 -100vmax -1px -100vmax);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-base) var(--ease-out);
  animation: none;                /* a sticky bar must not slide in */
}
header.is-stuck:has(> .nav-links) { border-bottom-color: var(--color-border); }

.brand-link { min-height: var(--target-min); min-width: 0; flex: none; }
.brand-mark { flex: none; }
.nav-links { gap: clamp(14px, 2.2vw, 36px); min-width: 0; }
.nav-links a { white-space: nowrap; min-height: var(--target-min); display: inline-flex; align-items: center; }
.nav-links a:not(.pill) { font-weight: 400; }
.nav-links a[aria-current="page"], .nav-links a.active { color: var(--color-text); }
.nav-links .pill {
  background: var(--color-accent); color: var(--color-on-accent);
  padding: 0 18px; border-radius: var(--radius-pill);
  font-size: var(--text-small); font-weight: 400; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .nav-links .pill:hover { color: var(--color-on-accent); opacity: 0.88; } }
.nav-menu { display: contents; }
.nav-toggle { display: none; }

/* below 1000px the links do not fit: collapse into a menu */
@media (max-width: 1000px) {
  .js .nav-links { gap: var(--space-2); position: static; }
  .js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--target-min); height: var(--target-min); padding: 0;
    background: transparent; color: var(--color-text);
    border: 1px solid var(--color-border-control); border-radius: var(--radius-pill);
    cursor: pointer; order: 2; flex: none;
  }
  .js .nav-toggle svg { width: 20px; height: 20px; }
  .js .nav-toggle .icon-close { display: none; }
  .js .nav-open .nav-toggle .icon-open { display: none; }
  .js .nav-open .nav-toggle .icon-close { display: block; }
  .js .nav-links .pill { order: 1; }
  .js .nav-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    padding: var(--space-2) 0 var(--space-4);
    background: var(--color-bg);
    max-height: calc(100dvh - var(--nav-height)); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .js .nav-open .nav-menu { display: flex; border-bottom: 1px solid var(--color-border); }
  /* the header's full-bleed band grows to sit behind the open menu */
  .js .nav-open:has(> .nav-links) { clip-path: inset(0 -100vmax calc(-1 * var(--menu-h, 0px) - 1px) -100vmax); }
  .js .nav-menu a, .js .nav-links .nav-menu a:not(.pill) {
    display: flex; min-height: 48px; align-items: center;
    padding: 0 var(--space-1); font-size: var(--font-size-3);
    color: var(--color-text); border-bottom: 1px solid var(--color-border);
  }
  .js .nav-menu a[style*="display:none"], .js .nav-menu a[style*="display: none"] { display: none; }
  .js .nav-menu a:last-child { border-bottom: 0; }
}
@media (max-width: 420px) {
  .brand { font-size: 21px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 8px; }
  .brand-link { gap: 9px; }
  .nav-links .pill { padding-left: 14px; padding-right: 14px; font-size: 13px; }
}
/* foldables / 320px: the header keeps brand + menu; Subscribe moves into the menu */
.nav-menu .menu-cta { display: none; }
@media (max-width: 345px) {
  .js .nav-links > .pill { display: none; }
  .js .nav-menu .menu-cta { display: flex; font-weight: 400; }
}

/* simple headers (legal pages, account, dashboards) */
.back-link, .nav a { min-height: var(--target-min); display: inline-flex; align-items: center; }

/* -------------------------------------------------------------------------
   6. FOOTER
   ------------------------------------------------------------------------- */
footer a { display: inline-flex; align-items: center; min-height: 32px; }
@media (pointer: coarse) {
  footer a, .ft-col a { min-height: var(--target-min); }
  .ft-col li { padding: 0; }
}
.ft-col h3, .ft-col h4 { font-size: var(--font-size-2); }

/* -------------------------------------------------------------------------
   7. SHARED COMPONENT CORRECTIONS
   ------------------------------------------------------------------------- */
/* status chips: AA text on their tinted surfaces */
.em-action.hold { background: var(--color-success-bg); color: var(--color-success-text); }
.em-action.exit { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.em-action { font-size: var(--text-floor); font-weight: 400; }

/* muted-by-opacity text must still pass AA */
.doc .lede, .doc .meta { opacity: 1; }
.tier .price small { opacity: 0.78; }

/* long-form reading measure */
.doc p, .doc li, .prose p, .prose li, .founder p, .qa p { max-width: var(--measure); }

/* values never split from their unit */
.stat-row .v, .trust-stat .v, .tier .price { white-space: nowrap; }
.stat-row { gap: var(--space-4); }
.stat-row .l { min-width: 0; }

/* grids: tracks may shrink below their content */
.trust, .three, .pricing-grid, .backtest-grid, .faq-grid, .dark-section,
.ind-grid, .post-grid, .rel-grid, .upgrade-grid { min-width: 0; }
.trust > *, .three > *, .pricing-grid > *, .backtest-grid > *, .faq-grid > *,
.dark-section > *, .ind-grid > *, .post-grid > *, .rel-grid > *, footer > * { min-width: 0; }

@media (max-width: 600px) {
  .three > .card { padding: 36px 28px 32px; min-height: 0; gap: var(--space-5); border-radius: 24px; }
  .three > .card .num { font-size: 48px; }
  .three > .card h3 { font-size: 26px; }
  .dark-box { padding: 28px; gap: 12px; border-radius: 22px; }
  .stat-card, .caveats { padding: 32px 24px; border-radius: 22px; }
  .tier { border-radius: 22px; }
  .em-row { flex-wrap: wrap; row-gap: 6px; }
  .em-row .ticker { width: auto; min-width: 64px; }
  .em-row .meta { flex: 1 1 100%; order: 3; }
  .em-row .badge { flex: none; }
  .em-row .em-action { margin-left: auto; }
}
@media (max-width: 340px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
}

/* mobile sticky call-to-action (thumb zone); markup: <div class="sticky-cta" data-sticky-cta hidden> */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none;
  padding: var(--space-3) max(var(--gutter-screen), var(--safe-left))
           max(var(--space-3), var(--safe-bottom)) max(var(--gutter-screen), var(--safe-right));
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  transform: translateY(calc(-1 * var(--keyboard-offset, 0px)));
}
.sticky-cta a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-on-accent);
  text-decoration: none; font-size: var(--font-size-2); font-weight: 400;
}
@media (max-width: 768px) {
  .sticky-cta.is-visible { display: block; }
  body:has(.sticky-cta.is-visible) { padding-bottom: calc(72px + var(--safe-bottom)); }
}

@media print {
  header:has(> .nav-links) { position: static; }
  .sticky-cta, .nav-toggle, .skip-link { display: none !important; }
  .reveal, .fade-in { opacity: 1 !important; transform: none !important; }
}