/* ===========================================================================
   Design note, so the next person does not "tidy" this back into a template.

   The brief was to not look machine-generated. The recognizable tells are all
   the result of not deciding: Inter or Poppins, a violet gradient, everything
   centered in one narrow column, the same 12px radius and the same drop shadow
   on every box, uniform cards of identical height, emoji standing in for icons.

   So this commits to one thing instead: a printed specification sheet. Labels
   live in a left rail, content runs flush against it, hairline rules do the
   separating that boxes would otherwise do, and nothing is centered or rounded.

   Type is IBM Plex throughout, Sans Condensed for display and Mono for data.
   That is a deliberate pick rather than a default: IBM commissioned Plex for
   technical documentation, which is what most of this site is.

   Rules:
     - no border radius anywhere, no decorative shadows, no gradients
     - one accent, used only where it carries meaning, never as decoration
     - light by default; dark is a real palette, not neon on black
     - hierarchy comes from size and weight, not from boxes
   =========================================================================== */

:root {
  /* Neutral, not warm. The previous palette fled the blue-gray that generated
     sites ship with and landed in brown: muted was #6B6658 light / #97917E dark,
     chroma 19 and 25, which tinted every line of text sepia. These sit at 1-6, so
     the only saturated thing anywhere is the accent. */
  --ground: #F7F7F8;
  --paper: #FFFFFF;
  --ink: #111113;
  --muted: #5C5C61;
  --rule: #DEDEE1;
  --code-bg: #EFEFF1;
  --mark: #FBE7A2;
  --mark-ink: #111113;

  /* The single accent, and the only saturated color in the system. */
  --accent: #C8252D;
  --warn: #C8252D;

  /* Syntax roles. Named for what they mean, not for how they look. */
  --k-in: #16714A;
  --k-cp: #8A6410;
  --k-rs: #C8252D;
  --k-dt: #2A4E8F;
  --k-md: #7A3A66;

  --display: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --rail: 232px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B0B0C;
    --paper: #151517;
    --ink: #EDEDEF;
    --muted: #9B9BA1;
    --rule: #2B2B2F;
    --code-bg: #161619;
    --mark: #4A4320;
    --mark-ink: #F6EFD6;
    --accent: #FF5C63;
    --warn: #FF5C63;
    --k-in: #5FD3A0;
    --k-cp: #E0B95C;
    --k-rs: #FF5C63;
    --k-dt: #8FB2F0;
    --k-md: #E09BC4;
  }
}
:root[data-theme="dark"] {
  --ground: #0B0B0C;
  --paper: #151517;
  --ink: #EDEDEF;
  --muted: #9B9BA1;
  --rule: #2B2B2F;
  --code-bg: #161619;
  --mark: #4A4320;
  --mark-ink: #F6EFD6;
  --accent: #FF5C63;
  --warn: #FF5C63;
  --k-in: #5FD3A0;
  --k-cp: #E0B95C;
  --k-rs: #FF5C63;
  --k-dt: #8FB2F0;
  --k-md: #E09BC4;
}

* { box-sizing: border-box; }

/* The single most recognizable tell, removed globally rather than per rule. */
*, *::before, *::after { border-radius: 0 !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
  padding-inline: clamp(20px, 3.5vw, 72px);
  padding-block: clamp(32px, 5vw, 72px) 96px;
}

/* ---- top navigation ------------------------------------------------------ */
/* The arcade and the two writing pages used to be reachable only by scrolling
   to the bottom of the front page. This puts every destination one click from
   the top of any page, and sticks so it stays one click away after scrolling. */
.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 clamp(18px, 2vw, 34px);
  padding-block: 13px;
  margin-bottom: clamp(22px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  font-size: 0.86rem;
}
/* Everything sits together at the left, where the eye starts and where the rest
   of the page begins. Pushed to the right edge these links end up 2400px from
   the name on a wide display, which is the opposite of easy to find. */
.topnav .home { font-family: var(--display); font-weight: 700; color: var(--ink);
                letter-spacing: -0.01em; padding-right: 6px; }
