/* ==========================================================================
   headroom landing page

   Treatment: paper and ink. The page is a datasheet, and the hero is a
   fabrication drawing printed on it. Neutral values carry every surface and
   every piece of type; exactly one hue exists in the whole stylesheet, and it
   only ever marks the 350 connections that have nowhere to go. If a second
   colour ever appears here, the first one has stopped meaning anything.

   Superseded: the electric cyan on midnight treatment (2026-08-14).

   Single theme, light, on purpose. Every colour is painted explicitly,
   including the body background, so a viewer whose system asks for dark still
   gets the sheet as drawn. A drawing is a physical artifact and it does not
   have a night mode.

   No external fonts, no external scripts, no network calls of any kind. The
   product's pitch is that nothing leaves your machine, so neither does this.
   ========================================================================== */

:root {
  /* ---- paper ---- */
  --paper:    #FDFCFC;  /* the sheet */
  --paper-2:  #F5F3F1;  /* a section printed on a slightly warmer stock */
  --paper-3:  #FAF8F6;  /* a listing pasted onto the sheet */
  --card:     #FFFFFF;
  --rule:     #EBE8E4;  /* hairline */
  --rule-2:   #DCD7D0;  /* a stated border */

  /* ---- ink ---- */
  --ink:      #0D0B09;  /* display, headings, the darkest mark on the page */
  --ink-2:    #2A2621;  /* body copy, drawn lines */
  --muted:    #736D64;  /* secondary copy, measured at 5.0:1 on --paper-2 */
  --screen:   #14120F;  /* the one dark surface: a terminal screen */
  --screen-t: #F2EFEB;  /* type on that screen */
  --screen-m: #A59F97;  /* the prompt glyph on that screen */

  /* ---- the only hue in this file ---- */
  --over:     #FF4704;  /* strokes and fills inside the drawing */
  --over-ink: #C2360A;  /* the same hue, at a value that carries text */

  /* ---- type ---- */
  --sans: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono",
          Menlo, "DejaVu Sans Mono", monospace;

  /* ---- scale, 4px base ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --wrap: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --r-card: 4px;   /* panels and sheets */
  --r-pill: 999px; /* anything that is pressed or read as a chip */
}

/* ---------------------------------------------------------------- reset */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Belt and braces: no font anywhere may fuse "--" into a single long dash. */
  font-variant-ligatures: none;
}

/* The sheet has a tooth. One generated texture, 620px, tiled. It is the ground
   itself rather than a wash over one, so there is no blend mode and no overlay
   to reason about: the page is printed on it. Cards and panels stay clean white
   on top, which is the difference between the stock and the thing laid on it. */
/* The sheet has a tooth. One generated texture, a 620px tile, laid down as the
   ground itself rather than as a wash over one, so there is no blend mode and
   no overlay to reason about: the page is printed on it. Cards, panels and the
   drawing stay clean white on top, which is the difference between the stock
   and the thing laid on it. */
body {
  background-color: var(--paper);
  background-image: url("assets/paper.jpg");
  background-size: 620px 620px;
  background-repeat: repeat;
}

/* The warmer stock, reached by washing the same tile rather than covering it,
   so the tooth carries through every band of the page. */
.section-alt, .foot, .sheet-cap {
  background-color: var(--paper-2);
  background-image:
    linear-gradient(rgba(240, 237, 233, 0.62), rgba(240, 237, 233, 0.62)),
    url("assets/paper.jpg");
  background-size: auto, 620px 620px;
  background-repeat: repeat, repeat;
}

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

h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--ink);
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

