/* ==========================================================================
   PIT design system v5 — "Dark instrument", light canvas.
   Owner: ISS-167. Binding spec: docs/DESIGN.md, section "v5 — Concept B" plus
   its v5.1 amendments. v5 supersedes v4 ("Warm instrument") in place, which
   superseded v3 ("Utilitarian engineering"), v2 ("Working paper") and v1
   ("Evidence ledger"). Every class name below is the name it had in v1.

   THE ONE IDEA
   ------------
   The page is a warm, quiet document. The instruments on it are dark, and
   they bleed to the edges. Two grounds, and which one a thing sits on tells
   you what it is: prose, headings, tables and chrome live on paper; anything
   that came off the wire — a terminal, an envelope, a diff, a code block, the
   telemetry bar — lives in the dark world with amber, green, red and cyan
   meaning what they always mean here.

   v5 changed four things:
   1. Two token layers instead of one. The PAGE layer (--bg, --ink, --rule …)
      is warm light and is what every inner page inherits. The INSTRUMENT
      layer (--i-canvas, --i-ink, --i-amber …) is dark and is CONSTANT: it
      does not flip with prefers-color-scheme, because a terminal that turns
      into paper in the morning is not a terminal.
   2. Geist Sans + Geist Mono, self-hosted from this origin (two variable
      woff2, latin subset, 52 KB the pair). IBM Plex is retired — the v5
      research named the Plex-on-white combination as part of the tell — and
      its stacks are gone, not merely unreferenced.
   3. Colour means something or it is absent. Four semantic colours, each with
      a light-ground and a dark-ground value, and neither list has a fifth
      "brand" entry. Amber is the control colour and the terminal cursor;
      green is an insertion or a complete day; red is a deletion or a refusal;
      cyan is a clock or a key.
   4. prefers-color-scheme: dark maps the PAGE layer onto the instrument
      world, so a reader who asked for dark gets the instrument edge to edge
      and the two layers converge instead of fighting.

   HOW TO USE THIS FILE
   --------------------
   Link it alone: <link rel="stylesheet" href="/css/app.css">. Do not add a
   per-section stylesheet and do not open a <style> block for anything that
   more than one page could want. (One exception: /css/demo.css owns the
   landing's instrument — the rig, the as-of scrubber, the diff ribbon and the
   telemetry bar — and everything under the `lp-`, `rig-`, `scrub-`, `read-`,
   `tele`, `demo-`, `j-`, `jl` and `jg` prefixes. This file defines none of
   them, and demo.css declares no token of its own.)

   THE CLASS CONTRACT IS FROZEN. v5 restyles; it never renames and never
   deletes. 36 pages use these names. Retired *motifs* — the rubber stamp, the
   perforation, the torn receipt, the serif display face — stay retired by
   being styled quiet, not by having their class removed, so a v1..v4 page
   served against this file stays legible mid-rollout.

   v5 adds two components, documented under COMPONENTS: `.logos` / `.logo`
   (the works-with rail, real marks now) and `.slab` (a dark instrument block
   that any page can drop a real artifact into).

   COLOUR — the page layer (light, canonical)
   ------------------------------------------
     --bg         #FAF7F2  warm paper
     --surface    #F6F2EA  panels, cards, table heads
     --surface-2  #F1ECE2  chips, inline code, sub-heads
     --ink        #171310  text                        17.3:1
     --ink-2      #6B655C  secondary text               5.4:1
     --ink-3      #8A8378  dim labels and control edges 3.5:1 (never body text)
     --rule       #E3DCD2  the hairline
     --rule-2     #C9C0B2  the structural rule, used at 2px where two sections
                           collide at zero padding
     --act        #F59E0B  the control colour: it FILLS a button
     --act-ink    #171310  the label on that fill        8.6:1
     --act-deep   #9A5B06  amber as text, when text is what it has to be 5.1:1
     --ok         #0F7B3E  additions, complete days, passing          5.0:1
     --err        #A61B1B  deletions, restatements, refusals          7.0:1
     --warn       #9A5B06  nulls, partials, caveats                   5.1:1
     --key        #0B6A91  a clock or a key, in light prose           5.6:1

   COLOUR — the instrument layer (dark, constant in both schemes)
   --------------------------------------------------------------
     --i-canvas   #08090C  the terminal's own ground
     --i-surface  #0F1117  a pane inside it
     --i-inset    #161922  a row, a cell, a tab strip
     --i-rule     #1F2430  the grid
     --i-rule-2   #323B4F  focus and the rule that separates panes
     --i-ink      #E6EDF3  text                        16.9:1 on canvas
     --i-ink-2    #8B949E  secondary                    6.5:1
     --i-dim      #484F58  a disabled tick or a hairline; NEVER text
     --i-amber    #F59E0B  cursor, CTA, the live mark   9.3:1
     --i-green    #10B981  insertion, complete          7.9:1
     --i-red      #EF4444  deletion, refusal            5.3:1
     --i-cyan     #38BDF8  timestamps and coverage keys 9.3:1
     --i-yellow   #EAB308  a null or a caveat          10.4:1

   Every pair above is measured, not eyeballed; the tightest in the file is
   --i-red on --i-inset at 4.66:1.

   DARK SCHEME. The page layer is remapped onto the instrument world:
   --bg becomes #08090C, --surface #0F1117, --surface-2 #161922, --ink
   #E6EDF3, --rule #1F2430, and the four semantics take their instrument
   values. The instrument layer does not move, so a rig on a dark page is the
   same rig — it just stops being an island.

   THE V1-V4 NAMES, KEPT RESOLVING. /dashboard/app.css and login.html's
   page-local block read --s2..--s12, --gutter, --mono, --t-xs, --t-sm,
   --muted, --paper, --ok, --miss, --miss-wash, --miss-edge, --ok-wash and
   --line-strong, and neither file is ours to edit. Every older name still
   resolves; see the alias block in §1.

   TYPE
   ----
     --sans   Geist. UI and display, both. Self-hosted, variable 100..900.
     --mono   Geist Mono. Every number, hash, timestamp, key and receipt, and
              every block that came off the wire. Self-hosted, variable.
   Two faces, never a third. Both ship from this origin as latin-subset woff2
   under /fonts/, so no font request leaves the page and
   legal/subprocessors.html still needs no font clause. Each is named first in
   its own stack with a platform ladder under it, so a slow font never blanks
   a paragraph (font-display: swap does the rest).

   Numerals: body carries font-variant-numeric: tabular-nums lining-nums, so a
   figure in running prose is set in Geist and lines up without a mono span.
   Mono is for blocks and data, not for emphasis.

   TWO SCALES, ONE SWITCH (unchanged from v4). The default is the marketing
   scale; a page pulls back to docs density by carrying .shell or .prose,
   which every docs, legal, security and changelog page already does.

     element            marketing (default)      docs (.shell / .prose)
     page title (h1)    clamp(30px,3vw,40px)     24px / 32px, -0.02em
     section head (h2)  19px / 28px              16px / 24px
     h3                 16px                     14px
     prose              15px / 24px              13px / 20px
     lead               17px                     15px
     table / code       12px, lh 1.2 / 1.5       identical — data is data
     micro label        11px                     11px
     telemetry label    10px mono caps, +0.07em, both

   COMPONENTS (markup contract in brackets — keep it identical across pages so
   a section can be restyled without being rewritten)
     Chrome     .site-header > .site-nav > .site-nav-brand, ul.site-nav-links,
                .site-nav-actions (.site-nav-login, .site-btn)
                .site-footer > .site-footer-brand, nav > ul.site-footer-links
                (or .stat-row.site-footer-links), .site-footer-note.
                .site-skip as the first element in <body>
     Layout     .wrap (centred column), .section (band closed by a hairline),
                .hero + .hero-lede, .shell + .side + .main (docs two-column),
                .demo (wide single column), .grid-2 / .grid-3 / .cols, .stack
     Text       .eyebrow, .lead / .lede, .prose, .note, .muted, .fine, .brk,
                .nowrap
     Buttons    .btn is the base and is the filled amber mark. .btn-ghost
                outline, .btn-quiet text-only, .btn-sm small, .btn-wide full.
                .site-btn is the header button. Group them in .cta-row.
     Chips      .chips > li > .chip — small bordered text labels.
     Logos      .logos > li > .logo — v5's works-with rail. A .logo holds an
                inline <svg> (24×24 viewBox, fill=currentColor) plus a
                <span class="logo-t"> label; the mark inherits --ink-3 and
                takes its brand colour from --logo-c on hover. A mark with no
                icon in the CC0 set is a .logo--type: the label alone, set in
                the sans at the same optical weight.
                MARKUP: <li><span class="logo" style="--logo-c:#191919">
                          <svg …>…</svg><span class="logo-t">Claude</span>
                        </span></li>
     Slab       .slab — a dark instrument block for a real artifact on any
                page: .slab-bar (mono label row) + .slab-body. Radius 0.
     Surfaces   .panel (bordered sheet), .panel-head, .card, .card-num
     Data       .code (wrapper) + .code-bar + pre, with .sh-prompt greying a
                leading $; .table-wrap around every table; .tag / .tag-ok /
                .tag-miss / .tag-stamp; .stat-row > .stat > .stat-n + .stat-l;
                .kv definition list; .hash for a sha256.
                A block-level pre is an INSTRUMENT: it is dark in both schemes.
                Inline <code> is not — it stays on paper, because a dark chip
                inside a sentence is a hole in the sentence.
     Ledger     .ledger > .ledger-head + pre with <i> around each pipe.
     Notices    .callout, .callout-ok, .callout-miss, .callout-stamp, .notice
     Diff       .cut > .cut-pane ×2; .diff > .diff-add / .diff-del
     Plans      .plan, .plan-price, .plan-corpus, .plan-list, .plan-featured
     Controls   .seg, .field, .attest, .pane/.count/.path (the /demo panes;
                their class names are set from demo.html JS, so .btn,
                .btn-ghost, .count, .muted, .ok and .miss must keep working)
     Retired    .stampmark, .receipt, .rule-perf, .callout-stamp, .tag-stamp,
                .stamp keep their names and stay quiet.

   RULES
   -----
   1. 375px is the floor. No page scrolls sideways. Anything with an intrinsic
      minimum width scrolls inside its own box.
   2. Hit targets are 44px tall on touch, 36px on a mouse.
   3. Focus is always visible: a 2px ring at a 2px offset, never removed. On
      paper it is ink; on an instrument it is --i-cyan.
   4. Colour is never the only signal. A missing certificate says "missing";
      a diff line carries its own + or - in the markup.
   5. Motion is a 100ms colour or border change on something you are pointing
      at, plus the as-of scrubber, which is a control being dragged. No
      entrance animations, no smooth scroll, no parallax.
   6. Text clears WCAG AA on whichever of the two grounds it sits on, in both
      schemes. Measured — see the ISS-167 Result.
   7. Radius 0. Two exceptions, both 2px, both controls: .btn and .field.
      No shadows anywhere; a 1px rule or a 2px structural rule does the work.
   8. THE SIX STRUCTURAL TELLS (docs/DESIGN.md v5) are broken on purpose and
      staying broken: no centred monologue, no eyebrow→H2→P→three-cards
      cadence twice in a row, no padded uniformity, no single-accent
      cowardice, no simulated artifacts, no zero-bleed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. The two faces. Self-hosted, latin subset, variable — one file per family
      covers 100..900, which is why v5 can afford a second family at all.
      Fetched from the Google Fonts css2 API and served from this origin; no
      request leaves the page at render time.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* --- THE PAGE LAYER. Warm paper, canonical. Every value measured; the
         tightest text pair is --ok on --surface-2 at 4.55:1. --- */
  --bg: #faf7f2;
  --surface: #f6f2ea;
  --surface-2: #f1ece2;
  --ink: #171310;
  --ink-2: #6b655c;
  --ink-3: #8a8378;
  --rule: #e3dcd2;
  --rule-2: #c9c0b2;
  --field-line: #8a8378;

  /* The control colour. --act fills; --act-ink is the label on the fill;
     --act-deep is the amber that had to be text and was darkened until it
     could be. Amber never tints a panel and never colours a heading. */
  --act: #f59e0b;
  --act-ink: #171310;
  --act-deep: #9a5b06;
  --act-hover: #e08d05;

  /* Semantic, on paper. Each has an instrument twin below. */
  --ok: #0f7b3e;
  --err: #a61b1b;
  --warn: #9a5b06;
  --key: #0b6a91;

  --ok-wash: #edf6f0;
  --err-wash: #fbf0ee;
  --warn-wash: #f9f2e4;

  /* --- THE INSTRUMENT LAYER. Dark, and CONSTANT: these eleven values are
         identical under prefers-color-scheme: dark. A terminal that turns
         into paper in the morning is not a terminal. --- */
  --i-canvas: #08090c;
  --i-surface: #0f1117;
  --i-inset: #161922;
  --i-rule: #1f2430;
  --i-rule-2: #323b4f;
  --i-ink: #e6edf3;
  --i-ink-2: #8b949e;
  --i-dim: #484f58;
  --i-amber: #f59e0b;
  --i-green: #10b981;
  --i-red: #ef4444;
  --i-cyan: #38bdf8;
  --i-yellow: #eab308;

  /* --- v1-v4 names, kept resolving. See the header. --- */
  --paper: var(--ink);
  --muted: var(--ink-2);
  --line: var(--rule);
  --line-strong: var(--rule-2);
  --wash: var(--surface);
  --paper-wash: var(--surface);
  --stamp: var(--ink);
  --stamp-ink: var(--bg);
  --miss: var(--err);
  --panel: var(--surface);
  --panel-2: var(--surface-2);
  --panel-ink: var(--ink);
  --panel-ink-2: var(--ink-2);
  --panel-rule: var(--rule);
  --panel-rule-strong: var(--rule-2);
  --panel-wash: var(--surface-2);
  --panel-act: var(--ink);
  --panel-ok: var(--ok);
  --panel-miss: var(--err);
  --ok-edge: var(--ok);
  --miss-edge: var(--err);
  --warn-edge: var(--warn);
  --stamp-edge: var(--rule-2);
  --miss-wash: var(--err-wash);
  --stamp-wash: var(--surface-2);
  --display: var(--sans);

  /* --- Type. --- */
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono",
    "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs: 0.6875rem; /* 11px  micro label */
  --t-sm: 0.75rem; /* 12px  table, caption, fine print */
  --t-ui: 0.875rem; /* 14px  chrome, controls, card prose */
  --t-base: 0.9375rem; /* 15px  prose */
  --t-md: 1.0625rem; /* 17px  lead */
  --t-h3: 1rem; /* 16px  sub-head */
  --t-lg: 1.1875rem; /* 19px  section head */
  --t-xl: 1.1875rem;
  --t-2xl: 1.375rem;
  --t-hero: clamp(1.875rem, 1.1rem + 3vw, 2.5rem); /* 30px → 40px  h1 */
  --t-3xl: 1.5rem;
  --t-stat: 1.625rem; /* 26px  pull-stat figure */
  --t-tele: 0.625rem; /* 10px  telemetry label, mono caps */

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-loose: 1.6;
  --lh-data: 1.2;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s7: 1.75rem;
  --s8: 2rem;
  --s9: 2.5rem;
  --s10: 3rem;
  --s11: 3.5rem;
  --s12: 4rem;
  --s14: 5rem;

  --page: 68rem;
  --measure: 62ch;
  --gutter: clamp(1rem, 2.5vw, 2rem);
  --r-1: 2px;
  --r-2: 0px;
  --r-pill: 2px;
  --band: clamp(1.75rem, 3vw, 2.75rem);
  --header-h: 2.75rem;
  --tele-h: 1.75rem;
}