.topnav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.topnav a:hover { color: var(--ink); }
.topnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
/* The one the user actually asked to be able to find. */
.topnav .play { color: var(--accent); font-weight: 600; }
.topnav .play:hover { color: var(--accent); text-decoration: underline;
                      text-decoration-thickness: 2px; }
@media (max-width: 560px) { .topnav { gap: 0 16px; font-size: 0.8rem; } }

/* ---- the surfaces the browser draws ------------------------------------- */
/* Selection, the caret, the scrollbar, the focus ring and the numerals in a
   date column all ship with defaults that belong to no design system. Leaving
   them is the difference between a page that was assembled and one that was
   built, and it costs eleven declarations. */

::selection { background: var(--mark); color: var(--mark-ink); }
html { caret-color: var(--accent); scrollbar-color: var(--rule) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* One focus ring for the whole site, in the accent, offset so it never sits on
   the glyphs. :focus-visible so a mouse click does not draw it. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Links sit on the baseline grid rather than through the descenders. */
a { text-underline-offset: 0.18em; text-decoration-thickness: from-font; }

/* Anything read as a column of figures lines up. */
.item .when, .stat .v, .lb .val, .lb .rank, time, .vitals dd {
  font-variant-numeric: tabular-nums;
}

/* Full bleed. This was a centered 1560px column, which on a 2560px display left
   about 500px of nothing down each side. The gutter is body padding now and the
   page uses the screen it is given. Line length is held by the grid columns and
   by the measure on p, not by starving the whole layout of width. */
.wrap {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* ---- the spec-sheet grid ------------------------------------------------ */

section {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
  row-gap: 16px;
  align-items: start;
  padding-block: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 24px;
}
section > * { grid-column: 2; min-width: 0; }
/* The label sits in the rail, aligned to the first line of the heading. */
/* Row 1 only. Spanning many rows forces the grid to materialize that many
   rows, and row-gap then applies between every one of them, which silently
   added about 1500px of empty space inside each section. */
section > .eyebrow {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 20px;
  padding-top: 5px;
}
@media (max-width: 800px) {
  section { grid-template-columns: 1fr; row-gap: 12px; }
  section > *, section > .eyebrow { grid-column: 1; }
  section > .eyebrow { grid-row: auto; position: static; padding-top: 0; }
}

header { padding-block: 0 clamp(28px, 4vw, 48px); }
footer {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  max-width: none;
}

/* ---- type --------------------------------------------------------------- */

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }

/* A real jump between levels. Generated pages tend to step timidly from 2rem
   to 1.5rem to 1.2rem, which reads as flat. */
h1 {
  font-size: clamp(2.8rem, 8vw, 5.2rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }

p { margin: 0; max-width: 72ch; }
p + p { margin-top: 0.85em; }

a { color: inherit; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--accent); }

/* The rail label. Monospace because it is metadata, not prose. */
/* This can be a span or an h2. Section labels carry the document outline on
   pages where the visible headings sit below them, so they need to win over the
   h2 display rules above rather than inherit them. */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 500;
  display: block;
}

.lede {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 58ch;
  font-weight: 300;
}
.aside { color: var(--muted); font-size: 0.9rem; max-width: 70ch; }

code, pre { font-family: var(--mono); font-size: 0.85rem; }
code { background: var(--code-bg); padding: 0.1em 0.3em; overflow-wrap: anywhere; }
mark { background: var(--mark); color: var(--mark-ink); padding: 0.05em 0.2em; }

.in { color: var(--k-in); font-weight: 600; }
.cp { color: var(--k-cp); font-weight: 600; }
.rs { color: var(--k-rs); font-weight: 600; }
.dt { color: var(--k-dt); font-weight: 600; }
.md { color: var(--k-md); font-weight: 600; }
.arg { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.c { color: var(--muted); font-style: italic; }
.tag {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}

/* ---- tool switch (module-references page) ------------------------------- */

.switch-bar {
  position: sticky; top: 0; z-index: 5;
  background: var(--ground);
  padding-block: 10px; border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ink); gap: 0; }
