/*
 * CONSOLE — monospace, boxed, technical.
 * =================================================================
 * Monospace as a brand signal, not as a code style. Headings, body,
 * navigation, everything. It is a real 2026 movement — Vercel, Linear,
 * Cursor, Raycast, Resend, PostHog all lean on it — and for this project it is
 * more than a fashion: a commons whose whole pitch is that it is legible to
 * machines should look like the artefact it is.
 *
 * The rules:
 *
 *  1. **One typeface.** The reader's own monospace. No hierarchy from font
 *     changes, so hierarchy comes from size, weight, rules and boxes.
 *  2. **Exposed structure.** Square corners, visible 1px borders, boxed
 *     sections. Nothing floats; everything sits in a cell.
 *  3. **Console punctuation.** Section headings are prefixed `##`, navigation
 *     items are bracketed, the hero carries a block caret. Set in the accent,
 *     they read as syntax rather than decoration.
 *
 * Dark is the primary scheme here; light is a real second scheme, not an
 * inversion afterthought.
 *
 * Licence: Apache-2.0.
 */

:root {
  --paper:          #fcfcfb;
  --paper-raised:   #ffffff;
  --paper-sunken:   #f2f2ef;
  --line:           #dfdfd9;
  --line-strong:    #b9b9b0;
  --ink-faint:      #8d8d84;
  --ink-muted:      #5f5f58;
  --ink:            #1c1c1a;
  --ink-strong:     #0a0a09;

  --accent:          #197a3d;   /* 5.2:1 on paper */
  --accent-strong:   #0f5a2b;
  --accent-soft:     #e9f4ec;
  --accent-line:     #bcdcc6;
  --accent-contrast: #ffffff;

  --warn:      #9a5b00;
  --warn-soft: #fdf3e5;
  --warn-line: #ebd5b4;
  --ok:        #197a3d;
  --ok-soft:   #e9f4ec;
  --ok-line:   #bcdcc6;

  --art-ground: #f2f2ef;
  --art-1: #197a3d;
  --art-2: #9a5b00;
  --art-3: #5f5f58;
  --art-4: #b9b9b0;
  --art-ink: #1c1c1a;

  /* One typeface, everywhere. */
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
                  Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-display: var(--font-mono);
  --font-body:    var(--font-mono);

  /* Monospace has a large x-height and wide advance, which reads as "big" on
   * the page even when it is small in points — so an earlier version of this
   * scale trimmed every step. That was a mistake: it looked balanced in a
   * screenshot and was tiring to actually read. Body text is now 15-16px, the
   * same as a proportional face would use, and the small end stops at 12px
   * because 11px metadata is decoration, not information. */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --text-md:   clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.08rem + 0.24vw, 1.25rem);
  --text-xl:   clamp(1.375rem, 1.29rem + 0.42vw, 1.625rem);
  --text-2xl:  clamp(1.75rem, 1.55rem + 0.95vw, 2.25rem);
  --text-3xl:  clamp(2rem, 1.65rem + 1.8vw, 3rem);

  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-body:  1.75;

  --tracking-display: -0.01em;
  --tracking-caps:    0.1em;
  --weight-display:   600;

  --measure: 56ch;
  --measure-wide: 72ch;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.375rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  --gutter: clamp(1rem, 3.5vw, 2rem);
  --page-max: 68rem;

  /* Square. Everything. */
  --radius-sm: 0;
  --radius:    0;
  --radius-lg: 0;
  --radius-pill: 0;

  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);
  --rule: 1px dashed var(--line-strong);

  --shadow-sm: none;
  --shadow:    none;
  --shadow-lg: none;

  --ease: steps(1, end);
  --duration: 1ms;
  --mark-size: 2rem;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:          #0b0d0c;
    --paper-raised:   #121513;
    --paper-sunken:   #070908;
    --line:           #232725;
    --line-strong:    #39403c;
    --ink-faint:      #626b66;
    --ink-muted:      #94a09a;
    --ink:            #d6ded9;
    --ink-strong:     #f2f7f4;

    --accent:          #55d37c;
    --accent-strong:   #87e5a4;
    --accent-soft:     #0d1f14;
    --accent-line:     #1d3a28;
    --accent-contrast: #0b0d0c;

    --warn:      #e0a955;
    --warn-soft: #1f1708;
    --warn-line: #3b2d13;
    --ok:        #55d37c;
    --ok-soft:   #0d1f14;
    --ok-line:   #1d3a28;

    --art-ground: #070908;
    --art-1: #55d37c;
    --art-2: #e0a955;
    --art-3: #94a09a;
    --art-4: #39403c;
    --art-ink: #d6ded9;
  }
}