code, pre, .mono, .silk, svg text {
  font-family: var(--mono);
  /* Ligatures off everywhere. Cascadia and friends fuse "--" into a single long
     dash, which would put a glyph on the page that the copy deck forbids. */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
}
code, pre, .mono { font-size: 0.9em; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s4); top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); font-weight: 500;
  padding: 10px 18px; border-radius: var(--r-pill); text-decoration: none;
  transition: top 120ms ease;
}
.skip:focus { top: var(--s4); color: var(--paper); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* --------------------------------------------------------- silkscreen type */
/* Uppercase mono at wide tracking. On a drawing this is the legend, and it is
   also, everywhere on this page, the actual path or command the section is
   about, so the label carries information rather than decorating the column. */

.silk {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0;
}

/* ------------------------------------------------------------------ topbar */

/* No backdrop blur. On a near opaque near white bar it buys nothing you can
   see, and it promotes the header to its own composited layer for the whole
   scroll. Paper does not frost. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 252, 252, 0.94);
  border-bottom: 1px solid var(--rule);
}
.topbar-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  height: 66px; display: flex; align-items: center; gap: var(--s5);
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none; flex: none;
}
.mark { width: 20px; height: 20px; fill: none; stroke: currentColor;
        stroke-width: 1.6; stroke-linecap: square; }
.brand-word {
  font-family: var(--mono); font-size: 16px; font-weight: 500;
  letter-spacing: -0.02em;
}

.nav { display: flex; gap: var(--s5); margin-left: auto; flex-wrap: wrap; }
.nav a {
  font-size: 14px; color: var(--muted); text-decoration: none;
  padding: 4px 0; border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.topbar-end { display: flex; align-items: center; gap: var(--s3); margin-left: auto; flex: none; }

.langswitch {
  display: inline-flex; border: 1px solid var(--rule-2);
  border-radius: var(--r-pill); overflow: hidden; background: var(--card);
}
.lang {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--muted); padding: 6px 12px;
}
.lang:hover { color: var(--ink); }
.lang[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.ghost-btn, .solid-btn {
  font-size: 14px; text-decoration: none; padding: 8px 16px;
  border-radius: var(--r-pill); white-space: nowrap; font-weight: 500;
  letter-spacing: 0.005em;
}
.ghost-btn { border: 1px solid var(--rule-2); color: var(--ink); background: var(--card); }
.ghost-btn:hover { border-color: var(--ink); }
.solid-btn { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.solid-btn:hover { background: #000; color: var(--paper); }

/* -------------------------------------------------------------------- hero */

.hero { padding: clamp(56px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); }

/* Near equal columns, because the right one now carries the spec block and the
   install line, and because the install line has to fit on one line. A command
   the reader has to scroll to finish reading is not a one liner. */
.hero-grid {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}
.hero-copy .silk { margin-bottom: var(--s5); }

/* The display face is the system grotesk at 300. A light weight at this size
   is the whole point: it puts air inside the headline instead of around it. */
.display {
  font-size: clamp(2.4rem, 1.3rem + 3.9vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -0.028em;
  font-weight: 300;
  max-width: 16ch;
  color: var(--ink);
  text-wrap: balance;
}
.lead {
  margin-top: var(--s5);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}
.lead-2 { margin-top: var(--s4); color: var(--muted); max-width: 50ch; font-size: 1rem; }

.micro { font-size: 14px; line-height: 1.55; color: var(--muted); }
.hero-install .micro { margin-top: var(--s3); }

/* The spec block. Every datasheet opens with one, and every line in this one is
   a fact somebody can check in the repository before they install anything. */
.spec { margin-bottom: var(--s5); border-top: 1px solid var(--rule-2); }
.spec > div {
  display: grid; grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--s4); align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--rule);
}
.spec dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}
.spec dd { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.spec dd code { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* --------------------------------------------------------------- terminal */
/* An instrument panel: a light chassis with a dark screen set into it. The
   screen is the only dark surface on the page, and it is always the thing the
   reader is meant to act on. */

.term {
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-card);
  overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.led {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--rule-2);
}
.term-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-meta {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: 0.08em; flex: none;
}

.term-body { padding: var(--s5) var(--s4); overflow-x: auto; background: var(--screen); }
.cmd, .cmd-list {
  margin: 0; font-family: var(--mono); font-size: 13.5px; line-height: 1.85;
  color: var(--screen-t); white-space: pre;
}
.cmd { display: flex; align-items: baseline; flex-wrap: nowrap; }
/* Both children keep their intrinsic width so the terminal scrolls instead of
   clipping the command when the viewport is narrower than the line. */
.cmd .prompt, .cmd code { flex: 0 0 auto; }
.cmd code { font-size: inherit; color: #FFFFFF; }
.cmd-hero { font-size: clamp(13px, 0.6rem + 0.5vw, 16px); }
.prompt { color: var(--screen-m); user-select: none; margin-right: 8px; }
.cmd-list .prompt { margin-right: 8px; }

.caret {
  display: inline-block; width: 8px; height: 1.05em; margin-left: 6px;
  background: var(--screen-t); vertical-align: -0.18em;
}

.term-foot {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-top: 1px solid var(--rule);
  background: var(--card);
}
.copy-btn {
  appearance: none; cursor: pointer; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: var(--r-pill);
  padding: 7px 15px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.copy-btn:hover { border-color: var(--ink); }
.copy-btn .copy-done { display: none; }
.copy-btn.is-copied { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.copy-btn.is-copied .copy-idle { display: none; }
.copy-btn.is-copied .copy-done { display: inline; }
.term-link { font-size: 13px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.term-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

.term-wide, .term-hero { margin-top: var(--s5); }
.term-hero { border-color: var(--ink); }

/* --------------------------------------------------------------- the sheet */
/* The hero drawing. Not a lit board: a fabrication drawing of one, printed.
   Line weight does the work that glow used to do, which is the correct trade
   on paper, because on paper the heaviest line is the loudest one. */

.sheet {
  margin: clamp(44px, 6vw, 76px) 0 0;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-card);
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(13, 11, 9, 0.04), 0 12px 32px -18px rgba(13, 11, 9, 0.18);
}
.sheet-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px var(--s4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.sheet-no {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--paper); background: var(--ink);
  padding: 4px 9px; border-radius: var(--r-pill); flex: none;
}
.sheet-cmd {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--ink); border: 1px solid var(--rule-2);
  padding: 3px 9px; border-radius: var(--r-pill); flex: none; background: var(--card);
}

.sheet-face { padding: clamp(8px, 2vw, 20px); }
.sheet-face:focus-visible { outline-offset: -3px; }
.sheet-svg { width: 100%; height: auto; }
.sheet-hint { display: none; }

/* node outlines */
.node rect { fill: var(--card); stroke: var(--rule-2); stroke-width: 1; }
.node-key rect { fill: var(--card); stroke: var(--ink); stroke-width: 1.25; }
.n-addr { font-family: var(--mono); font-size: 12px; fill: var(--muted); }
.n-val  { font-family: var(--mono); font-size: 13.5px; fill: var(--ink); }
.n-role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; fill: var(--muted); }
.n-name { font-family: var(--mono); font-size: 15px; fill: var(--ink); }
.n-sub  { font-family: var(--mono); font-size: 12.5px; fill: var(--muted); }
.n-big  { font-family: var(--mono); font-size: 14px; fill: var(--ink); }

/* traces. Width is proportional to load: one unit of width per 100 connections,
   the way a board sizes copper to the current it has to carry. */
.tr-cfg path { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-linecap: square; }
.tr-800 { fill: none; stroke: var(--ink-2); stroke-width: 8; stroke-linecap: butt; }
.tr-derived { stroke-dasharray: 13 7; }
.tr-450 { fill: none; stroke: var(--ink-2); stroke-width: 4.5; stroke-linecap: butt; }
.tr-350 { fill: none; stroke: var(--over); stroke-width: 3.5; stroke-linecap: butt;
          stroke-linejoin: miter; }

.via circle { fill: var(--card); stroke: var(--muted); stroke-width: 1.25; }
.pad circle { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.pad-core circle { fill: var(--ink); }
.junction { fill: var(--ink); }

.t-big   { font-family: var(--mono); font-size: 15px; fill: var(--ink); }
.t-ok    { font-family: var(--mono); font-size: 12px; fill: var(--ink); }

.leader { fill: none; stroke: #B9B2A9; stroke-width: 1; stroke-dasharray: 3 4; }
.note-rule { fill: none; stroke: var(--ink); stroke-width: 1; }
.c-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; fill: var(--ink); }
.c-body { font-family: var(--mono); font-size: 11.5px; fill: var(--muted); }

.overflow .of-frame { fill: none; stroke: var(--over); stroke-width: 1.5; }
.of-head { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; fill: var(--over-ink); }
.of-body { font-family: var(--mono); font-size: 12.5px; fill: var(--over-ink); }

.divider { fill: none; stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 6; }

.s-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; fill: var(--muted); }
.s-mark { font-family: var(--mono); font-size: 12px; fill: var(--over-ink); }
.s-fill { fill: var(--ink-2); }
.s-over { fill: none; stroke: var(--over); stroke-width: 1.2; }
.s-axis { fill: none; stroke: var(--rule-2); stroke-width: 1.5; }
.s-cut  { fill: none; stroke: var(--over); stroke-width: 2; }
.s-tick path { fill: none; stroke: var(--rule-2); stroke-width: 1.5; }
.s-num text { font-family: var(--mono); font-size: 11.5px; fill: var(--muted); }

/* sheet caption */
.sheet-cap {
  border-top: 1px solid var(--rule);
  padding: clamp(22px, 3vw, 34px) var(--s5);
  display: grid; gap: var(--s5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.sheet-cap .cap-lead {
  grid-column: 1 / -1;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.2; letter-spacing: -0.022em; font-weight: 300;
  color: var(--ink); max-width: 32ch;
}
.sheet-cap p { color: var(--muted); font-size: 15.5px; }
.cap-key { display: grid; gap: 11px; align-content: start; }
.cap-key li { display: flex; align-items: center; gap: 12px; font-family: var(--mono);
              font-size: 12.5px; color: var(--ink-2); }
.k { display: block; height: 0; flex: none; width: 44px; }
.k-800 { border-top: 8px solid var(--ink-2); }
.k-450 { border-top: 4.5px solid var(--ink-2); }
.k-350 { border-top: 3.5px solid var(--over); }
.sheet-cap .cap-note {
  grid-column: 1 / -1; border-left: 2px solid var(--ink);
  padding-left: var(--s4); font-size: 14.5px; color: var(--ink-2);
}

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(64px, 7.2vw, 112px) 0; border-top: 1px solid var(--rule); }

.rail-grid { display: grid; gap: clamp(20px, 3vw, 48px); grid-template-columns: 190px minmax(0, 1fr); }
.rail { padding-top: 12px; position: sticky; top: 92px; align-self: start; }
.rail-body > * + * { margin-top: var(--s5); }

.rail-body h2 {
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.65rem);
  max-width: 22ch; text-wrap: balance;
}
.big-body { font-size: 1.0625rem; color: var(--muted); max-width: 66ch; }
.big-body code { color: var(--ink-2); }

.sub-h {
  font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--muted); font-weight: 400;
  padding-top: var(--s3);
}

.callout {
  border-left: 2px solid var(--rule-2);
  padding: 2px 0 2px var(--s5);
  color: var(--ink-2); font-size: 15.5px; max-width: 62ch;
}
.callout-strong { border-left-color: var(--ink); color: var(--ink); font-size: 17px; }

/* ------------------------------------------------------------ problem */

.stages { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
          border-radius: var(--r-card); overflow: hidden; }
.stages li { background: var(--card); padding: var(--s5); display: grid; gap: var(--s2); }
.stage-cmd { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.stages p { color: var(--muted); font-size: 15px; }

@media (min-width: 780px) {
  .stages { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------ findings */

.finding { border: 1px solid var(--rule-2); border-radius: var(--r-card);
           background: var(--card); overflow: hidden; }
.finding-head {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.sev {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  color: var(--paper); background: var(--ink);
  padding: 4px 10px; border-radius: var(--r-pill); flex: none;
}
.rid {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink);
  border: 1px solid var(--rule-2); background: var(--card);
  padding: 2px 9px; border-radius: var(--r-pill);
  flex: none; letter-spacing: 0.04em;
}
.fhead-txt { font-size: 14.5px; color: var(--ink-2); }

/* A printed listing, not a screen: the CLI's own output pasted onto the sheet. */
.out {
  margin: 0; padding: var(--s5) var(--s4); overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.72;
  color: var(--ink-2); background: var(--paper-3); white-space: pre;
  tab-size: 2;
}
.out-tight { padding: var(--s4); }
/* -------------------------------------------------- syntax, on paper

   These are not a syntax theme. They are the colours the CLI itself prints,
   reproduced here, which is why the token rules in main.js and the ones in
   internal/report/color.go are the same alternation in the same order.

   Severity is information and earns a hue. The numbers are the product and
   earn weight rather than hue. Everything else is ink, dim ink, or the one
   identifier slate. Three hues on the whole sheet: the overflow, the ochre of
   a warning, and that slate. Nothing here is decoration.                     */

:root {
  --t-id:   #2E5C7A;  /* a terraform address, terraform's own cyan, at paper value */
  --t-warn: #8A5A00;  /* ochre. WARNING, and only WARNING */
  --t-str:  #4A6A46;  /* a quoted string */
}

.t-id  { color: var(--t-id); }
.t-num { color: var(--ink); font-weight: 600; }
.t-dim { color: var(--muted); }

.sev-crit { color: var(--over-ink); font-weight: 600; }
.sev-warn { color: var(--t-warn);   font-weight: 600; }

.j-k { color: var(--t-id); }
.j-s { color: var(--t-str); }
.j-c { color: var(--muted); font-style: italic; }

/* On the one dark surface the same roles take terminal values, because ink on
   paper and phosphor on black are different media and a value that reads on
   one goes muddy on the other. */
.term-body .t-id,
.term-body .j-k  { color: #7FB6CE; }
.term-body .t-num { color: var(--screen-t); font-weight: 600; }
.term-body .t-dim,
.term-body .j-c  { color: var(--screen-m); }
.term-body .j-s  { color: #9BBE95; }

/* Shell: the program carries weight, a flag takes the identifier slate, a URL
   goes dim. Three roles, because a command line has three kinds of word. */
.t-prog { color: var(--screen-t); font-weight: 600; }
.t-flag { color: #7FB6CE; }

/* The severity pill on paper. CRITICAL is red in the terminal, so here it is
   the sheet's one hue, and it is the only place a badge is allowed to have a
   background that is not ink. */
.sev-crit { background: var(--over-ink); color: #FFF7F3; }
.sev-warn { background: var(--t-warn); color: #FFFAF0; }

/* -------------------------------------------------------------- flags */

.flags { display: grid; gap: 1px; background: var(--rule);
         border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; }
.flags > div { background: var(--card); padding: var(--s4) var(--s5);
               display: grid; gap: 4px; }
.flags dt code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.flags dd { margin: 0; color: var(--muted); font-size: 14.5px; }

@media (min-width: 700px) {
  .flags > div { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
}

/* -------------------------------------------------------------- rules */

.silkscreen { display: grid; gap: var(--s5); }
@media (min-width: 960px) {
  /* The legend is the widest thing on the page, so it reclaims the rail
     column. The rules rail stops sticking, so the two never collide. */
  .silkscreen {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    margin-left: calc(-190px - clamp(20px, 3vw, 48px));
  }
  #rules .rail { position: static; }
}

.chip-group {
  border: 1px solid var(--rule-2); border-radius: var(--r-card);
  background: var(--card); padding: var(--s5);
}
.cg-head {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); font-weight: 400;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule);
}
.cg-count { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; }
.rulelist { display: grid; gap: var(--s3); padding-top: var(--s4); }
.rulelist li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3);
               align-items: start; font-size: 14px; color: var(--muted); line-height: 1.5; }
.rulelist .rid { text-align: center; padding: 2px 0; font-size: 11px; }
.rulelist code { color: var(--ink-2); font-size: 12px; word-break: break-word; }

.two-notes { display: grid; gap: var(--s5); }
@media (min-width: 820px) { .two-notes { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ privacy */

.statement {
  font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.05rem);
  line-height: 1.18; letter-spacing: -0.024em; font-weight: 300;
  color: var(--ink); max-width: 20ch;
}

.allow { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .allow { grid-template-columns: 1fr 1fr; } }
.allow-col { border: 1px solid var(--rule-2); border-radius: var(--r-card);
             padding: var(--s5); background: var(--card); }
.allow-yes { border-left: 2px solid var(--ink); }
.allow-col h3 { margin-bottom: var(--s4); font-weight: 400; }
.attrs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.attrs li { font-family: var(--mono); font-size: 12px; }
.attrs code { color: var(--ink-2); background: var(--paper-3); border: 1px solid var(--rule-2);
              padding: 5px 9px; border-radius: var(--r-pill); display: inline-block; }
.allow-no .attrs code { color: var(--muted); text-decoration: line-through;
                        text-decoration-color: var(--rule-2); }
.attr-etc { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 5px 0; display: inline-block; }

.facts { display: grid; gap: var(--s3); max-width: 70ch; }
.facts li { position: relative; padding-left: var(--s5); color: var(--muted); font-size: 15.5px; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 11px; height: 1px; background: var(--ink);
}

.dep { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 820px) { .dep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dep-code { border: 1px solid var(--rule-2); border-radius: var(--r-card); overflow: hidden;
            background: var(--card); }
.dep-code .silk { padding: 10px var(--s4); border-bottom: 1px solid var(--rule);
                  background: var(--paper-2); }
.dep-note { color: var(--muted); font-size: 15.5px; }

/* ------------------------------------------------------------ catalog */

.entry { border: 1px solid var(--ink); border-radius: var(--r-card); overflow: hidden;
         background: var(--card); }
.entry-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px var(--s4); border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.entry .out { font-size: 12px; }

/* ------------------------------------------------------------ pricing */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule-2); border-radius: var(--r-card);
                background: var(--card); }
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--card); }
.cmp th, .cmp td { text-align: left; padding: var(--s4) var(--s5);
                   border-bottom: 1px solid var(--rule); vertical-align: middle; }
.cmp thead th { background: var(--paper-2); border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody th { font-weight: 400; font-size: 15px; color: var(--ink-2); }
.cmp td { width: 190px; }
.col-title { display: block; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.col-sub { display: block; font-family: var(--mono); font-size: 10.5px;
           letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.col-paid .col-title { color: var(--muted); }
.tick { font-family: var(--mono); font-size: 12px; color: var(--paper);
        background: var(--ink); padding: 4px 12px; border-radius: var(--r-pill); }
.soon { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
        text-transform: uppercase; color: var(--muted);
        border: 1px solid var(--rule-2); padding: 4px 12px; border-radius: var(--r-pill); }
.dash { display: inline-block; width: 14px; height: 1px; background: var(--rule-2);
        vertical-align: middle; }

/* ------------------------------------------------------------ install */

.dl-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dl {
  display: grid; gap: 2px; text-decoration: none;
  border: 1px solid var(--rule-2); border-radius: var(--r-card);
  background: var(--card); padding: var(--s4) var(--s5);
  transition: border-color 140ms ease, transform 140ms ease;
}
.dl:hover { border-color: var(--ink); transform: translateY(-2px); }
.dl-os { font-size: 15px; font-weight: 500; color: var(--ink); }
.dl-arch { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--muted); }
.dl-file { font-family: var(--mono); font-size: 11px; color: var(--muted);
           margin-top: 7px; word-break: break-all; }

/* ------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); padding: clamp(48px, 6vw, 80px) 0 var(--s7); }
.foot-in { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 820px) { .foot-in { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.foot-brand { display: grid; gap: var(--s2); grid-template-columns: auto 1fr; }
.foot-brand .mark { grid-row: 1; color: var(--ink); }
.foot-brand .brand-word { grid-row: 1; grid-column: 2; align-self: center; color: var(--ink); }
.foot-line { grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; max-width: 30ch; }
.foot-nav { display: grid; gap: var(--s2); align-content: start; }
.foot-nav a { font-size: 14.5px; text-decoration: none; color: var(--muted); width: fit-content;
              border-bottom: 1px solid transparent; }
.foot-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.foot-legal { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.foot-copy { font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.06em; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1120px) {
  .nav { display: none; }
  /* Below this the two hero columns are each too narrow to hold the install
     line without scrolling it, so they stack and the line gets the full width. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .display { max-width: 18ch; }
}

@media (max-width: 960px) {
  .rail-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; padding-top: 0; }
  .sheet-cap { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  /* The drawing keeps its proportions and scrolls sideways rather than
     shrinking the figures below the point where they can be read. */
  .sheet-face { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Wide enough that the figures inside the drawing stay legible rather than
     shrinking to fit. A drawing is scrolled, not squinted at. */
  .sheet-face .sheet-svg { min-width: 960px; }
  .sheet-hint {
    display: block; padding: 12px var(--s4) 0;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--muted);
  }
  .sheet-cmd { font-size: 11px; }
  .topbar-in { gap: var(--s3); height: 60px; }
  .ghost-btn { display: none; }
  .cmd, .cmd-list { font-size: 12.5px; }
  .out { font-size: 11.5px; padding: var(--s4) var(--s3); }
  .stages li, .chip-group, .allow-col, .flags > div { padding: var(--s4); }
  .cmp th, .cmp td { padding: var(--s3) var(--s4); }
  .sheet-cap { padding: var(--s5) var(--s4); }
}

@media (max-width: 480px) {
  /* Keep the install one liner on a single readable line at phone widths. */
  .cmd, .cmd-list, .cmd-hero { font-size: 11.5px; }
  .term-body { padding: var(--s5) var(--s3); }
  .prompt { margin-right: 6px; }
  .sheet-head { padding: 10px var(--s3); gap: var(--s2); }
  .sheet-cmd { display: none; }
  .spec > div { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s3); }
}

@media (max-width: 400px) {
  :root { --pad: 16px; }
  .brand-word { font-size: 15px; }
  .solid-btn { padding: 7px 13px; font-size: 13px; }
  .lang { padding: 6px 9px; }
}

/* ============================================================== motion ====
   One orchestrated moment, once, on load: the sheet plots itself. Ink lines
   first, then the load they carry, and the overflow last, because the overflow
   is the punchline and a punchline arrives at the end.

   Everything below is additive. The page's resting state is the finished
   drawing, so a reader who has asked for less motion is not waiting for
   anything and nothing has to be undone at runtime.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @keyframes plot { to { stroke-dashoffset: 0; } }
  @keyframes ink  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

  .caret { animation: blink 1.15s steps(1, end) infinite; }

  .sheet-svg .node,
  .sheet-svg .via,
  .sheet-svg .pad,
  .sheet-svg .pad-core,
  .sheet-svg .junction,
  .sheet-svg .t-big,
  .sheet-svg .t-ok,
  .sheet-svg .leader,
  .sheet-svg .note-rule,
  .sheet-svg .c-head,
  .sheet-svg .c-body,
  .sheet-svg .overflow,
  .sheet-svg .divider,
  .sheet-svg .s-head,
  .sheet-svg .s-mark,
  .sheet-svg .s-fill,
  .sheet-svg .s-hatch,
  .sheet-svg .s-over,
  .sheet-svg .s-axis,
  .sheet-svg .s-cut,
  .sheet-svg .s-tick,
  .sheet-svg .s-num {
    animation: ink 420ms ease-out both;
  }

  .sheet-svg .node { animation-name: rise; animation-duration: 520ms; }
  .sheet-svg .node:nth-of-type(2) { animation-delay: 70ms; }

  .sheet-svg .tr-cfg path,
  .sheet-svg .tr-800,
  .sheet-svg .tr-450,
  .sheet-svg .tr-350 {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: plot 620ms cubic-bezier(0.32, 0, 0.2, 1) both;
  }

  .sheet-svg .tr-cfg path { animation-delay: 190ms; animation-duration: 420ms; }
  .sheet-svg .via         { animation-delay: 430ms; }
  .sheet-svg .tr-800      { animation-delay: 330ms; }
  /* The derived edge is drawn as a construction line, so it cannot be plotted
     with a dash offset. It arrives instead, which is what it does in the tool. */
  .sheet-svg .tr-800.tr-derived {
    stroke-dasharray: 13 7; stroke-dashoffset: 0;
    animation: ink 460ms ease-out 520ms both;
  }
  .sheet-svg .pad, .sheet-svg .pad-core { animation-delay: 560ms; }
  .sheet-svg .t-big       { animation-delay: 640ms; }
  .sheet-svg .junction    { animation-delay: 700ms; }
  .sheet-svg .tr-450      { animation-delay: 720ms; animation-duration: 380ms; }
  .sheet-svg .t-ok        { animation-delay: 860ms; }
  .sheet-svg .tr-350      { animation-delay: 840ms; animation-duration: 520ms; }
  .sheet-svg .leader, .sheet-svg .note-rule { animation-delay: 900ms; }
  .sheet-svg .c-head, .sheet-svg .c-body    { animation-delay: 980ms; }
  .sheet-svg .overflow    { animation-delay: 1180ms; animation-duration: 560ms; }
  .sheet-svg .divider     { animation-delay: 1080ms; }
  .sheet-svg .s-head, .sheet-svg .s-axis, .sheet-svg .s-tick,
  .sheet-svg .s-num, .sheet-svg .s-fill     { animation-delay: 1160ms; }
  .sheet-svg .s-hatch, .sheet-svg .s-over, .sheet-svg .s-cut,
  .sheet-svg .s-mark                        { animation-delay: 1320ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* main.js mirrors the same query at runtime for anything that has to be told
   twice. Nothing here depends on it: the class only silences, it never reveals. */
.motion-off .caret { animation: none; opacity: 1; }
.motion-off .sheet-svg * { animation: none !important; opacity: 1; stroke-dashoffset: 0; }
.motion-off .sheet-svg .tr-derived { stroke-dasharray: 13 7; }