/* ============================================================================
   REBRAND, 2026-08-30 — Lucas's two picks from header-palette-options:
   dark = "gold ribbon" (charcoal bar, 3px gold ribbon, gold accents replacing
   the teal text everywhere), light = "teal band" (teal gradient bar, white tab
   strip). LIVE since 2026-08-31 ("ship the rebrand"): index.html links this
   after styles.css, so every rule here deliberately out-cascades that file.
   Previewed from scratchpad by rebrand_preview_server.mjs before shipping.

   Method: one accent layer (--acc family) carries every place teal was used as
   TEXT or an interactive accent. In light the accent stays teal, so light only
   changes its header. In dark the accent becomes gold. DATA colors are
   deliberately untouched in both themes: the DO-share bar fill, tier borders,
   month/home/geo chips, strengths ranks, checkmarks, curriculum shades and the
   chart marks all keep their meaning, because --gold already means "spend a
   shot here" and a gold accent sweep that also recolored teal data would make
   two different instructions look identical.
   ========================================================================== */

:root {
  --acc: #0A736D;
  --acc-lo: #E0F0EE;
  --acc-on: #FFFFFF;
  --acc-ring2: #22d3ee;
  --acc-sweep: rgba(94, 234, 212, .35);
  /* The Long-shot chip's ink. In light it is the body color it always was.
     In dark the indigo card lift put --body on --rule at 4.49:1, a hundredth
     under gate4's 4.5 contrast floor, so dark carries its own step-up. */
  --chip-low-ink: var(--body);

  /* light header: the teal band */
  --hdr-bg: linear-gradient(135deg, #0A736D, #0E8A82);
  --hdr-ink: #FFFFFF;
  --hdr-edge: 1px solid #07564F;
  --hdr-ribbon: 0 solid transparent;
  --hdr-ctl-bg: rgba(255, 255, 255, .14);
  --hdr-ctl-rule: rgba(255, 255, 255, .35);
  --hdr-ctl-ink: #CDEBE7;
  --hdr-ctl-on-bg: rgba(255, 255, 255, .94);
  --hdr-ctl-on-ink: #0A736D;
  --nav2-bg: #FFFFFF;
  --nav2-edge: #C9D6E6;
  --nav2-shade: 0 10px 18px -14px rgba(15, 36, 48, .30);
}

/* One dark definition, reached the same two ways the site's own tokens are. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acc: #FBCB4E;
    --acc-lo: #382c12;
    --acc-on: #231A05;
    --acc-ring2: #F59E0B;
    --acc-sweep: rgba(251, 203, 78, .35);
    --chip-low-ink: #b4bfd8;

    /* dark header: charcoal bar under a gold ribbon */
    --hdr-bg: #1B2340;
    --hdr-ink: #F4EEDC;
    --hdr-edge: 1px solid rgba(251, 203, 78, .34);
    --hdr-ribbon: 3px solid #FBCB4E;
    --hdr-ctl-bg: #10162E;
    --hdr-ctl-rule: #3A4470;
    --hdr-ctl-ink: #B4BDD6;
    --hdr-ctl-on-bg: rgba(251, 203, 78, .18);
    --hdr-ctl-on-ink: #FBCB4E;
    --nav2-bg: #0A0F22;
    --nav2-edge: rgba(251, 203, 78, .30);
    --nav2-shade: none;

    /* 2026-08-30 second pass, his note: "not a pure black background". The
       page lifts off black onto a deep indigo and every box steps up with it,
       so card-on-paper contrast holds. The tab strip goes DARKER than the
       page now, so the chrome band still reads as chrome. */
    --paper: #0E1428;
    --card: rgba(31, 41, 79, .9);
    --rule: #364471;
    --surface: #1B2547;
    --surface-2: #243158;
    --surface-3: #2C3D6E;
    --line-hover: #4A5B96;

    /* the site's own interactive tokens move from teal to gold */
    --focus: #FBCB4E;
    --pill-bg: rgba(251, 203, 78, .16);
    --pill-ink: #FBCB4E;
    --tint: rgba(251, 203, 78, .06);
    --neon: #FBCB4E;
    --neon-soft: rgba(251, 203, 78, .16);
    --neon-faint: rgba(251, 203, 78, .06);
    --neon-glow: rgba(251, 203, 78, .45);
    --brand: #FBCB4E;
    --brand-deep: #DFA732;
    --shade: 0 8px 24px rgba(0, 0, 0, .45), 0 0 32px rgba(251, 203, 78, .05);
    /* gold is far more luminous than teal, so the ambient glows run at a
       fraction of the teal alphas or the page reads as a sunrise */
    --page-glows: radial-gradient(ellipse 60% 50% at 18% 22%, rgba(251, 203, 78, .15), transparent 60%),
                  radial-gradient(ellipse 50% 40% at 82% 78%, rgba(245, 158, 11, .10), transparent 60%),
                  radial-gradient(ellipse 40% 30% at 50% 50%, rgba(251, 203, 78, .06), transparent 60%);
    /* the texture: a 56px gold diamond lattice with a dot at each crossing,
       drawn as an SVG tile on the body::after layer the site already pans
       (spbGridScroll moves exactly one 56px tile, so the loop stays seamless)
       and already stops under prefers-reduced-motion */
    --page-grid: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2256%22%20height=%2256%22%3E%3Cpath%20d=%22M0%2028%2028%200%2056%2028%2028%2056Z%22%20fill=%22none%22%20stroke=%22rgba(251,203,78,0.07)%22%20stroke-width=%221%22/%3E%3Ccircle%20cx=%2228%22%20cy=%2228%22%20r=%221.1%22%20fill=%22rgba(251,203,78,0.16)%22/%3E%3C/svg%3E');
  }
}
:root[data-theme="dark"] {
  --acc: #FBCB4E;
  --acc-lo: #382c12;
  --acc-on: #231A05;
  --acc-ring2: #F59E0B;
  --acc-sweep: rgba(251, 203, 78, .35);
  --chip-low-ink: #b4bfd8;
  --hdr-bg: #1B2340;
  --hdr-ink: #F4EEDC;
  --hdr-edge: 1px solid rgba(251, 203, 78, .34);
  --hdr-ribbon: 3px solid #FBCB4E;
  --hdr-ctl-bg: #10162E;
  --hdr-ctl-rule: #3A4470;
  --hdr-ctl-ink: #B4BDD6;
  --hdr-ctl-on-bg: rgba(251, 203, 78, .18);
  --hdr-ctl-on-ink: #FBCB4E;
  --nav2-bg: #0A0F22;
  --nav2-edge: rgba(251, 203, 78, .30);
  --nav2-shade: none;
  --paper: #0E1428;
  --card: rgba(31, 41, 79, .9);
  --rule: #364471;
  --surface: #1B2547;
  --surface-2: #243158;
  --surface-3: #2C3D6E;
  --line-hover: #4A5B96;
  --focus: #FBCB4E;
  --pill-bg: rgba(251, 203, 78, .16);
  --pill-ink: #FBCB4E;
  --tint: rgba(251, 203, 78, .06);
  --neon: #FBCB4E;
  --neon-soft: rgba(251, 203, 78, .16);
  --neon-faint: rgba(251, 203, 78, .06);
  --neon-glow: rgba(251, 203, 78, .45);
  --brand: #FBCB4E;
  --brand-deep: #DFA732;
  --shade: 0 8px 24px rgba(0, 0, 0, .45), 0 0 32px rgba(251, 203, 78, .05);
  --page-glows: radial-gradient(ellipse 60% 50% at 18% 22%, rgba(251, 203, 78, .15), transparent 60%),
                radial-gradient(ellipse 50% 40% at 82% 78%, rgba(245, 158, 11, .10), transparent 60%),
                radial-gradient(ellipse 40% 30% at 50% 50%, rgba(251, 203, 78, .06), transparent 60%);
  --page-grid: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2256%22%20height=%2256%22%3E%3Cpath%20d=%22M0%2028%2028%200%2056%2028%2028%2056Z%22%20fill=%22none%22%20stroke=%22rgba(251,203,78,0.07)%22%20stroke-width=%221%22/%3E%3Ccircle%20cx=%2228%22%20cy=%2228%22%20r=%221.1%22%20fill=%22rgba(251,203,78,0.16)%22/%3E%3C/svg%3E');
}