/* ------------------------------------------------------------------
 * Components
 * ------------------------------------------------------------------ */

body { font-variant-ligatures: none; }

.masthead { border-bottom: var(--border-strong); background: var(--paper); position: sticky; top: 0; z-index: 5; }
.wordmark { color: var(--ink-strong); }
/* No "$" prompt. It made the wordmark read as a shell command, which also
 * forced the lowercase — remove one and the other loses its reason. Set as a
 * wordmark instead: uppercase, tracked, and large enough to be the first thing
 * seen rather than a label above the navigation. */
.wordmark-name {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1;
}
.wordmark-tagline { color: var(--ink-faint); font-size: var(--text-xs); padding-left: var(--space-2xs); margin-left: var(--space-3xs); }
.wordmark-tagline::before { content: "// "; color: var(--line-strong); }

.nav a { color: var(--ink-muted); font-size: var(--text-sm); padding-block: var(--space-3xs); }
.nav a::before { content: "["; color: var(--line-strong); }
.nav a::after { content: "]"; color: var(--line-strong); }
.nav a:hover { color: var(--accent); }
.nav a:hover::before, .nav a:hover::after { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--ink-strong); }
.nav a[aria-current="page"]::before, .nav a[aria-current="page"]::after { color: var(--accent); }

.hero h1 { font-size: var(--text-3xl); max-width: 22ch; font-weight: 700; }
.hero h1::after { content: "▊"; color: var(--accent); font-weight: 400; margin-left: 0.15em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lede { font-size: var(--text-md); color: var(--ink-muted); max-width: var(--measure); }
.hero-art svg { border: var(--border-strong); }

.button {
  padding: 0.5rem 0.9rem;
  background: var(--accent); color: var(--accent-contrast);
  font-size: var(--text-sm); font-weight: 600; border-color: var(--accent);
}
.button::before { content: "> "; opacity: 0.65; }
.button:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-contrast); }
.button-quiet { background: transparent; color: var(--ink-strong); border-color: var(--line-strong); }
.button-quiet:hover { background: var(--paper-sunken); color: var(--ink-strong); border-color: var(--ink-muted); }
.more { color: var(--accent); font-size: var(--text-sm); font-weight: 600; }

/* Headings carry their level as syntax. */
.section > h2, .prose h2 { font-size: var(--text-xl); font-weight: 700; padding-bottom: var(--space-2xs); border-bottom: var(--rule); }
.prose h2::before, .section > h2::before { content: "## "; color: var(--accent); font-weight: 400; }
.prose h3 { font-size: var(--text-lg); font-weight: 700; }
.prose h3::before { content: "### "; color: var(--accent); font-weight: 400; }
.prose h4 { font-size: var(--text-base); font-weight: 700; }
.prose h4::before { content: "#### "; color: var(--accent); font-weight: 400; }

.prose strong { color: var(--ink-strong); font-weight: 700; }
.prose li::marker { color: var(--accent); }
.prose ul { list-style: none; padding-left: 1.4em; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: "-"; position: absolute; left: -1.2em; color: var(--accent); }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--space-md); color: var(--ink-muted); }
.prose blockquote::before { content: "> "; color: var(--accent); }
.prose :not(pre) > code { background: var(--paper-sunken); border: var(--border); padding: 0.1em 0.35em; color: var(--accent); }
.prose pre {
  background: var(--paper-sunken); border: var(--border-strong);
  padding: var(--space-sm); font-size: var(--text-sm); line-height: 1.65;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.anchor { color: var(--line-strong); }
.anchor:hover { color: var(--accent); }

.page-head h1 { font-size: var(--text-2xl); font-weight: 700; }
.lede { font-size: var(--text-md); color: var(--ink-muted); margin-top: var(--space-2xs); max-width: var(--measure-wide); }

.crumbs { color: var(--ink-faint); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-3xs); color: var(--line-strong); }

.factbox { border: var(--border-strong); padding: var(--space-sm) var(--space-md); background: var(--paper-raised); }
.factbox dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-faint); }
.factbox dd { color: var(--ink-strong); font-weight: 600; font-size: var(--text-sm); margin-top: 2px; }

