/* ═══ JAGSIM DESIGN TOKENS — the single source of colour ═══════════════════════
   WHY THIS EXISTS. Before this file there were 904 hex literals across the
   stylesheets, 248 of them distinct, and 141 of those were greys. EIGHTEEN
   different greys were doing one job — "muted label text" — and EIGHT of those
   eighteen failed the 4.5:1 body-text floor:

     #9ca3af 2.54:1 · #94a3b8 2.56:1 · #8fa39a 2.67:1 · #8a97a6 2.98:1
     #8a97a3 2.98:1 · #8a93a0 3.11:1 · #74839a 3.85:1 · #6b7d75 4.36:1

   Nobody chose those. They accumulated, one page at a time, because there was no
   layer to choose from — which is also why fixing a colour on one page never
   fixed it on the next, and why the site reads as unfinished even when each page
   is individually fine.

   RULE: a new colour goes HERE first, or it does not ship. scripts/check-tokens.sh
   fails the build when a raw hex appears where a token already exists.

   Contrast is stated for every text token, measured against the surface it is
   actually painted on. If a value has no ratio noted, it is not text.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand ───────────────────────────────────────────────────────────────
     Green is the product. Orange is Pro, and ONLY Pro — it must never be used
     for a status, because amber-as-status is banned here (it reads as an error
     and this is a money screen). */
  --jag-green:          #006E4E;   /* 6.29:1 on white */
  --jag-green-deep:     #00563D;   /* 8.14:1 — pressed / hover */
  --jag-green-soft:     #E8F7EF;   /* tinted surface, never text */
  --jag-green-line:     #C3E4D2;
  --jag-pro:            #E86B1F;   /* Pro accent ONLY */
  --jag-pro-deep:       #BB5C2D;

  /* ── Ink ─────────────────────────────────────────────────────────────────
     Four steps, and four is enough. --jag-ink-muted replaces all eighteen of
     the competing greys; it is the LIGHTEST value that still clears 4.5:1, so
     nothing readable gets lighter than this again. */
  --jag-ink:            #1A1F29;   /* 15.8:1 — primary text */
  --jag-ink-2:          #31404F;   /* 9.7:1  — secondary */
  --jag-ink-muted:      #5A626B;   /* 6.19:1 — labels, captions, meta */
  --jag-ink-faint:      #6B7480;   /* 4.74:1 — the FLOOR. Nothing dimmer carries meaning. */

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --jag-page:           #F6F7F8;
  --jag-card:           #FFFFFF;
  --jag-card-2:         #F7F9FB;   /* nested / header bands */

  /* ── Lines ───────────────────────────────────────────────────────────────
     --jag-line was the bug that made the Filled tab look empty: the old value
     composited to #ffffff on #ffffff, a ratio of exactly 1.00:1. The rules were
     being drawn perfectly and were invisible. A separator that cannot be seen is
     not a separator. */
  --jag-line:           #DDE4EC;   /* visible hairline */
  --jag-line-soft:      #EDF0F4;   /* inside a card, where less is needed */
  --jag-line-strong:    #CBD5E1;   /* under a column header */

  /* ── State ───────────────────────────────────────────────────────────────
     Up/down are the only semantic colours on this site. NO amber tier exists on
     purpose: every previous amber "notice" was read as an error by the owner. */
  --jag-up:             #12805C;   /* 4.83:1 */
  --jag-down:           #C4372F;   /* 5.02:1 */
  --jag-up-soft:        #EAF7EF;
  --jag-down-soft:      #FDF0EF;

  /* ── Focus ───────────────────────────────────────────────────────────────
     Brand green, not the old #7aa7ff which measured 2.39:1 and left keyboard
     users unable to see where they were. */
  --jag-focus:          #006E4E;   /* 6.29:1 — clears the 3:1 non-text minimum */

  /* ── Type scale ──────────────────────────────────────────────────────────
     Card titles ran at 9/13/14/15/18px, three of them visible in one viewport.
     Micro-labels ran at seven sizes and eight trackings. Two steps now. */
  --jag-title:          15px;      /* every card title */
  --jag-title-weight:   800;
  --jag-title-track:    -.01em;
  --jag-label:          10.5px;    /* every micro-label above a value */
  --jag-label-weight:   800;
  --jag-label-track:    .08em;
  --jag-colhead:        11px;      /* every table column header */
  --jag-colhead-weight: 800;
  --jag-colhead-track:  .07em;

  /* Weights 650/750/850 were used 36 times and DO NOT EXIST in the loaded Inter
     (js/load-fonts.js requests a semicolon list, which yields static faces and no
     variable axis), so every one silently collapsed to 700/800. Use these. */
  --jag-w-regular:      400;
  --jag-w-medium:       500;
  --jag-w-semi:         600;
  --jag-w-bold:         700;
  --jag-w-heavy:        800;
}

