/* =====================================================================
   Grow Research · Light / Dark mode (growdev.org system, Kenny 2026-10-06)
   Same behaviour as the Grow sales page and Hubs app: a sun/moon button in the
   header (a labelled switch row in the phone menu). A saved choice wins
   (localStorage "grow-research-mode"); otherwise the page follows the system
   setting, live. The boot script in <head> sets html[data-mode] before paint.
   Dark uses the brand charcoal ramp. Strategy-colour fills keep their bright
   fills with dark ink in both modes.
   ===================================================================== */

/* ---------- toggle ---------- */
.mode-btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 12px; background: none; color: var(--ink-2); cursor: pointer; overflow: hidden; transition: background .15s, color .15s; }
.mode-btn:hover { background: var(--bg); color: var(--ink); }
.mode-btn .mi { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .38s var(--ease), opacity .2s ease; }
html:not([data-mode="dark"]) .mode-btn .mi-sun { opacity: 0; transform: rotate(-80deg) scale(.4); }
html[data-mode="dark"] .mode-btn .mi-moon { opacity: 0; transform: rotate(80deg) scale(.4); }
.mode-row { display: none; }
@media (max-width: 900px) {
  .gr-header .mode-btn { display: none; }
  .gr-header.open .mode-row { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 0; padding: 13px 14px; border: 0;
    border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; }
  .mode-row .mi { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .mode-row .mr-l { flex: 1; }
  .mode-row .mr-sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--line-2); transition: background .2s; }
  .mode-row .mr-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
  .mode-row[aria-pressed="true"] .mr-sw { background: var(--acc); }
  .mode-row[aria-pressed="true"] .mr-sw::after { transform: translateX(18px); }
}
@media (prefers-reduced-motion: reduce) { .mode-btn .mi { transition: none; } }
html.mode-xfade, html.mode-xfade *, html.mode-xfade *::before, html.mode-xfade *::after {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, fill .22s ease, stroke .22s ease, box-shadow .22s ease !important; }