.callout { padding: var(--space-sm) var(--space-md); border: var(--border-strong); border-left-width: 3px; background: var(--paper-raised); }
.callout-warn { background: var(--warn-soft); border-color: var(--warn-line); border-left-color: var(--warn); }
.callout-good { background: var(--ok-soft); border-color: var(--ok-line); border-left-color: var(--ok); }
.callout-note { background: var(--accent-soft); border-color: var(--accent-line); border-left-color: var(--accent); }
.callout-warn strong::before { content: "! "; color: var(--warn); }

.badge {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-weight: 700; padding: 0.15em 0.5em; border: 1px solid var(--warn-line);
  background: var(--warn-soft); color: var(--warn);
}
.badge::before { content: "["; } .badge::after { content: "]"; }
.badge-stable { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.badge-planned { border-color: var(--line-strong); background: var(--paper-sunken); color: var(--ink-muted); }
.tag { font-size: var(--text-xs); color: var(--ink-muted); border: var(--border); background: var(--paper-sunken); padding: 0.12em 0.5em; }
.tag::before { content: "#"; color: var(--accent); }

.card { background: var(--paper-raised); border: var(--border-strong); padding: var(--space-md); }
.card:hover { border-color: var(--accent); }
.card h3 { font-size: var(--text-lg); font-weight: 700; }
.card h3 a { text-decoration: none; color: var(--ink-strong); }
.card h3 a:hover { color: var(--accent); }
.card p { color: var(--ink-muted); font-size: var(--text-sm); }
.card-art { margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-2xs); border-bottom: var(--border); }
.card-meta { font-size: var(--text-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.card-limitation { padding-top: var(--space-2xs); border-top: var(--rule); font-size: var(--text-sm); color: var(--ink-muted); }
.card-limitation strong { color: var(--warn); }

.post-item { padding-bottom: var(--space-md); border-bottom: var(--rule); }
.post-item > a { font-size: var(--text-lg); font-weight: 700; color: var(--ink-strong); }
.post-item > a::before { content: "→ "; color: var(--accent); font-weight: 400; }
.post-item > a:hover { color: var(--accent); }
.post-item p { color: var(--ink-muted); font-size: var(--text-sm); }
.post-meta { font-size: var(--text-xs); color: var(--ink-faint); }
.post-cover { margin-bottom: var(--space-lg); border: var(--border-strong); }
.post-footer { padding-top: var(--space-md); border-top: var(--border-strong); color: var(--ink-muted); font-size: var(--text-sm); }
.subscribe { color: var(--ink-faint); font-size: var(--text-sm); margin-top: var(--space-2xs); }

.table-scroll { border: var(--border-strong); background: var(--paper-raised); }
.table-scroll table { font-size: var(--text-sm); }
.table-scroll th, .table-scroll td { padding: var(--space-2xs) var(--space-xs); border-bottom: var(--border); border-right: var(--border); }
.table-scroll th:last-child, .table-scroll td:last-child { border-right: 0; }
.table-scroll thead th { background: var(--paper-sunken); color: var(--ink-strong); font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-xs); }
.table-scroll tbody tr:last-child td { border-bottom: 0; }

.figure svg { border: var(--border-strong); background: var(--art-ground); }
.figure figcaption { color: var(--ink-faint); font-size: var(--text-sm); }
.figure figcaption::before { content: "// "; color: var(--line-strong); }

.footer { border-top: var(--border-strong); background: var(--paper-sunken); color: var(--ink-muted); font-size: var(--text-sm); }
.footer-links a { color: var(--ink-strong); }
.footer-links a::before { content: "["; color: var(--line-strong); }
.footer-links a::after { content: "]"; color: var(--line-strong); }
.footer-links a:hover { color: var(--accent); }
.footer-machine { padding: var(--space-xs) var(--space-sm); background: var(--paper-raised); border: var(--border-strong); border-left: 3px solid var(--accent); }
.footer-nothing { color: var(--ink-faint); }

.swatch { border: var(--border-strong); background: var(--paper-raised); }
.swatch-label { padding: var(--space-3xs) var(--space-2xs); color: var(--ink-muted); border-top: var(--border); }
.type-specimen > div { border-bottom: var(--rule); padding-bottom: var(--space-2xs); }
.type-specimen .label, .space-row { color: var(--ink-faint); }