/* ------------------------------------------------------------- chrome ---- */
.bar {
  background: var(--hdr-bg); color: var(--hdr-ink);
  border-bottom: var(--hdr-edge); border-top: var(--hdr-ribbon);
  font-weight: 600;
}
.themectl { background: var(--hdr-ctl-bg); border-color: var(--hdr-ctl-rule); }
.themectl button { color: var(--hdr-ctl-ink); }
.themectl button:hover { color: var(--hdr-ink); }
.themectl button[aria-pressed="true"] { background: var(--hdr-ctl-on-bg); color: var(--hdr-ctl-on-ink); }

.reportnav { background: var(--nav2-bg); border-bottom-color: var(--nav2-edge); box-shadow: var(--nav2-shade); }
.reportnav .rtab:hover { color: var(--acc); }
.reportnav .rtab[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--acc); }
.reportnav .youbtn { box-shadow: 0 0 0 9px var(--nav2-bg); }
.reportnav .youbtn:hover { color: var(--acc); border-color: var(--acc); }

/* -------------------------------------------------- accent text sweep ---- */
/* Every rule below repoints a place that used teal as text or an interactive
   accent. In light --acc IS teal, so these rules change nothing there. */
.kicker { color: var(--acc); }
:where(a) { color: var(--acc); }
.three svg { color: var(--acc); }
.btn { color: var(--acc-on); }
.btn.line { color: var(--acc); }
.btn::before { background: linear-gradient(90deg, transparent, var(--acc-sweep), transparent); }