.tabs button {
  font: 500 0.92rem var(--mono); color: var(--ink); background: transparent;
  border: 0; border-right: 1px solid var(--rule); padding: 7px 18px; cursor: pointer;
  letter-spacing: 0.02em;
}
.tabs button:last-child { border-right: 0; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.panel { display: flex; flex-direction: column; gap: 0; }
.panel-head { display: flex; flex-direction: column; gap: 10px; padding-block: 28px; }
.panel-head h2 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 700; line-height: 1.02; }

.jump { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--mono); font-size: 0.76rem; }
.jump a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.jump a:hover { color: var(--accent); border-color: var(--accent); }

.rule-line {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.2;
  text-wrap: balance; max-width: 30ch; letter-spacing: -0.01em;
}

/* Tree */
.tree {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  padding: 18px 22px; margin: 0; line-height: 1.7; overflow-x: auto; color: var(--ink);
}
.tree .dim { color: var(--muted); }
.tree .n { font-weight: 600; }
.tree .note { color: var(--muted); font-style: italic; }
.tree .lbl { font-weight: 500; padding: 0 6px; border-radius: 3px; background: var(--code-bg); }
.tree .lbl.solo { background: var(--mark); color: var(--mark-ink); }
.tree .lbl.shared { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k-md); color: var(--k-md); }