/* Dark is the page layer folded into the instrument world. Nothing under
   --i-* moves: the rig on a dark page is the same rig, it just stops being an
   island. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #08090c;
    --surface: #0f1117;
    --surface-2: #161922;
    --ink: #e6edf3;
    --ink-2: #8b949e;
    --ink-3: #6b7688;
    --rule: #1f2430;
    --rule-2: #323b4f;
    --field-line: #6b7688;

    --act: #f59e0b;
    --act-ink: #08090c;
    --act-deep: #f59e0b;
    --act-hover: #fbb43a;

    --ok: #10b981;
    --err: #ef4444;
    --warn: #eab308;
    --key: #38bdf8;

    --ok-wash: #0c1c17;
    --err-wash: #21100f;
    --warn-wash: #1e1808;
  }
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

/* No smooth scroll: an inspector jumps to the anchor. scroll-padding keeps the
   target clear of the sticky header. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s3));
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--lh-normal);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 1 auto;
  min-width: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* One family, one weight step. Every size comes from a token, so the docs
   scale and the marketing scale are the same rules read against a different
   set of numbers. On a reference page a title is still 24px and a section
   head still 16px; on a marketing page they are 30-40px and 19px, which is
   the size a stranger reads a claim at rather than the size a user who
   already bought scans a field list at. */