/* ═══ DARK THEME — APPEND ONLY, NEVER RESTRUCTURE THE BLOCK ABOVE ═══════════
   A blanket find-and-replace in this file once made --jag-green's own
   definition circular and took the whole site's colour out. Nothing above this
   line gets edited; dark is a second set of values for the same names, so every
   rule that already draws from a token follows automatically on all 17 pages
   that load this file.

   Contrast is stated against the surface each token is actually painted on,
   the same discipline as the light set. The light values are measured on
   #FFFFFF; these are measured on --jag-card #151D29.

   Ratios are LOWER on dark by design — pure #FFF text on a dark ground causes
   halation, so the primary ink is deliberately short of white. Everything that
   carries meaning still clears 4.5:1, and the faint step still clears it,
   because "the FLOOR, nothing dimmer carries meaning" is a rule about
   legibility, not about which theme is on. */
html[data-chart-theme="dark"] {
  /* Brand. The light green is 6.29:1 on white and about 2.1:1 on #151D29 —
     unreadable — so it lifts. Pro orange survives the move and only shifts
     enough to stop glowing. */
  --jag-green:          #27C96F;   /* 8.6:1 on --jag-card */
  --jag-green-deep:     #34DC7E;   /* pressed / hover — brighter, not darker */
  --jag-green-soft:     #123A28;   /* tinted surface, never text */
  --jag-green-line:     #1E5A41;
  --jag-pro:            #F0801F;
  --jag-pro-deep:       #FF9440;

  /* Ink. Four steps, same jobs, same order. */
  --jag-ink:            #F1F4F7;   /* 14.2:1 — primary text */
  --jag-ink-2:          #C7CEDA;   /* 9.4:1  — secondary */
  --jag-ink-muted:      #A7B0BE;   /* 6.6:1  — labels, captions, meta */
  --jag-ink-faint:      #8B94A3;   /* 4.6:1  — the FLOOR, same rule as light */

  /* Surfaces. Three levels, darkest first, matching the chart desk exactly so
     a user moving between pages never sees the ground change under them. */
  --jag-page:           #090D14;
  --jag-card:           #151D29;
  --jag-card-2:         #1B2533;   /* nested / header bands */

  /* Lines. The light set exists because a separator composited to 1.00:1 and
     was invisible; the same trap is easier to fall into on dark, so these are
     deliberately a step stronger than they look like they need to be. */
  --jag-line:           #263142;
  --jag-line-soft:      #1F2836;
  --jag-line-strong:    #33405A;

  /* State. Up/down stay the only semantic colours; still no amber tier. */
  --jag-up:             #43D17A;   /* 9.6:1 */
  --jag-down:           #FF6678;   /* 6.4:1 */
  --jag-up-soft:        #123C2B;
  --jag-down-soft:      #401C25;

  /* Focus must clear 3:1 against BOTH the card and the page ground. */
  --jag-focus:          #27C96F;

  /* Native form controls, scrollbars and the viewport ground follow. */
  color-scheme: dark;
}
html[data-chart-theme="dark"] body { background: var(--jag-page); color: var(--jag-ink); }

/* ── SHARED CHROME IN DARK ─────────────────────────────────────────────────
   These rules were written for /chart and lived in css/chart-desk-page.css,
   which only /chart loads — so the header, the tab strip and the identity pill
   went dark on the desk and stayed white on Portfolio, Leaderboard and every
   other page. They belong here, where all 17 pages can see them.

   Every one of these selectors hard-codes a colour in its base rule, so no
   token swap could reach them; they have to be named. This list came from
   walking the live DOM on both pages and collecting each element whose
   COMPUTED background was light — it is measured, not guessed. */
