/* ============================================================
   DeepSpeed Hackathon Docs — component layer
   ------------------------------------------------------------
   Sits on top of the vendored design system (tokens.css) and
   reads its custom properties only. No raw brand values here.

   House rules carried over from the design system:
     · Monochrome is the floor. Race-red is a brake light.
     · Hairline rules divide sections — show the scaffolding.
     · Eyebrow labels (mono, wide tracking) everywhere.
     · Tabular numerals always.
     · Sharp corners. Pills only on status chips.
     · Motion is mechanical: --ease-mech, 120/200/360ms.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html[data-theme="light"] { color-scheme: light; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + var(--s-6));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

:root {
  --hdr-h:    58px;
  --nav-w:    264px;
  --toc-w:    216px;
  --page-max: 1280px;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

body { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; top: -100px; left: var(--s-4); z-index: 100;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  padding: var(--s-3) var(--s-4); text-decoration: none;
}
.skip:focus { top: var(--s-3); color: var(--accent-fg); }

/* ===== Header — the only place blur is allowed ===================== */

.hdr {
  position: sticky; top: 0; z-index: 50;
  height: var(--hdr-h);
  display: flex; align-items: center; gap: var(--s-5);
  padding: 0 var(--s-8);
  background: rgba(10, 10, 11, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] .hdr { background: rgba(244, 244, 245, 0.78); }

.hdr-brand { display: flex; align-items: baseline; gap: var(--s-3); text-decoration: none; color: var(--fg); min-width: 0; }
.hdr-brand:hover { color: var(--fg); }
.hdr-brand:hover .wm { color: var(--accent); }
.wm {
  font-family: var(--font-display);
  font-size: 19px; line-height: 1;
  text-transform: uppercase;
  transform: skew(-5deg) rotate(-1.5deg);
  transition: color var(--dur-fast) var(--ease-mech);
  white-space: nowrap;
}
.hdr-brand .sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle); white-space: nowrap;
}

.hdr-nav { display: flex; gap: var(--s-6); margin-left: var(--s-4); }
.hdr-nav a {
  position: relative;
  padding: 4px 0; text-decoration: none;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-mech);
}
.hdr-nav a:hover { color: var(--fg); }
.hdr-nav a.on { color: var(--fg); }
.hdr-nav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--accent);
}

.hdr-right { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }

.hdr-meta {
  text-decoration: none;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle); white-space: nowrap;
}
.hdr-meta b { color: var(--fg); font-weight: var(--w-med); }
a.hdr-meta:hover { color: var(--accent); }

/* Pills are allowed here: status chip + toggle, per the system. */
.toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.toggle:hover { color: var(--fg); border-color: var(--fg); }
.toggle:active { transform: scale(0.97); }
.toggle .t-dark { display: none; }
[data-theme="light"] .toggle .t-dark { display: inline; }
[data-theme="light"] .toggle .t-light { display: none; }

.scrim {
  display: none;
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 40;
  background: rgba(0, 0, 0, 0.6);
}

.navbtn {
  display: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-1);
  width: 32px; height: 32px;
  color: var(--fg-muted); cursor: pointer;
  align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.navbtn:hover { color: var(--fg); border-color: var(--fg); }
.navbtn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ===== Doc shell =================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--toc-w);
  gap: var(--s-12);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--s-8);
  align-items: start;
}

/* ----- Sidebar ----- */

.nav {
  position: sticky; top: var(--hdr-h);
  max-height: calc(100vh - var(--hdr-h));
  overflow-y: auto;
  padding: var(--s-8) var(--s-4) var(--s-16) 0;
  border-right: 1px solid var(--line-faint);
}

.nav-lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-track); text-transform: uppercase;
  color: var(--fg-subtle);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}

.nav-switch { display: grid; margin-bottom: var(--s-8); }
.nav-switch a {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech), background var(--dur-fast) var(--ease-mech);
}
.nav-switch a + a { border-top: 0; }
.nav-switch a:hover { color: var(--fg); border-color: var(--line-strong); }
.nav-switch a[aria-current="true"] {
  color: var(--fg); background: var(--bg-elev-1);
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--s-3) - 1px);
}
.nav-switch .n { font-family: var(--font-headline); font-size: 15px; letter-spacing: 0; color: var(--fg-subtle); }
.nav-switch a[aria-current="true"] .n { color: var(--accent); }