h1,
h2,
h3,
h4 {
  margin: 0 0 var(--s3);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--lh-snug);
}

h1 {
  max-width: 30ch;
  margin-bottom: var(--s4);
  font-size: var(--t-hero);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* THE PINNING RULE. A section head is fixed to the block it names by a 1px
   rule, not by a field of whitespace. This is the structural signature of the
   whole system; every context that borrows h2 for something that is not a
   section head switches it off explicitly below. */
h2 {
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s2);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
}

h3 {
  font-size: var(--t-h3);
}

h4 {
  font-size: var(--t-base);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--s4);
}

ul,
ol {
  padding-left: 1.1rem;
}

li {
  margin-bottom: var(--s1);
}

li::marker {
  color: var(--ink-2);
}

hr {
  height: 0;
  margin: var(--s6) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* There is no link colour, because a link colour becomes the brand accent and
   v3 has no brand accent. The underline is the affordance — which is also the
   accessible signal, since it does not depend on colour at all. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: text-decoration-color 100ms linear, color 100ms linear;
}

a:hover {
  text-decoration-color: currentColor;
}

strong,
b {
  font-weight: 600;
}

small {
  font-size: var(--t-sm);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 0;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

.site-skip {
  position: absolute;
  top: 0;
  left: -999px;
}

.site-skip:focus {
  z-index: 40;
  top: var(--s2);
  left: var(--s2);
  border: 1px solid var(--ink);
  border-radius: var(--r-1);
  background: var(--ink);
  padding: var(--s2) var(--s3);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--band);
}

.section::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--rule);
  content: "";
}

.section:last-of-type::after {
  display: none;
}

/* Retired motif, class kept: a v1 page's tear line is a plain rule. */
.rule-perf {
  height: 1px;
  margin: var(--s6) 0;
  border: 0;
  background: var(--rule);
}

/* A section head is a heading and at most one line of context, sitting on the
   rule that ties it to what follows. It does not get 40px of air. */
/* Wider than the prose measure so a 40px headline gets two lines instead of
   three; the paragraph under it is pulled back to the measure below, because
   a 700px line of 15px text is not a line anybody finishes. */
.section-head {
  max-width: 44rem;
  margin-bottom: var(--s5);
}

.section-head h1,
.section-head h2 {
  margin-top: 0;
  margin-bottom: var(--s2);
}

.section-head h2 {
  font-size: var(--t-lg);
}

/* One line of context under the head, at prose size. A .lead / .lede /
   .hero-lede inside a section head keeps its own larger size — it is the
   sentence a stranger reads after the headline, and it is excluded here
   because this selector would otherwise outrank it. */
.section-head p:not(.lead):not(.lede):not(.hero-lede) {
  max-width: var(--measure);
  margin-bottom: 0;
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
}

.section-head > :last-child {
  margin-bottom: 0;
}

.stack > * + * {
  margin-top: var(--s4);
}

/* A line of prose gets a measure even when nothing wraps it (v4). At v3's
   13px a paragraph running the column's full 1024px was already long; at 15px
   it is 130 characters, which nobody reads twice. Classed paragraphs are left
   alone — .lead, .note and .prose already carry a measure, and .demo-label is
   a mono line whose ch is a different width. */
.wrap > p:not([class]),
.wrap > ul:not([class]),
.wrap > ol:not([class]),
.wrap > .fine,
.wrap > .callout {
  max-width: var(--measure);
}

/* The key/value list is the two-column form of a small table. As a direct
   child of the column it takes a measure too: a 1024px-wide row with "7" at
   the far end of it is a table pretending to be a layout. */
.wrap > .kv {
  max-width: 44rem;
}

.grid-2,
.grid-3,
.cols {
  display: grid;
  gap: var(--s5);
}

.grid-2,
.cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* THE SCALE SWITCH (v4). :root ships the marketing scale; a page that
   carries .shell, .prose or .demo is a reference or tool page and takes v3's
   docs density back, token for token. Redeclaring the custom properties
   rather than restating font-size on twenty selectors is what makes this one
   block instead of a second stylesheet, and it is why no page needed a new
   class: /docs, /legal, /security, /status and /changelog already carry
   .shell, /demo carries .demo, and .prose covers a reference column outside
   either. The third selector reaches the title band docs pages put ABOVE
   their shell — main > section.section > h1 — which is inside <main> and so
   outside .shell. A browser with no :has() renders that one band at the
   marketing size and the rest of the page correctly, which is a difference in
   degree, not a broken page.
   --t-xs and --t-sm are absent here because they never changed. */
.shell,
.prose,
.demo,
main:has(> .shell) {
  --t-ui: 0.8125rem; /* 13px */
  --t-base: 0.8125rem; /* 13px */
  --t-md: 0.9375rem; /* 15px */
  --t-h3: 0.875rem; /* 14px */
  --t-lg: 1rem; /* 16px */
  --t-xl: 1rem;
  --t-2xl: 1.125rem;
  --t-hero: 1.5rem; /* 24px */
  --t-stat: 1.5rem;
  --lh-tight: 1.3333;
  --lh-snug: 1.5;
  --lh-normal: 1.5385;
  --measure: 68ch;
  --band: clamp(1.5rem, 2.5vw, 2rem);

  font-size: var(--t-base);
  line-height: var(--lh-normal);
}

/* Docs two-column shell: contents on the left, reference on the right. */
.shell {
  display: grid;
  width: 100%;
  max-width: var(--page);
  flex: 1;
  margin-inline: auto;
  padding: var(--s7) var(--gutter) var(--s11);
  gap: var(--s6) var(--s8);
  grid-template-columns: 12rem minmax(0, 1fr);
}

.side {
  font-size: var(--t-ui);
}

.side > * {
  position: sticky;
  top: calc(var(--header-h) + var(--s4));
}

.side h2 {
  margin: 0 0 var(--s2);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s1);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.side a {
  display: block;
  margin-left: calc(var(--s3) * -1);
  border-left: 1px solid transparent;
  padding: 2px 0 2px var(--s3);
  color: var(--ink-2);
  text-decoration: none;
}

