/* ============================================================================
   CHAOS CORE — design system foundation
   ----------------------------------------------------------------------------
   The single source of truth for the product's visual language, translated
   from the approved "CHAOS — Big Board Reference Match" canvas direction:
   warm ivory paper, ink black, safety yellow, signal red. Condensed American
   newspaper-gothic display type (Archivo, driven on its width axis) over
   monospaced utility type (Spline Sans Mono). Thin rules, square corners,
   no gradients, no photographs — diagrams are inline SVG only.

   LAYERS
     1. TOKENS       — palette, type scale, spacing rhythm. Use these.
     2. LEGACY BRIDGE— remaps old variable names onto the new tokens so
                       pre-rebuild components inherit the new palette and
                       fonts until their page task restyles them.
     3. BASE         — body, texture, focus, selection, square corners.
     4. SHELL        — left rail (#navTabs), masthead, app grid, footer.
     5. PRIMITIVES   — shared .cd-* building blocks for page tasks:
                       section heads, kickers, live dots, big numbers,
                       ruled tables, yellow action buttons.

   TYPE SCALE (px). 12 is the hard floor — nothing renders smaller.
     micro 12 · small 13 · body 14 · lead 16
     h3 26 · h2 clamp(32,4.6vw,62) · h1 clamp(44,5.4vw,70) · num 42

   SPACING RHYTHM (4px base)
     sp-1 4 · sp-2 8 · sp-3 12 · sp-4 16 · sp-5 22 · sp-6 28 · sp-7 34 · sp-8 44

   RULES FOR PAGE TASKS
     - Page styles go in a per-feature stylesheet loaded AFTER this file.
     - Never introduce gradients, images, rounded corners, or new fonts.
     - Reference tokens and primitives instead of re-declaring values.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Palette */
  --ink:#141310;            /* near-black ink: text, rail, heavy rules */
  --paper:#efeadf;          /* warm ivory page */
  --panel:#e6e0d2;          /* recessed paper for fills and hover */
  --yellow:#f3c412;         /* safety yellow: brand accent, active states */
  --signal-red:#d23c26;     /* signal red: live, chaos scores, movement */
  --rule:#c3bdaf;           /* structural rule lines */
  --rule-soft:#d5cfc2;      /* hairline separators */
  --muted:#6a6559;          /* secondary text on paper */
  --heating:#9a6f16;        /* mid-tier chaos (between calm ink and red) */

  /* Type families */
  --font-display:'Archivo','Arial Narrow',sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;

  /* Type scale — nothing below 12px */
  --t-micro:12px;
  --t-small:13px;
  --t-body:14px;
  --t-lead:16px;
  --t-h3:26px;
  --t-h2:clamp(32px,4.6vw,62px);
  --t-h1:clamp(44px,5.4vw,70px);
  --t-num:42px;

  /* Spacing rhythm */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:28px; --sp-7:34px; --sp-8:44px;

  /* Shell geometry */
  --rail-w:186px;
}

/* ---------- 2. LEGACY BRIDGE ----------
   Old renderers consume these variables; point them at the new tokens so
   every pre-rebuild surface already wears the new palette and fonts. */
:root{
  --bg-root:var(--paper);
  --bg-surface:var(--paper);
  --bg-panel:var(--panel);
  --bg-card:var(--paper);
  --bg-inset:var(--panel);
  --bg-base:var(--paper);
  --card-bg:var(--paper);
  --bg-featured:var(--yellow);
  --border:var(--ink);
  --border-bright:#3d3a34;
  --text-primary:var(--ink);
  --text-secondary:#4a453c;
  --text-muted:var(--muted);
  --text-disabled:#a9a294;
  --accent:var(--signal-red);
  --red:var(--signal-red);
  --accent-dim:rgba(210,60,38,.1);
  --accent-glow:rgba(210,60,38,.16);
  --positive:#287a4b;
  --negative:var(--signal-red);
  --info:#4a453c;
  --warning:var(--heating);
  --neutral:var(--muted);
  --sans:var(--font-display);
  --mono:var(--font-mono);
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:none;
  --shadow-xl:none;
  --r2:0; --r3:0; --r4:0;
  --glass-bg:var(--paper);
  --glass-border:var(--ink);
  --glass-radius:0;
  --brand-intelligence:#4a453c;
  --brand-intelligence-soft:var(--panel);
  --progress-track:var(--rule-soft);
  --panel-transition:none;
}

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

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:var(--t-body);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
/* Paper grain: fractal-noise SVG, not a gradient. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size:auto;
}
::selection{background:var(--yellow);color:var(--ink)}
button:focus-visible,[role="button"]:focus-visible,[role="tab"]:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--signal-red);
  outline-offset:2px;
}
button,input,select,textarea{border-radius:0}
button:hover{transform:none}
h1,h2,h3,h4{font-family:var(--font-display);font-stretch:72%;letter-spacing:-.01em}

/* AI loader rings — new palette */
.chaos-ai-icon .c-ring.r1{border-top-color:var(--signal-red);border-right-color:rgba(210,60,38,.25)}
.chaos-ai-icon .c-ring.r2{border-bottom-color:var(--ink);border-left-color:rgba(20,19,16,.2)}
.chaos-ai-icon .c-ring.r3{border-top-color:var(--yellow);border-left-color:rgba(243,196,18,.3)}