.needs { background: var(--acc-lo); border-color: color-mix(in srgb, var(--acc) 30%, transparent); }
.needs .t { color: var(--acc); }
.needgo { border-color: color-mix(in srgb, var(--acc) 45%, transparent); color: var(--acc); }
.needgo:hover { border-color: var(--acc); }

.picks label:has(input:checked) { border-color: var(--acc); background: var(--acc-lo); color: var(--acc); }
.picks.addpicks button:hover { border-color: var(--acc); color: var(--acc); }
.picks label:has(input:checked), .specialty-choice[aria-pressed="true"] { border-color: var(--neon); background: var(--neon-soft); color: var(--acc); }
.picks label::before, .specialty-choice::before, .tile::before, .cta::before {
  background: conic-gradient(from var(--angle), transparent 35%, var(--neon), var(--acc-ring2), transparent 65%);
}

.ordered li { border-color: var(--acc); background: var(--acc-lo); }
.ordered li b { background: var(--acc); color: var(--acc-on); }
.ordered li span { color: var(--acc); }
.ordered li .drop { color: var(--acc); }

.combolist li[aria-selected="true"], .combolist li:hover { background: var(--acc-lo); }
.combolist li[aria-selected="true"] b, .combolist li:hover b { color: var(--acc); }
.combomark.ok { color: var(--acc); }
.livemark { color: var(--acc); }
.livemark i { background: var(--acc); }

/* 2026-08-30 afternoon pass, his "this green wasn't updated" flag: four accent
   surfaces the first sweep missed because they are backgrounds or inline
   styles rather than teal-as-text selectors. Data greens stay on purpose
   (checkmarks, the hero tile, month chips, the chart quadrant, DO-share bar
   fills, curriculum shades): they are the "act here" instruction, and gold
   already means "spend a shot here". */
.beta-block { background: var(--acc-lo); }
.stress { background: var(--acc-lo); }
.natfold > summary { color: var(--acc); }
/* report.js writes color:var(--teal) inline on the shelf headings
   ("Spend your months/signals here", "Already yours", the place names), so
   this is the one place the override has to out-rank an inline style. */
.shelfhead > b { color: var(--acc) !important; }
/* His second flag, 2026-08-30 ~16:00: the #1 hero tile was the last green CARD
   SURFACE in dark. It is the "spend your first shot here" instruction, which
   is exactly what gold means in this theme (the calendar's "big one" card is
   already solid gold), so the surface moves to the accent family. Chips,
   checkmarks, bars and the chart quadrant still keep their colors. */
.tile.hero { background: var(--acc-lo); border-color: var(--acc); }

.rowtoggle[aria-expanded="true"] .chev { color: var(--acc); }
.siglist button:hover, .siglist button:focus-visible { color: var(--acc); }
.mo.hi { background: var(--acc); color: var(--acc-on); }
.td .ic { background: var(--acc-lo); color: var(--acc); }
.readit { background: var(--acc-lo); }
.curchip { background: var(--acc-lo); color: var(--acc); }
.cursrc { color: var(--acc); }

/* The scatter's target quadrant was a kept data green until his 2026-08-30
   flag ("the chart has green in it pls change that to gold"). The tint and its
   caption ride the accent family now: still teal in light, gold in dark. */
#sec-scatter svg { --teal: var(--acc); --teal-lo: var(--acc-lo); }

/* The two advising CTA pills (§121) postdate the preview sweep, so without
   this line they were the last teal-as-accent surfaces left in gold dark. */
.barcta, .reportnav .rcta { background: var(--acc); color: var(--acc-on); }

/* The first-visit walkthrough's number chips (2026-08-31) use teal as an
   accent, so they ride the family like the ordered-cities chips above. */
.howfirst li > b { background: var(--acc); color: var(--acc-on); }

/* See --chip-low-ink at the top: dark's indigo lift left this exact chip a
   hundredth under the contrast gate, and only this chip. */
.chip.low { color: var(--chip-low-ink); }