.side a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.side a[aria-current="page"] {
  border-left-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}

.main {
  min-width: 0;
}

/* Wide single column: /demo and anything else that is mostly panels. */
.demo {
  width: 100%;
  max-width: var(--page);
  flex: 1;
  margin-inline: auto;
  padding: var(--s7) var(--gutter) var(--s11);
}

.prose {
  max-width: var(--measure);
}

.prose h2 {
  margin-top: var(--s7);
}

.prose h3 {
  margin-top: var(--s5);
}

.prose > :first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. Header and footer — the five-item nav and four-column footer survive,
      in docs register: compact, 13px, functional.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}

/* v5: the nav runs the full width of the window rather than centring itself
   in a 68rem column. The landing page has no centred column at all, and a
   header that keeps one would draw the gutter the page spent the whole design
   getting rid of. Every page gets the same geometry, which is the point —
   clicking from / to /docs must not move the brand. */
.site-nav {
  display: flex;
  width: 100%;
  min-height: var(--header-h);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--s2) var(--gutter);
  gap: var(--s2) var(--s5);
  font-size: var(--t-ui);
}

.site-nav-brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.site-nav-brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.site-nav-links,
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: var(--s1) var(--s5);
  list-style: none;
}

.site-nav-links {
  flex: 1 1 auto;
}

.site-nav-links li {
  margin: 0;
}

.site-nav-links a,
.site-nav-login,
.site-nav-sub {
  color: var(--ink-2);
  text-decoration: none;
}

.site-nav-links a:hover,
.site-nav-login:hover,
.site-nav-sub:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-nav-links a[aria-current="page"],
.site-nav-login[aria-current="page"],
.site-nav-menu > summary[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* The Products menu (site v6, docs/SITE.md). The ONE new pattern this file
   gains for v6, and the reason it is new: fifteen products in four families
   do not fit a flat five-item nav, and every alternative that does fit is
   worse. A <details> opens from the keyboard with no script, so the nav keeps
   working with JavaScript off — which is the same rule the telemetry bar and
   the scrubber already follow. The panel is taken out of flow because a
   disclosure that reflows the header pushes the page down under the reader's
   pointer mid-click. */
.site-nav-menu {
  position: relative;
  display: inline-flex;
}

.site-nav-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  cursor: pointer;
}

/* Safari still draws the disclosure triangle from its own pseudo-element. */
.site-nav-menu > summary::-webkit-details-marker {
  display: none;
}

/* The caret is drawn from borders rather than typed as a character: a glyph
   would inherit the font's own baseline and sit a pixel off the label. */
.site-nav-menu > summary::after {
  border-top: 4px solid currentColor;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  content: "";
}

.site-nav-menu[open] > summary {
  color: var(--ink);
}

.site-nav-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + var(--s3));
  left: 0;
  display: grid;
  max-width: calc(100vw - var(--gutter) * 2);
  border: 1px solid var(--rule-2);
  background: var(--bg);
  padding: var(--s4) var(--s5);
  gap: var(--s4) var(--s6);
  grid-template-columns: repeat(4, minmax(9rem, max-content));
}

.site-nav-panel > div > p {
  margin: 0 0 var(--s2);
}

.site-nav-panel a {
  display: block;
  padding: 2px 0;
  color: var(--ink-2);
  text-decoration: none;
}

.site-nav-panel a:hover,
.site-nav-panel a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Two columns below the width where four fit, and an explicit width: an
   absolutely positioned grid shrink-wraps, and a 1fr track is allowed to
   collapse to nothing when it does. Two columns rather than one because
   fifteen stacked links are taller than a phone screen, and the panel is out
   of flow, so a reader cannot scroll to what runs off the bottom. */
