/* ==========================================================================
   Vector Hoops — Atlas design system
   One stylesheet, loaded LAST of the shared stack on every page. It owns the tokens (palette,
   type scale, spacing, motion) and restates the shared components so every
   page reads as one instrument: a coach's whiteboard on a drafting table —
   paper ground, pencil grid, marker annotations. Dark "night board" variant
   follows the OS setting.

   Legacy tokens (--paper, --ink, --yellow, --orange …) used by older inline
   styles are remapped at the bottom of :root so those styles inherit the
   system instead of fighting it.
   ========================================================================== */

:root{
  color-scheme: light;

  /* ---- Drafting Board raw tokens (japandi v5) ---- */
  --board:        #FCFBF7;  /* page ground — paper white */
  --ink:          #232323;  /* primary linework, text */
  --marker-black: #1A1A1A;  /* hand annotations */
  --marker-red:   #E0483B;  /* emphasis, X's, alerts */
  --marker-blue:  #2B6CE5;  /* secondary annotations, O's, links */
  --pencil:       #9A9A94;  /* dimension lines, callout leaders — decoration only (2.73:1, never text) */
  --pencil-text:  #6E6E66;  /* pencil darkened for text — 4.96:1 on board, AA */
  --grid:         #E7E4DA;  /* drafting hairlines */
  --highlight:    rgba(255,235,130,.55); /* highlighter wash — max one per view */
  --data-terra:   #A05A38;  /* data + chart text — 5.05:1 on board, AA (was #C17C60 at 3.21:1) */
  --data-moss:    #8A9A8B;  /* data only, inside charts */
  --void:         #1E2022;  /* 3D map surfaces only — dark on both themes */

  /* ---- semantic aliases (components resolve through these) ---- */
  --bg:        var(--board);
  --surface:   var(--board);
  --surface-2: #F5F2E9;   /* raised paper — a breath darker than board */
  --line:      var(--grid);
  --line-2:    var(--pencil);
  --fg:        var(--ink);
  --fg-2:      #57574F;   /* secondary text — ink softened */
  --fg-3:      var(--pencil-text);
  --accent:    var(--marker-red);
  --accent-2:  #B93A30;   /* marker-red deepened for hover */
  --gold:      var(--marker-black);
  --on-accent: var(--board);
  --accent-wash: var(--highlight);
  --accent-line: rgba(224,72,59,.45);
  --ok:        var(--data-moss);
  --bad:       var(--marker-red);
  --scrim:     rgba(35,35,35,.45);
  --blue:      var(--marker-blue);

  /* ---- type ---- */
  --font-display: "Archivo", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --t-2xs: 10px;
  --t-xs: 11px;    /* tracked labels */
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 21px;
  --t-xl: clamp(24px, 2.6vw, 30px);
  --t-2xl: clamp(30px, 4.2vw, 48px);
  --t-hero: clamp(44px, 8.4vw, 112px);
  --track-label: .16em;
  --track-display: -.02em;

  /* ---- grid & space (8px base) ---- */
  --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-9: 96px;
  --gutter: clamp(16px, 4vw, 48px);
  --content: 1200px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --nav-h: 44px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.2,.7,.1,1);
  --dur-1: 140ms;
  --dur-2: 320ms;
  --dur-3: 720ms;

  /* ---- legacy token bridge ---- */
  --paper: var(--bg);
  --ink-muted: var(--fg-2);
  --orange: var(--accent);
  --verm: var(--accent);
  --yellow: var(--accent-wash);
  --green: #00775A;
  --page-gutter: clamp(12px, 3.2vw, 28px);  /* shell tokens responsive.css consumes — formerly defined only in the unloaded hoops.css */
  --layout-wide: 1120px;
  --heading-page: clamp(20px, 2.4vw + 12px, 28px);  /* legacy win/success green (Okabe-Ito) — was bridged to var(--ok) moss, which put white text at 2.97:1 */
  --shadow: none;
  --shadow-soft: none;
  --mono: var(--font-code);
  --sans: var(--font-text);
  --hd: var(--font-display);
  --font-mono: var(--font-code);
  --font-sans: var(--font-text);
  --focus: var(--accent);
}

