/* ============================================================================
   JERSEY EMPIRE — HARBOUR NIGHT theme (atlas) — project default dark skin.
   Source of truth: jersey-empire-launch-creative-kit/atlas-tokens.css + BRAND.md
   (approved 2026-06-01). Loaded LAST on every page; re-maps the granite (--gv-*)
   token system to Harbour Night so token-based pages flip dark with correct
   light-on-dark text. Fonts intentionally left to each page ("keep the fonts").
   ========================================================================== */

/* Atlas display/label fonts available if a page opts in (body left as-is). */

/* ---- Harbour Night token re-map (beats granite-shell.css: loaded after, same
   specificity body.granite-v3). Every granite component reads these, so colours
   flip in one place. TEXT tokens are light; surfaces are navy; accents brass/sea. */
body.granite-v3,
body[data-theme="granite"],
body[data-theme="night"]{
  /* surfaces */
  --gv-bg:#02101f;            /* page base (navy-900) */
  --gv-surface:#0a2540;       /* cards / panels (navy-700) */
  --gv-surface-2:#05172c;     /* subtle panel (navy-800) */
  --gv-surface-3:#0e2a49;     /* raised / hover (navy-600) */
  /* text — light on dark */
  --gv-ink:#EDF3FB;
  --gv-ink-mute:#9DB2C9;
  --gv-ink-soft:#7E93AC;
  /* hairlines */
  --gv-line:rgba(150,190,235,.14);
  --gv-line-soft:rgba(150,190,235,.09);
  /* primary = SEA blue. granite reused --gv-primary for BOTH buttons AND feature-panel
     backgrounds (auth intro, £30 card, hero panels). Sea keeps those panels readable
     with light text; brass is applied to actual buttons via component rules below. */
  --gv-primary:#E8AC4E;
  --gv-primary-deep:#CE9440;
  --gv-primary-tint:rgba(232,172,78,.16);
  --gv-primary-fg:#22160A;
  /* accent = lighter sea / gold for eyebrows + highlights on dark */
  --gv-accent:#E8AC4E;
  --gv-accent-deep:#F5C878;
  --gv-accent-tint:rgba(232,172,78,.16);
  --gv-accent-fg:#22160A;
  /* status */
  --gv-good:#3DD68C;
  --gv-bad:#E5675F;
  /* brass gradients for signature CTAs */
  --brass-metal:linear-gradient(100deg,#8F6420,#E8AC4E 28%,#F5C878 46%,#CE9440 64%,#8F6420);
  --brass-text:linear-gradient(92deg,#BA8628,#F0CE86 50%,#BA8628);

  /* legacy EMPIRE tokens — app/ops pages (data-theme="empire") still read these
     (e.g. --ink-day on stat labels, --bg/--surface). Remap to Harbour Night so
     those elements flip too. */
  --bg:#02101f; --bg-light:#05172c; --bg-dark:#02101f; --bg-tint:#05172c;
  --surface:#0a2540; --surface-2:#05172c; --surface-3:#0e2a49;
  --ink:#EDF3FB; --ink-day:#EDF3FB; --ink-mute:#9DB2C9; --ink-soft:#7E93AC;
  --line:rgba(150,190,235,.14); --line-soft:rgba(150,190,235,.09);
  --primary:#E8AC4E; --primary-deep:#CE9440; --primary-fg:#22160A; --primary-tint:rgba(232,172,78,.16);
  --secondary:#E8AC4E; --accent:#E8AC4E; --good:#3DD68C; --bad:#E5675F;
  --ha-white:#0a2540; --ha-shell:#02101f; --ha-blue-soft:#05172c; --ha-line:rgba(150,190,235,.14);
  --ha-ink:#EDF3FB; --ha-muted:#9DB2C9; --ha-gold:#E8AC4E;
}

/* ---- ONE shared Harbour Night background on every page (matches cockpit) ----
   Fixed layers behind all content: atlas radial gradient + chart-paper grid (::before)
   and the crowned-compass crest watermark (::after). The shell + cards are made
   transparent/translucent so this single background shows through everywhere. */
html body.granite-v3{background:var(--gv-bg) !important;color:var(--gv-ink);position:relative;}
body.granite-v3::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(150,190,235,.06) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(150,190,235,.06) 1px,transparent 1px) 0 0/40px 40px,
    radial-gradient(125% 95% at 72% 4%,var(--gv-surface-3),var(--gv-surface-2) 52%,var(--gv-bg));
  /* soften like the home page: faint grid that fades toward the edges (was a crisp,
     uniform .13 grid that read too sharp/bright on the inner pages) */
  -webkit-mask:radial-gradient(120% 110% at 70% 8%,#000 48%,transparent 100%);
  mask:radial-gradient(120% 110% at 70% 8%,#000 48%,transparent 100%);}
/* compass rose — the cockpit "corner round thingy", fixed in the top-right of every page */
body.granite-v3::after{content:"";position:fixed;top:-300px;right:-300px;width:760px;height:760px;z-index:-1;pointer-events:none;opacity:.5;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(232, 172, 78,.16) 0 .5deg,transparent .5deg 7.5deg),
    radial-gradient(circle,transparent 0 31%,rgba(232, 172, 78,.22) 31% 31.6%,transparent 31.6% 45%,rgba(109,215,255,.18) 45% 45.6%,transparent 45.6% 59%,rgba(232, 172, 78,.16) 59% 59.6%,transparent 59.6% 72%,rgba(150,190,235,.12) 72% 72.5%,transparent 72.5%);
  -webkit-mask:radial-gradient(circle,#000 72%,transparent 73%);mask:radial-gradient(circle,#000 72%,transparent 73%);}

/* let the fixed background show through the shell + fix the leftover beige topbar */
body.granite-v3 .gv-app,
body.granite-v3 .gv-main{background:transparent !important;}
/* car555-visual-reset.css:109 `.car555-public-page > * {position:relative;z-index:1}` is a
   leftover from the cream redesign: it puts the shell (.gv-app) into a z-index:1 stacking
   context, which TRAPS the Harbour Night background (body::before grid + ::after compass
   rose, at z-index -2/-1) behind it — so car555 public pages (bus, daily-leaderboard)
   render flat with no rose while plain granite-v3 pages (rules, hall-of-fame) show it.
   Drop the z-index (keep position) so the shared fixed background shows on EVERY page. */
body.granite-v3.car555-public-page > *{z-index:auto !important;}
/* car555-visual-reset.css also sets `.car555-public-page::before{opacity:.2; filter:
   grayscale()/sepia()/saturate()...}` — the OLD cream-paper texture overlay. An element has
   ONE ::before, so those properties cascade onto the SAME pseudo atlas-night uses for the
   Harbour Night background (atlas set the gradient + z-index but never opacity/filter, so
   the old ones survived). That rendered the background at 20% opacity + desaturated on
   bus + daily-leaderboard — much darker than every other page. Reset to full strength so
   the shared background looks identical everywhere. */
body.granite-v3.car555-public-page::before{opacity:1 !important;filter:none !important;}
body.granite-v3.car555-public-page::after{filter:none !important;}
/* car555-visual-reset.css `.car555-public-page header{padding:56px 24px 34px}` (old cream
   header) makes the topbar 127px tall on bus + daily-leaderboard vs 61px (`12px 20px`)
   everywhere else. Match the standard so the navbar height is consistent on every page. */
body.granite-v3.car555-public-page .gv-header{padding:12px 20px !important;}
body.granite-v3 .gv-sidebar{background:rgba(5,23,44,.72) !important;border-color:var(--gv-line) !important;backdrop-filter:blur(6px);}
body.granite-v3 .gv-header,
body.granite-v3 .ps2-header,
body.granite-v3 .gv-topbar{background:rgba(2,16,31,.55) !important;border-color:var(--gv-line) !important;backdrop-filter:blur(8px);color:var(--gv-ink) !important;}

body.granite-v3 .gv-stat__label,body.granite-v3 .gv-stat__value,
body.granite-v3 .gv-panel-head,body.granite-v3 [class*="__label"]{color:var(--gv-ink) !important;}
body.granite-v3 .gv-stat__label{color:var(--gv-ink-mute) !important;}

/* ---- text: keep everything readable on navy (the careful bit) ---- */
body.granite-v3,
body.granite-v3 p,
body.granite-v3 li,
body.granite-v3 span,
body.granite-v3 td,
body.granite-v3 dd,
body.granite-v3 label{color:var(--gv-ink);}
body.granite-v3 .gv-ink-mute,
body.granite-v3 .muted,
body.granite-v3 small{color:var(--gv-ink-mute) !important;}
/* headings light (override granite's dark-ink !important from gt14) */
body.granite-v3 h1,body.granite-v3 h2,body.granite-v3 h3,body.granite-v3 h4,
body.granite-v3 .gv-display--h1,body.granite-v3 .gv-display--h2,
body.granite-v3 .gv-display--h3,body.granite-v3 .gv-display--h4,
body.granite-v3.car555-public-page h1,body.granite-v3.car555-public-page h2,
body.granite-v3.car555-public-page h3,body.granite-v3.car555-public-page h4,
body.granite-v3 .car555-public-page h1,body.granite-v3 .car555-public-page h2,
body.granite-v3 .car555-public-page h3,body.granite-v3 .car555-public-page h4{
  color:var(--gv-ink) !important;-webkit-text-fill-color:var(--gv-ink) !important;}
/* eyebrows / labels in sea */
body.granite-v3 .gv-eyebrow,body.granite-v3 .gv-navgroup__label{color:var(--gv-accent-deep) !important;}

/* ---- cards / panels: TRANSLUCENT so the Harbour Night background shows through
   (matches the cockpit .tile treatment) ---- */
body.granite-v3 .gv-card,
body.granite-v3 .gv-stat,
body.granite-v3 .gv-side-note,
body.granite-v3 .gv-panel,
body.granite-v3 .gv-rules-card,
body.granite-v3 .gv-auth__intro{
  background:
    radial-gradient(120% 120% at 0% 0%,rgba(232,172,78,.09),transparent 58%),
    linear-gradient(170deg,rgba(150,190,235,.055),rgba(150,190,235,.012)) !important;
  border-color:var(--gv-line) !important;color:var(--gv-ink);backdrop-filter:blur(3px);}

/* dashboard-specific: content wrappers transparent + JS-built team rows translucent +
   stat numbers light (these used surface-2/empire tokens that read light over the
   translucent treatment). */
body.granite-v3 .gv-dash,
body.granite-v3 #main-content,
body.granite-v3 .gv-side-stack{background:transparent !important;}
body.granite-v3 .team-item,
body.granite-v3 #teams-container > div{
  background:linear-gradient(170deg,rgba(150,190,235,.06),rgba(150,190,235,.015)) !important;
  border-color:var(--gv-line) !important;}
body.granite-v3 .team-item *{color:var(--gv-ink);}
body.granite-v3 .team-info p,body.granite-v3 .team-item small{color:var(--gv-ink-mute) !important;}
body.granite-v3 .gv-stat .gv-stat__value,
body.granite-v3 .gv-stat__value{color:var(--gv-ink) !important;}

/* app pages are data-theme="empire" and carry empire-mark-public.css light rules at
   ID-level specificity (body[data-theme="empire"]:not(#cr0247-force) ...). Match that
   :not(#id) specificity so the topbar / beta card / team rows go dark too. */
body[data-theme="empire"]:not(#_n) .gv-header,
body[data-theme="empire"]:not(#_n) .ps2-header{background:rgba(2,16,31,.6) !important;border-color:var(--gv-line) !important;color:var(--gv-ink) !important;}
body[data-theme="empire"]:not(#_n) .gv-crumbs__name,
body[data-theme="empire"]:not(#_n) .gv-crumbs__page{color:var(--gv-ink) !important;}
body[data-theme="empire"]:not(#_n) .gv-card,
body[data-theme="empire"]:not(#_n) .gv-stat,
body[data-theme="empire"]:not(#_n) .gv-beta-card,
body[data-theme="empire"]:not(#_n) .team-item,
body[data-theme="empire"]:not(#_n) #teams-container > div{
  background:linear-gradient(170deg,rgba(150,190,235,.06),rgba(150,190,235,.015)) !important;
  border-color:var(--gv-line) !important;}
body[data-theme="empire"]:not(#_n) .team-item b,
body[data-theme="empire"]:not(#_n) .team-item code,
body[data-theme="empire"]:not(#_n) .team-item h3,
body[data-theme="empire"]:not(#_n) .gv-beta-card h4,
body[data-theme="empire"]:not(#_n) .gv-beta-card div{color:var(--gv-ink) !important;}
body[data-theme="empire"]:not(#_n) .team-item .team-info p,
body[data-theme="empire"]:not(#_n) .team-item small,
body[data-theme="empire"]:not(#_n) .gv-beta-card p{color:var(--gv-ink-mute) !important;}
/* stat numbers + any leftover black body text on the empire app pages -> light */
body[data-theme="empire"]:not(#_n) .gv-stat__value,
body[data-theme="empire"]:not(#_n) .gv-stat__value--sm,
body[data-theme="empire"]:not(#_n) .gv-display,
body[data-theme="empire"]:not(#_n) .gv-display *,
body[data-theme="empire"]:not(#_n) h1,body[data-theme="empire"]:not(#_n) h2,
body[data-theme="empire"]:not(#_n) h3,body[data-theme="empire"]:not(#_n) h4{
  color:var(--gv-ink) !important;-webkit-text-fill-color:var(--gv-ink) !important;}
body[data-theme="empire"]:not(#_n) .gv-stat__label{color:var(--gv-ink-mute) !important;-webkit-text-fill-color:var(--gv-ink-mute) !important;}
/* body/subtitle/panel text that still rendered black via legacy text-fill */
body[data-theme="empire"]:not(#_n) .gv-pagehead__sub,
body[data-theme="empire"]:not(#_n) .gv-side-card-body,
body[data-theme="empire"]:not(#_n) .gv-checklist__item,
body[data-theme="empire"]:not(#_n) .gv-card p{
  color:var(--gv-ink-mute) !important;-webkit-text-fill-color:var(--gv-ink-mute) !important;}

/* ---- daily-leaderboard: hardcoded cream cards (rgba(255,251,241,..)) -> translucent ---- */
body.granite-v3 .gv-lb-head,
body.granite-v3 .gv-lb-table,
body.granite-v3 #leader-container,
body.granite-v3 .gv-lb-board,
body.granite-v3 .ranking-table{
  background:radial-gradient(120% 120% at 0% 0%,rgba(232,172,78,.09),transparent 58%),linear-gradient(170deg,rgba(150,190,235,.055),rgba(150,190,235,.012)) !important;
  border-color:var(--gv-line) !important;color:var(--gv-ink) !important;}
body.granite-v3 .empty-state{color:var(--gv-ink-mute) !important;}

/* ---- nav links ---- */
body.granite-v3 .gv-navlink{color:var(--gv-ink-mute) !important;}
body.granite-v3 .gv-navlink i{color:inherit !important;}
body.granite-v3 .gv-navlink:hover{background:var(--gv-surface-3) !important;color:var(--gv-ink) !important;}
body.granite-v3 .gv-navlink.is-active{background:var(--gv-primary) !important;color:var(--gv-primary-fg) !important;}
body.granite-v3 .gv-navlink.is-active i{color:var(--gv-primary-fg) !important;}

/* ---- buttons ---- */
body.granite-v3 .gv-btn--primary,
body.granite-v3 .gv-side-cta,
body.granite-v3 .ps2-mobile-account-link{
  background:var(--brass-metal) !important;color:#22160a !important;border-color:transparent !important;}
body.granite-v3 .gv-btn--ghost{background:rgba(150,190,235,.05) !important;color:var(--gv-ink) !important;border-color:rgba(150,190,235,.3) !important;}
body.granite-v3 .gv-burger{background:var(--gv-primary) !important;color:var(--gv-primary-fg) !important;}

/* ---- forms ---- */
body.granite-v3 input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.granite-v3 select,
body.granite-v3 textarea{
  background:var(--gv-surface-2) !important;color:var(--gv-ink) !important;border-color:var(--gv-line) !important;}
body.granite-v3 input::placeholder,body.granite-v3 textarea::placeholder{color:var(--gv-ink-soft) !important;}

/* ---- links / accents ---- */
body.granite-v3 a{color:var(--gv-accent-deep);}
body.granite-v3 .brass{background:var(--brass-text);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---- footer (granite footer band already teal-ish → keep navy + light text) ---- */
body.granite-v3 footer,body.granite-v3 .gv-footer{background:var(--gv-surface-2) !important;color:var(--gv-ink-mute);}
body.granite-v3 .gv-footer a{color:var(--gv-ink-mute) !important;}
body.granite-v3 .gv-footer a:hover{color:var(--gv-ink) !important;}

/* ============================================================================
   SITE-WIDE CONSISTENCY (Harbour Night) — one font, gold page titles, uniform cards.
   ========================================================================== */
/* 1) ONE display font everywhere (was Bricolage on granite pages / Fraunces on home) */
body.granite-v3{--gv-font-display:'Fraunces',Georgia,serif !important;}
body.granite-v3 h1,body.granite-v3 h2,body.granite-v3 h3,body.granite-v3 h4,
body.granite-v3 [class*="gv-display"],body.granite-v3 .gv-lb-head__title,
body.granite-v3 .gv-rules-head h1,body.granite-v3 .gv-panel-head h2{
  font-family:'Fraunces',Georgia,serif !important;letter-spacing:-0.02em;}

/* 2) GOLD primary page titles (consistent), light sub-headings. :not(#_n) id-level
      so it also beats the empire app-page heading rule. */
body.granite-v3:not(#_n) .gv-display--h1,
body.granite-v3:not(#_n) .gv-display--h2,
body.granite-v3:not(#_n) .gv-pagehead h1,
body.granite-v3:not(#_n) .gv-pagehead h2,
body.granite-v3:not(#_n) .gv-lb-head__title,
body.granite-v3:not(#_n) .gv-rules-head h1,
body.granite-v3:not(#_n) .gv-auth__formhead{
  background:var(--brass-text) !important;-webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;}
/* accent words inside gold titles stay sea (not gold-clipped) */
body.granite-v3:not(#_n) .gv-em{background:none !important;color:var(--gv-accent-deep) !important;-webkit-text-fill-color:var(--gv-accent-deep) !important;}

/* 3) cards: transparent tile + rounded, uniform across every card class */
body.granite-v3 .gv-card,body.granite-v3 .gv-stat,body.granite-v3 .gv-side-note,
body.granite-v3 .gv-panel,body.granite-v3 .gv-rules-card,body.granite-v3 .gv-auth__intro,
body.granite-v3 .gv-lb-head,body.granite-v3 .gv-lb-table,body.granite-v3 #leader-container,
body.granite-v3 .team-item,body.granite-v3 .gv-beta-card,body.granite-v3 .gv-note,
body.granite-v3 .gv-lb-note,body.granite-v3 .gv-card--lg{
  background:radial-gradient(120% 120% at 0% 0%,rgba(232,172,78,.09),transparent 58%),linear-gradient(170deg,rgba(150,190,235,.055),rgba(150,190,235,.012)) !important;
  border:1px solid var(--gv-line) !important;border-radius:18px !important;}

/* empire-page bespoke .card/.notice/.step (e.g. beta-test-guide) — empire-mark themes
   them at id-level (body[data-theme="empire"]:not(#cr0247-force) .card); match that
   :not(#id) specificity so they go translucent dark with gold headings. */
body[data-theme="empire"]:not(#_n) .card,
body[data-theme="empire"]:not(#_n) .notice{
  background:radial-gradient(120% 120% at 0% 0%,rgba(232,172,78,.09),transparent 58%),linear-gradient(170deg,rgba(150,190,235,.055),rgba(150,190,235,.012)) !important;
  border:1px solid var(--gv-line) !important;border-radius:18px !important;}
body[data-theme="empire"]:not(#_n) .card h2,
body[data-theme="empire"]:not(#_n) .card h3{color:#E8AC4E !important;-webkit-text-fill-color:#E8AC4E !important;font-family:'Fraunces',Georgia,serif !important;}
body[data-theme="empire"]:not(#_n) .card p,
body[data-theme="empire"]:not(#_n) .card li,
body[data-theme="empire"]:not(#_n) .notice{color:var(--gv-ink-mute) !important;-webkit-text-fill-color:var(--gv-ink-mute) !important;}
body[data-theme="empire"]:not(#_n) .step{background:linear-gradient(170deg,rgba(150,190,235,.05),rgba(150,190,235,.012)) !important;border:1px solid var(--gv-line) !important;border-radius:14px !important;color:var(--gv-ink-mute) !important;}
body[data-theme="empire"]:not(#_n) .meta-item,
body[data-theme="empire"]:not(#_n) .step{background:linear-gradient(170deg,rgba(150,190,235,.05),rgba(150,190,235,.012)) !important;border:1px solid var(--gv-line) !important;border-radius:14px !important;}
body[data-theme="empire"]:not(#_n) .meta-item strong,
body[data-theme="empire"]:not(#_n) .step h3{color:#F5C878 !important;-webkit-text-fill-color:#F5C878 !important;}
body[data-theme="empire"]:not(#_n) .meta-item div,
body[data-theme="empire"]:not(#_n) .step li,
body[data-theme="empire"]:not(#_n) .step ul{color:var(--gv-ink-mute) !important;}
body[data-theme="empire"]:not(#_n) .pill{background:rgba(232,172,78,.14) !important;border:1px solid rgba(245,200,120,.3) !important;color:#F5C878 !important;}
body[data-theme="empire"]:not(#_n) .hero{background:linear-gradient(145deg,#0a2540 0%,#0e2a49 100%) !important;border:1px solid var(--gv-line) !important;}
body[data-theme="empire"]:not(#_n) .hero h1,body[data-theme="empire"]:not(#_n) .hero p{color:#EDF3FB !important;-webkit-text-fill-color:#EDF3FB !important;}

/* hall of fame: sea hero panel -> translucent card; "Champions of Jersey" title -> gold */
body.granite-v3 .gv-fame__hero{
  background:radial-gradient(120% 120% at 0% 0%,rgba(232,172,78,.09),transparent 58%),linear-gradient(170deg,rgba(150,190,235,.055),rgba(150,190,235,.012)) !important;
  border:1px solid var(--gv-line) !important;border-radius:18px !important;}
body.granite-v3:not(#_n) .gv-fame__hero h1{
  background:var(--brass-text) !important;-webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;}
body.granite-v3:not(#_n) .gv-fame__hero h1 em{background:none !important;color:var(--gv-accent-deep) !important;-webkit-text-fill-color:var(--gv-accent-deep) !important;}

/* hall-of-fame podium cards (.champion-card incl. winner [data-rank=1]) -> translucent;
   winner keeps a brass border to stay distinguished. */
body.granite-v3 .champion-card,
body.granite-v3 .champion-card[data-rank="1"]{
  background:radial-gradient(120% 120% at 0% 0%,rgba(232,172,78,.09),transparent 58%),linear-gradient(170deg,rgba(150,190,235,.055),rgba(150,190,235,.012)) !important;
  border:1px solid var(--gv-line) !important;border-radius:18px !important;}
body.granite-v3 .champion-card[data-rank="1"]{border-color:rgba(232, 172, 78,.45) !important;}
body.granite-v3 .honours-card{background:radial-gradient(120% 120% at 0% 0%,rgba(232,172,78,.09),transparent 58%),linear-gradient(170deg,rgba(150,190,235,.055),rgba(150,190,235,.012)) !important;border:1px solid var(--gv-line) !important;border-radius:18px !important;}

/* Footer column headings (Play / Account / Legal) -> gold brass gradient, matching the
   hero/section treatment. Overrides granite-shell.css:664 `--gv-accent !important`;
   same specificity, atlas-night loads last so this wins. Site-wide via the shared footer. */
body.granite-v3 .gv-footer__col h4{
  background:var(--brass-text) !important;-webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;}

/* ============================================================================
   GOLD HEADINGS (per Toni) — brass gradient on assorted page headers + team names.
   Each selector is >= specificity of `body.granite-v3 h1..h4` (0,1,2) so the
   !important fill wins over the global ink-fill. `.gv-gold` is the utility for
   one-off elements that have no targetable class (set via class= in the markup).
   gv-em accent words keep their own sea rule (line ~263), so they stay sea.
   ========================================================================== */
body.granite-v3 .gv-gold,
/* faq: hero title, category titles, help title */
body.granite-v3 .gv-faq-head__title,
body.granite-v3 .gv-faq-group__title,
body.granite-v3 .gv-faq-help__title,
/* privacy (1-5) + terms (1-6) legal section headers */
body.granite-v3 .gv-legal-section h2,
/* bus: "Get the LibertyBus app" (h3); hero h2 already gold globally */
body.granite-v3.car555-bus-page .gv-display--h3,
body.granite-v3.car555-bus-page .gv-display--h4,
/* shared display-h4 — only bus + dashboard use it, both wanted */
body.granite-v3 .gv-display--h4,
/* contact: form title, field labels, reach labels, aside title */
body.granite-v3 .gv-form-title,
body.granite-v3 .gv-field__label,
body.granite-v3 .gv-reach-item__label,
body.granite-v3 .gv-aside-card__title,
/* daily-leaderboard: "How results are calculated:" (bold lead) */
body.granite-v3 .gv-lb-note b,
/* hall of fame: "The full register" */
body.granite-v3 .honours-title,
/* dashboard: section headings (scoped so other gv-display--h3 pages are untouched) */
body.granite-v3.car555-dashboard-page .gv-display--h3,
/* booking: step header, side headings, fee label, fineprint, scouts line */
body.granite-v3 .ps2-booking-step-header h2,
body.granite-v3 .gv-booking-side h3,
body.granite-v3 .gv-booking-fee__label,
body.granite-v3 .gv-booking-fineprint,
body.granite-v3 .gv-booking-side__community,
/* every team name (dashboard/teams cards, hall-of-fame, leaderboard podium + rows) */
body.granite-v3 .team-item h3,
body.granite-v3 .champion-name,
body.granite-v3 .podium-name,
body.granite-v3.car555-public-page .podium-name,
body.granite-v3 .row-name{
  background:var(--brass-text) !important;-webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;}
/* dashboard is a data-theme="empire" page → empire-mark-public.css themes its headings
   at ID-level (`:not(#cr0247-force)`, spec 1,2,1). Plain class rules lose, so use the
   id-level `:not(#_n)` trick (scoped to the dashboard) to gold "Your teams" (h3),
   "Live session status" / "Captain checklist" (h4), and the team-card names. */
body[data-theme="empire"].car555-dashboard-page:not(#_n) .gv-display--h3,
body[data-theme="empire"].car555-dashboard-page:not(#_n) .gv-display--h4,
body[data-theme="empire"].car555-dashboard-page:not(#_n) .team-item h3{
  background:var(--brass-text) !important;-webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;}
/* empire-theme granite pages (dashboard) get a CREAM body + "login atmosphere"
   background-image from empire-mark-public.css:3212
   `html body[data-theme="empire"]:not(:has(#map))...empire-app-page{background-color:#F4F5F1
   !important;background-image:var(--cr0247-login-atmosphere)!important}` — that `:not(:has(#map))`
   smuggles in an id, so its specificity is (1,4,2). The fixed ::before hid it on-screen, but
   below the content the cream body showed as a pale band at the bottom. Beat it with two
   fake-id :not()s (2 ids) and kill the cream image so it's dark Harbour Night all the way down. */
html body[data-theme="empire"].granite-v3:not(#_n):not(#_m){
  background-color:var(--gv-bg) !important;background-image:none !important;}
/* Dashboard is a wide, sparse app shell, so the shared off-centre radial (at 72% 4%)
   reads as a lopsided "sun on one half". Give it a centred, gentler radial + symmetric
   fade so the background is even like the content pages. Scoped (empire id-level). */
body[data-theme="empire"].car555-dashboard-page:not(#_n)::before{
  background:
    linear-gradient(rgba(150,190,235,.05) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(150,190,235,.05) 1px,transparent 1px) 0 0/40px 40px,
    radial-gradient(150% 120% at 50% -10%,var(--gv-surface-2),var(--gv-bg) 60%) !important;
  -webkit-mask:radial-gradient(150% 130% at 50% 8%,#000 62%,transparent 120%) !important;
  mask:radial-gradient(150% 130% at 50% 8%,#000 62%,transparent 120%) !important;}

/* my teams page: section label "Active and upcoming" + "Previous sessions" heading
   (team names are already gold via .team-item h3 below). */
body.granite-v3.teams-page .gv-list-head__label,
body.granite-v3.teams-page .gv-display--h3{
  background:var(--brass-text) !important;-webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;}

/* settings: card titles (Profile/Notifications/Security) + the two password labels;
   login: hero "The empire awaits." + the three feature points. */
body.granite-v3.settings-page .gv-card-title,
body.granite-v3.settings-page .gv-pw-grid .gv-field > span:first-child,
body.granite-v3.settings-page .gv-field-grid .gv-field > span:first-child,
body.granite-v3 #auth-title,
body.granite-v3 .gv-auth-points span,
/* "by Cardoso Events" brand tag (sidebar + footer) + footer legal line
   (© ... Cardoso Events · JOIC Reg. + the domain line) — site-wide */
body.granite-v3 .gv-brand-tag,
body.granite-v3 .gv-footer__brand-tag,
body.granite-v3 .gv-footer__legal span{
  background:var(--brass-text) !important;-webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;}

/* ═══ CR0325: the water + card light, shared shell layer ═══ */
#ocean{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(1,8,16,.5) 100%)}
body.granite-v3 .gv-app{position:relative;z-index:1}
/* halo keeps text legible wherever the light drifts (gradient-clipped text exempt) */
body.granite-v3 .gv-main p,body.granite-v3 .gv-main li,body.granite-v3 .gv-eyebrow,
body.granite-v3 .gv-crumbs,body.granite-v3 .gv-footer{
  text-shadow:0 1px 10px rgba(2,16,31,.85),0 0 20px rgba(2,16,31,.5)}
/* cards: gold-ambient glass with a lit top hairline, matching the home craft */
body.granite-v3 .gv-card,body.granite-v3 .champion-card,body.granite-v3 .honours-card,body.granite-v3 .gv-faq-card{
  position:relative;overflow:hidden;
  border-color:rgba(232,172,78,.2) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.3),inset 0 1px 0 rgba(237,243,251,.06) !important;
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .5s}
body.granite-v3 .gv-card:hover,body.granite-v3 .champion-card:hover,body.granite-v3 .gv-faq-card:hover{
  border-color:rgba(232,172,78,.5) !important;
  box-shadow:0 30px 66px rgba(0,0,0,.44),inset 0 1px 0 rgba(237,243,251,.08) !important}
body.granite-v3 .gv-card::before,body.granite-v3 .champion-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--gv-accent),transparent 72%);box-shadow:0 0 16px rgba(232,172,78,.45)}
/* cursor spotlight + edge glow (elements enchanted by je-water.js) */
.lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(245,200,120,.12),transparent 65%);
  opacity:var(--glow,0);transition:opacity .45s}
.glowline{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1.5px;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(232,172,78,.9),transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:var(--glow,0);transition:opacity .45s}
.lit.live{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)!important;
  transition:transform .14s cubic-bezier(.2,.8,.3,1)!important}
@media (hover:none),(prefers-reduced-motion:reduce){
  .glowline{display:none}.lit::after{display:none}
  #ocean,.vignette{display:none}
}

/* ═══ CR0325: chapter grammar across all shell pages ═══ */
/* page heads become editorial spreads: rule-line + monumental brass serif */
body.granite-v3 .gv-pagehead{
  text-align:left !important;max-width:none !important;
  border-top:1px solid rgba(232,172,78,.18);padding-top:18px;margin-bottom:clamp(30px,4vh,48px)}
body.granite-v3 .gv-pagehead__main{max-width:none !important}
body.granite-v3 .gv-pagehead .gv-display--h2{
  font-size:clamp(40px,5.4vw,68px) !important;line-height:1 !important;
  letter-spacing:-.022em !important;max-width:17ch;text-wrap:balance}
body.granite-v3 .gv-pagehead__sub{font-size:17px !important;line-height:1.65 !important;max-width:52ch}
/* in-page section headings scale to the chapter bar (page titles excluded above, later+more specific) */
body.granite-v3 .gv-main .gv-display--h3{font-size:clamp(21px,2.4vw,28px) !important}
/* hero-style page banners (hall of fame etc.) scale up */
body.granite-v3 .gv-fame__hero .gv-display--h2,body.granite-v3 .gv-hero__inner h1,body.granite-v3 .gv-hero__inner .gv-display--h1{
  font-size:clamp(40px,5.6vw,72px) !important;line-height:1 !important;letter-spacing:-.022em !important}
/* the depth rail (injected by je-water.js) */
.rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:14px;
  font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5d738c}
.rail .gauge{position:relative;width:1px;height:190px;background:rgba(150,190,235,.18)}
.rail .gauge i{position:absolute;left:-2.5px;top:0;width:6px;height:6px;border-radius:50%;background:#F5C878;box-shadow:0 0 12px rgba(245,200,120,.9);transition:top .15s linear}
.rail .depth{writing-mode:vertical-rl;color:#9DB2C9}
@media(max-width:1180px){.rail{display:none}}

/* ═══ CR0325: resting-state richness — no flat cards (gd06) ═══ */
/* every card carries its own light at rest, like cardoso.uk */
body.granite-v3 .gv-card,body.granite-v3 .champion-card,body.granite-v3 .gv-faq-card{
  background:
    radial-gradient(430px 250px at 88% -12%,rgba(232,172,78,.13),transparent 65%),
    radial-gradient(300px 200px at -8% 110%,rgba(232,172,78,.06),transparent 60%),
    linear-gradient(170deg,rgba(10,37,64,.78),rgba(2,16,31,.62)) !important;
  backdrop-filter:blur(8px)}
body.granite-v3 .honours-card{
  background:
    radial-gradient(520px 300px at 50% -14%,rgba(232,172,78,.1),transparent 65%),
    linear-gradient(170deg,rgba(10,37,64,.7),rgba(2,16,31,.58)) !important}
/* manifest rows: routes, faq items — hairline-ruled, they answer the hand */
body.granite-v3 .gv-route{border-top:1px solid rgba(150,190,235,.09);padding-top:14px;padding-bottom:14px;
  transition:padding-left .28s cubic-bezier(.2,.8,.3,1),background .28s}
body.granite-v3 .gv-route:first-of-type{border-top:0}
@media(hover:hover){
  body.granite-v3 .gv-route:hover{padding-left:10px;background:rgba(232,172,78,.04)}
}
body.granite-v3 .gv-faq-item{border-top:1px solid rgba(150,190,235,.09);transition:background .28s,padding-left .28s}
@media(hover:hover){
  body.granite-v3 .gv-faq-item:hover{background:rgba(232,172,78,.04)}
  body.granite-v3 .gv-faq-item__summary:hover{padding-left:8px}
}
body.granite-v3 .gv-faq-item__summary{transition:padding-left .28s cubic-bezier(.2,.8,.3,1)}
/* rules sections read as the cardoso manifest: mono index, hairline rows */
body.granite-v3 .gv-rule-section{border-top:1px solid rgba(232,172,78,.14);padding-top:22px}
body.granite-v3 .gv-rule-section ul{list-style:none;padding-left:0}
body.granite-v3 .gv-rule-section ul>li{position:relative;padding:11px 0 11px 34px;border-top:1px solid rgba(150,190,235,.07);
  transition:padding-left .28s cubic-bezier(.2,.8,.3,1)}
body.granite-v3 .gv-rule-section ul>li::before{content:"";position:absolute;left:2px;top:22px;width:14px;height:1.5px;
  background:var(--gv-accent);opacity:.55;transition:width .28s,opacity .28s}
@media(hover:hover){
  body.granite-v3 .gv-rule-section ul>li:hover{padding-left:42px}
  body.granite-v3 .gv-rule-section ul>li:hover::before{width:22px;opacity:1}
}
/* ghost buttons warm on approach */
@media(hover:hover){
  body.granite-v3 .gv-btn--ghost:hover{border-color:rgba(232,172,78,.55) !important;color:#F5C878 !important}
}
/* stat tiles: serif figures get the brass */
body.granite-v3 .gv-stat .gv-serif{background:var(--brass-text,linear-gradient(92deg,#BA8628,#F0CE86 50%,#BA8628));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}

/* ═══ CR0325 gd08: the page floats ON the water — dissolve the boxes ═══ */
html body.granite-v3{background:#030D18 !important}
body.granite-v3 .gv-sidebar{background:rgba(3,13,24,.45) !important;backdrop-filter:blur(16px) !important;
  border-right:1px solid rgba(150,190,235,.08) !important}
body.granite-v3 .gv-main,body.granite-v3 .gv-app{background:transparent !important}
body.granite-v3 .ps2-header,body.granite-v3 .gv-topbar{background:rgba(3,13,24,.5) !important;backdrop-filter:blur(12px)}
/* cards become whispers of glass — the water reads through everything */
body.granite-v3 .gv-card,body.granite-v3 .champion-card,body.granite-v3 .gv-faq-card{
  background:
    radial-gradient(430px 250px at 88% -12%,rgba(232,172,78,.11),transparent 65%),
    linear-gradient(170deg,rgba(6,20,36,.52),rgba(2,12,22,.38)) !important;
  backdrop-filter:blur(10px) !important}
body.granite-v3 .honours-card{
  background:
    radial-gradient(520px 300px at 50% -14%,rgba(232,172,78,.09),transparent 65%),
    linear-gradient(170deg,rgba(6,20,36,.46),rgba(2,12,22,.34)) !important;backdrop-filter:blur(10px) !important}
body.granite-v3 .gv-footer{background:rgba(3,13,24,.55) !important;backdrop-filter:blur(10px)}

/* ═══ CR0325 gd13: finish pass — the details across every page ═══ */
/* sidebar: nav reads like the manifest */
body.granite-v3 .gv-navlink{position:relative;transition:padding-left .25s cubic-bezier(.2,.8,.3,1),color .2s,background .25s}
@media(hover:hover){
  body.granite-v3 .gv-navlink:not(.is-active):hover{padding-left:22px;color:#F5C878 !important;background:rgba(232,172,78,.05)}
  body.granite-v3 .gv-navlink:not(.is-active):hover::before{content:"";position:absolute;left:8px;top:50%;width:8px;height:1.5px;background:var(--gv-accent)}
}
body.granite-v3 .gv-navgroup__label{color:#C9A25E !important;letter-spacing:.22em !important}
/* topbar: instrument chrome */
body.granite-v3 .gv-crumbs{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:12px;letter-spacing:.08em}
/* primary CTAs: brass metal everywhere, dark ink */
body.granite-v3 .gv-btn--primary,body.granite-v3 .ps2-btn--accent{
  background:var(--brass-metal,linear-gradient(100deg,#8F6420,#E8AC4E 28%,#F5C878 46%,#CE9440 64%,#8F6420)) !important;
  color:#22160A !important;border:0 !important;
  box-shadow:0 12px 30px -10px rgba(232,172,78,.5),inset 0 1px 0 rgba(255,255,255,.45) !important;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .3s !important}
@media(hover:hover){
  body.granite-v3 .gv-btn--primary:hover,body.granite-v3 .ps2-btn--accent:hover{transform:translateY(-2px);
    box-shadow:0 18px 40px -10px rgba(232,172,78,.65),inset 0 1px 0 rgba(255,255,255,.5) !important}
}
/* card headings carry the brass */
body.granite-v3 .gv-card .gv-display--h3,body.granite-v3 .gv-faq-group__title{
  background:var(--brass-text,linear-gradient(92deg,#BA8628,#F0CE86 50%,#BA8628));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
/* tables: rows breathe and answer the hand */
body.granite-v3 table th{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
@media(hover:hover){
  body.granite-v3 table tbody tr{transition:background .25s}
  body.granite-v3 table tbody tr:hover{background:rgba(232,172,78,.05)}
}
/* FAQ marker: gold, turns when open */
body.granite-v3 details summary::marker{color:var(--gv-accent)}
body.granite-v3 details[open] summary{color:#F5C878}
/* focus ring: gold everywhere */
body.granite-v3 :focus-visible{outline:2px solid rgba(232,172,78,.75) !important;outline-offset:3px}

/* CR0325 gd14: last details */
body.granite-v3 ::selection{background:#E8AC4E;color:#22160A}
body.granite-v3 .champion-token,body.granite-v3 .token{color:#E8AC4E;text-shadow:0 0 14px rgba(232,172,78,.5)}
body.granite-v3 .gv-stat__head i,body.granite-v3 .gv-stat__head svg{color:#C9A25E !important;opacity:.9}

/* CR0325: instruments — scrollbar + cursor (shared) */
html:has(body.granite-v3){scrollbar-width:thin;scrollbar-color:#8F6420 #041426}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#041426}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#BA8628,#8F6420);border-radius:8px;border:2px solid #041426}
::-webkit-scrollbar-thumb:hover{background:#E8AC4E}
.cur,.cur-ring{position:fixed;top:0;left:0;z-index:90;pointer-events:none;border-radius:50%}
.cur{width:6px;height:6px;background:#F5C878;box-shadow:0 0 10px rgba(232,172,78,.8)}
.cur-ring{width:30px;height:30px;border:1px solid rgba(245,200,120,.4);transition:width .25s,height .25s,border-color .25s}
.cur-ring.hot{width:52px;height:52px;border-color:rgba(232,172,78,.85)}
@media (hover:none),(prefers-reduced-motion:reduce){.cur,.cur-ring{display:none}}