@media (max-width: 760px) {
  .site-nav-panel {
    width: calc(100vw - var(--gutter) * 2);
    padding: var(--s3) var(--s4);
    gap: var(--s3) var(--s4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
  gap: var(--s2) var(--s4);
}

.site-btn {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  border: 1px solid var(--act);
  border-radius: var(--r-1);
  background: var(--act);
  padding: 0 var(--s4);
  color: var(--act-ink);
  font-family: inherit;
  font-size: var(--t-ui);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 100ms linear, border-color 100ms linear;
}

.site-btn:hover {
  border-color: var(--act-hover);
  background: var(--act-hover);
  color: var(--act-ink);
  text-decoration: none;
}

/* v5: full width, like the header. A centred footer under a full-bleed page
   reads as a different site's footer. */
.site-footer {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--rule);
  padding: var(--s6) var(--gutter) var(--s8);
  gap: var(--s5) var(--s8);
  color: var(--ink-2);
  font-size: var(--t-ui);
}

.site-footer-brand {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.site-footer nav {
  min-width: 0;
}

/* The one-line form of the footer nav. The four-column form is a .stat-row
   carrying this class; it inherits the column rules from §7 and only needs
   its links to stop looking like list items. */
.site-footer-links li {
  display: flex;
  margin: 0;
  gap: var(--s5);
}

.site-footer-links {
  gap: var(--s1) var(--s5);
}

.site-footer-links li:not(:last-child)::after {
  color: var(--rule-2);
  content: "|";
}

.site-footer-links a {
  color: var(--ink-2);
  text-decoration: none;
}

.site-footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.site-footer-links.stat-row {
  margin-bottom: 0;
}

.site-footer-links.stat-row li::after {
  content: none;
}

.site-footer-note {
  margin: 0;
  border-top: 1px solid var(--rule);
  padding-top: var(--s3);
  font-size: var(--t-sm);
}

@media (min-width: 48rem) {
  .site-footer {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .site-footer-note {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   5. Text utilities
   -------------------------------------------------------------------------- */

/* A label, not a fashion statement: no uppercase, no letter-spaced caps, and
   no dangling rule before it. The copy is already sentence case. */
.eyebrow {
  display: block;
  margin: 0 0 var(--s2);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-transform: none;
}

/* v2's .eyebrow drew a 1.6rem dash before itself and --plain switched it off.
   The dash is gone, so this is a no-op kept resolving for the pages using it. */
.eyebrow--plain::before {
  content: none;
}

.status-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
  border-radius: var(--r-pill);
  background: currentColor;
}

/* 15px is the ceiling, and only for a lead. Body prose is 13px everywhere. */
.lead,
.lede {
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: var(--lh-loose);
}

.note {
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: var(--t-ui);
}

.fine {
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.muted {
  color: var(--ink-2);
}

.paper {
  color: var(--ink);
}

/* Retired: v1/v2's accent utility. There is no accent, so this is ink. */
.stamp {
  color: var(--ink);
}

.ok {
  color: var(--ok);
}

.miss {
  color: var(--err);
}

.brk {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.nowrap {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Code — a light panel with a hairline, not an inverted field of ink.
   -------------------------------------------------------------------------- */

code,
kbd,
samp,
.mono {
  font-family: var(--mono);
  font-size: 0.9231em;
  font-variant-numeric: tabular-nums;
}

/* Inline code is data: full ink, never the muted colour of whatever box it
   landed in. */
code {
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--surface-2);
  padding: 0.05em 0.3em;
  color: var(--ink);
  overflow-wrap: break-word;
}

kbd {
  border: 1px solid var(--rule-2);
  border-bottom-width: 2px;
  border-radius: var(--r-1);
  background: var(--surface-2);
  padding: 0.05em 0.3em;
}

pre {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
  padding: var(--s3) var(--s4);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  tab-size: 2;
}

pre code {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* .code wraps a pre so it can carry a label bar naming the file or command. */
.code {
  overflow: hidden;
  margin: 0 0 var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
}

.code pre {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.code-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  padding: var(--s1) var(--s4);
  gap: var(--s1) var(--s3);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
}

.code-bar b {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* A shell prompt. Put the $ in the markup; this only greys it. */
.sh-prompt {
  color: var(--ink-2);
  user-select: none;
}

/* --------------------------------------------------------------------------
   7. Tables, tags, counts — native <table>, tabular figures, hard rules,
      square corners, and the box scrolls, never the page.
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 var(--s5);
  border-bottom: 1px solid var(--rule);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--lh-data);
}

caption {
  padding-bottom: var(--s1);
  color: var(--ink-2);
  font-size: var(--t-sm);
  text-align: left;
}

th,
td {
  border-bottom: 1px solid var(--rule);
  padding: var(--s1) var(--s2);
  text-align: left;
  vertical-align: top;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  border-bottom: 1px solid var(--rule-2);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

tbody tr:nth-child(even) th,
tbody tr:nth-child(even) td {
  background: var(--wash);
}

tbody th[scope="row"] {
  color: var(--ink);
  font-weight: 600;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

/* A state chip. Sans with tabular figures — mono is for blocks and tables. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-1);
  background: var(--surface-2);
  padding: 0 0.3rem;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
}

.tag-ok {
  border-color: var(--ok);
  background: var(--ok-wash);
  color: var(--ok);
}

.tag-miss {
  border-color: var(--err);
  background: var(--err-wash);
  color: var(--err);
}

/* Retired motif, class kept: the stamp is retired, so it is a plain chip. */
.tag-stamp {
  border-color: var(--rule-2);
  background: var(--surface-2);
  color: var(--ink-2);
}

/* The compatibility row (v4). Text, not logos: every name here belongs to
   somebody else, and a wall of borrowed marks is both a trademark question
   and the exact look this audience reads as a landing-page template. Set in
   mono because each one is a thing you type into a config or an import line.
   A chip that is an <a> goes somewhere; a chip that is not, does not, and
   nothing about it pretends otherwise. */
.chips {
  display: flex;
  max-width: 48rem;
  flex-wrap: wrap;
  margin: 0 0 var(--s4);
  padding: 0;
  gap: var(--s2);
  list-style: none;
}

/* The sentence that qualifies the row is part of the row: it takes the prose
   measure rather than the full page width, so the two read as one block. */
.chips + .fine,
.chips + .note {
  max-width: var(--measure);
}

.chips li {
  display: flex;
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-1);
  background: var(--surface);
  padding: 0.25rem 0.5rem;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

a.chip {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--act);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  transition: border-color 100ms linear;
}

a.chip:hover {
  border-color: var(--act);
  color: var(--ink);
}

/* A row of counts, divided by hairlines. Also the four-column footer. */
.stat-row {
  display: grid;
  margin: 0 0 var(--s5);
  border-top: 1px solid var(--rule);
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.stat {
  border-bottom: 1px solid var(--rule);
  padding: var(--s3) var(--s5) var(--s3) 0;
}

.stat + .stat {
  border-left: 1px solid var(--rule);
  padding-left: var(--s5);
}

/* A figure is a prose numeral: sans, tabular lining, never a mono span. */
.stat-n {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.stat-l {
  display: block;
  margin-top: 2px;
  color: var(--ink-2);
  font-size: var(--t-ui);
  line-height: 1.5;
}

.kv {
  display: grid;
  margin: 0 0 var(--s5);
  border-top: 1px solid var(--rule);
  gap: 0;
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
}

.kv dt,
.kv dd {
  margin: 0;
  border-bottom: 1px solid var(--rule);
  padding: var(--s1) var(--s4) var(--s1) 0;
}

.kv dt {
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.kv dd {
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   8. Buttons. v4 fills the primary mark with the accent. v3 filled it with
      ink because there was no accent to spend; now there is one, and a
      buy button is exactly what it is for. Everything that is not a call to
      action stays ink or outline — see .seg at the end of this section.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--act);
  border-radius: var(--r-1);
  background: var(--act);
  padding: 0 var(--s5);
  color: var(--act-ink);
  font-family: inherit;
  font-size: var(--t-ui);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 100ms linear, border-color 100ms linear,
    color 100ms linear;
}

.btn:hover {
  border-color: var(--act-hover);
  background: var(--act-hover);
  color: var(--act-ink);
  text-decoration: none;
}

.btn-ghost {
  border-color: var(--field-line);
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--ink);
  background: var(--surface-2);
  color: var(--ink);
}

.btn-quiet {
  min-height: 2rem;
  border-color: transparent;
  background: transparent;
  padding: 0;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}

.btn-quiet:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  text-decoration-color: currentColor;
}

.btn-sm {
  min-height: 1.875rem;
  padding: 0 var(--s3);
  font-size: var(--t-sm);
}

.btn-wide {
  width: 100%;
}

/* A segmented control is a control, not a call to action: the selected
   segment stays ink so a page never shows two accent fills competing. The
   /demo tabs are .btn / .btn-ghost written from demo.html's JS, and this is
   the rule that keeps that page one-accent. */
.seg .btn,
.btn[aria-pressed="true"],
.btn[aria-current="page"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.seg .btn:hover,
.btn[aria-pressed="true"]:hover,
.btn[aria-current="page"]:hover {
  border-color: var(--ink-2);
  background: var(--ink-2);
  color: var(--bg);
}

.seg .btn-ghost,
.seg .btn-ghost:hover {
  border-color: var(--field-line);
  background: transparent;
  color: var(--ink);
}

.seg .btn-ghost:hover {
  border-color: var(--ink);
  background: var(--surface-2);
}

.btn[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* RULE 2: 44px on touch, the docs register's 36px on a mouse. */
@media (pointer: coarse) {
  .btn,
  .site-btn,
  input,
  select,
  textarea {
    min-height: 2.75rem;
  }

  .btn-sm,
  .seg .btn {
    min-height: 2.5rem;
  }

  .btn-quiet {
    min-height: 2.75rem;
  }
}

.cta-row,
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--s5) 0 0;
  gap: var(--s2) var(--s4);
}

.cta-row + *,
.actions + * {
  margin-top: var(--s5);
}

/* --------------------------------------------------------------------------
   9. Surfaces
   -------------------------------------------------------------------------- */

.panel {
  overflow: hidden;
  margin: 0 0 var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
  padding: var(--s4);
}

.panel > :last-child {
  margin-bottom: 0;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  padding: var(--s2) var(--s4);
  gap: var(--s1) var(--s3);
}

.panel-head h2,
.panel-head h3 {
  margin: 0;
  border-bottom: 0;
  padding-bottom: 0;
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-weight: 600;
  letter-spacing: 0;
}

.card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
  padding: var(--s4);
}

.card > :last-child {
  margin-bottom: 0;
}

.card h2,
.card h3 {
  margin-bottom: var(--s2);
  border-bottom: 0;
  padding-bottom: 0;
  font-size: var(--t-h3);
}

.card p,
.card li {
  color: var(--ink);
  font-size: var(--t-ui);
}

.card-num {
  margin: 0 0 var(--s2);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* A callout is a box with a 2px functional edge. 3px would be the
   overcorrection tell; the colour is the state, and the copy says it too. */
.callout,
.notice {
  margin: 0 0 var(--s5);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-2);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--surface);
  padding: var(--s3) var(--s4);
  color: var(--ink-2);
  font-size: var(--t-ui);
}

.callout > :last-child,
.notice > :last-child {
  margin-bottom: 0;
}

.callout strong,
.notice strong {
  color: var(--ink);
}

.callout-miss,
.notice--miss {
  border-left-color: var(--err);
  background: var(--err-wash);
}

.callout-ok,
.notice--ok {
  border-left-color: var(--ok);
  background: var(--ok-wash);
}

/* Retired motif, class kept: the stamped callout is now the neutral one. */
.callout-stamp {
  border-left-color: var(--ink);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   10. The diff — v3's one visual signature, and the only place colour is
       allowed to carry structure. Used for REAL diffs only: as-of cuts,
       restatements, PAC rewrites. Never decoration, never a mood.
   -------------------------------------------------------------------------- */

/* .cut > .cut-pane × 2. Left is the earlier cut, right the later one, and the
   later one is an addition to the record — so it takes the + treatment: a
   green edge, a green head rule, and the faint green ground a diff uses.
   Colour is never the only signal here either: the two heads print their own
   as_of instants and the two counts differ.

   .cut carries no box of its own, because demo.html puts two .panel panes
   inside one and a second frame around a framed thing is noise. */
.cut {
  position: relative;
  display: grid;
  margin: 0 0 var(--s5);
  gap: var(--s5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The gap between the two instants, printed on the boundary as a mono chip.
   No dashed perforation, no vertical text. */
.cut[data-delta] {
  padding-top: var(--s6);
}

.cut[data-delta]::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--bg);
  padding: 0 var(--s2);
  color: var(--ink-2);
  content: attr(data-delta);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  white-space: nowrap;
}

.cut-pane {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
}

.cut-pane.cut-pane--after {
  border-color: var(--ok);
  background: var(--ok-wash);
}

.cut-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  padding: var(--s1) var(--s3);
  gap: var(--s1) var(--s2);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.6;
}

.cut-pane--after .cut-head {
  border-bottom-color: var(--ok);
  color: var(--ink);
}

.cut-body {
  flex: 1;
  padding: var(--s3);
}

/* The one place a command wraps instead of scrolling: a URL clipped at the
   pane edge reads as a different URL, which is worse than a soft wrap. */
.cut-body pre {
  overflow-x: visible;
  margin: 0 0 var(--s2);
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cut-body > :last-child {
  margin-bottom: 0;
}

.cut-out {
  display: block;
  margin: 0 0 var(--s2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.cut-note {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
}

/* Foot of a cut pane: hash on the left, provenance mark on the right. */
.cut-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: var(--s3);
  gap: var(--s4);
}

.cut-foot .hash {
  flex: 1 1 auto;
  min-width: 0;
}

/* A line diff. MARKUP: the wrapper may be a <div> or a <pre>; whitespace
   between the lines is ignored either way, and each line carries its own
   + or - in the markup so it survives a copy and does not depend on colour.

     <div class="diff">
       <span class="diff-del">- rows = edgar_latest("SIVB")</span>
       <span class="diff-add">+ rows = pit.query_as_of("SIVB", known_at=t)</span>
     </div> */
.diff {
  overflow-x: auto;
  margin: 0 0 var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
  padding: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: normal;
}

.diff-add,
.diff-del {
  display: block;
  border-left: 2px solid transparent;
  padding: 2px var(--s3);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diff-add {
  border-left-color: var(--ok);
  background: var(--ok-wash);
}

.diff-del {
  border-left-color: var(--err);
  background: var(--err-wash);
}

/* --------------------------------------------------------------------------
   11. Ledger and provenance
   -------------------------------------------------------------------------- */

/* A pipe-delimited ledger row, after EDGAR master.idx. Wrap each separator in
   <i> so the columns stay readable; the text stays copyable. */
.ledger {
  overflow: hidden;
  margin: 0 0 var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
  color: var(--ink);
}

.ledger-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  padding: var(--s1) var(--s3);
  gap: var(--s1) var(--s3);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0;
  line-height: 1.6;
}

.ledger pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  padding: var(--s3);
  font-size: var(--t-xs);
  line-height: 1.7;
}

.ledger i {
  padding: 0 0.15em;
  color: var(--ink-2);
  font-style: normal;
}

.ledger .col {
  color: var(--ink-2);
}

/* Retired motif, class kept. v1 pages carry <span class="stampmark"> and have
   to stay legible against this file; the rubber stamp — rotation, double
   frame, 72% opacity — has been gone since v2, and the mono microtype goes
   with it now. What is left is what it was always for: a provenance mark
   behind a hairline, at the end of the line it marks. */
.stampmark {
  display: inline-block;
  flex: none;
  transform: none;
  border: 0;
  border-left: 1px solid var(--rule-2);
  border-radius: 0;
  outline: 0;
  padding: 0 0 0 var(--s3);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  line-height: 1.5;
  opacity: 1;
  text-align: left;
  text-transform: none;
}

.stampmark b {
  display: block;
  color: var(--ink);
  font-size: 1em;
  font-weight: 600;
  letter-spacing: 0;
}

/* A provenance line on the left, its mark pushed to the end of the same row.
   It wraps under the line on a narrow screen. */
.stamp-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 var(--s5);
  gap: var(--s2) var(--s5);
}

.stamp-line > p {
  flex: 1 1 20rem;
  max-width: var(--measure);
  margin: 0;
}

/* A sha256 is an artifact, and an untruncated one wrapping over two lines is
   honest. Mono, small, and it never gets an ellipsis. */
.hash {
  display: block;
  margin: 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Retired motif, class kept: the torn receipt edge was a costume, and v2's
   doubled rule replacing it was still a flourish. A block that stands for a
   certificate closes on one structural rule. */
.receipt {
  position: relative;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: var(--s4);
}

/* --------------------------------------------------------------------------
   12. Plans
   -------------------------------------------------------------------------- */

.plan {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
  padding: var(--s5);
}

/* The plan a page arrived asking for wears the accent on its top edge —
   2px, the same weight a callout's functional edge gets. */
.plan-featured {
  border-color: var(--rule-2);
  border-top: 2px solid var(--act);
}

.plan h2,
.plan h3 {
  margin: 0 0 var(--s1);
  border-bottom: 0;
  padding-bottom: 0;
  font-family: var(--sans);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: 0;
}

/* A price is a prose numeral: sans, tabular lining figures. */
.plan .plan-price {
  display: flex;
  align-items: baseline;
  margin: 0 0 var(--s3);
  gap: var(--s2);
  font-family: var(--sans);
  font-size: var(--t-hero);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
}

.plan .plan-price span {
  color: var(--ink-2);
  font-size: var(--t-ui);
  font-weight: 400;
  letter-spacing: 0;
}

.plan .plan-corpus {
  margin: 0 0 var(--s4);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s3) 0;
  color: var(--ink-2);
  font-size: var(--t-ui);
}

.plan .plan-list {
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}

.plan .plan-list li {
  display: grid;
  margin: 0;
  padding: var(--s1) 0;
  gap: var(--s2);
  grid-template-columns: 0.9rem minmax(0, 1fr);
  font-size: var(--t-ui);
}

/* + and - are the diff alphabet, and a feature list is a diff against the
   tier below it. Colour agrees with the glyph; the glyph does the work. */
.plan .plan-list li::before {
  color: var(--ok);
  content: "+";
  font-family: var(--mono);
}

.plan .plan-list li.off {
  color: var(--ink-2);
}

.plan .plan-list li.off::before {
  color: var(--ink-2);
  content: "\2212";
}

.plan-foot {
  margin-top: auto;
  margin-bottom: 0;
}

/* Both plan buttons sit at equal weight until a plan is actually chosen — by
   ?plan= in the URL, or by whichever card carries .plan-featured. Nothing here
   declares one tier the "popular" one; with two plans and no customers yet,
   that label would be invented. */
.plan-featured .btn {
  border-color: var(--act);
  background: var(--act);
  color: var(--act-ink);
}

/* A price is the one number on a marketing page that deserves display size. */
.plan {
  --t-hero: 1.75rem;
}

/* --------------------------------------------------------------------------
   13. Controls, forms, and the /demo panes
   -------------------------------------------------------------------------- */

.seg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 var(--s3);
  gap: var(--s1);
}

.seg > .muted {
  margin-right: var(--s1);
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.seg .btn {
  min-height: 1.875rem;
  padding: 0 var(--s3);
  font-size: var(--t-sm);
}

.field {
  display: grid;
  margin: 0 0 var(--s4);
  gap: var(--s1);
}

label {
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  min-height: 2.25rem;
  border: 1px solid var(--field-line);
  border-radius: var(--r-1);
  background: var(--bg);
  padding: var(--s1) var(--s2);
  color: var(--ink);
  font-size: var(--t-ui);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-2);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
}

input[type="checkbox"],
input[type="radio"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  flex: none;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  accent-color: var(--ink);
}

.attest {
  display: grid;
  align-items: start;
  margin: 0;
  gap: var(--s2);
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--ink-2);
  font-size: var(--t-ui);
  font-weight: 400;
}

.attest input {
  margin-top: 0.2rem;
}

/* The /demo result panes. demo.html's JS writes these class names directly:
   .btn / .btn-ghost on the tabs, and .count plus .muted/.ok/.miss on the
   summary line. Rename nothing here without changing that script. */
.pane {
  min-width: 0;
}

.pane h3 {
  margin: 0 0 var(--s1);
  font-size: var(--t-ui);
}

/* A request path is an artifact, so it is mono. */
.pane .path {
  margin: 0 0 var(--s1);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  overflow-wrap: anywhere;
}

.count {
  margin: 0 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.json {
  max-height: 22rem;
  overflow: auto;
}

.row {
  margin: 0 0 var(--s6);
}

.row:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   14. Page header. The dramatic h1 is dead: this is a title, a line of
       context, and a rule — the same furniture a reference page uses.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: var(--s7) var(--band);
}

.hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--rule);
  content: "";
}

.hero h1 {
  margin: 0 0 var(--s3);
  font-size: var(--t-hero);
}

.hero-lede,
.hero__lede {
  max-width: var(--measure);
  margin: 0 0 var(--s4);
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: var(--lh-loose);
}

.hero-grid {
  display: grid;
  align-items: start;
  gap: var(--s6) var(--s8);
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   15. The three components v2 added, restyled to the v3 register. Their
       markup contracts are unchanged — a page written against v2 renders
       correctly here without a single edit.

   .pull-stat   one figure over a label. The figure is a prose numeral: sans,
                tabular lining figures, 24px, not a 5rem serif.
                MARKUP: the first element child is the figure; everything
                after it is the label. All of these work —
                  <p class="pull-stat"><b>62%</b><span>of rows</span></p>
                  <div class="pull-stat"><span class="stat-n">8</span>
                    <span class="stat-l">SEC months</span></div>
                  <p class="pull-stat"><b data-stat="x">—</b> of rows</p>
                — because the block itself is typeset as the label, so a bare
                text node after the figure lands right too. A .stat-n / <b> /
                <strong> is always the figure and a .stat-l / <small> /
                <figcaption> is always the label, wherever they sit.

   .window-card a sheet with a mono sash across the top naming the window it
                covers, then the heading and prose under it.
                MARKUP: <article class="window-card">
                          <p class="eyebrow">2022-11-01 → 2023-03-31</p>
                          <h3>The frozen bundle</h3>
                          <p>…</p>
                          <p class="fine">…</p>   ← optional foot, pinned down
                        </article>
                Put two of them in a .grid-2. The last child pins to the
                bottom edge so two cards of unequal prose still line up.

   .moat-row    one claim per ruled row, heading in the left column reading
                down the page like a spec sheet, argument in the right.
                MARKUP: <div class="moat-row">
                          <h3>18 years of receipts</h3>
                          <p>…</p>
                        </div>
                Stack them directly as siblings — they share hairlines and
                need no wrapper. An .eyebrow or .card-num before the heading
                joins it in the left column. Collapses at 48rem.
   -------------------------------------------------------------------------- */

.pull-stat {
  margin: 0 0 var(--s5);
  border-top: 1px solid var(--rule);
  padding-top: var(--s2);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.pull-stat > :where(:first-child) {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-stat);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  text-transform: none;
}

.pull-stat > :where(:first-child ~ *) {
  display: block;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

/* Whatever the order, a figure is a figure and a label is a label. */
.pull-stat > .stat-n,
.pull-stat > b,
.pull-stat > strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-stat);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
  text-transform: none;
}

.pull-stat > .stat-l,
.pull-stat > small,
.pull-stat > figcaption {
  display: block;
  margin-bottom: 0;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.window-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0 var(--s5);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--surface);
}