/* Night board — the void aesthetic, refined. Follows the OS; not a third theme. */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme: dark;
    --board:        #0F1114;
    --ink:          #ECEEF1;
    --marker-black: #F2F2F2;
    --marker-red:   #FF6F61;
    --marker-blue:  #6EA8FF;
    --pencil:       #7F8995;
    --pencil-text:  #7F8995;  /* night board: pencil already passes at 5.33:1 */
    --grid:         #1D232C;
    --highlight:    rgba(255,235,130,.16);
    --data-terra:   #C17C60;
    --data-moss:    #8A9A8B;
    --void:         #1E2022;
    --bg:        var(--board);
    --surface:   #14161A;
    --surface-2: #1A1D22;
    --line:      var(--grid);
    --line-2:    #2A323D;
    --fg:        var(--ink);
    --fg-2:      #A7B0BC;
    --fg-3:      var(--pencil-text);
    --accent:    #FF7A33;   /* the signature ember — kept for night */
    --accent-2:  #FF9A62;
    --gold:      #D4AF69;
    --on-accent: #0A0B0D;
    --accent-wash: rgba(255,122,51,.12);
    --accent-line: rgba(255,122,51,.45);
    --ok:        #3DBE8B;
    --bad:       #E5624F;
    --scrim:     rgba(3,4,6,.72);
    --blue:      #7FA7D9;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: var(--line-2) var(--bg);
  scrollbar-width: thin;
}
html, body{
  margin:0;
  background: var(--bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--grid) 42%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--grid) 42%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: clip;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
body{ min-height: 100vh; min-height: 100dvh; }
::selection{ background: var(--accent); color: var(--on-accent); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background: var(--fg-3); }

a{ color: inherit; text-decoration-color: var(--line-2); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover{ text-decoration-color: var(--accent); }
b, strong{ font-weight: 650; color: var(--fg); }
code, kbd, samp, pre{ font-family: var(--font-code); font-size: .88em; }
code{ color: var(--fg); background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; padding: .05em .35em; }
hr{ border:0; height:1px; background: var(--line); margin: var(--s-6) 0; }
img, svg, canvas, video{ max-width:100%; }
button, input, select, textarea{ font: inherit; color: inherit; }
[hidden]{ display:none !important; }

:focus{ outline: none; }
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline-offset: 0; }

.num, .tnum, table, .lb-table, .wiki-row__meta, .cqs-badge, [data-num]{ font-variant-numeric: tabular-nums lining-nums; }

.skip-link{
  position: absolute; left: 50%; top: 8px; z-index: 1000;
  transform: translate(-50%, -160%);
  background: var(--block); color: var(--on-accent);
  font: 600 var(--t-sm)/1 var(--font-text);
  padding: 12px 16px; border-radius: var(--radius);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus, .skip-link:focus-visible{ transform: translate(-50%, 0); outline-offset: 2px; }

.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- type primitives ---- */
.label, .kicker, .small-mono, .eyebrow{
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1.4;
}
.kicker{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.kdot{ width:6px; height:6px; border-radius:50%; background: var(--accent); display:inline-block; flex:0 0 auto; }
.hd, h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--fg);
  text-wrap: balance;
}
p{ text-wrap: pretty; }

/* ==========================================================================
   Navigation — one bar, three columns, centred axis
   ========================================================================== */
.site-nav{
  position: sticky; top: 0; z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  width: 100%; max-width: 100vw;
  height: auto;
  min-height: var(--nav-h);
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top, 0);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  overflow: visible;
}
.site-nav__brand{
  justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-code);
  font-size: 12px; font-weight: 700; font-stretch: 125%;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.site-nav__brand:hover{ color: var(--fg); }
