/* ============================================================================
   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). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,800;0,9..144,900;1,9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---- 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:#1A6FD1;
  --gv-primary-deep:#0E5BB0;
  --gv-primary-tint:rgba(26,111,209,.16);
  --gv-primary-fg:#EDF3FB;
  /* accent = lighter sea / gold for eyebrows + highlights on dark */
  --gv-accent:#1A6FD1;
  --gv-accent-deep:#6DD7FF;
  --gv-accent-tint:rgba(26,111,209,.16);
  --gv-accent-fg:#EDF3FB;
  /* status */
  --gv-good:#3DD68C;
  --gv-bad:#E5675F;
  /* brass gradients for signature CTAs */
  --brass-metal:linear-gradient(100deg,#A06E1F,#E7B23E 28%,#F7E3B0 46%,#D49635 64%,#A06E1F);
  --brass-text:linear-gradient(92deg,#C8901F,#F2D27A 50%,#C8901F);

  /* 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:#1A6FD1; --primary-deep:#0E5BB0; --primary-fg:#EDF3FB; --primary-tint:rgba(26,111,209,.16);
  --secondary:#E7B23E; --accent:#1A6FD1; --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:#E7B23E;
}

/* ---- 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,.13) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(150,190,235,.13) 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));}
/* 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:.72;border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg,rgba(231,178,62,.16) 0 .5deg,transparent .5deg 7.5deg),
    radial-gradient(circle,transparent 0 31%,rgba(231,178,62,.22) 31% 31.6%,transparent 31.6% 45%,rgba(109,215,255,.18) 45% 45.6%,transparent 45.6% 59%,rgba(231,178,62,.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(26,111,209,.10),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(26,111,209,.10),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(26,111,209,.10),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(26,111,209,.10),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:#E7B23E !important;-webkit-text-fill-color:#E7B23E !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:#6DD7FF !important;-webkit-text-fill-color:#6DD7FF !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(26,111,209,.16) !important;border:1px solid rgba(109,215,255,.3) !important;color:#6DD7FF !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(26,111,209,.10),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(26,111,209,.10),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(231,178,62,.45) !important;}
body.granite-v3 .honours-card{background:radial-gradient(120% 120% at 0% 0%,rgba(26,111,209,.10),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;}