/* ---------- 4. SHELL ---------- */

/* Left rail — black ink column. Overrides the legacy fixed-rail block. */
@media(min-width:761px){
  body{padding-left:var(--rail-w)}
  header,footer,.app{margin-left:0}
}
#navTabs{
  position:fixed;
  z-index:50;
  left:0; top:0; bottom:0;
  width:var(--rail-w);
  height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:0;
  overflow-x:visible;
  overflow-y:auto;
  background:#121110;
  border:0;
  border-right:2px solid var(--ink);
}
#navTabs:before,#navTabs:after{display:none;content:none}
.rail-mark{
  flex:0 0 auto;
  height:130px;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--yellow);
  font-family:var(--font-display);
  font-weight:900;
  font-stretch:70%;
  font-size:88px;
  line-height:1;
  letter-spacing:-.04em;
  cursor:pointer;
}
.rail-mark:hover{color:var(--yellow);background:transparent}
#navTabs .tab{
  width:100%;
  min-height:0;
  margin:0;
  padding:15px 20px;
  border:0;
  border-left:6px solid transparent;
  border-bottom:0;
  background:transparent;
  color:#e4e0d6;
  text-align:left;
  font-family:var(--font-mono);
  font-size:var(--t-small);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .15s,background .15s;
}
#navTabs .tab:first-of-type{border-left:6px solid transparent}
#navTabs .tab:hover{background:transparent;color:var(--yellow)}
#navTabs .tab.active{
  background:var(--yellow);
  color:#121110;
  border-left-color:#121110;
  font-weight:700;
}
#navTabs .nav-ask{
  margin:24px 20px 28px;
  padding:14px 0 0;
  width:auto;
  border:0;
  border-top:1px solid #3d3a34;
  border-left:0;
  background:transparent;
  color:var(--yellow);
  font-size:var(--t-small);
  font-weight:700;
  letter-spacing:.08em;
  text-align:left;
}
#navTabs .nav-ask:hover{background:transparent;color:var(--paper)}

/* Masthead */
header.masthead{
  height:auto;
  min-height:96px;
  padding:22px 44px 18px;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  width:100%;
}
.mast-brand{cursor:pointer}
.mast-brand h1{
  margin:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:900;
  font-stretch:70%;
  font-size:var(--t-h1);
  line-height:.86;
  letter-spacing:-.012em;
  text-transform:uppercase;
  text-shadow:none;
}
.mast-brand h1 span{
  display:block;
  margin-top:5px;
  font-size:26px;
  font-weight:800;
  font-stretch:76%;
  line-height:1.05;
  letter-spacing:.005em;
}
.mast-brand small{
  display:block;
  margin-top:10px;
  color:var(--signal-red);
  font-family:var(--font-mono);
  font-size:var(--t-small);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.mast-right{display:flex;align-items:flex-end;gap:22px}
.mast-clock{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:5px;
  white-space:nowrap;
  text-align:right;
  font-family:var(--font-mono);
  font-size:var(--t-body);
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.25;
  color:var(--ink);
}
.mast-clock .red{color:var(--signal-red)}
.mast-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--signal-red);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.14em;
}
.mast-live i{width:7px;height:7px;border-radius:50%;background:var(--signal-red);animation:pd-pulse 1.3s infinite}
.mast-ask{
  margin:0;
  padding:12px 18px;
  border:1px solid var(--ink);
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:800;
  font-stretch:74%;
  font-size:var(--t-lead);
  letter-spacing:.02em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:none;
}
.mast-ask:hover{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.proxy-status{font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;border:1px solid var(--ink);padding:5px 9px}
.proxy-status.online{background:var(--panel);color:var(--positive);border-color:var(--rule)}
.proxy-status.offline{background:var(--panel);color:var(--signal-red);border-color:var(--rule)}

/* Content grid — sidebar + main */
.app{grid-template-columns:230px 1fr;background:var(--paper)}
.app>aside{
  min-width:0;
  padding:20px 16px;
  background:var(--paper);
  border-right:1px solid var(--rule);
}
.app>main{
  padding:34px 44px 54px;
  background:var(--paper);
}
.app.no-main{grid-template-columns:1fr}
.app.no-main aside{border-right:0;border-bottom:0}

/* Footer */
#appFooter{
  padding:10px 44px;
  border-top:2px solid var(--ink);
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
#appFooter b{color:var(--ink)}

/* Boot loader */
#chaosLoader{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  gap:26px;
}
#chaosLoader .boot-mark{width:64px;height:64px}
#chaosLoader .boot-word{
  font-family:var(--font-display);
  font-weight:900;
  font-stretch:70%;
  font-size:34px;
  letter-spacing:.06em;
  color:var(--ink);
  text-transform:uppercase;
  text-align:center;
}
#chaosLoader .boot-sub{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.3em;
  color:var(--muted);
  text-transform:uppercase;
  text-align:center;
}