html[data-chart-theme="dark"] .pt-appbar,
html[data-chart-theme="dark"] .pt-topbar,
html[data-chart-theme="dark"] .jm-secbar {
  background: var(--jag-card) !important;
  border-bottom-color: var(--jag-line) !important;
  color: var(--jag-ink);
}
html[data-chart-theme="dark"] .pt-view-nav {
  background: var(--jag-card-2) !important;
  border-color: var(--jag-line) !important;
  overflow: hidden;
}
html[data-chart-theme="dark"] .pt-view-tab,
html[data-chart-theme="dark"] .pt-feature-tab {
  background: var(--jag-card-2) !important;
  border-color: transparent !important;
  color: var(--jag-ink-muted) !important;
}
html[data-chart-theme="dark"] .pt-view-tab:hover { background: var(--jag-line-soft) !important; color: var(--jag-ink) !important; }
/* The active tab is the only one that speaks. */
html[data-chart-theme="dark"] .pt-view-tab.active,
html[data-chart-theme="dark"] .pt-view-tab[aria-current="page"] {
  background: var(--jag-green-soft) !important;
  color: var(--jag-green) !important;
  border-color: var(--jag-green-line) !important;
}
html[data-chart-theme="dark"] .sim-hdr-ico,
html[data-chart-theme="dark"] .sim-user-pill,
html[data-chart-theme="dark"] .sim-help-btn,
html[data-chart-theme="dark"] .sim-settings-btn,
html[data-chart-theme="dark"] .sim-signout-btn,
html[data-chart-theme="dark"] .jm-x,
html[data-chart-theme="dark"] .jm-planchip,
html[data-chart-theme="dark"] kbd {
  background: var(--jag-card-2) !important;
  border-color: transparent !important;
  color: var(--jag-ink-muted) !important;
}
html[data-chart-theme="dark"] .sim-user-name { color: var(--jag-ink) !important; }
html[data-chart-theme="dark"] .jm-sheet { background: var(--jag-card) !important; color: var(--jag-ink); }
html[data-chart-theme="dark"] .jm-link { color: var(--jag-ink-muted); }
html[data-chart-theme="dark"] .jm-link.on { background: var(--jag-green-soft) !important; color: var(--jag-green) !important; }
html[data-chart-theme="dark"] .jm-secbar button { color: var(--jag-ink-muted); }
html[data-chart-theme="dark"] .jm-secbar button.on { color: var(--jag-ink); }
/* Go Pro keeps its weight — it is the one place a second accent is earned. */
html[data-chart-theme="dark"] .pt-cta,
html[data-chart-theme="dark"] a[data-jm="gopro"] {
  background: var(--jag-green) !important; color: #06140D !important;
  border-color: transparent !important; font-weight: 800;
}

/* ── PORTFOLIO / SHARED CARD SURFACES ──────────────────────────────────────
   .pfd-* is the portfolio desk. Same treatment, same three levels. */
html[data-chart-theme="dark"] .pfd-card,
html[data-chart-theme="dark"] .pf-card,
html[data-chart-theme="dark"] .card {
  background: var(--jag-card) !important;
  border-color: var(--jag-line) !important;
  color: var(--jag-ink);
  box-shadow: none;
}
html[data-chart-theme="dark"] .pfd-card-hd,
html[data-chart-theme="dark"] .pfd-card-bd { background: transparent !important; }
html[data-chart-theme="dark"] .pfd-card thead,
html[data-chart-theme="dark"] .pfd-card th {
  background: var(--jag-card-2) !important;
  color: var(--jag-ink-muted) !important;
  border-bottom-color: var(--jag-line) !important;
}
html[data-chart-theme="dark"] .pfd-card td { color: var(--jag-ink); border-color: var(--jag-line-soft) !important; }
html[data-chart-theme="dark"] .pfd-card tbody tr:hover { background: var(--jag-card-2) !important; }