/* The sash: the window this card covers, named across the top of it. It holds
   dates and identifiers, so it is mono — and it is forced to display:block
   with a fixed line-height so two cards side by side line up exactly. */
.window-card > .eyebrow,
.window-card > .mono,
.window-card > .code-bar {
  display: block;
  margin: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  padding: var(--s1) var(--s4);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
}

.window-card > :not(.eyebrow):not(.mono):not(.code-bar) {
  margin-right: var(--s4);
  margin-left: var(--s4);
}

.window-card > h2,
.window-card > h3,
.window-card > h4 {
  margin-top: var(--s4);
  margin-bottom: var(--s2);
  border-bottom: 0;
  padding-bottom: 0;
  font-family: var(--sans);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: 0;
}

.window-card > p,
.window-card > ul,
.window-card > ol {
  margin-bottom: var(--s4);
  color: var(--ink);
  font-size: var(--t-ui);
}

.window-card > :last-child {
  margin-top: auto;
  margin-bottom: var(--s4);
}

.moat-row {
  display: grid;
  align-items: start;
  margin: 0;
  border-top: 1px solid var(--rule);
  padding: var(--s4) 0;
  gap: var(--s1) var(--s6);
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
}

.moat-row:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.moat-row > * {
  max-width: var(--measure);
  margin: 0 0 var(--s3);
  grid-column: 2;
}