/* ---------- dark tokens ---------- */
html[data-mode="dark"] {
  color-scheme: dark;
  --bg: #1C1F22; --surface: #2F3439; --raise: #383D42; --sky: #252A2E;
  --line: #3A4046; --line-2: #4A5158;
  --ink: #F4F5F7; --ink-2: #D4D8DC; --ink-3: #BCC2C8; --ink-cap: #BCC2C8; --prose: #E2E5E8;
  --char: #434A50; --char-2: #2F3439; --char-3: #14171A;
  --lead: #BAC0C5;
  --disc-ink: #F6B07A; --teach-ink: #F39A9A; --env-ink: #E4D353; --evt-ink: #BED65A; --vol-ink: #82D1DD; --fam-ink: #F6A5BE; --lead-ink: #D4D8DC;
  --disc-soft: #52433A; --teach-soft: #50393D; --env-soft: #50513E; --evt-soft: #49513F; --vol-soft: #3E5057; --fam-soft: #52414B; --lead-soft: #484D52;
  --acc-ink: #BFE478; --acc-ring: #FFFFFF; --acc-soft: #495444; --acc-edge: transparent; --acc-lip: transparent; --acc-glow: rgba(191,228,120,.18);
  --hl: #4B6D0B; --logo-ink-d: #F4F5F7;
  --header-bg: rgba(28,31,34,.88);
  --shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,.08), 0 18px 48px rgba(0,0,0,.5);
}
html[data-mode="dark"] body { background: var(--bg); color: var(--ink); }
/* leadership flips to a light-grey fill with dark ink (charcoal-on-charcoal would vanish) */
html[data-mode="dark"] [data-theme="lead"], html[data-mode="dark"][data-theme="lead"] { --a-fill: #BAC0C5; --a-on: #1F2328; }

/* bright fills keep dark ink (scope the ink ramp back to light-mode values) */
html[data-mode="dark"] :is(.prize, .ln-card, .hero-card:not(.dark), .ap-side, .area-tabs button[aria-selected="true"], .ch-head,
  .opt:has(input:checked), .btn-go, .q.answered .q-num, .fx-stat b, .qn, .facet .fc, .versus .hi, .fr-tabs button[aria-selected="true"],
  .ln-steps .n, .fr-how li > b, .sv-dot.on, .preview-tag, .gr-preview .pill, .handoff-art span, .split-bar .ft, .btn-primary, .gr-cta,
  .sv-done .pill, .sv-entry .pill, .sv-entered .pill, .tile.on, .chip-fill) {
  --ink: #1F2328; --ink-2: #3A4048; --ink-3: #4F5761; color: var(--ink); }
/* teaching red and leadership fills carry white text in both modes */
html[data-mode="dark"] [data-theme="teach"] :is(.ap-side, .ch-head, .opt:has(input:checked), .btn-go, .q.answered .q-num, .fx-stat b, .qn),
html[data-mode="dark"] [data-theme="teach"]:is(.ap-side, .ch-head, .qn, .area-tabs button[aria-selected="true"]) { --ink: #fff; --ink-2: #F1F2F4; --ink-3: #E2E5E8; color: #fff; }

/* eyebrows: bright strategy colour reads on charcoal */
html[data-mode="dark"] .eyebrow, html[data-mode="dark"] .kicker { color: var(--a-ink); }

/* header + chrome */
html[data-mode="dark"] .gr-logo .rule { background: rgba(255,255,255,.45); }
html[data-mode="dark"] .gr-nav a[aria-current="page"] { background: var(--raise); }
html[data-mode="dark"] .gr-menu { background: var(--raise); color: var(--ink); }
html[data-mode="dark"] .btn-dark { background: #F4F5F7; color: #1F2328; }
html[data-mode="dark"] .btn-dark:hover { background: #fff; }
html[data-mode="dark"] .btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
html[data-mode="dark"] .gr-preview::backdrop { background: rgba(0,0,0,.7); }
html[data-mode="dark"] .gp-btns .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--line-2); }
html[data-mode="dark"] .gr-footer { background: var(--char-3); }

/* inputs */
html[data-mode="dark"] :is(input, select, textarea) { background-color: var(--surface); color: var(--ink); border-color: var(--line-2); }
html[data-mode="dark"] ::placeholder { color: var(--ink-3); }

/* segmented controls / tracks */
html[data-mode="dark"] .seg { background: var(--raise); }
html[data-mode="dark"] .seg button[aria-pressed="true"] { background: #F4F5F7; color: #1F2328; }

/* page heroes: charcoal wash (per Kenny, not green/teal) */
html[data-mode="dark"] :is(.hero, .ln-hero, .page-hero, .ex-head, .fr-hero) {
  background: linear-gradient(180deg, #2F3439 0, #262A2E 320px, var(--bg) 680px); }
html[data-mode="dark"] :is(.counts, .stories, .fx-promo, .lab-section.alt, .nulls) { background: var(--sky); }

/* survey option dots on bright fills */
html[data-mode="dark"] .opt-box { border-color: var(--line-2); background: var(--bg); }
html[data-mode="dark"] .opt:has(input:checked) .opt-box { border-color: #1F2328; background: #1F2328; }
html[data-mode="dark"] [data-theme="teach"] .opt:has(input:checked) .opt-box { border-color: #fff; background: #fff; }

/* photos sit on charcoal with a thin ring */
html[data-mode="dark"] .ppl img { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 36px -20px rgba(0,0,0,.8); }

/* translucent white chips that sit on bright fills keep working; on surfaces they invert */
html[data-mode="dark"] .ch-count, html[data-mode="dark"] .prize-area, html[data-mode="dark"] .hc-area, html[data-mode="dark"] .ln-card-pill { background: rgba(255,255,255,.6); color: #1F2328; }
html[data-mode="dark"] .welcome-card { background: #14171A; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

/* charcoal (leadership) and red (teaching) fills keep white text in dark mode */
html[data-mode="dark"] :is([data-theme="teach"]) :is(.fx-stat b, .ap-side, .ch-head, .btn-go, .q.answered .q-num, .qn, .versus .hi, .sz-col[aria-pressed="true"] .sz-bar),
html[data-mode="dark"] :is([data-theme="teach"]) .versus .hi :is(.side-label, .side-desc, .side-base, .side-num, span) { --ink: #fff; --ink-2: #F1F2F4; --ink-3: #E2E5E8; color: #fff; }
/* "pressed" filter pills: ink-filled in light, so flip to a light pill in dark */
html[data-mode="dark"] :is(.story-filter button[aria-pressed="true"], .fx-filter button[aria-pressed="true"], .area-pills button[aria-pressed="true"], .ctl-btn) { background: #F4F5F7; color: #1F2328; }
html[data-mode="dark"] :is(.story-filter button[aria-pressed="true"] span, .area-pills button[aria-pressed="true"] span) { color: #4F5761; }
html[data-mode="dark"] .ctl-btn:hover { background: #fff; }
html[data-mode="dark"] .ap-side .seg { background: rgba(255,255,255,.35); }
html[data-mode="dark"] .ap-side .seg button { color: #1F2328; }
html[data-mode="dark"] .ap-side .seg button[aria-pressed="true"] { background: #fff; }
html[data-mode="dark"] [data-theme="lead"] :is(.handoff-art span, .versus .hi, .fx-stat b) { --ink: #1F2328; --ink-2: #3A4048; --ink-3: #4F5761; color: #1F2328; }
html[data-mode="dark"] [data-theme="lead"] .versus .hi :is(.side-label, .side-desc, .side-base, span), html[data-mode="dark"] [data-theme="lead"] .handoff-art span b { color: #1F2328; }
html[data-mode="dark"] [data-theme="lead"] .opt:has(input:checked) { color: #1F2328; }
html[data-mode="dark"] [data-theme="lead"] .opt input:checked + .opt-box { border-color: #1F2328; background: #1F2328; }
html[data-mode="dark"] [data-theme="lead"] .opt input:checked + .opt-box::after { border-color: #BAC0C5; }
html[data-mode="dark"] [data-theme="lead"] .opt input[type="radio"]:checked + .opt-box::after { background: #BAC0C5; }
html[data-mode="dark"] .handoff-art [data-theme="lead"] b { color: #1F2328; }