.nav-list { list-style: none; margin: 0 0 var(--s-8); padding: 0; }
.nav-list a {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2);
  text-decoration: none; color: var(--fg-muted);
  font-size: var(--t-sm); line-height: 1.3;
  border-bottom: 1px solid var(--line-faint);
  transition: color var(--dur-fast) var(--ease-mech), padding-left var(--dur-fast) var(--ease-mech), background var(--dur-fast) var(--ease-mech);
}
.nav-list a:hover { color: var(--fg); padding-left: var(--s-4); }
.nav-list a[aria-current="page"] {
  color: var(--fg); background: var(--bg-elev-1);
  box-shadow: inset 2px 0 0 var(--accent);
  padding-left: var(--s-4);
}
.nav-list .n {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--fg-subtle); padding-top: 2px;
}
.nav-list a[aria-current="page"] .n { color: var(--accent); }

.nav-out { display: grid; gap: var(--s-2); }
.nav-out a {
  display: flex; align-items: center; gap: var(--s-2);
  text-decoration: none; color: var(--fg-subtle);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-mech);
}
.nav-out a:hover { color: var(--accent); }
.nav-out svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ----- On this page ----- */

.toc {
  position: sticky; top: var(--hdr-h);
  max-height: calc(100vh - var(--hdr-h));
  overflow-y: auto;
  padding: var(--s-8) 0 var(--s-16);
}
.toc .nav-lbl { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s-3); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li ul { padding-left: var(--s-4); }
.toc a {
  display: block; padding: 5px 0 5px var(--s-3);
  text-decoration: none; color: var(--fg-subtle);
  font-size: var(--t-sm); line-height: 1.35;
  border-left: 1px solid var(--line-faint);
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.toc a:hover { color: var(--fg); }
.toc a.on { color: var(--fg); border-left-color: var(--accent); }

/* ===== Article ===================================================== */

.main { min-width: 0; padding: var(--s-8) 0 var(--s-24); }

.crumb {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.crumb .sep { color: var(--line-strong); }
.crumb .red { color: var(--accent); }
.crumb a { color: var(--fg-subtle); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.prose { max-width: 76ch; }

.prose h1 { font-size: clamp(38px, 5vw, var(--t-4xl)); margin: 0 0 var(--s-6); }
.prose h2 {
  font-size: var(--t-2xl);
  margin: var(--s-16) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
/* The sources separate chapters with `---`, which already draws the rule. */
.prose hr + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--t-xl); margin: var(--s-10) 0 var(--s-3); }
.prose h4 { margin: var(--s-6) 0 var(--s-2); color: var(--fg); }
.prose h1, .prose h2, .prose h3, .prose h4 { scroll-margin-top: calc(var(--hdr-h) + var(--s-6)); }

.prose p, .prose li { max-width: none; }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.prose li { margin-bottom: var(--s-2); }
.prose li > ul, .prose li > ol { margin-top: var(--s-2); }
.prose li::marker { color: var(--fg-subtle); }
.prose strong { font-weight: var(--w-bold); color: var(--fg); }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--line); }

.prose a { text-decoration: underline; }
.hl {
  margin-left: var(--s-2); opacity: 0;
  color: var(--fg-subtle); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.5em;
  vertical-align: middle;
  transition: opacity var(--dur-fast) var(--ease-mech);
}
h1:hover .hl, h2:hover .hl, h3:hover .hl, h4:hover .hl { opacity: 1; }
.hl:hover { color: var(--accent); }

/* Pit note — blockquote. Square, hairline, 2px red rule on the left. */
.prose blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-0);
}
.prose blockquote > :last-child { margin-bottom: 0; }

/* Starting-line rule */
.prose hr { height: 1px; background: var(--line); margin: var(--s-12) 0 var(--s-8); }

/* ----- Telemetry tables ----- */