.moat-row > :last-child {
  margin-bottom: 0;
}

.moat-row > h2,
.moat-row > h3,
.moat-row > h4,
.moat-row > .eyebrow,
.moat-row > .card-num {
  margin: 0 0 var(--s1);
  grid-column: 1;
}

.moat-row > h2,
.moat-row > h3,
.moat-row > h4 {
  border-bottom: 0;
  padding-bottom: 0;
  font-family: var(--sans);
  font-size: var(--t-ui);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--lh-normal);
}

.moat-row > .eyebrow,
.moat-row > .card-num {
  font-size: var(--t-xs);
}

/* The argument reads at prose size in full ink. A caption stays a caption —
   keyed on the role, not on document order, because a row that opens with a
   .card-num would otherwise hand the lead treatment to the ordinal. */
.moat-row > p,
.moat-row > ul,
.moat-row > ol {
  color: var(--ink);
  font-size: var(--t-ui);
  line-height: var(--lh-normal);
}

.moat-row > .note,
.moat-row > .fine,
.moat-row > .muted,
.moat-row > .hash {
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------------------------
   16. Responsive. 375px is the floor: nothing below scrolls the page.
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .side > * {
    position: static;
  }

  .side {
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--s4);
  }

  .side a {
    display: inline-block;
    margin-left: 0;
    border-left: 0;
    padding-right: var(--s3);
    padding-left: 0;
  }

  .side a[aria-current="page"] {
    border-bottom: 1px solid var(--ink);
  }

  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  .moat-row {
    gap: var(--s1) var(--s5);
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .grid-2,
  .grid-3,
  .cols,
  .cut {
    grid-template-columns: minmax(0, 1fr);
  }

  .cut[data-delta] {
    padding-top: 0;
  }

  .cut[data-delta]::after {
    display: none;
  }

  .moat-row {
    padding: var(--s3) 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .moat-row > * {
    grid-column: 1;
  }

  .stat + .stat {
    border-left: 0;
    padding-left: 0;
  }

  .site-footer-links li {
    gap: var(--s3);
  }

  .site-nav-links {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }

  .site-nav-actions {
    margin-left: auto;
  }

  .kv {
    grid-template-columns: minmax(0, 1fr);
  }

  .kv dt {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 30rem) {
  .cta-row .btn,
  .actions .btn {
    width: 100%;
  }

  .panel,
  .card,
  .plan {
    padding: var(--s3);
  }

  .panel-head {
    margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3);
    padding: var(--s2) var(--s3);
  }

  .window-card > .eyebrow,
  .window-card > .mono,
  .window-card > .code-bar {
    padding: var(--s1) var(--s3);
  }

  .window-card > :not(.eyebrow):not(.mono):not(.code-bar) {
    margin-right: var(--s3);
    margin-left: var(--s3);
  }

  .window-card > :last-child {
    margin-bottom: var(--s3);
  }
}

/* --------------------------------------------------------------------------
   17. THE INSTRUMENT LAYER (v5, ISS-167).

   Everything above styles paper. This section takes the handful of components
   that hold something which came off the wire and moves them into the dark
   world, in BOTH schemes. The rule a reader learns in the first screen and
   then applies everywhere: prose is on paper, machine output is on the
   instrument.

   That is why this is a section and not a set of edits upstairs — the
   structure of a pre, a .code, a .diff and a .ledger is the same as it was in
   v4; only which ground it stands on changed, and keeping the change in one
   block means one place to read when a page looks wrong.

   Inline <code> is deliberately NOT here. A dark chip inside a sentence is a
   hole in the sentence, and inline code is a word, not an artifact.
   -------------------------------------------------------------------------- */

pre,
.code,
.ledger,
.diff,
.slab {
  border-color: var(--i-rule);
  background: var(--i-canvas);
  color: var(--i-ink);
  border-radius: 0;
}

.code pre,
.ledger pre,
.slab pre {
  background: none;
  color: inherit;
}

.code-bar,
.ledger-head,
.slab-bar {
  border-bottom-color: var(--i-rule);
  background: var(--i-inset);
  color: var(--i-ink-2);
}

.code-bar b,
.ledger-head b,
.slab-bar b {
  color: var(--i-ink);
}

.sh-prompt {
  color: var(--i-amber);
}

/* A pipe in a ledger row is a column boundary, not a character to read. */
.ledger pre i {
  color: var(--i-dim);
}

/* Diff lines keep their + / - in the markup; the colour is the second signal,
   and on the instrument ground it is the instrument's green and red. */
.diff-add,
.diff-del {
  color: var(--i-ink);
}

.diff-add {
  border-left-color: var(--i-green);
  background: rgb(16 185 129 / 12%);
}

.diff-del {
  border-left-color: var(--i-red);
  background: rgb(239 68 68 / 12%);
}

.diff-ctx {
  display: block;
  border-left: 2px solid transparent;
  padding: 2px var(--s3);
  color: var(--i-ink-2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The two-pane as-of cut. The later pane is an addition to the record, so it
   keeps the + treatment — now in the instrument's green. */
.cut-pane {
  border-color: var(--i-rule);
  background: var(--i-surface);
  color: var(--i-ink);
}

.cut-pane.cut-pane--after {
  border-color: var(--i-green);
  background: rgb(16 185 129 / 8%);
}

.cut-head {
  border-bottom-color: var(--i-rule);
  background: var(--i-inset);
  color: var(--i-ink-2);
}

.cut-pane--after .cut-head {
  border-bottom-color: var(--i-green);
  color: var(--i-ink);
}

.cut-body pre,
.cut-out {
  color: var(--i-ink);
}

.cut-note {
  color: var(--i-ink-2);
}

.cut[data-delta]::after {
  border-color: var(--rule);
  background: var(--bg);
  color: var(--ink-2);
}

/* A link inside an instrument. Ink-and-underline is the paper rule; on the
   dark ground the same idea needs the instrument's own text colour. */
pre a,
.code a,
.ledger a,
.diff a,
.slab a,
.cut-pane a {
  color: var(--i-cyan);
  text-decoration-color: currentcolor;
}

/* Focus on an instrument is cyan, because a near-black ring on #08090C is
   not a ring. */
pre :focus-visible,
.code :focus-visible,
.slab :focus-visible,
.cut-pane :focus-visible {
  outline: 2px solid var(--i-cyan);
  outline-offset: 2px;
}

/* .slab — a dark block any page can drop a real artifact into. It is the
   .code idiom with the label row promoted: a mono bar naming the source, and
   a body that is not assumed to be a <pre>. */
.slab {
  overflow: hidden;
  margin: 0 0 var(--s5);
  border: 1px solid var(--i-rule);
}

.slab-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  border-bottom: 1px solid var(--i-rule);
  padding: var(--s1) var(--s4);
  gap: var(--s1) var(--s3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.6;
}

.slab-body {
  padding: var(--s4);
  font-size: var(--t-sm);
}

.slab-body > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   18. .logos — the works-with rail (v5).

   v4 shipped this row as text chips on the argument that a third-party
   wordmark is a trademark question. The founder overruled it for v5: the
   marks are the recognition, and a row of nine text chips reads as a tag
   cloud. The compromise the marks ship under is the answer to the trademark
   question — every icon is the CC0 Simple Icons glyph, monochrome, tinted to
   our own dim-label token, at one optical size, with the product's name in
   text beside it. Nobody's brand colour is used to decorate our page; the
   brand colour appears only under a pointer, on the mark it belongs to.

   OpenAI has no icon in that set, so it ships as a typographic mark at the
   same optical weight rather than as a glyph somebody drew from memory.
   -------------------------------------------------------------------------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  gap: var(--s2) var(--s5);
  list-style: none;
}

/* --ink-2, not --ink-3: the label beside each mark is text a reader is
   expected to read, so it clears 4.5:1 rather than the 3:1 a graphic needs.
   The glyph takes the same colour, which keeps the rail one weight. */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--s2);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 100ms linear;
}