.site-nav__mark{ width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent); }
.site-nav__accent{ color: var(--fg-3); }
.site-nav__links{
  justify-self: center;
  display: flex; align-items: stretch; gap: clamp(14px, 2.2vw, 32px);
  height: var(--nav-h);
}
.site-nav__link{
  position: relative;
  display: inline-flex; align-items: center;
  font-family: var(--font-code);
  font-size: 11.5px; font-weight: 600; font-stretch: 112%;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); text-decoration: none; white-space: nowrap;
  padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none;
  transition: color var(--dur-1) var(--ease);
}
.site-nav__link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform var(--dur-2) var(--ease);
}
.site-nav__link:hover{ color: var(--fg); background: none; }
.site-nav__link.is-active{ color: var(--fg); border: 0; background: none; box-shadow: none; }
.site-nav__link.is-active::after{ transform: scaleX(1); }
.site-nav__link.is-live{ position: relative; }
.site-nav__link.is-live::before{
  content: ""; position: absolute; top: 6px; right: -8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--verm); animation: vh-live-pulse 1.4s infinite;
}
@keyframes vh-live-pulse{ 0%,100%{ opacity: 1 } 50%{ opacity: .25 } }
@media (prefers-reduced-motion: reduce){ .site-nav__link.is-live::before{ animation: none; } }
.site-nav__end{ justify-self: end; display: flex; align-items: center; gap: var(--s-3); }
.site-nav__meta{
  font-family: var(--font-code); font-size: var(--t-2xs); font-weight: 600; font-stretch: 112%;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.site-nav__cta{
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  font-family: var(--font-code); font-size: 11px; font-weight: 700; font-stretch: 112%;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent);
  border-radius: var(--radius); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.site-nav__cta:hover{ background: var(--accent-2); color: var(--on-accent); }
.site-nav__cta:active{ transform: translateY(1px); }

@media (max-width: 900px){
  .site-nav{ grid-template-columns: 1fr auto; row-gap: 0; padding-bottom: 0; }
  .site-nav__meta{ display: none; }
  .site-nav__links{
    grid-column: 1 / -1; grid-row: 2;
    justify-self: stretch; justify-content: space-between;
    height: 44px; gap: 0;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
    border-top: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  .site-nav__links::-webkit-scrollbar{ display: none; }
  .site-nav__brand, .site-nav__end{ height: 52px; }
  .site-nav__brand{ max-width: none; overflow: visible; }
  .site-nav__links{ -webkit-mask-image: none; mask-image: none; }
  .site-nav__link{ font-size: 10.5px; letter-spacing: .12em; padding: 0 6px; }
}
@media (max-width: 360px){
  .site-nav__link{ letter-spacing: .06em; padding: 0 4px; }
}

/* ==========================================================================
   Page frame
   ========================================================================== */
.main, .page{
  width: 100%; max-width: calc(var(--content) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--s-7) var(--gutter) var(--s-9);
  display: flex; flex-direction: column; gap: var(--s-5);
  min-width: 0;
}

/* Title card: the composed header every page opens with. */
.title-card{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-4);
  padding: clamp(40px, 7vw, 96px) 0 clamp(24px, 4vw, 48px);
  max-width: 920px; margin: 0 auto;
}
.title-card__eyebrow{
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; font-stretch: 118%;
  letter-spacing: .28em; text-transform: uppercase; color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 14px;
}
.title-card__eyebrow::before, .title-card__eyebrow::after{
  content: ""; width: 28px; height: 1px; background: var(--line-2);
}
.title-card__title{
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700; font-stretch: 100%;
  line-height: 1.02; letter-spacing: -.025em;
  text-wrap: balance;
}
.title-card__title em{ font-style: normal; color: var(--accent); }
.title-card__lede{
  margin: 0; max-width: 60ch;
  font-size: var(--t-md); line-height: 1.6; color: var(--fg-2);
  text-wrap: pretty;
}
.title-card__actions{ display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }
.title-card__meta{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  margin-top: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.title-card__meta > *{
  padding: 10px 18px;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 600; font-stretch: 112%;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.title-card__meta > * + *{ border-left: 1px solid var(--line); }
.title-card__meta b{ color: var(--fg); font-weight: 700; margin-right: 6px; }

/* Section header: label + rule, centred on the axis. */
.section-head{
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-2);
}
.section-head::before, .section-head::after{ content:""; height:1px; background: var(--line); }
.section-head > *{
  margin: 0;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600; font-stretch: 118%;
  letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2);
}

/* ==========================================================================
   Surfaces
   ========================================================================== */
.card{
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: clamp(18px, 2.4vw, 28px);
  min-width: 0;
  transition: border-color var(--dur-2) var(--ease);
}
.card .card{ background: var(--surface-2); border-color: var(--line); box-shadow: none !important; }
.card h2, .method-h2{
  font-family: var(--font-display);
  font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
  text-transform: none;
  margin: 0 0 var(--s-2);
  color: var(--fg);
}
.card .sub, .caption{ color: var(--fg-2); font-size: var(--t-sm); line-height: 1.6; }

/* ==========================================================================
   Controls
   ========================================================================== */
.btn, .btn-play, .pp-btn{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 700; font-stretch: 112%;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover, .pp-btn:hover{ border-color: var(--fg-3); background: var(--surface-2); transform: none; box-shadow: none; }
.btn:active, .pp-btn:active{ transform: translateY(1px); box-shadow: none; }
.btn[disabled], .btn:disabled{ opacity: .45; cursor: not-allowed; }
.btn-primary, .btn-play, .pp-btn--yellow{
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.btn-primary:hover, .btn-play:hover, .pp-btn--yellow:hover{ background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn-accent{ background: transparent; color: var(--accent-2); border-color: var(--accent-line); }
.btn-accent:hover{ background: var(--accent-wash); border-color: var(--accent); color: var(--accent-2); }
.btn-xl{ min-height: 52px; padding: 0 28px; font-size: 12px; }

.pill, .hv6-pill, .chip, .cqs-badge, .trends-chip, .trends-shift-card, .btn-speed, .mini-badge, .story-stat{
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 12px;
  font-family: var(--font-display);
  font-size: var(--t-2xs); font-weight: 600; font-stretch: 112%;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: none;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
a.pill:hover, button.pill:hover, .trends-chip:hover, .trends-shift-card:hover, .btn-speed:hover{ color: var(--fg); border-color: var(--fg-3); }
.pill-yellow, .pill-blue{ background: var(--accent-wash); color: var(--accent-2); border-color: var(--accent-line); }
.pill-green{ background: var(--pipe); color: var(--on-accent); border-color: var(--pipe); }  /* a green pill is green: pipe pairing 5.72:1 */
.trends-chip--active, .trends-shift-card--active{ background: var(--accent); color: var(--on-accent) !important; border-color: var(--accent); box-shadow: none; transform: none; }
.trends-shift-card--active .sc-deg{ color: var(--on-accent); }

.input, input[type="text"], input[type="search"], input[type="email"], input[type="number"], select, textarea{
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-text); font-size: 15px; font-weight: 450;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
select{
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  font-family: var(--font-text);
}
.input::placeholder, input::placeholder{ color: var(--fg-3); opacity: 1; }
.input:hover, select:hover, input[type="text"]:hover{ border-color: var(--fg-3); }
.input:focus, select:focus, input[type="text"]:focus, input[type="search"]:focus{ border-color: var(--accent); outline: none; }
input[type="range"]{ accent-color: var(--accent); }

/* Tabs: segmented, hairline */
.tab-pills, .mode-tabs{
  display: inline-flex; gap: 0; flex-wrap: nowrap;
  padding: 3px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 3px);
  background: var(--surface);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.tab-pills::-webkit-scrollbar{ display: none; }
.tab-pills button, .mode-tab{
  flex: 0 0 auto;
  min-height: 38px; padding: 0 18px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; font-stretch: 112%;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-2); background: transparent;
  border: 0; border-radius: var(--radius); box-shadow: none; cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.tab-pills button:hover, .mode-tab:hover{ color: var(--fg); }
.tab-pills button.is-active, .mode-tab.is-active, .mode-tab.is-active.daily-active{ background: var(--surface-2); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }

/* ==========================================================================
   Data tables — the instrument panel
   ========================================================================== */
table{ border-collapse: collapse; width: 100%; }
.lb-table, .data-table{
  width: 100%; border-collapse: collapse;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums lining-nums;
}
.lb-table th, .data-table th{
  text-align: left;
  font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 600; font-stretch: 112%;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3);
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.lb-table td, .data-table td{
  padding: 11px 12px;
  border-top: 0; border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  vertical-align: baseline;
}
.lb-table td:first-child, .data-table td:first-child, .lb-table th:first-child, .data-table th:first-child{ padding-left: 0; }
.lb-table td:last-child, .data-table td:last-child, .lb-table th:last-child, .data-table th:last-child{ padding-right: 0; }
.lb-table tr:hover td, .data-table tbody tr:hover td{ background: transparent; color: var(--fg); }
.data-table .r, .lb-table .r{ text-align: right; }
.data-table td code, .lb-table td code{ background: none; border: 0; padding: 0; color: var(--fg); font-size: 12.5px; }

/* ==========================================================================
   Players — directory, skills, boards
   ========================================================================== */
.wiki-controls{ display: flex; flex-direction: column; gap: var(--s-3); }
.wiki-search-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); }
.wiki-filters{ display: flex; gap: var(--s-2); }
.wiki-filters select{ width: auto; min-width: 170px; font-family: var(--font-text); font-size: 14px; font-weight: 450; box-shadow: none; border: 1px solid var(--line-2); background-color: var(--surface); }
@media (max-width: 720px){
  .wiki-search-row{ grid-template-columns: 1fr; }
  .wiki-filters select{ flex: 1 1 0; min-width: 0; }
}
.wiki-alphabet{ display: flex; flex-wrap: wrap; gap: 0; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0; }
.wiki-alphabet button{
  min-width: 28px; min-height: 32px; padding: 0;
  font-family: var(--font-display); font-size: 11px; font-weight: 600; font-stretch: 112%;
  color: var(--fg-2); background: none; border: 0; border-radius: var(--radius); box-shadow: none; cursor: pointer;
}
.wiki-alphabet button:hover{ color: var(--fg); background: var(--surface-2); }
.wiki-alphabet button.is-active{ background: var(--accent); color: var(--on-accent); }
.wiki-alphabet button.is-disabled{ opacity: .28; }
.wiki-count{ font-family: var(--font-display); font-size: var(--t-2xs); font-weight: 600; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.wiki-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-2); }
.wiki-row-wrap, .skills-board__item, .skills-board li{
  display: flex; align-items: center; gap: var(--s-3);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none;
  padding: 0 4px; min-height: 52px;
  transition: background var(--dur-1) var(--ease);
}
.wiki-row-wrap:hover, .skills-board li:hover{ background: var(--surface-2); }
.wiki-row{ color: var(--fg); padding: 12px 0; font: inherit; }
.wiki-row__name{ font-family: var(--font-text); font-weight: 600; font-size: 15px; color: var(--fg); letter-spacing: -.005em; }
.wiki-row__name .vh-team-tag{
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; font-stretch: 112%; letter-spacing: .12em;
  color: var(--fg-3); background: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 7px; margin-left: 10px; vertical-align: 2px;
}
.wiki-row__meta{ font-family: var(--font-text); font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.wiki-row__grades, .skills-board__grade{
  font-family: var(--font-display); font-size: 10px; font-weight: 700; font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-2); background: none; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: none;
  padding: 6px 10px; cursor: pointer;
}
.wiki-row__grades:hover{ color: var(--accent); border-color: var(--accent-line); }
.skills-board__grade{ color: var(--accent-2); border-color: var(--accent-line); font-variant-numeric: tabular-nums; }
.skills-board__name{ font-weight: 600; color: var(--fg); }
.skills-board__season{ font-family: var(--font-text); font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.skills-board__empty, .wiki-empty{ border: 1px dashed var(--line-2); border-radius: var(--radius-lg); padding: var(--s-5); background: none; color: var(--fg-2); font-size: 14px; text-align: center; }
.skills-suggest{ border: 0; }
.skills-suggest li{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; color: var(--fg); }
.skills-suggest li:hover, .skills-suggest li.is-active{ background: var(--surface-2); border-color: var(--line-2); }
.skills-player-meta{ color: var(--fg-3); font-family: var(--font-text); }
.skills-seasons button{ background: none; border: 1px solid var(--line-2); color: var(--fg-2); font-family: var(--font-text); font-variant-numeric: tabular-nums; border-radius: var(--radius); box-shadow: none; }
.skills-seasons button.is-active{ background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.skillbar{ background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.skillbar__label{ font-family: var(--font-display); font-stretch: 112%; letter-spacing: .12em; color: var(--fg-2); }
.skillbar__track, .skillbar-list .bar{ background: var(--surface-2); border: 0; height: 4px; }
.skillbar__fill, .skillbar-list .bar i{ background: var(--accent); }
.skillbar__grade{ color: var(--fg); font-variant-numeric: tabular-nums; }
.vh-skill-badges span{ background: none; border: 1px solid var(--accent-line); color: var(--accent); box-shadow: none; font-family: var(--font-display); font-stretch: 112%; letter-spacing: .1em; }

/* Modal */
.vh-modal-backdrop{ background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vh-modal{ background: var(--surface); color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.45); padding: clamp(20px, 3vw, 32px); }

/* ==========================================================================
   Methods & Lab
   ========================================================================== */
.method-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 860px){ .method-grid{ grid-template-columns: 1fr; } }
.method-p{ font-size: var(--t-base); line-height: 1.7; color: var(--fg-2); margin: var(--s-2) 0; }
.arch-diagram{
  font-family: var(--font-code); font-size: 12.5px; line-height: 1.75;
  color: #D8DCD8; background: var(--void);  /* void panel is dark in both themes; #D8DCD8 on it = 11.79:1 */
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none;
  padding: var(--s-5); overflow: auto; white-space: pre;
}
.arch-diagram b{ color: #FF7A5C; }  /* ember on void = 6.37:1; var(--accent) red was 4.02:1 */
.cqs-strip{ display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); margin: var(--s-3) 0; }
.cqs-badge{ flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: 12px 14px; border: 0; border-radius: 0; color: var(--fg-3); }
.cqs-badge + .cqs-badge{ border-left: 1px solid var(--line); }
.cqs-badge b{ display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--fg); text-transform: none; }

/* ==========================================================================
   Footer — symmetrical colophon
   ========================================================================== */
.site-footer{
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  background: var(--bg); color: var(--fg-3);
  border-top: 1px solid var(--line);
  padding: var(--s-7) var(--gutter) calc(var(--s-7) + env(safe-area-inset-bottom, 0));
  font-family: var(--font-text); font-size: var(--t-sm);
  text-align: center;
  position: relative; z-index: 2;
  max-width: 100vw;
}
.site-footer__links{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.site-footer__links a{
  font-family: var(--font-display); font-size: 11px; font-weight: 600; font-stretch: 112%;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-2); text-decoration: none;
}
.site-footer__links a:hover{ color: var(--fg); }
.site-footer__attribution{ margin: 0; opacity: 1; font-size: 12px; color: var(--fg-3); }
.site-footer__attribution a{ color: var(--fg-2); }

/* ==========================================================================
   Motion — slow, confident, never bouncy
   ========================================================================== */
@keyframes atlas-rise{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
@keyframes atlas-fade{ from{ opacity: 0; } to{ opacity: 1; } }
.reveal{ animation: atlas-rise var(--dur-3) var(--ease) both; }
.reveal-1{ animation-delay: 80ms; } .reveal-2{ animation-delay: 180ms; } .reveal-3{ animation-delay: 280ms; }
.reveal-4{ animation-delay: 380ms; } .reveal-5{ animation-delay: 480ms; } .reveal-6{ animation-delay: 580ms; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Print — ink on paper, no chrome
   ========================================================================== */
@media print{
  :root{ --bg:#fff; --surface:#fff; --surface-2:#f4f4f4; --fg:#000; --fg-2:#222; --fg-3:#444; --line:#ccc; --line-2:#999; --accent:#000; }
  .site-nav, .site-footer, .skip-link, .btn, .tab-pills, #map-controls, .no-print{ display: none !important; }
  body{ background: #fff; color: #000; }
  .card{ border-color: #ccc; break-inside: avoid; }
  a{ text-decoration: underline; }
}

.empty-note{ font-family: var(--font-text) !important; font-size: 13px !important; color: var(--fg-3) !important; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--radius-lg); text-align: center; }

/* ---------- Career Trails (additive) ---------- */
.trail-btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:14px; min-height:48px; padding:0 22px;
  font-family:var(--font-display); font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  color:#0B0E12; background:linear-gradient(135deg,#8A9A8B,#C17C60);
  border:0; border-radius:8px; cursor:pointer;
}
.trail-btn:hover{ filter:brightness(1.08); }
.trail-btn:disabled{ opacity:.6; cursor:wait; }
.trail-btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

#trail-bar{
  position:absolute; z-index:3; left:12px; right:12px; bottom:64px;
  background:rgba(13,16,21,.94); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:10px 14px 12px; color:#ECEEF1;
}
@media (max-width:900px){
  /* the map's own buttons move to the top on small screens */
  #trail-bar{ bottom:12px; }
}
#trail-bar .trail-row{ display:flex; align-items:center; gap:12px; }
#trail-close{
  width:48px; height:48px; flex:0 0 auto; border-radius:8px;
  background:rgba(255,255,255,.08); color:#ECEEF1; border:1px solid rgba(255,255,255,.16);
  font-size:22px; line-height:1; cursor:pointer;
}
#trail-close:hover{ background:rgba(255,255,255,.16); }
#trail-season{ font-weight:700; min-width:76px; font-variant-numeric:tabular-nums; }
#trail-scrub{ flex:1; min-height:48px; accent-color:#C17C60; cursor:pointer; }
#trail-changed{ font-size:12.5px; color:#A7B0BC; margin-top:4px; min-height:18px; }
#trail-honest{ font-size:11.5px; color:rgba(214,222,232,.62); margin-top:6px; font-style:italic; }

/* ==========================================================================
   MARIO LIFT (shipped in PR #73 on Cameron's word, 2026-10-12; cleanup PR follows the line-by-line review)
   A slight platformer flavour over the Drafting Board: coin-gold rewards,
   pipe-green primary actions, ?-block lifelines, hard stepped shadows,
   squarer corners, level-style date labels, a whisper of sky on the home
   hero. Evocation only — no third-party assets, sprites, or characters.
   Foundations untouched: paper/night-board tokens, type system, and every
   Wave-3 AA pairing are preserved; new pairings were recomputed and verified
   in the post-merge line-by-line review of PR #73.
   This layer loads last (end of atlas.css) and wins ties on purpose.
   ========================================================================== */
:root{
  /* ---- platformer material tokens (light / paper) ---- */
  --pipe:        #1C7331;  /* primary-action green — 5.72:1 under --on-accent */
  --pipe-deep:   #175C2A;  /* hover — 7.80:1 */
  --coin-1:      #FFD94D;  /* coin gradient, light stop */
  --coin-2:      #F5B921;  /* coin gradient, deep stop — ink on it: 9.76:1 */
  --coin-wash-1: #FDEFC0;  /* solved-fill wash, light stop */
  --coin-wash-2: #F9DC7E;  /* solved-fill wash, deep stop — ink on it: 12.83:1 */
  --coin-text:   #7A5200;  /* deep gold for glyphs/labels — 6.68:1 on board */
  --coin-ink:    #2A1600;  /* constant ink for text ON coin material, both themes */
  --qblock-1:    #F7B733;  /* ?-block amber, light stop */
  --qblock-2:    #EE9420;  /* ?-block amber, deep stop — #2A1600 on it: 7.33:1 */
  --qblock-ink:  #2A1600;
  --brick:       #C08552;  /* brick-tan hairline — decorative divider (3.02:1) */
  --step:        #EAE0CB;  /* warm paper step for card offset shadows */
  --block:       #232323;  /* hard offset shadow colour (== --ink on paper) */
  --block-line:  #232323;  /* button border — flips light on the night board */
  --spring:      cubic-bezier(.34,1.56,.64,1); /* the one playful curve */

  /* slightly squarer corners, system-wide */
  --radius:    5px;
  --radius-lg: 7px;
  --radius-xl: 10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --pipe:        #3FB950;  /* night pipe — 7.75:1 under night --on-accent */
    --pipe-deep:   #35C759;  /* night hover lightens, like --accent-2 */
    --coin-text:   #E8C766;  /* 11.52:1 on night board */
    --brick:       #8A5F36;
    --step:        rgba(0,0,0,.5);
    --block:       #000000;
    --block-line:  #454F5C;
    /* coin + qblock gradients are materials: identical on both themes,
       always paired with ink text (9.76:1 / 7.33:1 worst stop). */
  }
}

/* ---- blocky materiality: hard stepped shadows, no blur ---- */
.card{
  box-shadow: 5px 5px 0 var(--step);
}
.btn, .btn-play, .pp-btn{
  border-color: var(--block-line);
  box-shadow: 3px 3px 0 var(--block);
}
.btn:hover, .pp-btn:hover{
  border-color: var(--block-line);
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--block);
}
.btn:hover:not(.btn-accent), .pp-btn:hover{
  background: var(--surface-2);
}
.btn:active, .pp-btn:active{
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 var(--block);
}
.btn[disabled], .btn:disabled, .pp-btn[disabled], .pp-btn:disabled{
  box-shadow: none;
}

/* ---- pipe green: the single primary action per view ---- */
.btn-primary, .btn-play, .pp-btn--yellow{
  background: var(--pipe);
  border-color: var(--block-line);
  color: var(--on-accent);
}
.btn-primary:hover, .btn-play:hover, .pp-btn--yellow:hover{
  background: var(--pipe-deep);
  border-color: var(--block-line);
  color: var(--on-accent);
}
.site-nav__cta{
  background: var(--pipe);
  border-color: var(--block-line);
  color: var(--on-accent);
  box-shadow: 2px 2px 0 var(--block);
}
.site-nav__cta:hover{ background: var(--pipe-deep); color: var(--on-accent); }

/* ---- coin gold: the reward system ---- */
/* Coin material is a light gradient on BOTH themes, so its text colour is
   a constant deep gold — never the theme's --coin-text. #6E4B00 on the
   wash's deep stop: 5.83:1. */
.pill-yellow{
  background: linear-gradient(180deg, var(--coin-wash-1), var(--coin-wash-2));
  border-color: #6E4B00;
  color: #6E4B00;
}

/* ---- reward motion: a short spring on the badge, nothing ambient ---- */
@keyframes mario-coin-pop{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.07); }
  100%{ transform: scale(1); }
}