.tbl { overflow-x: auto; margin: var(--s-6) 0; border: 1px solid var(--line); }
.tbl table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl thead th {
  text-align: left;
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-med);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-elev-1);
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  white-space: nowrap;
}
.tbl tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-faint);
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--bg-elev-1); }
.tbl td > p:last-child, .tbl th > p:last-child { margin-bottom: 0; }

/* ----- Code ----- */

.prose :not(pre) > code {
  background: var(--bg-inset);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-1);
  padding: 1px 5px;
  word-break: break-word;
}
[data-theme="light"] .prose :not(pre) > code { border-color: var(--ink-200); }
.prose a code { color: inherit; }

.code { position: relative; margin: var(--s-6) 0; }
.code pre {
  margin: 0; padding: var(--s-5) var(--s-6);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65;
  tab-size: 2;
  color: var(--fg);
}
[data-theme="light"] .code pre { background: var(--bg-elev-1); }
.code pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.code-lang {
  position: absolute; top: 0; right: 0;
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-subtle); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-mech);
}
.copy {
  position: absolute; top: 6px; right: 6px;
  opacity: 0;
  background: var(--bg-elev-1); border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 4px 9px; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  transition: opacity var(--dur-fast) var(--ease-mech), color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.code:hover .copy, .copy:focus-visible { opacity: 1; }
.code:hover .code-lang { opacity: 0; }
.copy:hover { color: var(--fg); border-color: var(--fg); }
.copy:active { transform: scale(0.97); }
.copy.done { color: var(--ok); border-color: var(--ok); }

/* Pygments — flag colours only, reserved for data. */
.code .c, .code .c1, .code .cm, .code .cs, .code .ch, .code .cp, .code .cpf { color: var(--fg-subtle); font-style: italic; }
.code .k, .code .kc, .code .kd, .code .kn, .code .kp, .code .kr, .code .kt, .code .ow { color: var(--accent); }
.code .s, .code .s1, .code .s2, .code .sb, .code .sc, .code .sd, .code .se, .code .sh, .code .si, .code .sx, .code .sr, .code .ss, .code .sa { color: var(--ok); }
.code .m, .code .mi, .code .mf, .code .mh, .code .mo, .code .il { color: var(--info); }
.code .nf, .code .fm, .code .nc { color: var(--fg); font-weight: var(--w-med); }
.code .nb, .code .bp { color: var(--info); }
.code .nv, .code .vc, .code .vg, .code .vi, .code .nx { color: var(--fg); }
.code .nt { color: var(--accent); }
.code .na { color: var(--warn); }
.code .o, .code .p { color: var(--fg-muted); }
.code .err { color: var(--accent); }
.code .gd { color: var(--accent); }
.code .gi { color: var(--ok); }
.code .ge { font-style: italic; }
.code .gs { font-weight: var(--w-bold); }

/* ----- Pager ----- */

.pager { margin-top: var(--s-16); border-top: 1px solid var(--line); }
.pager a {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-faint);
  text-decoration: none; color: var(--fg);
  transition: padding var(--dur-fast) var(--ease-mech);
}
.pager a:hover { color: var(--fg); }
.pager .prev:hover { padding-left: var(--s-2); }
.pager .next:hover { padding-right: var(--s-2); }
.pager a:hover .arw { color: var(--accent); }
.pager .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle); display: block; margin-bottom: 4px;
}
.pager .t { font-family: var(--font-headline); font-size: var(--t-xl); text-transform: uppercase; line-height: 1; }
.pager .arw { color: var(--fg-subtle); font-family: var(--font-mono); transition: color var(--dur-fast) var(--ease-mech); }
.pager .next { text-align: right; grid-template-columns: 1fr auto; }

.src {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle);
}
.src a { color: var(--fg-subtle); text-decoration: none; }
.src a:hover { color: var(--accent); }

/* ===== Buttons ===================================================== */

.btn {
  font-family: var(--font-headline);
  font-size: var(--t-sm); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 20px;
  border: 2px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-1);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: background var(--dur-fast) var(--ease-mech), color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.btn:hover { background: transparent; color: var(--fg); }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--fg); }
