/* ==========================================================================
   Anantam Operations — foundations.

   Same identity as the rest of anantamracing.com (black, cream, Anantam red,
   Anton / Orbitron / Inter) but deliberately quiet: bigger text, more air,
   fewer borders, and Orbitron reserved for numbers and the wordmark instead
   of being shouted in every label.
   ========================================================================== */

:root {
  --white: #FFFFFF; --cream: #FFFBF8; --black: #000000;
  --red-deep: #710000; --red-mid: #A40000; --red: #D40000; --red-bright: #FF3A24;

  --bg: #0a0a0b;
  --bg-1: #121214;
  --bg-2: #18181b;
  --bg-3: #202024;
  --bg-4: #2a2a30;

  --ink: var(--cream);
  --ink-soft: rgba(255,251,248,.84);
  --ink-mute: rgba(255,251,248,.62);
  --ink-faint: rgba(255,251,248,.42);
  --ink-ghost: rgba(255,251,248,.20);

  --line: rgba(255,251,248,.09);
  --line-2: rgba(255,251,248,.16);
  --line-strong: rgba(255,251,248,.3);
  --line-red: rgba(212,0,0,.4);

  --ok: #4ADE80; --ok-dim: rgba(74,222,128,.14);
  --warn: #FBBF24; --warn-dim: rgba(251,191,36,.14);
  --info: #60C5FA; --info-dim: rgba(96,197,250,.14);
  --danger: #FF6B6B; --danger-dim: rgba(255,107,107,.14);
  --red-dim: rgba(212,0,0,.16);

  --font-display: 'Anton', 'Impact', sans-serif;
  --font-ui: 'Orbitron', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r: 8px; --r-lg: 12px; --r-xl: 16px;
  --shadow: 0 24px 60px -34px rgba(0,0,0,.95);
  --shadow-pop: 0 30px 80px -28px rgba(0,0,0,.95), 0 0 0 1px var(--line);

  --gutter: clamp(18px, 3vw, 40px);
  --rail: 236px;
  --header-h: 60px;
  --maxw: 1180px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow: hidden;
}
::selection { background: var(--red); color: #fff; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
svg { display: block; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3a3a42; }

/* ── type ──────────────────────────────────────────────────────────────────
   Anton is the page title only. Everything else is Inter, because a screen
   full of condensed uppercase is exactly what "chaotic" feels like.        */
h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; color: #fff; letter-spacing: .01em;
}
h2 { font-size: 1.22rem; font-weight: 600; color: #fff; line-height: 1.25; letter-spacing: -.01em; }
h3 { font-size: 1.0rem; font-weight: 600; color: #fff; line-height: 1.3; }
h4 { font-size: .9rem; font-weight: 600; color: var(--ink-soft); }

/* The only remaining all-caps: the wordmark and numeric stat captions. */
.wordmark-sub { font-family: var(--font-ui); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .58rem; }
.caption { font-size: .78rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.num { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; }

.muted { color: var(--ink-mute); }
.faint { color: var(--ink-faint); }
.small { font-size: .875rem; }
.xs { font-size: .8rem; }
.strong { color: #fff; font-weight: 600; }
.lede { font-size: 1.02rem; line-height: 1.6; color: var(--ink-mute); max-width: 68ch; }
.nowrap { white-space: nowrap; }
.right { text-align: right; } .center { text-align: center; }
.tone-good { color: var(--ok); } .tone-bad { color: var(--danger); }
.tone-warn { color: var(--warn); } .tone-info { color: var(--info); }
.tone-neutral { color: var(--ink-mute); } .tone-red { color: var(--red); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ── shell ─────────────────────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; height: 100dvh; }
.topbar { flex: 0 0 auto; }
.shell { flex: 1 1 auto; }

.topbar {
  display: flex; align-items: center; gap: 16px; height: var(--header-h);
  padding: 0 var(--gutter); border-bottom: 1px solid var(--line);
  background: var(--bg-1); position: relative; z-index: 60;
}
.brand { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
.brand .mark { font-family: var(--font-display); font-size: 1.3rem; color: #fff; text-transform: uppercase; }
.brand .sub { color: var(--red); }
.topbar .spacer { flex: 1 1 auto; }

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 0; }

.rail { border-right: 1px solid var(--line); background: var(--bg-1); overflow-y: auto; padding: 16px 12px 40px; min-height: 0; }
.rail a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r); color: var(--ink-mute);
  font-size: .92rem; font-weight: 500; margin-bottom: 2px;
}
.rail a:hover { background: var(--bg-3); color: var(--ink); }
.rail a.on { background: var(--red-dim); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--red); }
.rail a .badge {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px;
  display: grid; place-items: center; font-size: .7rem; font-weight: 700;
  background: var(--bg-4); color: var(--ink-faint);
}
.rail a .badge.alert { background: var(--danger); color: #1a0505; }
.rail a.on .badge { background: var(--red); color: #fff; }
.rail .rail-note { margin-top: 20px; padding: 12px; border-radius: var(--r); background: var(--bg-2); font-size: .78rem; color: var(--ink-faint); line-height: 1.5; }

.main { overflow-y: auto; min-height: 0; }
.view { padding: 28px var(--gutter) 80px; max-width: var(--maxw); margin: 0 auto; }
.view.wide { max-width: 1480px; }

/* ── page header ───────────────────────────────────────────────────────── */
.page-head { margin-bottom: 26px; }
.page-head .eyebrow { font-size: .8rem; font-weight: 600; color: var(--red); margin-bottom: 8px; }
.page-head .row-top { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.page-head .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-head .lede { margin-top: 12px; }

/* ── tabs ──────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.tabs a {
  padding: 10px 14px; font-size: .92rem; font-weight: 500; color: var(--ink-mute);
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--r) var(--r) 0 0;
}
.tabs a:hover { color: var(--ink); background: var(--bg-2); }
.tabs a.on { color: #fff; font-weight: 600; border-bottom-color: var(--red); }

/* ── layout helpers ────────────────────────────────────────────────────── */
.section { margin-top: 36px; }
.section > header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.section > header .caption { margin-left: 0; }
.section > header .link { margin-left: auto; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.stack > * + * { margin-top: 16px; }

@media (max-width: 1240px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 1100px) { .topbar .ambient { display: none; } }

@media (max-width: 900px) {
  :root { --rail: 0px; --header-h: 56px; }
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed; top: var(--header-h); bottom: 0; left: 0;
    width: min(268px, 82vw); z-index: 72; box-shadow: var(--shadow); display: none;
  }
  body.rail-open .rail { display: block; }
  body.rail-open::after { content: ''; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(0,0,0,.66); z-index: 71; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .view { padding: 22px var(--gutter) 64px; }
  .brand .sub { display: none; }
}
@media (min-width: 901px) { .rail-toggle { display: none; } }

.topbar, .shell, .main { min-width: 0; max-width: 100%; }
.topbar > * { min-width: 0; }
.view > *, .card, .stat { min-width: 0; }