/* ---- sky touch: homepage hero only, paper theme only, a whisper ----
   Faint blue fading from the hero's top edge. Worst-case text over it is
   the hero eyebrow (pencil-text, 11px) at the smallest top padding:
   effective tint alpha ~0.22 -> #EBF2F6 -> 4.54:1, still AA. Night board
   keeps its void: this block is light-scheme only. */
@media (prefers-color-scheme: light){
  body.home .hero{
    background-image: linear-gradient(180deg, rgba(169,207,242,.26) 0, rgba(169,207,242,0) 300px);
    background-repeat: no-repeat;
  }
}

/* ---- Today strip: a level tag + the one green door ---- */
section.today-strip{ border-color: var(--brick); }
section .today-strip__label{
  background: linear-gradient(180deg, var(--coin-1), var(--coin-2));
  color: var(--qblock-ink);
  border: 1.5px solid var(--block);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--block);
  padding: 5px 10px;
}
#today-streak::before{ content: "★ "; color: var(--coin-text); }
section .today-strip__links a:first-child{
  background: var(--pipe);
  color: var(--on-accent);
  border: 1.5px solid var(--block);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--block);
  padding: 6px 10px;
  text-decoration: none;
  display: inline-block;
}
section .today-strip__links a:first-child:hover{ background: var(--pipe-deep); }