.btn.ghost:hover { background: var(--fg); color: var(--bg); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--ink-0w); }
.btn.accent:hover { background: transparent; color: var(--accent); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ===== Landing ===================================================== */

.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s-8); }

.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: var(--s-24) 0 var(--s-16);
  overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent 100%);
  pointer-events: none;
}
[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}
.hero > * { position: relative; }

.hero .eyebrow { margin-bottom: var(--s-5); letter-spacing: var(--ls-track); }
.hero-display {
  font-family: var(--font-display);
  font-size: clamp(52px, 8.5vw, 120px);
  line-height: 0.92;
  text-transform: uppercase;
  transform: skew(-3deg) rotate(-1deg);
  transform-origin: left;
  margin: 0 0 var(--s-8);
  max-width: 14ch;
}
.hero-display .red { color: var(--accent); }
.hero-sub {
  font-size: var(--t-lg); line-height: 1.5;
  color: var(--fg-muted); max-width: 62ch;
  margin: 0 0 var(--s-10);
}
.hero-act { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Sits under the buttons: registration closes before the submission deadline,
   so the date belongs beside the call to action, not only in the stat row. */
.hero-note {
  font-size: var(--t-sm); color: var(--fg-muted);
  max-width: 62ch; margin: var(--s-4) 0 0;
}
.hero-note b { color: var(--accent); font-weight: var(--w-med); }

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--line);
}
.stat-panel {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  padding: var(--s-6) var(--s-6) var(--s-5);
  clip-path: var(--clip-notch);
}
.stat-panel .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-2);
}
.stat-panel .v {
  font-family: var(--font-headline);
  font-size: var(--t-4xl); line-height: 0.9;
  letter-spacing: var(--ls-snug);
  font-variant-numeric: tabular-nums;
}
.stat-panel .v .u { font-size: var(--t-xl); opacity: 0.55; margin-left: 2px; }
.stat-panel .foot {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-subtle); margin-top: var(--s-2);
}
.stat-panel.hot .v { color: var(--accent); }

.sec { padding: var(--s-16) 0; border-bottom: 1px solid var(--line); }
.sec:last-of-type { border-bottom: 0; }
.sec-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12);
  align-items: end; margin-bottom: var(--s-10);
}
.sec-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-track);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3);
}
.sec-h { font-size: var(--t-3xl); margin: 0; }
.sec-lede { font-size: var(--t-md); color: var(--fg-muted); max-width: 52ch; margin: 0; }
.sec-lede a {
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.sec-lede a:hover { color: var(--accent); border-color: var(--accent); }

/* ----- Track choice ----- */

.tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.tracks > .tcard { min-width: 0; }

.tcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-8);
  text-decoration: none; color: var(--fg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-mech), transform var(--dur-base) var(--ease-mech), box-shadow var(--dur-base) var(--ease-mech);
}
.tcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-mech);
}
.tcard:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-card); color: var(--fg); }
.tcard:hover::before { transform: scaleX(1); }

.tcard-n {
  position: absolute; top: var(--s-5); right: var(--s-6);
  font-family: var(--font-headline);
  font-size: 96px; line-height: 0.8;
  color: var(--fg); opacity: 0.07;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.tcard .eyebrow { margin-bottom: var(--s-4); letter-spacing: var(--ls-track); }
.tcard h3 { font-size: var(--t-2xl); margin: 0 0 var(--s-3); max-width: 16ch; }
.tcard .lede { font-size: var(--t-sm); color: var(--fg-muted); margin: 0 0 var(--s-6); max-width: 46ch; }

/* The circuit itself. Both plates are the same shape whatever the map's own
   proportions are, so the two cards stay in step; `contain` letterboxes the
   difference against the inset, which is the track colour in either theme.
   `.paper` is Track 1's occupancy grid — dark ink on white, so the dark theme
   flips it. Track 2's is a screenshot of the simulator and is dark already. */
.tmap-fig {
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--s-6);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.tmap-fig img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  transition: transform var(--dur-base) var(--ease-mech);
}
[data-theme="dark"] .tmap-fig.paper img { filter: invert(1); }
.tcard:hover .tmap-fig img { transform: scale(1.03); }