/* Row lists */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 24px;
  padding-block: 16px; border-bottom: 1px solid var(--rule);
}
.row-who { display: flex; flex-direction: column; gap: 2px; }
.row-who strong { font-weight: 600; }
.row-who span { color: var(--muted); font-size: 0.9rem; }
.row-who .step { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row-body code { background: none; padding: 0; }
.row-body .aside { font-size: 0.92rem; }
.row-code { display: grid; grid-template-columns: 5.8em minmax(0, 1fr); gap: 8px 12px; align-items: baseline; min-width: 0; }
.row-code code { background: none; padding: 0; }
.what { display: flex; align-items: baseline; }
@media (max-width: 640px) { .row { grid-template-columns: 1fr; } }

.cheat-code {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr);
  gap: 4px 12px; align-items: baseline; min-width: 0;
}
.cheat-code .wu { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.cheat-code code { background: none; padding: 0; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.sw.in { background: var(--k-in); } .sw.cp { background: var(--k-cp); } .sw.rs { background: var(--k-rs); }
.sw.dt { background: var(--k-dt); } .sw.md { background: var(--k-md); }

.callout {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.callout .eyebrow { color: var(--warn); }

.traps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.traps li { display: grid; grid-template-columns: minmax(0, 15em) 1fr; gap: 4px 20px; align-items: baseline; }
.traps li code { background: none; padding: 0; }
@media (max-width: 560px) { .traps li { grid-template-columns: 1fr; } }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.85rem; }
.flow .node { border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; background: var(--ground); }
.flow .node.mid { background: var(--mark); color: var(--mark-ink); border-color: transparent; }
.flow .arrow { color: var(--muted); }

/* Code files */
.file { display: flex; flex-direction: column; min-width: 0; }
.file-name {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 500;
  background: var(--ink); color: var(--ground);
  align-self: flex-start; padding: 3px 10px; border-radius: 5px 5px 0 0;
}
.file-name .lines { opacity: 0.7; font-weight: 400; }
.file pre, .snip pre {
  margin: 0; background: var(--code-bg); border-radius: 0 6px 6px 6px; padding: 14px 16px;
  line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.snip pre { border-radius: 6px; }
.gap-mark { color: var(--muted); }
.files { display: flex; flex-direction: column; gap: 18px; }

/* Diagrams */
.diagram { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.diagram svg { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; }
.diagram figcaption { color: var(--muted); font-size: 0.95rem; max-width: 70ch; }
.diagram figcaption strong { color: var(--ink); }
.diagram text { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.diagram .t-title { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.diagram .t-path { fill: var(--muted); }
.diagram .t-label { font-family: var(--body); font-size: 12.5px; fill: var(--muted); }
.diagram .t-small { font-family: var(--body); font-size: 12px; fill: var(--muted); }
.diagram .t-arrow { font-family: var(--body); font-size: 11.5px; fill: var(--muted); }
.diagram .t-val { font-size: 12px; fill: var(--muted); }
.diagram .t-in { fill: var(--k-in); font-weight: 600; }
.diagram .t-cp { fill: var(--k-cp); font-weight: 600; }
.diagram .t-rs { fill: var(--k-rs); font-weight: 600; }
.diagram .t-md { fill: var(--k-md); font-weight: 600; }
.d-wall { fill: var(--ground); stroke: var(--ink); stroke-width: 2; }
.d-you { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.d-slot { fill: var(--paper); stroke: var(--k-in); stroke-width: 1.5; }
.d-mod { fill: var(--paper); stroke: var(--k-md); stroke-width: 1.5; }
.d-res { fill: var(--paper); stroke: var(--k-rs); stroke-width: 1.5; }
.d-outslot { fill: var(--paper); stroke: var(--k-md); stroke-width: 1.5; stroke-dasharray: 5 3; }
.d-wire { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.d-return { stroke: var(--k-md); stroke-width: 1.75; fill: none; stroke-dasharray: 6 4; }
.d-tip { fill: var(--ink); }
.d-tip-md { fill: var(--k-md); }

/* Script, quiz */
.script {
  margin: 0; border-left: 2px solid var(--ink); padding: 4px 0 4px 20px;
  font-size: 1.12rem; line-height: 1.6; max-width: 64ch; display: flex; flex-direction: column; gap: 12px;
}
.script p { max-width: none; }
.quiz { display: flex; flex-direction: column; gap: 10px; }
details { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
summary {
  cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "Show"; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
details[open] summary::after { content: "Hide"; }
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
details .ans { padding: 0 18px 16px; }

.sources { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.95rem; }
.sources a { color: var(--ink); text-underline-offset: 3px; }
footer { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 640px) {
  .tree { font-size: 0.75rem; padding-inline: 14px; }
  .tree .note { display: none; }
}

/* [hidden] has to beat the display rules above it, or hiding a flex container
   does nothing. This came from the artifact wrapper originally. */
[hidden] { display: none !important; }

/* Shared button, used by the drift demo and the game overlay. */
.btn {
  font: 600 0.92rem var(--body); cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 8px; padding: 9px 16px;
}
.btn:hover { background: var(--code-bg); }
.btn.primary { background: var(--ink); color: var(--ground); }
.btn.primary:hover { opacity: 0.86; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Wide screens.

   This was laid out for a narrow reading panel: an 820px shell with paragraphs
   capped tighter still. On a large monitor that leaves a ribbon of text in the
   middle of the screen. Above 1200px the shell widens and the row lists go
   two-up, which is what actually fills the space. Prose keeps a measure,
   because a 200-character line is harder to read, not easier: the fix for a
   wide screen is more columns, not longer lines.

   Delete this block to get the original single column back.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {

  /* The page's dominant pattern. Two-up only once each column can still hold a
     210px label plus a readable body, so it stays single below roughly 1350px. */
  .rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); column-gap: 48px; }
  .quiz { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 10px; }
  .traps { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 10px 48px; }

  /* A little more room, still a measure. */
  p { max-width: 74ch; }
  .rule-line { max-width: 34ch; }
  .callout { max-width: 1000px; }

  /* Fixed-size artwork should not balloon with the shell. The diagrams are
     drawn at 680 units wide and the trees are about 60 characters, so both
     keep their natural size instead of scaling up. */
  .diagram svg { max-width: 860px; }
  .tree { width: fit-content; max-width: 100%; }

  /* Code is the exception: long lines wrap less when the block is wider. */
  .files, .snip { max-width: none; }
}