/* ── The one header theme toggle ───────────────────────────────────────────
   Sits beside Inbox on every page. One glyph at a time: the button always
   offers the OTHER mode, which is how every platform labels a theme switch. */
.sim-hdr-ico[data-jag-theme-btn] { cursor: pointer; }
.jag-ico-sun { display: none; }
html[data-chart-theme="dark"] .jag-ico-moon { display: none; }
html[data-chart-theme="dark"] .jag-ico-sun { display: block; }

/* ── LEADERBOARD IN DARK ───────────────────────────────────────────────────
   I shipped the site-wide theme before this page had its own pass, and the
   owner caught it: "you fucked up the leaderboard, colors."

   Measured on the live page, it was failing in BOTH directions at once —
   which is the signature of a half-applied theme:
     .nm / B      near-white #F1F4F7 on a card that stayed #FFFFFF  (invisible)
     .lb-topcards-title / STRONG   near-black #111820 on the new #090D14 ground
   Flipping the ink without flipping the surfaces under it guarantees one of
   those two on every element.

   Leaderboard styles live INLINE in leaderboard.html and it loads only this
   file, so the surfaces have to be corrected from here. Selectors below are
   the measured ones, not guesses. */
html[data-chart-theme="dark"] .pod,
html[data-chart-theme="dark"] .tabs,
html[data-chart-theme="dark"] table,
html[data-chart-theme="dark"] .lb-card {
  background: var(--jag-card) !important;
  border-color: var(--jag-line) !important;
  color: var(--jag-ink);
}
html[data-chart-theme="dark"] th,
html[data-chart-theme="dark"] thead th {
  background: var(--jag-card-2) !important;
  color: var(--jag-ink-muted) !important;
  border-bottom-color: var(--jag-line) !important;
}
html[data-chart-theme="dark"] td { border-color: var(--jag-line-soft) !important; color: var(--jag-ink); }
html[data-chart-theme="dark"] tbody tr:hover { background: var(--jag-card-2) !important; }
/* Your own row is the one you look for — it keeps its tint, on the dark scale. */
html[data-chart-theme="dark"] tr.me,
html[data-chart-theme="dark"] tr.me td { background: var(--jag-green-soft) !important; color: var(--jag-ink) !important; }
/* Headings and figures that went dark-on-dark. */
html[data-chart-theme="dark"] .lb-topcards-title { color: var(--jag-ink-muted) !important; }
html[data-chart-theme="dark"] .pod strong,
html[data-chart-theme="dark"] .pod b,
html[data-chart-theme="dark"] td strong,
html[data-chart-theme="dark"] td b,
html[data-chart-theme="dark"] .nm { color: var(--jag-ink) !important; }
/* The podium: 1st keeps its gold, on a surface that can carry it. */
html[data-chart-theme="dark"] .pod.b { background: linear-gradient(180deg, #2A2313 0%, var(--jag-card) 70%) !important; border-color: #6B5A22 !important; }
html[data-chart-theme="dark"] .pod-pill.up { background: var(--jag-green-soft) !important; color: var(--jag-green) !important; }
html[data-chart-theme="dark"] .pod-pill.down { background: var(--jag-red-soft, rgba(246,70,93,.15)) !important; color: var(--jag-down) !important; }
/* Controls. */
html[data-chart-theme="dark"] .lb-showport,
html[data-chart-theme="dark"] .lb-view,
html[data-chart-theme="dark"] .tabs button {
  background: var(--jag-card-2) !important;
  border-color: var(--jag-line) !important;
  color: var(--jag-ink-muted) !important;
}
html[data-chart-theme="dark"] .tabs button.on,
html[data-chart-theme="dark"] .tabs button[aria-selected="true"] {
  background: var(--jag-green-soft) !important; color: var(--jag-green) !important; border-color: var(--jag-green-line) !important;
}
html[data-chart-theme="dark"] .lb-view:hover { background: var(--jag-green-soft) !important; color: var(--jag-green) !important; }
/* The last four on leaderboard, measured after the pass above. */
html[data-chart-theme="dark"] .lb-you {
  background: var(--jag-green) !important; color: #06140D !important; border-color: transparent !important;
}
html[data-chart-theme="dark"] .lb-viewall {
  background: var(--jag-card-2) !important; color: var(--jag-ink-muted) !important; border-color: var(--jag-line) !important;
}
/* Your own return sat green-on-green: the row already carries the green tint,
   so the number needs the ink, not a second helping of the same colour. */
html[data-chart-theme="dark"] tr.me .lb-ret-num.up { color: var(--jag-ink) !important; font-weight: 800; }
html[data-chart-theme="dark"] .jm-burger,
html[data-chart-theme="dark"] .jm-burger b { color: var(--jag-ink) !important; }
/* The mobile Menu sheet's own header. My earlier rule named .jm-burger; the
   element is a bare <b> inside .jm-sheet-hd, so it kept #0f172a on the dark
   sheet. Named by where it actually lives. */
html[data-chart-theme="dark"] .jm-sheet-hd,
html[data-chart-theme="dark"] .jm-sheet-hd b { color: var(--jag-ink) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   THE LEGACY TOKEN FAMILY, FLIPPED FOR DARK.  (2026-08-21)

   THE SYSTEMIC DARK-MODE BUG. The dark block above redefines only --jag-*.
   But most of this site was written against an older family -- --ink, --muted,
   --bg, --text, --navy, --card, --line -- which is declared per page on :root
   and redefined in NO dark block anywhere. Measured: var(--muted) in 117 files,
   var(--ink) in 103, var(--bg) in 106, dark overrides for them: ZERO.

   So on every one of those pages the body background flipped dark (that rule
   uses --jag-page) while the text colour stayed dark navy. That is why the
   owner opened /plans -- the checkout -- and could not read the H1, the word
   "Free", "$0", "$4.99", or a single feature bullet. It has been that way
   since dark mode shipped, on the one page where money changes hands.

   This is deliberately ONE block rather than a per-page fix: the cause is one
   missing mapping, and repeating it 100 times is how the next one gets missed.
   html[data-chart-theme="dark"] is (0,1,1) and :root is (0,1,0), so this wins
   over a page's own :root declaration no matter which file loads last.
   ══════════════════════════════════════════════════════════════════════════ */
html[data-chart-theme="dark"],
html[data-intel-theme="dark"],
html[data-chart-theme="dark"] body,
html[data-intel-theme="dark"] body {
  /* ink */
  --navy:      var(--jag-ink, #E6EDF3);
  --text:      var(--jag-ink, #E6EDF3);
  --ink:       var(--jag-ink, #E6EDF3);
  --ink-2:     var(--jag-ink-2, #C7D2DE);
  --muted:     var(--jag-ink-muted, #97A3B4);
  --ink-faint: var(--jag-ink-faint, #7A8798);
  /* surfaces */
  --bg:        var(--jag-page, #0E141B);
  --card:      var(--jag-card, #151B24);
  --card-2:    var(--jag-card-2, #1B222C);
  --surface:   var(--jag-card, #151B24);
  /* lines */
  --line:       var(--jag-line, #2A3442);
  --line-soft:  var(--jag-line-soft, #232C38);
  --border:     var(--jag-line, #2A3442);
  /* tints that were light-mint / light-cream on white */
  --pro-tint:  #10281f;
  --mint:      #0a3325;
  --tint:      #10281f;
}


/* THE MOBILE NAV BURGER WAS INVISIBLE. (2026-08-21)
   Measured 1.10:1. An earlier partial fix flipped `color` only, with
   !important, while the injected `background:#fff` survived -- so it became
   near-white text and a currentColor SVG on a white pill. Worse than leaving it
   alone, because a half-flipped rule looks handled. This is the ONLY nav on a
   phone: the same injected block hides .pt-view-nav, so the avatar, gear,
   inbox and upgrade link all sit behind this one control. */
html[data-chart-theme="dark"] .jm-burger,
html[data-intel-theme="dark"] .jm-burger {
  background: #151B24 !important;
  border-color: #2A3442 !important;
  color: #E6EDF3 !important;
}
html[data-chart-theme="dark"] .jm-burger svg,
html[data-intel-theme="dark"] .jm-burger svg { stroke: #E6EDF3 !important; color: #E6EDF3 !important; }