.spec { margin: 0 0 var(--s-8); border-top: 1px solid var(--line); }
.spec .row {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-faint);
}
.spec .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
}
.spec .v { font-size: var(--t-sm); font-weight: var(--w-med); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }

.tcard-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-family: var(--font-headline); font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.tcard-foot .arw { color: var(--fg-subtle); font-family: var(--font-mono); font-size: var(--t-md); transition: transform var(--dur-base) var(--ease-mech), color var(--dur-base) var(--ease-mech); }
.tcard:hover .tcard-foot { color: var(--accent); }
.tcard:hover .tcard-foot .arw { color: var(--accent); transform: translateX(5px); }

/* ----- Shared-rules rows ----- */

.rows { border-top: 1px solid var(--line); }
.row-item {
  display: grid; grid-template-columns: 150px 1fr 1fr;
  gap: var(--s-6); align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-faint);
}
.row-item .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
}
.row-item .v { font-size: var(--t-sm); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.row-item .v.red { color: var(--accent); font-weight: var(--w-med); }
.row-item .n { font-size: var(--t-sm); color: var(--fg-muted); overflow-wrap: break-word; }
.row-item .n a {
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.row-item .n a:hover { color: var(--accent); border-color: var(--accent); }

/* ----- Chapter grid ----- */

.chaps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.chap {
  display: block; padding: var(--s-5);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-decoration: none; color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease-mech), transform var(--dur-fast) var(--ease-mech);
}
.chap:hover { border-color: var(--line-strong); transform: translateY(-2px); color: var(--fg); }
.chap:hover .ct { color: var(--accent); }
.chap .cn {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--fg-subtle); margin-bottom: var(--s-3);
}
.chap .ct {
  font-family: var(--font-headline); font-size: var(--t-lg);
  text-transform: uppercase; line-height: 1; margin-bottom: var(--s-2);
  transition: color var(--dur-fast) var(--ease-mech);
}
.chap .cd { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
/* Grid and flex items are min-width:auto by default, so an unbreakable line —
   the clone URL — widens the page instead of scrolling inside its own panel. */
.quick > div { min-width: 0; }
.quick pre { max-width: 100%; }
.quick pre {
  margin: 0; padding: var(--s-6);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
  overflow-x: auto; color: var(--fg);
}
[data-theme="light"] .quick pre { background: var(--bg-elev-1); }
.quick pre .c { color: var(--fg-subtle); }
.quick pre .r { color: var(--accent); }

/* ===== Footer ====================================================== */

.ft {
  border-top: 2px solid var(--fg);
  margin-top: var(--s-16);
  padding: var(--s-8);
}
.ft-in {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.ft-in nav { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.ft-in a { color: var(--fg-muted); text-decoration: none; }
.ft-in a:hover { color: var(--accent); }

/* ===== Responsive ================================================== */

@media (max-width: 1200px) {
  .shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); gap: var(--s-10); }
  .toc { display: none; }
  .chaps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .tracks, .quick { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
  .row-item { grid-template-columns: 1fr; gap: var(--s-2); }
}

@media (max-width: 860px) {
  .hdr { padding: 0 var(--s-4); gap: var(--s-3); }
  .hdr-nav, .hdr-meta { display: none; }
  .navbtn { display: flex; }
  .hdr-brand .sub { display: none; }

  .shell { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s-4); }
  .page { padding: 0 var(--s-4); }

  .nav {
    position: fixed; inset: var(--hdr-h) auto 0 0;
    width: min(88vw, 320px); z-index: 45;
    background: var(--bg);
    border-right: 1px solid var(--line);
    padding: var(--s-6) var(--s-5) var(--s-16);
    max-height: none;
    transform: translateX(-102%);
    transition: transform var(--dur-base) var(--ease-mech);
  }
  body.nav-on .nav { transform: translateX(0); }
  body.nav-on .scrim { display: block; }

  .main { padding-top: var(--s-6); }
  .hero { padding: var(--s-12) 0 var(--s-10); }
  .hero-sub { font-size: var(--t-md); }
  .chaps { grid-template-columns: 1fr; }
  .pager .t { font-size: var(--t-lg); }
  .ft-in { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

@media print {
  .hdr, .nav, .toc, .pager, .ft, .copy, .skip, .navbtn { display: none !important; }
  .shell { display: block; padding: 0; }
  .prose { max-width: none; }
}

/* ===== Platform switch =============================================== */
/*
 * Every platform's variant is in the HTML; CSS shows the one matching
 * <html data-platform>. Nothing is rewritten at run time, so the page is
 * already correct before app.js loads, and a copy button lifts the right
 * command because innerText skips what is display:none.
 */

[data-pf] { display: none; }

/* Spelled out per element rather than `display: revert`: revert needs Safari
   15.4+, and where it is not understood every variant stays hidden and the
   command reads "./install//setup.sh". These selectors work everywhere. */
html[data-platform="linux"]   span[data-pf~="linux"],
html[data-platform="macos"]   span[data-pf~="macos"],
html[data-platform="windows"] span[data-pf~="windows"] { display: inline; }

html[data-platform="linux"]   div[data-pf~="linux"],
html[data-platform="linux"]   p[data-pf~="linux"],
html[data-platform="macos"]   div[data-pf~="macos"],
html[data-platform="macos"]   p[data-pf~="macos"],
html[data-platform="windows"] div[data-pf~="windows"],
html[data-platform="windows"] p[data-pf~="windows"] { display: block; }

html[data-platform="linux"]   li[data-pf~="linux"],
html[data-platform="macos"]   li[data-pf~="macos"],
html[data-platform="windows"] li[data-pf~="windows"] { display: list-item; }

/* Alternatives spelled out for GitHub readers, who have no switch. */
.pf-alt { display: none; }

.pf-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
  flex: none;
}
.pf-switch button {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  padding: 6px 11px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted); cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-mech), background var(--dur-fast) var(--ease-mech);
}
.pf-switch button + button { border-left: 1px solid var(--line); }
.pf-switch button:hover { color: var(--fg); }
.pf-switch button:active { transform: scale(0.97); }