.logo svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentcolor;
}

.logo-t {
  white-space: nowrap;
}

/* The typographic mark: no glyph, so the label carries the whole thing and is
   given the optical weight the 20px glyphs have. */
.logo--type .logo-t {
  font-size: var(--t-ui);
  font-weight: 600;
  letter-spacing: -0.02em;
}

a.logo:hover,
a.logo:focus-visible {
  color: var(--logo-c, var(--ink));
}

.logos:hover .logo:not(:hover) {
  color: var(--ink-2);
}

.logo:hover {
  color: var(--logo-c, var(--ink));
}

@media (prefers-color-scheme: dark) {
  /* Several of these marks are near-black by brand, which is invisible here.
     On the dark page the hover state resolves to plain ink instead. */
  .logo:hover,
  a.logo:hover,
  a.logo:focus-visible {
    color: var(--ink);
  }
}

/* Nothing here animates on entrance, so this block only has transitions and
   the browser's own scrolling to switch off. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Print is the one place the instrument goes back to paper: a page of #08090C
   is a page of toner, and a diff still reads with its + and - because those
   are in the markup. Everything that carries the dark world is reset here. */
@media print {
  .site-header,
  .site-skip,
  .cta-row,
  .actions,
  .tele,
  .rig-tabs,
  .scrub {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  pre,
  .code,
  .ledger,
  .diff,
  .slab,
  .cut,
  .cut-pane,
  .code-bar,
  .ledger-head,
  .slab-bar,
  .cut-head,
  .diff-add,
  .diff-del,
  .diff-ctx {
    border-color: #999;
    background: #fff;
    color: #000;
  }

  thead th {
    position: static;
  }
}