/* ==========================================================================
   Play — the level itself
   ========================================================================== */

/* streak counter: star + coin gold instead of a flame. The pill's ground
   is the light coin wash on both themes, so its text is the constant
   coin ink — theme --fg would be near-white on gold at night. */
#streak-pill{
  background: linear-gradient(180deg, var(--coin-wash-1), var(--coin-wash-2));
  border-color: #6E4B00;
  color: var(--coin-ink);
  box-shadow: 2px 2px 0 var(--block);
}
#streak-pill::before{ content: "★ "; color: #7A5200; }
#streak-pill.tick{ animation: mario-coin-pop .45s var(--spring); }

/* slot dots become coin pips */
.progress-dot.is-done{
  background: linear-gradient(180deg, var(--coin-1), var(--coin-2));
  border: 1.5px solid var(--block);
  color: var(--coin-ink);
  box-shadow: 2px 2px 0 var(--block);
}
.progress-dot.is-current{
  background: var(--coin-wash-1);
  border-color: #7A5200;
  color: #7A5200;
}

/* a solved slot is a collected coin — constant coin ink on the wash,
   both themes; the micro-labels deepen instead of fading */
.court-card.is-solved{
  background: linear-gradient(180deg, var(--coin-wash-1), var(--coin-wash-2));
  border-color: #6E4B00;
  color: var(--coin-ink);
  box-shadow: 3px 3px 0 #6E4B00;
  animation: mario-coin-pop .38s var(--spring);
}
.court-card.is-solved .court-meta{ color: #5C4300; }
.court-card.is-solved .court-slot{ color: #5C4300; opacity: 1; }
.guess-row.win{
  background: linear-gradient(180deg, var(--coin-wash-1), var(--coin-wash-2));
  border-color: var(--pipe);
  color: var(--coin-ink);
}
.guess-tile.is-twin{
  background: var(--pipe);
  border-color: var(--block);
  color: var(--on-accent);
}
.battle-win{ background: var(--pipe); color: var(--on-accent); }
.reward.is-unlocked{
  background: linear-gradient(180deg, var(--coin-1), var(--coin-2));
  border-color: var(--block);
  color: var(--qblock-ink);
  box-shadow: 2px 2px 0 var(--block);
  animation: mario-coin-pop .38s var(--spring);
}

/* brick-tan divider over the court */
#game-header .game-status-bar{ border-top-color: var(--brick); }

/* lifelines are power-ups: ?-blocks with a hard shadow and a springy press */
#lifelines-bar .btn-lifeline{
  background: linear-gradient(180deg, var(--qblock-1), var(--qblock-2));
  border: 2px solid var(--block);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--block);
  color: var(--qblock-ink);
  transition: transform .18s var(--spring), box-shadow .18s var(--spring);
}
#lifelines-bar .btn-lifeline::before{
  content: "?";
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: 0 0 auto;
  background: #FFFEF7;  /* a paper tag — constant on both themes */
  border: 2px solid var(--block);
  border-radius: 3px;
  font-family: var(--font-code); font-size: 12px; font-weight: 900; line-height: 1;
  color: var(--qblock-ink);
}
#lifelines-bar .btn-lifeline:hover:not(:disabled){
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--block);
}
#lifelines-bar .btn-lifeline:active:not(:disabled){
  transform: translate(2px,2px) scale(.98);
  box-shadow: 1px 1px 0 var(--block);
}
#lifelines-bar .btn-lifeline:disabled{
  filter: saturate(.35);
  box-shadow: none;
}
#lifelines-bar .btn-lifeline .ll-cost{ color: var(--qblock-ink); opacity: .75; }

/* ---- the lift respects reduced motion, explicitly ---- */
@media (prefers-reduced-motion: reduce){
  #streak-pill.tick, .court-card.is-solved, .reward.is-unlocked{ animation: none; }
  #lifelines-bar .btn-lifeline{ transition: none; }
  #lifelines-bar .btn-lifeline:hover:not(:disabled),
  #lifelines-bar .btn-lifeline:active:not(:disabled){ transform: none; }
}

/* ---- print stays ink on paper ---- */
@media print{
  .card, .btn, .pp-btn, #streak-pill, .progress-dot.is-done,
  .court-card.is-solved, section .today-strip__label{ box-shadow: none !important; }
}