html[data-platform="linux"]   .pf-switch [data-set-pf="linux"],
html[data-platform="macos"]   .pf-switch [data-set-pf="macos"],
html[data-platform="windows"] .pf-switch [data-set-pf="windows"] {
  background: var(--accent); color: var(--ink-0w);
}

.pf-switch--nav { display: flex; width: 100%; margin-bottom: var(--s-8); }
.pf-switch--nav button { flex: 1; justify-content: center; padding: 7px 2px; }
.pf-switch--quick { margin-bottom: var(--s-6); }

/* The switch repeated where the per-platform sections actually start. */
.pf-tabs {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin: var(--s-6) 0 var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.pf-block > h3:first-child { margin-top: 0; }
.pf-block > :last-child { margin-bottom: 0; }

/* Said to the platforms a section is not for. The section stays visible —
   the prose cross-references these by number. */
.pf-scope {
  margin: var(--s-4) 0 var(--s-6);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--warn);
  font-size: var(--t-sm); color: var(--fg-muted);
  max-width: none;
}

/* The landing page has no sidebar, so it carries its own switch in the hero. */
.hero-pf {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.hero-pf__note { font-size: var(--t-sm); color: var(--fg-subtle); }

/* The header switch stays at every width — it is the one control a reader is
   guaranteed to see. Below 1100px the deadline and the GitHub link give up
   their room for it, and below 860px it and the theme toggle both shrink. */
@media (max-width: 1100px) { .hdr-meta { display: none; } }

@media (max-width: 860px) {
  .pf-switch--hdr button { padding: 5px 6px; font-size: 9px; letter-spacing: 0.1em; }
  .wm { font-size: 17px; }
  .toggle { padding: 6px 8px; }
  .toggle .t-light, .toggle .t-dark { display: none; }
  .toggle svg { display: block; width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; fill: none; }
  .hero-pf__note { display: none; }
}

/* Above that the glyph is redundant — the word is there. */
.toggle svg { display: none; }

@media print { .pf-switch, .pf-tabs, .hero-pf { display: none !important; } }