/* ---------- 5. PRIMITIVES ---------- */

/* Kicker — small red label above a block */
.cd-kicker{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--signal-red);
}

/* Section head — condensed display heading with optional right meta */
.cd-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-bottom:12px;
  border-bottom:2px solid var(--ink);
}
.cd-section-head h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:850;
  font-stretch:72%;
  font-size:var(--t-h3);
  line-height:1;
  text-transform:uppercase;
}
.cd-section-head span{
  font-family:var(--font-mono);
  font-size:var(--t-small);
  color:var(--muted);
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* Live dot */
.cd-live-dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--signal-red);
  animation:pd-pulse 1.3s infinite;
}

/* Big condensed number (chaos scores, stats) */
.cd-num{
  font-family:var(--font-display);
  font-weight:850;
  font-stretch:70%;
  font-size:var(--t-num);
  line-height:.9;
  letter-spacing:-.02em;
}
.cd-num.is-hot{color:var(--signal-red)}

/* Ruled data table */
.cd-table{width:100%;border-collapse:collapse;font-family:var(--font-mono)}
.cd-table th{
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
}
.cd-table td{padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:var(--t-body)}
.cd-table tr:last-child td{border-bottom:0}

/* Yellow action button / link */
.cd-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:12px 18px;
  border:1px solid var(--ink);
  background:var(--yellow);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:800;
  font-stretch:74%;
  font-size:var(--t-lead);
  text-transform:uppercase;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:none;
}
.cd-btn:hover{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.cd-link{
  border:0;
  background:none;
  padding:0;
  color:var(--signal-red);
  font-family:var(--font-mono);
  font-size:var(--t-small);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.cd-link:hover{color:var(--ink)}

/* ---------- 6. RESPONSIVE SHELL ---------- */
@media(max-width:760px){
  body{padding-left:0}
  #navTabs{
    position:static;
    width:100%;
    height:auto;
    flex-direction:row;
    align-items:center;
    overflow-x:auto;
    overflow-y:hidden;
    border-right:0;
    border-bottom:2px solid var(--ink);
  }
  .rail-mark{height:64px;width:72px;font-size:44px;flex:0 0 auto}
  #navTabs .tab{
    width:auto;
    padding:22px 16px;
    border-left:0;
    border-bottom:4px solid transparent;
    white-space:nowrap;
  }
  #navTabs .tab:first-of-type{border-left:0}
  #navTabs .tab.active{border-bottom-color:#121110;border-left-color:transparent}
  #navTabs .nav-ask{margin:0 16px;padding:22px 0;border-top:0;white-space:nowrap}
  /* Mobile masthead: brand collapses to one line; meta row becomes a slim
     strip — date/time/LIVE left, compact Ask CHAOS right. */
  header.masthead{flex-direction:column;align-items:stretch;gap:8px;padding:14px 18px 12px}
  .mast-brand h1{font-size:30px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .mast-brand h1 span{display:inline;margin-top:0;font-size:14px;letter-spacing:.06em}
  .mast-brand small{margin-top:2px;font-size:11px}
  .mast-right{width:100%;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--rule);padding-top:10px}
  .mast-clock{flex-direction:row;align-items:center;gap:8px;text-align:left;font-size:11px;letter-spacing:.08em}
  .mast-clock br{display:none}
  .mast-clock .mast-live{font-size:10px}
  .mast-ask{padding:8px 14px;font-size:var(--t-small);letter-spacing:.05em}
  .app>main{padding:22px 18px 40px}
  #appFooter{padding:10px 18px;flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---- Readability floor (task sweep): legacy main.css still carries sub-12px text for these
   selectors and no rule above overrides them. main.css is load-bearing legacy and must not be
   edited, so the floors live here; this sheet loads after main.css, so equal specificity wins. */
.filter-group-label{font-size:10px}
nav .tab,nav .tab:first-child{font-size:10px}
.broadcast-live{font-size:11px}
.filter-chip .fc-count{font-size:11px}
.hdr-eyebrow{font-size:11px}
.home-routes small{font-size:11px}
.sport-explorer summary small{font-size:11px}
.ai-intel-badge{font-size:12px}
.filter-chip{font-size:12px}
.filter-rail .filter-chip{font-size:12px}
.hdr-ask-btn{font-size:12px}
.hdr-ask-btn span{font-size:12px}
.home-routes span{font-size:12px}
.live-board-heading p{font-size:12px}
.panel h3{font-size:12px}
header .badge{font-size:12px}
header .proxy-status{font-size:12px}
nav .tab{font-size:12px}