/* rnet.css — JR / R—Net design system, full bundle (v1 channel).
   Generated by cdn/build.sh: tokens + colors_and_type + glyphs +
   controls + markdown, concatenated. One <link>, no @import waterfall. */

/* ===== tokens.css ===== */
/* ============================================================
   JR / R—Net Design System · Charts & Vectors
   ============================================================
   Version:      1.2
   Last updated: 2026.05.17
   Source:       SYSTEM.md v1.7
   Generated:    tokens.json
   ============================================================
   
   Drop-in CSS custom properties. Import this file at the
   top of any stylesheet:
   
   
   Then reference tokens by their CSS variable name:
   
     .stripe { background: var(--sky-deep); height: 4px; }
     body    { color: var(--ink); background: var(--paper-true); }
   
   ============================================================ */

:root {
  /* ─── Surfaces · Light ─────────────────────────────────── */
  --paper-true:    #FAF6EC;  /* Ceremonial. Personal letters, formal docs. */
  --paper-chart:   #FCF4DF;  /* Technical default. R—Net light docs. */
  --urban:         #F8E4AE;  /* Callout tint ONLY. Never a full-page bg. */

  /* ─── Surfaces · Night ─────────────────────────────────── */
  --night:         #1C1E1C;  /* Dark mode base. Warm charcoal, not pure black. */
  --night-2:       #252824;  /* Dark elevated panel. */
  --night-3:       #2F322D;  /* Dark secondary elevated (note callouts). */
  --night-4:       #3A3D37;  /* Dark tertiary (inline code, chips). */
  --cream:         #EDE8D8;  /* Dark mode ink — instrument paint color. */

  /* ─── Structure · Ink & Panel ──────────────────────────── */
  --ink:           #1F1D18;  /* Primary text on light surfaces. */
  --ink-2:         #3A3730;  /* Secondary deep ink. */
  --graphite:      #6B675C;  /* Labels, metadata, secondary text. */
  --soft:          #989486;  /* Tertiary. Decorative only — fails WCAG body. */
  --panel-light:   #D4CEBC;  /* Borders, rules, dividers (light). */
  --panel:         #8E8B80;  /* Strong rules, panel mid-tone. */
  --panel-deep:    #5A5750;  /* Strong borders, shadows. */
  --night-rule:    #3D403A;  /* Borders in dark mode. */
  --night-rule-soft:#2A2D28; /* Soft dividers in dark mode. */
  --night-graphite:#8A8470;  /* Secondary text in dark mode (AA Large only). */
  --night-soft:    #5E5B50;  /* Tertiary text in dark mode (decorative only). */

  /* ─── Brand · Cockpit-sourced ──────────────────────────── */
  --sky:           #6B9BB8;  /* Personal accent. Light-mode highlights. */
  --sky-deep:      #4A7A96;  /* Eyebrow labels, light-mode accent stripe. */
  --sky-light:     #A8C5D8;  /* Dark-mode notes, sky borders. */
  --ground:        #8B5A3C;  /* Secondary warm. Callout borders, monogram J. */
  --ground-deep:   #6B4226;  /* Borders, classification stripes, anchors. */
  --ground-light:  #B08362;  /* Dark-mode location tags. */
  --amber:         #D49826;  /* R—Net accent. DARK MODE ONLY. */
  --amber-glow:    #F0B84A;  /* Dark-mode glow on amber elements. */
  --amber-deep:    #8C6018;  /* Light-mode amber (rare; use over --amber). */

  /* ─── Chart data · Sectional + scope-sourced (v1.2, §19) ─ */
  --terrain-deep:  #5A6B33;  /* Chart series, light mode. Source: VFR sectional terrain green. */
  --terrain-light: #9DAE73;  /* Chart series, dark mode. Source: terrain green, night band. */
  --scope-deep:    #2F6562;  /* Chart series, light mode. Source: radar-scope / EFIS phosphor teal. */
  --scope-light:   #82AEA9;  /* Chart series, dark mode. Source: scope teal, night band. */

  /* ─── Semantic · Universal R/Y/G ───────────────────────── */
  --ok-fg:         #4A7A3A;  /* Foreground for OK / nominal. */
  --ok-bg:         #D8E0C8;  /* Background tint for OK panels. */
  --ok-glow:       #8DB072;  /* Dark-mode glow for OK indicators. */
  --warn-fg:       #7A5A10;  /* Foreground for warning / caution. */
  --warn-bg:       #F5E4A8;  /* Background tint for warning panels. */
  --warn-glow:     #E6B84A;  /* Dark-mode glow for warning indicators. */
  --alert-fg:      #A8362A;  /* Foreground for alert / critical. */
  --alert-bg:      #ECC8C0;  /* Background tint for alert panels. */
  --alert-glow:    #D4604E;  /* Dark-mode glow for alert indicators. */

  /* ─── Type · Families ──────────────────────────────────── */
  --font-display:  'Outfit', sans-serif;
  --font-body:     'Urbanist', sans-serif;
  --font-mono:     'JetBrainsMono Nerd Font', 'JetBrains Mono', monospace;

  /* ─── Type · Weights ───────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ─── Type · Sizes ─────────────────────────────────────── */
  --size-display:    48px;  /* Range 36–56px */
  --size-h1:         32px;  /* Range 28–36px */
  --size-h2:         12px;  /* Range 11–12px, uppercase mono */
  --size-body:       15px;  /* Range 14–16px */
  --size-metadata:   10px;  /* Range 9–11px, uppercase mono */

  /* ─── Type · Tracking ──────────────────────────────────── */
  --tracking-display-tight: -1.5px;
  --tracking-h1-tight:      -0.5px;
  --tracking-label-loose:   2.5px;
  --tracking-meta-loose:    1.5px;

  /* ─── Type · Line Height ───────────────────────────────── */
  --lh-display: 1.05;
  --lh-h1:      1.15;
  --lh-body:    1.7;

  /* ─── Spacing ──────────────────────────────────────────── */
  --space-page:    48px;
  --space-section: 72px;
  --space-element: 20px;

  /* ─── Layout ───────────────────────────────────────────── */
  --content-max-technical: 1280px;
  --content-max-prose:     720px;

  /* ─── Borders ──────────────────────────────────────────── */
  --border-stripe-accent: 4px;
  --border-rule-hair:     1px;
}

/* ============================================================
   Optional dark mode flip via [data-mode="night"]
   ============================================================ */
[data-mode="night"] {
  --surface-default: var(--night);
  --ink-default:     var(--cream);
  --accent-primary:  var(--amber);
}

[data-mode="day"] {
  --surface-default: var(--paper-true);
  --ink-default:     var(--ink);
  --accent-primary:  var(--sky-deep);
}

/* ===== colors_and_type.css ===== */
/* ============================================================
   colors_and_type.css
   ============================================================
   A thin web-semantic layer on top of `tokens.css`.

   Imports the raw design-system tokens from `tokens.css` (the cockpit palette,
   Outfit / Urbanist / JetBrainsMono families) and exposes
   *semantic* CSS variables — fg1, fg2, bg, accent, h1, p, etc.
   — that switch automatically between the two modes:

       <html data-mode="day">    — ceremonial light
       <html data-mode="night">  — instrumented dark

   This file MUST NOT redefine any primitive declared in
   `tokens.css`. Every new variable here either composes from a
   token via `var(--token)` or names something the spec did not
   yet codify in §4 (a web-control affordance — focus-ring,
   radii, motion). Refactors should always prefer aliasing.

   Font hosting is self-hosted on cdn.rossie.net.
   ============================================================ */


/* ============================================================
   Font faces — sourced from cdn.rossie.net (Cloudflare Pages),
   matching `reference/style-guide.html`'s declaration.
   No third-party font CDN. Same family-names as `tokens.css` so all
   `var(--font-display | --font-body | --font-mono)` references
   resolve identically.
   ============================================================ */
@font-face {
  font-family: 'JetBrainsMono Nerd Font';
  src: url('https://cdn.rossie.net/charts-and-vectors/fonts/jetbrains-mono-nerd-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMono Nerd Font';
  src: url('https://cdn.rossie.net/charts-and-vectors/fonts/jetbrains-mono-nerd-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('https://cdn.rossie.net/charts-and-vectors/fonts/outfit-latin-var.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('https://cdn.rossie.net/charts-and-vectors/fonts/urbanist-latin-var.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

/* ============================================================
   Semantic roles · DAY (ceremonial / light) is the default
   Each value MUST be an upstream `var(...)`. No new colors.
   ============================================================ */
/* `body.vscode-light` activates the same set inside VS Code's
   markdown preview, which carries its theme as a body class and
   never sets `data-mode` (§17.5). */
:root,
[data-mode="day"],
body.vscode-light {
  /* ─── Surface roles ──────────────────────────────────────── */
  --bg:            var(--paper-true);
  --bg-chart:      var(--paper-chart);
  --bg-elev-1:     var(--paper-true);
  --bg-elev-2:     var(--paper-chart);
  --bg-callout:    var(--urban);

  /* ─── Ink roles ──────────────────────────────────────────── */
  --fg-1:          var(--ink);
  --fg-2:          var(--ink-2);
  --fg-3:          var(--graphite);
  --fg-mute:       var(--soft);
  --fg-on-accent:  var(--paper-true);

  /* ─── Rules & borders ────────────────────────────────────── */
  --rule:          var(--panel-light);
  --rule-strong:   var(--panel);
  --rule-anchor:   var(--panel-deep);

  /* ─── Brand accent (per mode) ────────────────────────────── */
  --accent:        var(--sky-deep);
  --accent-soft:   var(--sky);
  --accent-edge:   var(--sky-light);
  --accent-warm:   var(--ground-deep);

  /* ─── Semantic foregrounds & backgrounds ─────────────────── */
  --ok:            var(--ok-fg);
  --ok-bg-tint:    var(--ok-bg);
  --warn:          var(--warn-fg);
  --warn-bg-tint:  var(--warn-bg);
  --alert:         var(--alert-fg);
  --alert-bg-tint: var(--alert-bg);

  /* ─── Focus & interaction (web-control affordance) ───────── */
  --focus-ring:    var(--sky-deep);
  --focus-ring-w:  2px;

  /* ─── Controls (composed; no new colors) ─────────────────── */
  --field-bg:           var(--paper-true);
  --field-border:       var(--panel);
  --field-border-hover: var(--panel-deep);
  --field-border-focus: var(--sky-deep);
  --field-text:         var(--ink);
  --field-placeholder:  var(--graphite);
  --field-disabled-bg:  var(--paper-chart);
  --field-disabled-text:var(--soft);

  /* ─── Floating-surface shadows (popover, dropdown, modal) ── */
  --shadow-flat:    none;
  --shadow-popover: 0 1px 0 var(--panel-light), 0 4px 18px -8px rgba(31, 29, 24, 0.18);
  --shadow-modal:   0 1px 0 var(--panel-light), 0 24px 80px -24px rgba(31, 29, 24, 0.28);

  /* ─── Scrim & inverted surface (web-control affordance) ──── */
  --scrim:        color-mix(in oklab, var(--ink) 56%, transparent);
  --scrim-soft:   color-mix(in oklab, var(--ink) 40%, transparent);
  --bg-inverse:   var(--ink);
  --fg-inverse:   var(--paper-true);

  /* ─── Chart data roles (v1.2 — see SYSTEM.md §19) ────────── */
  /* Categorical series ramp. Scoped to a chart frame (§19.2);
     does not participate in the single-accent rule. */
  --series-1:  var(--sky-deep);
  --series-2:  var(--ground-deep);
  --series-3:  var(--amber-deep);
  --series-4:  var(--terrain-deep);
  --series-5:  var(--scope-deep);
  --series-6:  var(--panel-deep);
  /* Sequential ramp — sectional terrain elevation tint. */
  --seq-1:     var(--paper-chart);
  --seq-2:     var(--urban);
  --seq-3:     var(--ground-light);
  --seq-4:     var(--ground);
  --seq-5:     var(--ground-deep);
}

/* ============================================================
   Semantic roles · NIGHT (instrumented / dark)
   ============================================================ */
/* VS Code's dark and high-contrast preview themes route here.
   High-contrast is a placeholder mapping — the system has no
   high-contrast variant yet (§17.5, open question). */
[data-mode="night"],
body.vscode-dark,
body.vscode-high-contrast,
body.vscode-high-contrast-light {
  --bg:            var(--night);
  --bg-chart:      var(--night-2);
  --bg-elev-1:     var(--night-2);
  --bg-elev-2:     var(--night-3);
  --bg-callout:    var(--night-3);

  --fg-1:          var(--cream);
  --fg-2:          var(--cream);
  --fg-3:          var(--night-graphite);
  --fg-mute:       var(--night-soft);
  --fg-on-accent:  var(--night);

  --rule:          var(--night-rule);
  --rule-strong:   var(--panel);
  --rule-anchor:   var(--night-rule);

  --accent:        var(--amber);
  --accent-soft:   var(--amber-glow);
  --accent-edge:   var(--amber-deep);
  --accent-warm:   var(--ground-light);

  --ok:            var(--ok-glow);
  --ok-bg-tint:    var(--night-3);
  --warn:          var(--warn-glow);
  --warn-bg-tint:  var(--night-3);
  --alert:         var(--alert-glow);
  --alert-bg-tint: var(--night-3);

  --focus-ring:    var(--amber);

  --field-bg:           var(--night-2);
  --field-border:       var(--night-rule);
  --field-border-hover: var(--panel);
  --field-border-focus: var(--amber);
  --field-text:         var(--cream);
  --field-placeholder:  var(--night-graphite);
  --field-disabled-bg:  var(--night-2);
  --field-disabled-text:var(--night-soft);

  --shadow-popover: 0 1px 0 var(--night-rule), 0 4px 18px -8px rgba(0,0,0, 0.5);
  --shadow-modal:   0 1px 0 var(--night-rule), 0 24px 80px -24px rgba(0,0,0, 0.6);

  --scrim:        color-mix(in oklab, var(--night) 64%, transparent);
  --scrim-soft:   color-mix(in oklab, var(--night) 56%, transparent);
  --bg-inverse:   var(--cream);
  --fg-inverse:   var(--night);

  /* ─── Chart data roles (v1.2 — see SYSTEM.md §19) ────────── */
  --series-1:  var(--sky-light);
  --series-2:  var(--ground-light);
  --series-3:  var(--amber-glow);
  --series-4:  var(--terrain-light);
  --series-5:  var(--scope-light);
  --series-6:  var(--night-graphite);
  --seq-1:     var(--night-2);
  --seq-2:     var(--night-4);
  --seq-3:     var(--ground-deep);
  --seq-4:     var(--amber-deep);
  --seq-5:     var(--amber-glow);
}

/* ============================================================
   Type aliases — every named role points at the upstream token.
   `--size-h2` upstream is 12px (the uppercase-mono LABEL size).
   We expose it under the more web-conventional name `--type-label`
   here, plus the existing `--size-h2` is still available.
   ============================================================ */
:root {
  /* ─── Type-size aliases (compose, do not duplicate) ──────── */
  --type-display:    var(--size-display);    /* 48px */
  --type-h1:         var(--size-h1);         /* 32px */
  --type-label:      var(--size-h2);         /* 12px — upstream calls it h2 */
  --type-body:       var(--size-body);       /* 15px */
  --type-meta:       var(--size-metadata);   /* 10px */

  /* New additions used only by web controls (sub-heading, code,
     small body) — these are not in the upstream type table.    */
  --type-h2:         20px;   /* sub-section heading at Outfit 500 */
  --type-h3:         16px;   /* small heading */
  --type-body-sm:    13px;
  --type-code:       13px;

  /* Prose heading ramp — rendered markdown (v1.4, see SYSTEM.md §17).
     Sized for a 720px prose measure, not UI panels; consumed by
     `markdown.css`. Distinct from the UI ramp above by design. */
  --type-md-h1:      38px;
  --type-md-h2:      26px;
  --type-md-h3:      18px;

  /* ─── Tracking aliases ───────────────────────────────────── */
  --track-display:   var(--tracking-display-tight);  /* -1.5px */
  --track-h1:        var(--tracking-h1-tight);       /* -0.5px */
  --track-h2:        -0.2px;                          /* new */
  --track-label:     var(--tracking-label-loose);    /* 2.5px */
  --track-meta:      var(--tracking-meta-loose);     /* 1.5px */

  /* ─── Line-height aliases ────────────────────────────────── */
  /* (upstream already exports --lh-display, --lh-h1, --lh-body) */
  --lh-h2:           1.25;

  /* ─── Spacing — extend upstream 3-step scale to a 10-step ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   var(--space-element);     /* 20px (alias) */
  --space-6:   28px;
  --space-7:   40px;
  --space-8:   var(--space-page);        /* 48px (alias) */
  --space-9:   var(--space-section);     /* 72px (alias) */
  --space-10:  96px;

  /* ─── Borders — alias upstream where it exists ─────────────  */
  --bw-hair:   var(--border-rule-hair);      /* 1px */
  --bw-stripe: var(--border-stripe-accent);  /* 4px */
  --bw-strong: 2px;                          /* new */

  /* ─── Radii (not in upstream — architectural defaults) ───── */
  --radius-0:       0;
  --radius-1:       2px;     /* fields, buttons */
  --radius-2:       4px;     /* tags, chips    */
  --radius-3:       6px;     /* cards, modals  */
  --radius-pill:    9999px;

  /* ─── Motion (not in upstream — web-control affordance) ──── */
  --ease-instrument: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast:        120ms;
  --dur-base:        180ms;
  --dur-slow:        260ms;
}

/* ─── Element defaults ───────────────────────────────────── */
html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  font-weight: 500;
}
h1 {
  font-size: var(--type-h1);
  letter-spacing: var(--track-h1);
  line-height: var(--lh-h1);
  font-weight: 500;
}
h1.display {
  font-size: var(--type-display);
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  font-weight: 600;
}
h2 {
  font-size: var(--type-h2);
  letter-spacing: var(--track-h2);
  line-height: var(--lh-h2);
}
h3 {
  font-size: var(--type-h3);
  line-height: 1.35;
}

.label, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
.label--accent { color: var(--accent); }

.meta {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}
.meta--accent { color: var(--accent); }

p {
  margin: 0 0 var(--space-4) 0;
  max-width: var(--content-max-prose);
}
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--fg-1); }
em, i    { font-style: italic; color: var(--accent-warm); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-instrument);
}
a:hover { border-bottom-color: var(--accent); }
a:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: var(--type-code);
}
:not(pre) > code {
  color: var(--accent);
  letter-spacing: 0.2px;
}

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--rule);
  margin: var(--space-6) 0;
}

/* The system's accent-stripe — apply to top of pages or panels. */
.stripe-accent {
  height: var(--bw-stripe);
  background: var(--accent);
}

.focus-ring:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

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

/* ===== glyphs.css ===== */
/* glyphs.css — JR / R—Net design system · name-based glyph classes.
   GENERATED from GLYPHS.md by fonts/build-fonts.sh — do not edit by hand.
   Rerun the build whenever GLYPHS.md changes (see fonts/UNICODE-RANGE.css).

   Reference a sanctioned glyph by ROLE NAME, never by raw PUA codepoint:

       <span class="glyph glyph-content-briefing" aria-hidden="true"></span>

   The mark is decorative — always pair it with an accessible text label.
   Color follows function (GLYPHS.md §11): set `color` on the element and the
   glyph inherits it. Requires the 'JetBrainsMono Nerd Font' @font-face
   declared in colors_and_type.css. */

.glyph,
[class^="glyph-"],
[class*=" glyph-"] {
  font-family: 'JetBrainsMono Nerd Font', monospace;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Status & Indicators */
.glyph-status-ok::before { content: "\f00c"; }
.glyph-status-fail::before { content: "\f00d"; }
.glyph-status-warn::before { content: "\f071"; }
.glyph-status-info::before { content: "\f129"; }
.glyph-status-online::before { content: "\f111"; }
.glyph-status-offline::before { content: "\f10c"; }
.glyph-status-syncing::before { content: "\f021"; }
.glyph-status-time::before { content: "\f017"; }

/* Infrastructure & Network */
.glyph-infra-server::before { content: "\f233"; }
.glyph-infra-database::before { content: "\f1c0"; }
.glyph-infra-cloud::before { content: "\f0c2"; }
.glyph-infra-network::before { content: "\f0e8"; }
.glyph-infra-router::before { content: "\f1087"; }
.glyph-infra-wifi::before { content: "\f1eb"; }
.glyph-infra-throughput::before { content: "\f0e7"; }
.glyph-infra-device-mobile::before { content: "\f10b"; }
.glyph-infra-switch::before { content: "\f0317"; }
.glyph-infra-ups::before { content: "\f0079"; }
.glyph-infra-vm::before { content: "\ea7a"; }
.glyph-infra-container::before { content: "\f4b7"; }
.glyph-infra-cluster::before { content: "\f06e1"; }
.glyph-infra-cpu::before { content: "\f0ee0"; }
.glyph-infra-memory::before { content: "\f035b"; }
.glyph-infra-storage::before { content: "\f02ca"; }
.glyph-infra-firewall::before { content: "\f1a11"; }
.glyph-infra-vpn::before { content: "\f0582"; }
.glyph-infra-temperature::before { content: "\f050f"; }
.glyph-infra-fan::before { content: "\f0210"; }
.glyph-infra-load::before { content: "\f029a"; }
.glyph-infra-monitor::before { content: "\f0a07"; }
.glyph-infra-backup::before { content: "\f006f"; }
.glyph-infra-camera::before { content: "\f07ae"; }

/* Location & Geography */
.glyph-loc-home-primary::before { content: "\f015"; }
.glyph-loc-home-secondary::before { content: "\f1ad"; }
.glyph-loc-pin::before { content: "\f041"; }
.glyph-loc-compass::before { content: "\f14e"; }
.glyph-loc-aviation::before { content: "\f072"; }

/* Security & System Health */
.glyph-sec-lock::before { content: "\f023"; }
.glyph-sec-shield::before { content: "\f132"; }
.glyph-sec-key::before { content: "\f084"; }

/* Document, Comms, Contact */
.glyph-doc-file::before { content: "\f15b"; }
.glyph-doc-folder::before { content: "\f07b"; }
.glyph-comms-mail::before { content: "\f0e0"; }
.glyph-comms-phone::before { content: "\f095"; }
.glyph-comms-calendar::before { content: "\f073"; }

/* Content-Type Indicators */
.glyph-content-briefing::before { content: "\f0f6"; }
.glyph-content-deep-dive::before { content: "\f02d"; }
.glyph-content-note::before { content: "\f249"; }
.glyph-content-source::before { content: "\f187"; }
.glyph-content-guide::before { content: "\f518"; }
.glyph-content-chronicle::before { content: "\f1ea"; }
.glyph-content-gallery::before { content: "\f302"; }

/* Development & Code */
.glyph-dev-git::before { content: "\f1d3"; }
.glyph-dev-branch::before { content: "\f126"; }
.glyph-dev-terminal::before { content: "\f120"; }
.glyph-dev-code::before { content: "\f121"; }
.glyph-dev-github::before { content: "\f09b"; }
.glyph-dev-linux::before { content: "\f17c"; }

/* Drafting & Navigation (Signature Category) */
.glyph-nav-arrow-up-right::before { content: "\f08e"; }
.glyph-nav-crosshair::before { content: "\f05b"; }
.glyph-nav-target::before { content: "\f140"; }
.glyph-nav-direction::before { content: "\f124"; }
.glyph-nav-grid::before { content: "\f00a"; }

/* Platform & Stack */
.glyph-stack-docker::before { content: "\f21f"; }
.glyph-stack-kubernetes::before { content: "\f10fe"; }
.glyph-stack-ubuntu::before { content: "\f31b"; }
.glyph-stack-debian::before { content: "\f306"; }
.glyph-stack-nixos::before { content: "\f313"; }
.glyph-stack-cloudflare::before { content: "\e792"; }

/* Home Automation */
.glyph-home-assistant::before { content: "\f07d0"; }
.glyph-home-apple::before { content: "\f0035"; }
.glyph-home-zigbee::before { content: "\f0d41"; }
.glyph-home-zwave::before { content: "\f0aea"; }
.glyph-home-bluetooth::before { content: "\f00af"; }
.glyph-home-matter::before { content: "\f0563"; }
.glyph-home-light::before { content: "\f0335"; }
.glyph-home-thermostat::before { content: "\f0393"; }
.glyph-home-lock::before { content: "\f08b2"; }
.glyph-home-door::before { content: "\f081a"; }
.glyph-home-window::before { content: "\f05ae"; }
.glyph-home-motion::before { content: "\f0d91"; }
.glyph-home-presence::before { content: "\f0826"; }
.glyph-home-blinds::before { content: "\f00ac"; }
.glyph-home-garage::before { content: "\f06d9"; }
.glyph-home-doorbell::before { content: "\f12e6"; }
.glyph-home-smoke::before { content: "\f0392"; }
.glyph-home-speaker::before { content: "\f04c3"; }
.glyph-home-tv::before { content: "\f0502"; }
.glyph-home-energy::before { content: "\f1903"; }
.glyph-home-automation::before { content: "\f07d1"; }

/* ===== controls.css ===== */
/* ============================================================
   controls.css — Web controls for Charts & Vectors
   ============================================================
   First production set of UI components, derived per
   SYSTEM.md §15. Buttons, fields, selects, switches, tabs,
   badges, alerts, tables, cards, navigation, tooltips, modal,
   and more.

   Every component composes from existing tokens in `tokens.css`
   and the semantic layer in `colors_and_type.css`. No new
   colors, no new sizes, no new motion values.

   Discipline (from SYSTEM.md §12):
     • No gradients, glass, oversized rounded buttons.
     • Hierarchy comes from type/weight/case/color — not boxes,
       shadows or fills. Most surfaces are hairline-bordered.
     • Single brand accent per mode (sky-deep / amber).
     • Semantic colors only when status is being signaled.
     • Negative space carries weight. Generous padding.
   ============================================================ */


/* ============================================================
   BUTTON
   ============================================================ */
.btn {
  --btn-pad-x: 18px;
  --btn-pad-y: 10px;
  --btn-size: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  padding: var(--btn-pad-y) var(--btn-pad-x);

  font-family: var(--font-mono);
  font-size: var(--btn-size);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  text-decoration: none;
  background: transparent;
  color: var(--fg-1);
  transition: background var(--dur-fast) var(--ease-instrument),
              border-color var(--dur-fast) var(--ease-instrument),
              color var(--dur-fast) var(--ease-instrument);
}
.btn:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}
.btn .glyph,
.btn .nf {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0;
}

/* Primary — filled accent. The single most loaded mark on the page. */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}
.btn--primary:hover:not(:disabled) {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}
[data-mode="night"] .btn--primary:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--fg-on-accent);
}
.btn--primary:active:not(:disabled) {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
}

/* Secondary — outlined, transparent. The default. */
.btn--secondary {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--fg-1);
}
.btn--secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.btn--secondary:active:not(:disabled) {
  background: var(--bg-elev-2);
}

/* Ghost — text-only, hover tints background. For low-weight inline use. */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-3);
  padding: var(--btn-pad-y) 12px;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--bg-elev-2);
  color: var(--fg-1);
}

/* Destructive — alert color, used only for irreversible actions. */
.btn--destructive {
  background: transparent;
  border-color: var(--alert);
  color: var(--alert);
}
.btn--destructive:hover:not(:disabled) {
  background: var(--alert);
  border-color: var(--alert);
  color: var(--fg-on-accent);
}

/* Sizes */
.btn--sm {
  --btn-pad-x: 12px;
  --btn-pad-y: 6px;
  --btn-size: 11px;
  letter-spacing: 2px;
}
.btn--lg {
  --btn-pad-x: 24px;
  --btn-pad-y: 14px;
  --btn-size: 15px;
}

/* Icon-only square — keeps grid alignment with text buttons */
.btn--icon {
  padding: 0;
  width: 36px;
  height: 36px;
}
.btn--icon.btn--sm { width: 28px; height: 28px; }
.btn--icon.btn--lg { width: 44px; height: 44px; }

/* Button group — siblings share a border, single radius shell */
.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
  margin-left: -1px;
}
.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-1);
  border-bottom-left-radius: var(--radius-1);
  margin-left: 0;
}
.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
}
.btn-group .btn:hover,
.btn-group .btn:focus-visible {
  z-index: 1;
  position: relative;
}

/* ============================================================
   FIELD — input / textarea / select
   ============================================================
   A field carries: optional <label class="field__label">, the
   control itself, and optional <span class="field__help"> or
   <span class="field__error">. Stack vertically with gap 6px.
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}
.field__label .req { color: var(--alert); margin-left: 2px; }
.field__help {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}
.field__error {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--alert);
}

/* The input itself */
.input,
.textarea,
.select {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
  background: var(--field-bg);
  color: var(--field-text);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-1);
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-instrument);
}
/* Single-line inputs share a fixed height regardless of font-size variant
   (so .input--mono at 13px matches default at 15px). */
.input, .select { height: 40px; }
.textarea { padding: 10px 12px; min-height: 88px; line-height: 1.55; resize: vertical; }
.input::placeholder,
.textarea::placeholder {
  color: var(--field-placeholder);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.3px;
}
.input:hover:not(:disabled),
.textarea:hover:not(:disabled),
.select:hover:not(:disabled) {
  border-color: var(--field-border-hover);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--field-border-focus) 22%, transparent);
}
.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--field-disabled-bg);
  color: var(--field-disabled-text);
  cursor: not-allowed;
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--alert);
}

/* Code-style mono input — for IDs, paths, technical values */
.input--mono {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.3px;
}

/* Input wrapper for prefix/suffix glyphs */
.input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.input-wrap .input { padding-left: 38px; }
.input-wrap__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-3);
  pointer-events: none;
}

/* Native select — keep the system arrow */
.select {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

/* ============================================================
   CHECKBOX / RADIO / SWITCH
   ============================================================
   The native control is hidden; we draw the visual using a span
   sibling. Stays accessible because focus and checked still
   apply to the real input.
   ============================================================ */
.check,
.radio,
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: var(--fg-1);
}
.check input,
.radio input,
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check__box,
.radio__dot,
.switch__track {
  flex-shrink: 0;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}

.check__box {
  width: 16px; height: 16px;
  border-radius: var(--radius-1);
  position: relative;
}
.check input:checked ~ .check__box {
  background: var(--accent);
  border-color: var(--accent);
}
.check input:checked ~ .check__box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid var(--fg-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-mode="night"] .check input:checked ~ .check__box::after {
  border-color: var(--fg-on-accent);
}
.check input:focus-visible ~ .check__box {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

.radio__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  position: relative;
}
.radio input:checked ~ .radio__dot {
  border-color: var(--accent);
}
.radio input:checked ~ .radio__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}
.radio input:focus-visible ~ .radio__dot {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Switch — instrumented toggle, more cockpit than iOS bubble */
.switch__track {
  width: 36px; height: 18px;
  border-radius: var(--radius-pill);
  position: relative;
  background: var(--bg-elev-2);
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--fg-3);
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-instrument),
              background var(--dur-fast) var(--ease-instrument);
}
.switch input:checked ~ .switch__track {
  background: var(--accent);
}
.switch input:checked ~ .switch__track::after {
  transform: translateX(18px);
  background: var(--fg-on-accent);
}
[data-mode="night"] .switch input:checked ~ .switch__track::after {
  background: var(--fg-on-accent);
}
.switch input:focus-visible ~ .switch__track {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   BADGE / CHIP / TAG
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  color: var(--fg-3);
  background: transparent;
}
.badge .nf, .badge .glyph { font-size: 11px; letter-spacing: 0; }

.badge--accent { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.badge--warm   { color: var(--accent-warm); border-color: color-mix(in oklab, var(--accent-warm) 50%, transparent); }
.badge--ok     { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 50%, transparent); }
.badge--warn   { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 50%, transparent); }
.badge--alert  { color: var(--alert); border-color: color-mix(in oklab, var(--alert) 50%, transparent); }

/* Solid variant — filled status pill */
.badge--solid.badge--accent { background: var(--accent); color: var(--fg-on-accent); border-color: var(--accent); }
.badge--solid.badge--ok     { background: var(--ok-bg-tint); color: var(--ok); border-color: var(--ok); }
.badge--solid.badge--warn   { background: var(--warn-bg-tint); color: var(--warn); border-color: var(--warn); }
.badge--solid.badge--alert  { background: var(--alert-bg-tint); color: var(--alert); border-color: var(--alert); }
[data-mode="night"] .badge--solid.badge--ok    { background: color-mix(in oklab, var(--ok) 18%, var(--bg-elev-1)); }
[data-mode="night"] .badge--solid.badge--warn  { background: color-mix(in oklab, var(--warn) 18%, var(--bg-elev-1)); }
[data-mode="night"] .badge--solid.badge--alert { background: color-mix(in oklab, var(--alert) 18%, var(--bg-elev-1)); }

/* Pill — full pill rounding for navigation chips */
.badge--pill { border-radius: var(--radius-pill); padding: 4px 10px; }

/* Dismissible chip */
.chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 14px; height: 14px;
  border: 0; padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  font-family: var(--font-mono);
}
.chip-close:hover { opacity: 1; }
.chip-close:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   ALERT / CALLOUT BANNER
   ============================================================
   The system already specifies callouts in §10. This formalizes
   them as components. Border-left + tinted background.
   ============================================================ */
.alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  border-left-width: 3px;
  background: var(--bg-elev-1);
  color: var(--fg-1);
}
.alert__icon {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--fg-3);
  line-height: 1.4;
}
.alert__body { min-width: 0; }
.alert__title {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-3);
  margin: 0 0 4px 0;
}
.alert__text {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--fg-1);
}
.alert__close {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  align-self: start;
}
.alert__close:hover { color: var(--fg-1); }
.alert__close:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

.alert--note {
  background: var(--bg-callout);
  border-color: var(--accent-warm);
}
.alert--note .alert__icon,
.alert--note .alert__title { color: var(--accent-warm); }

.alert--ok    { background: var(--ok-bg-tint);    border-color: var(--ok); }
.alert--warn  { background: var(--warn-bg-tint);  border-color: var(--warn); }
.alert--alert { background: var(--alert-bg-tint); border-color: var(--alert); }
.alert--ok    .alert__icon, .alert--ok    .alert__title { color: var(--ok); }
.alert--warn  .alert__icon, .alert--warn  .alert__title { color: var(--warn); }
.alert--alert .alert__icon, .alert--alert .alert__title { color: var(--alert); }

/* ============================================================
   CARD / PANEL
   ============================================================
   Hairline border, sharp corners (radius-3 max), no shadow by
   default. The system's `corner-brackets` modifier draws the
   four registration marks from SYSTEM.md §6.
   ============================================================ */
.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 28px;
  position: relative;
}
.card__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2);
  letter-spacing: var(--track-h2);
  line-height: 1.2;
  color: var(--fg-1);
}
.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.card__meta {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: right;
  line-height: 1.7;
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 18px;
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}

/* Stripe variant — top accent stripe */
.card--stripe {
  border-top: var(--bw-stripe) solid var(--accent);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Corner brackets — uses :before/:after pairs at all 4 corners */
.card--brackets { border: 0; padding: 32px; }
.card--brackets::before,
.card--brackets::after,
.card--brackets > .br-tr,
.card--brackets > .br-bl {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--rule-anchor);
}
.card--brackets::before  { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.card--brackets::after   { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.card--brackets > .br-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.card--brackets > .br-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }

/* ============================================================
   TABS / SEGMENTED
   ============================================================ */
.tabs {
  display: inline-flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  gap: 0;
}
.tabs__tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  position: relative;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tabs__tab:hover { color: var(--fg-1); }
.tabs__tab[aria-selected="true"],
.tabs__tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tabs__tab:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}

/* Segmented control — pill-style tabs for terse choices */
.segmented {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-1);
  padding: 2px;
  background: var(--bg-elev-1);
}
.segmented__item {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  border-radius: var(--radius-1);
}
.segmented__item:hover { color: var(--fg-1); }
.segmented__item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.segmented__item.is-active,
.segmented__item[aria-pressed="true"] {
  background: var(--accent);
  color: var(--fg-on-accent);
}
[data-mode="night"] .segmented__item.is-active,
[data-mode="night"] .segmented__item[aria-pressed="true"] { color: var(--fg-on-accent); }

/* ============================================================
   TABLE
   ============================================================
   Engineering-spec sheet: light dividers, mono headers, dense
   rows. Status carried by semantic glow on the value cell.
   ============================================================ */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--fg-1);
}
.table th,
.table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--rule-strong);
}
.table tbody tr:hover { background: var(--bg-elev-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .mono { font-family: var(--font-mono); font-size: 12px; }
.table .num  { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--space-7);
  height: 64px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--fg-1);
  text-decoration: none;
}
.topbar__brand .em { color: var(--accent); }
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.topbar__nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-1);
  border-bottom: 0;
  color: var(--fg-3);
}
.topbar__nav a:hover { color: var(--fg-1); background: var(--bg-elev-2); }
.topbar__nav a:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.topbar__nav a[aria-current="page"],
.topbar__nav a.is-active {
  color: var(--accent);
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Sidebar nav — vertical, dense */
.sidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 24px;
  border-right: 1px solid var(--rule);
  background: var(--bg);
  min-width: 240px;
}
.sidenav__label {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 16px 12px 6px;
}
.sidenav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
  text-decoration: none;
  border-radius: var(--radius-1);
  border-bottom: 0;
}
.sidenav__item .nf { font-size: 13px; color: var(--fg-3); }
.sidenav__item:hover { color: var(--fg-1); background: var(--bg-elev-2); }
.sidenav__item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.sidenav__item:hover .nf { color: var(--accent); }
.sidenav__item[aria-current="page"],
.sidenav__item.is-active {
  color: var(--accent);
  background: var(--bg-elev-2);
}
.sidenav__item.is-active .nf { color: var(--accent); }

/* Breadcrumbs */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.crumbs a { color: var(--fg-3); border-bottom: 0; }
.crumbs a:hover { color: var(--accent); }
.crumbs a:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.crumbs__sep { color: var(--rule-strong); }
.crumbs > :last-child { color: var(--fg-1); }

/* Pagination */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pagination__link {
  min-width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg-3);
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
}
.pagination__link:hover { color: var(--fg-1); border-color: var(--rule); }
.pagination__link:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.pagination__link[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
}
.pagination__ellipsis { padding: 0 6px; color: var(--fg-3); font-family: var(--font-mono); }

/* ============================================================
   MODAL / DIALOG
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-overlay[hidden] { display: none; }
.drawer-overlay[hidden],
.drawer[hidden] { display: none; }
.modal {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-top: var(--bw-stripe) solid var(--accent);
  border-radius: var(--radius-3);
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}
.modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--rule);
}
.modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--fg-1);
}
.modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.modal__body { padding: 20px 28px; overflow-y: auto; }
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   TOOLTIP & POPOVER
   ============================================================ */
.tooltip {
  display: inline-block;
  padding: 6px 10px;
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: var(--radius-1);
  border: 1px solid var(--bg-inverse);
}

.popover {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 14px 16px;
  box-shadow: var(--shadow-popover);
  font-size: var(--type-body-sm);
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 500;
  color: var(--fg-3);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 24px; height: 24px; font-size: 9px; }
.avatar--lg { width: 48px; height: 48px; font-size: 14px; }

/* ============================================================
   PROGRESS / METER
   ============================================================ */
.progress {
  width: 100%;
  height: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-instrument);
}
.progress--ok .progress__bar    { background: var(--ok); }
.progress--warn .progress__bar  { background: var(--warn); }
.progress--alert .progress__bar { background: var(--alert); }

/* ============================================================
   KBD — keyboard chip
   ============================================================ */
kbd, .kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: var(--radius-1);
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fg-1);
  line-height: 1;
}

/* ============================================================
   STAT (cockpit-style metric box)
   ============================================================ */
.stat {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  padding: 14px 18px;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.stat__label .nf { color: var(--accent); margin-right: 6px; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: var(--fg-1);
  line-height: 1;
}
.stat__value .unit {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  margin-left: 2px;
}

/* ============================================================
   BANNER — full-width page-top status / system message
   ============================================================
   Distinct from `.alert`: banners run flush across the top of
   a page or layout region, are 36–44 px tall, and carry one
   semantic role. Use sparingly — they take the most visual
   weight on the surface.
   ============================================================ */
.banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: var(--bg-callout);
  border-bottom: 1px solid var(--rule);
  border-top: 3px solid var(--accent-warm);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.banner .nf, .banner__icon { font-size: 12px; color: var(--accent-warm); }
.banner__title { font-weight: 600; }
.banner__text {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-1);
  flex: 1;
}
.banner__actions { display: flex; gap: 8px; margin-left: auto; }
.banner__close {
  background: transparent; border: 0; padding: 4px 6px;
  font-family: var(--font-mono); color: var(--fg-3);
  cursor: pointer;
}
.banner__close:hover { color: var(--fg-1); }
.banner__close:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.banner--ok    { background: var(--ok-bg-tint);    border-top-color: var(--ok); }
.banner--warn  { background: var(--warn-bg-tint);  border-top-color: var(--warn); }
.banner--alert { background: var(--alert-bg-tint); border-top-color: var(--alert); }
.banner--ok    .nf, .banner--ok    .banner__icon { color: var(--ok); }
.banner--warn  .nf, .banner--warn  .banner__icon { color: var(--warn); }
.banner--alert .nf, .banner--alert .banner__icon { color: var(--alert); }

/* ============================================================
   TOAST / SNACKBAR — transient, dismissible, bottom-right stack
   ============================================================
   Visually similar to `.alert` but compact, fixed-positioned,
   and intended to auto-dismiss. The `.toast-stack` container
   holds 1–3 of them.
   ============================================================ */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 60;
  pointer-events: none;
}
.toast-stack > .toast { pointer-events: auto; }

.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 320px;
  max-width: 440px;
  padding: 12px 14px;
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--fg-1);
  animation: toast-in var(--dur-base) var(--ease-instrument);
}
.toast__icon {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-3);
  line-height: 1;
}
.toast__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.toast__close {
  background: transparent; border: 0; padding: 0 4px;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--fg-3); cursor: pointer;
}
.toast__close:hover { color: var(--fg-1); }
.toast__close:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

.toast--ok    { border-left-color: var(--ok); }
.toast--warn  { border-left-color: var(--warn); }
.toast--alert { border-left-color: var(--alert); }
.toast--ok    .toast__icon, .toast--ok    .toast__title { color: var(--ok); }
.toast--warn  .toast__icon, .toast--warn  .toast__title { color: var(--warn); }
.toast--alert .toast__icon, .toast--alert .toast__title { color: var(--alert); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   DROPDOWN MENU — click-to-open menu list
   ============================================================
   Pure-presentation: pair with your own open/close state. The
   wrapper `.menu-anchor` is just a positioning context.
   ============================================================ */
.menu-anchor { position: relative; display: inline-block; }
.menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-popover);
  padding: 6px;
  z-index: 40;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
}
.menu[hidden] { display: none; }
.menu--right { left: auto; right: 0; }

.menu__label {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 8px 12px 4px;
}
.menu__item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  border-radius: var(--radius-1);
  cursor: pointer;
  border-bottom: 0;
  text-decoration: none;
}
.menu__item:hover { background: var(--bg-elev-2); color: var(--fg-1); }
.menu__item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.menu__item .nf { font-size: 13px; color: var(--fg-3); line-height: 1; }
.menu__item:hover .nf { color: var(--accent); }
.menu__item kbd,
.menu__item .kbd { font-size: 9px; padding: 1px 5px; }
.menu__item--danger { color: var(--alert); }
.menu__item--danger:hover { background: var(--alert-bg-tint); }
.menu__item--danger .nf { color: var(--alert); }
.menu__item[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.menu__divider {
  height: 1px;
  background: var(--rule);
  margin: 6px 4px;
  border: 0;
}

/* ============================================================
   CODE BLOCK — pre/code formatting for technical snippets
   ============================================================ */
pre.codeblock,
.codeblock {
  display: block;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 14px 16px;
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--type-code);
  line-height: 1.6;
  color: var(--fg-1);
  white-space: pre;
}
.codeblock .tk-key  { color: var(--accent); }
.codeblock .tk-str  { color: var(--accent-warm); }
.codeblock .tk-num  { color: var(--ok); }
.codeblock .tk-com  { color: var(--fg-3); font-style: italic; }
.codeblock .tk-glow { color: var(--accent-soft); }

/* Header strip — filename / lang label */
.codeblock-frame {
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  overflow: hidden;
}
.codeblock-frame__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}
.codeblock-frame__head .nf { color: var(--accent); margin-right: 6px; }
.codeblock-frame .codeblock {
  border: 0;
  border-radius: 0;
  background: var(--bg-elev-1);
}

/* ============================================================
   EMPTY STATE — "no data" placeholder
   ============================================================ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-3);
  background: transparent;
  color: var(--fg-3);
}
.empty__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--fg-3);
}
.empty__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--fg-1);
  letter-spacing: -0.2px;
}
.empty__text {
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--fg-3);
  max-width: 340px;
}
.empty__actions {
  display: flex; gap: 8px;
  margin-top: 6px;
}

/* ============================================================
   SPINNER — async indicator
   ============================================================ */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
  vertical-align: middle;
}
.spinner--sm { width: 12px; height: 12px; border-width: 1.5px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton block (loading placeholder) */
.skel {
  display: inline-block;
  background: var(--bg-elev-2);
  border-radius: var(--radius-1);
  position: relative;
  overflow: hidden;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--fg-3) 8%, transparent) 50%,
    transparent 100%);
  animation: skel-shimmer 1.4s linear infinite;
}
.skel--line { height: 12px; width: 100%; }
.skel--title { height: 22px; width: 50%; }
@keyframes skel-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ============================================================
   RANGE SLIDER — value selection
   ============================================================ */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
}
.range::-moz-range-track {
  height: 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  margin-top: -6px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-instrument);
}
.range::-moz-range-thumb {
  width: 14px; height: 14px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 30%, transparent);
}
.range:hover::-webkit-slider-thumb { background: var(--accent-warm); }
[data-mode="night"] .range:hover::-webkit-slider-thumb { background: var(--accent-soft); }

/* Pair the slider with a label + value readout */
.range-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
}
.range-field .field__label { grid-column: 1; }
.range-field__value {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  grid-column: 2;
  grid-row: 1;
}
.range-field .range { grid-column: 1 / -1; }

/* ============================================================
   STEPPER — numbered process flow (linear)
   ============================================================ */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.stepper__step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  position: relative;
  color: var(--fg-3);
}
.stepper__step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  margin: 0 14px;
}
.stepper__num {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-elev-1);
  color: var(--fg-3);
  flex-shrink: 0;
}
.stepper__label { white-space: nowrap; font-weight: 500; }

.stepper__step.is-complete .stepper__num {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
}
[data-mode="night"] .stepper__step.is-complete .stepper__num { color: var(--fg-on-accent); }
.stepper__step.is-complete { color: var(--fg-1); }
.stepper__step.is-complete:not(:last-child)::after { background: var(--accent); }

.stepper__step.is-current .stepper__num {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-elev-1);
}
.stepper__step.is-current { color: var(--accent); }

/* ============================================================
   AVATAR GROUP — overlapping avatars with optional overflow chip
   ============================================================ */
.avatar-group {
  display: inline-flex;
  align-items: center;
}
.avatar-group .avatar {
  margin-left: -8px;
  border: 2px solid var(--bg);
  background: var(--bg-elev-2);
}
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-group__more {
  margin-left: -8px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 2px solid var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--fg-3);
}

/* ============================================================
   DRAWER / SIDE SHEET — slide-in panel (left or right)
   ============================================================
   Pair with your own open/close state. `.drawer-overlay` is
   optional; use when the drawer should dim the page beneath.
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: var(--scrim-soft);
  z-index: 50;
}

.drawer {
  position: fixed;
  top: 0; bottom: 0;
  right: 0;
  width: min(420px, calc(100vw - 32px));
  background: var(--bg-elev-1);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-modal);
  z-index: 51;
  display: flex;
  flex-direction: column;
  animation: drawer-in var(--dur-base) var(--ease-instrument);
}
.drawer--left {
  right: auto; left: 0;
  border-left: 0;
  border-right: 1px solid var(--rule);
  animation: drawer-in-left var(--dur-base) var(--ease-instrument);
}
.drawer__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--rule);
}
.drawer__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--fg-1);
}
.drawer__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.drawer__body { padding: 20px 28px; overflow-y: auto; flex: 1; }
.drawer__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--rule);
}

@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawer-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* ============================================================
   ACCORDION / DISCLOSURE — uses native <details>/<summary>
   ============================================================
   Each item collapses independently. No JS required for the
   open/close itself; the chevron rotates via [open] state.
   ============================================================ */
.accordion {
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  overflow: hidden;
}
.accordion__item {
  border-bottom: 1px solid var(--rule);
}
.accordion__item:last-child { border-bottom: 0; }
.accordion__item > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-1);
  background: var(--bg-elev-1);
}
.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary:hover { background: var(--bg-elev-2); }
.accordion__item > summary:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.accordion__num {
  font-size: var(--type-meta);
  letter-spacing: 1px;
  color: var(--accent);
}
.accordion__chevron {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  transition: transform var(--dur-fast) var(--ease-instrument);
}
.accordion__item[open] > summary { color: var(--accent); }
.accordion__item[open] > summary .accordion__chevron { transform: rotate(90deg); color: var(--accent); }
.accordion__body {
  padding: 16px 20px 20px;
  background: var(--bg-elev-1);
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  line-height: 1.65;
  color: var(--fg-1);
}

/* ============================================================
   NUMBER INPUT — stepper buttons flanking the field
   ============================================================ */
.number-input {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-1);
  background: var(--field-bg);
  overflow: hidden;
}
.number-input:focus-within { border-color: var(--field-border-focus); }
.number-input__btn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.number-input__btn:hover:not(:disabled) { background: var(--bg-elev-2); color: var(--fg-1); }
.number-input__btn:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.number-input__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.number-input__btn--minus { border-right: 1px solid var(--rule); }
.number-input__btn--plus  { border-left:  1px solid var(--rule); }
.number-input .input {
  border: 0;
  border-radius: 0;
  text-align: center;
  width: 60px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: transparent;
}
.number-input .input:focus { box-shadow: none; }

/* ============================================================
   BUTTON · LOADING — inline spinner replaces leading content
   ============================================================ */
.btn--loading {
  position: relative;
  pointer-events: none;
}
.btn--loading::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 720ms linear infinite;
  margin-right: 8px;
  vertical-align: -1px;
}
.btn--loading.btn--lg::before { width: 14px; height: 14px; }
.btn--loading.btn--sm::before { width: 10px; height: 10px; border-width: 1px; }

/* ============================================================
   STATUS DOT — non-text indicator, optionally pulsing
   ============================================================ */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-3);
  flex-shrink: 0;
  vertical-align: middle;
}
.dot--sm { width: 6px; height: 6px; }
.dot--lg { width: 10px; height: 10px; }
.dot--ok    { background: var(--ok); }
.dot--warn  { background: var(--warn); }
.dot--alert { background: var(--alert); }
.dot--info  { background: var(--accent); }
.dot--pulse { position: relative; }
.dot--pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: dot-pulse 1.6s var(--ease-instrument) infinite;
}
.dot--pulse.dot--ok::after    { background-color: var(--ok); }
.dot--pulse.dot--warn::after  { background-color: var(--warn); }
.dot--pulse.dot--alert::after { background-color: var(--alert); }
.dot--pulse.dot--info::after  { background-color: var(--accent); }
@keyframes dot-pulse {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* ============================================================
   DROPZONE — drag-and-drop file region
   ============================================================ */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 24px;
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius-3);
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  color: var(--fg-1);
}
.dropzone:hover,
.dropzone.is-drag-over {
  border-color: var(--accent);
  background: var(--bg-elev-2);
}
.dropzone:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.dropzone__icon {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
}
.dropzone__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
}
.dropzone__text em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dropzone__hint {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ============================================================
   COMBOBOX — input + filterable menu (presentational only;
   pair with your own filtering logic)
   ============================================================ */
.combobox {
  position: relative;
  display: inline-block;
  width: 100%;
}
.combobox__input { padding-right: 36px; }
.combobox__caret {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  pointer-events: none;
}
.combobox__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-popover);
  padding: 4px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 40;
}
.combobox__menu[hidden] { display: none; }
.combobox__option {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  border-radius: var(--radius-1);
  cursor: pointer;
  border-bottom: 0;
}
.combobox__option:hover,
.combobox__option.is-active { background: var(--bg-elev-2); }
.combobox__option:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.combobox__option .nf { font-size: 12px; color: var(--fg-3); }
.combobox__option:hover .nf,
.combobox__option.is-active .nf { color: var(--accent); }
.combobox__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--fg-3);
  text-transform: uppercase;
}

/* ============================================================
   TAG INPUT — chips + bare entry field
   ============================================================ */
.tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-1);
  cursor: text;
  min-height: 38px;
  align-items: center;
}
.tag-input:focus-within { border-color: var(--field-border-focus); }
.tag-input .badge { margin: 1px 0; }
.tag-input__entry {
  flex: 1;
  min-width: 100px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  outline: none;
  padding: 4px 2px;
}
.tag-input__entry::placeholder {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--field-placeholder);
  letter-spacing: 0.3px;
}

/* ============================================================
   STAT · TREND CHIP — appended inside .stat__value
   ============================================================ */
.stat__trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  vertical-align: middle;
}
.stat__trend--up   { color: var(--ok);    background: color-mix(in oklab, var(--ok) 14%, transparent); }
.stat__trend--down { color: var(--alert); background: color-mix(in oklab, var(--alert) 14%, transparent); }
.stat__trend--flat { color: var(--fg-3);  background: var(--bg-elev-2); }

/* ============================================================
   ICON BADGE — number / dot overlay on an icon, button or avatar
   ============================================================
   Apply `.has-icon-badge` to a positioning parent; the badge
   absolute-positions to the top-right corner.
   ============================================================ */
.has-icon-badge { position: relative; }
.icon-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0 4px;
  background: var(--alert);
  color: var(--fg-on-accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--bg);
  line-height: 1;
}
.icon-badge--dot {
  min-width: 8px; width: 8px; height: 8px;
  padding: 0;
  top: -2px; right: -2px;
  font-size: 0;
}
.icon-badge--ok      { background: var(--ok); }
.icon-badge--warn    { background: var(--warn); }
.icon-badge--accent  { background: var(--accent); }

/* ============================================================
   TAB COUNT — small numeric pill next to a .tabs__tab label
   ============================================================ */
.tabs__count {
  display: inline-flex;
  align-items: center; justify-content: center;
  margin-left: 8px;
  min-width: 18px;
  padding: 0 5px;
  height: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--fg-3);
  background: var(--bg-elev-2);
  border-radius: var(--radius-pill);
  line-height: 1;
}
.tabs__tab[aria-selected="true"] .tabs__count,
.tabs__tab.is-active .tabs__count {
  color: var(--fg-on-accent);
  background: var(--accent);
}
[data-mode="night"] .tabs__tab.is-active .tabs__count,
[data-mode="night"] .tabs__tab[aria-selected="true"] .tabs__count { color: var(--fg-on-accent); }
.tabs__count--alert { color: var(--alert) !important; background: var(--alert-bg-tint) !important; }

/* ============================================================
   INLINE EDIT — click-to-edit text/value pattern
   ============================================================
   The read state shows a hover affordance (subtle bg + edit
   glyph). The edit state replaces with .input.
   ============================================================ */
.inline-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: var(--radius-1);
  cursor: text;
  transition: background var(--dur-fast);
  border-bottom: 0;
}
.inline-edit:hover {
  background: var(--bg-elev-2);
}
.inline-edit:hover .inline-edit__icon { opacity: 1; }
.inline-edit:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
.inline-edit__value {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.inline-edit__icon {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.inline-edit.is-editing { padding: 0; background: transparent; }
.inline-edit.is-editing .inline-edit__icon,
.inline-edit.is-editing .inline-edit__value { display: none; }

/* ============================================================
   TABLE · SORTABLE HEADER — clickable th with sort indicator
   ============================================================ */
.table th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.table th.is-sortable:hover { color: var(--fg-1); }
.table__sort-icon {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rule-strong);
  width: 0;
  letter-spacing: -2px;
}
.table__sort-icon::after { content: '⇅'; }
.table th.is-sortable.is-asc  .table__sort-icon::after { content: '↑'; color: var(--accent); }
.table th.is-sortable.is-desc .table__sort-icon::after { content: '↓'; color: var(--accent); }
.table th.is-sortable.is-asc,
.table th.is-sortable.is-desc { color: var(--accent); }

/* ============================================================
   TOOLTIP · DIRECTIONAL — adds a triangular arrow
   ============================================================
   Apply `.tooltip--top|right|bottom|left` to a positioned wrapper
   or directly on the tooltip span. The arrow uses a single
   ::after pseudo with a rotated square trick.
   ============================================================ */
.tooltip {
  position: relative;
}
.tooltip--top::after,
.tooltip--right::after,
.tooltip--bottom::after,
.tooltip--left::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: var(--bg-inverse);
  border: 1px solid var(--bg-inverse);
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}
.tooltip--top::after    { bottom: -4px; left: 50%; margin-left: -3px; }
.tooltip--bottom::after { top:    -4px; left: 50%; margin-left: -3px; transform: rotate(225deg); }
.tooltip--right::after  { left:   -4px; top:  50%; margin-top:  -3px; transform: rotate(135deg); }
.tooltip--left::after   { right:  -4px; top:  50%; margin-top:  -3px; transform: rotate(315deg); }

/* ============================================================
   COMMAND PALETTE — ⌘K spotlight overlay
   ============================================================ */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 70;
}
.cmdk-overlay[hidden] { display: none; }
.cmdk {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  background: var(--bg-elev-1);
  border: 1px solid var(--rule);
  border-top: var(--bw-stripe) solid var(--accent);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cmdk__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.cmdk__icon {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent);
}
.cmdk__input {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-1);
  width: 100%;
  outline: none;
}
.cmdk__input::placeholder {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.5px;
}
.cmdk__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
}
.cmdk__group + .cmdk__group { margin-top: 4px; }
.cmdk__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 14px 6px;
}
.cmdk__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  border-radius: var(--radius-1);
  cursor: pointer;
  border-bottom: 0;
}
.cmdk__item:hover,
.cmdk__item.is-active { background: var(--bg-elev-2); }
.cmdk__item:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: -2px;
}
.cmdk__item .nf { font-size: 14px; color: var(--fg-3); }
.cmdk__item:hover .nf,
.cmdk__item.is-active .nf { color: var(--accent); }
.cmdk__item__hint {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--fg-3);
  text-transform: uppercase;
}
.cmdk__foot {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  background: var(--bg-elev-2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cmdk__foot kbd { margin-right: 4px; }

/* ============================================================
   AVATAR · SYSTEM (instrument voice)
   ============================================================
   The system avatar is set apart from a plain `.avatar` by its
   mono typeface, not by any surface treatment. The attitude-
   indicator reference is carried where it belongs — the em-dash,
   the palette, the accent stripe. The avatar stays quiet: a flat
   surface neutral, legible as an identity chip first. No split,
   no gradient (§16.2).
   ============================================================ */
.avatar--ai {
  background: var(--bg-elev-1);
  color: var(--fg-1);
  border-color: var(--rule);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.6px;
}

button.avatar--ai {
  cursor: pointer;
  appearance: none;
  font-family: var(--font-mono);
}
button.avatar--ai:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   DIVIDER — section rule with mono label inline
   ============================================================ */
.section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: var(--space-6) 0 var(--space-4);
}
.section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ===== markdown.css ===== */
/* ============================================================
   markdown.css
   ============================================================
   Rendered-markdown styling for the JR / R—Net design system.
   Companion to `SYSTEM.md §17` (Rendered Markdown).

   Imports the semantic layer from `colors_and_type.css` and styles
   the *bare* elements a markdown renderer emits — `h1`–`h6`, `p`,
   `ul`/`ol`, `pre`, `code`, `blockquote`, `hr`, `table` — with no
   class hooks required on the rendered output.

   Three scopes:
     .md               — the rendered markdown body (720px measure).
     .doc              — standalone preview chrome around it (stripe,
                         eyebrow, footer). Per §17, chrome is supplied
                         by the previewer, never by the markdown.
     body.vscode-body  — the VS Code built-in markdown preview (§17.5).
                         The body element rules carry both `.md` and
                         this scope via `:is()`; the VS Code chrome is
                         a separate section at the foot of this file.

   Discipline (§4.5 of proposals/graduated/markdown-preview.md):
     - No forked role variables. Every value composes from the
       §4.7 semantic layer in `colors_and_type.css`.
     - Code blocks and callouts re-derive the `.codeblock` /
       `.alert--note` treatment so a bare `<pre>` / `<blockquote>`
       matches its component counterpart without the class.

   Mode switches with `<html data-mode="day | night">`.
   ============================================================ */


/* ============================================================
   The markdown body — 720px prose measure
   ============================================================ */
:is(.md, body.vscode-body) {
  max-width: var(--content-max-prose);
  font-family: var(--font-body);
  color: var(--fg-1);
}

/* ─── Heading ramp — prose-scoped (§17, §4.1 of the proposal) ──
   h1/h2/h3 in Outfit at prose sizes; h4 reuses the system's
   mono-uppercase eyebrow rung; h5/h6 fall back to bold inline. */
:is(.md, body.vscode-body) h1,
:is(.md, body.vscode-body) h2,
:is(.md, body.vscode-body) h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
}
:is(.md, body.vscode-body) h1 {
  font-size: var(--type-md-h1);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.12;
  margin: 0 0 var(--space-2) 0;
}
:is(.md, body.vscode-body) h2 {
  font-size: var(--type-md-h2);
  font-weight: 500;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin: var(--space-9) 0 var(--space-1) 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--bw-hair) solid var(--rule);
}
:is(.md, body.vscode-body) h3 {
  font-size: var(--type-md-h3);
  font-weight: 500;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin: var(--space-6) 0 0 0;
}
/* h4 — the system's existing mono-uppercase eyebrow (reused rung). */
:is(.md, body.vscode-body) h4 {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
  margin: var(--space-6) 0 0 0;
}
/* h5/h6 — no new rung; bold inline-weight text at body size. */
:is(.md, body.vscode-body) h5,
:is(.md, body.vscode-body) h6 {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 600;
  color: var(--fg-1);
  margin: var(--space-5) 0 0 0;
}

/* ─── Body prose ──────────────────────────────────────────── */
:is(.md, body.vscode-body) p {
  font-size: var(--type-body);
  line-height: 1.72;
  margin: var(--space-3) 0;
  max-width: none;
}
:is(.md, body.vscode-body) strong { font-weight: 600; color: var(--fg-1); }
:is(.md, body.vscode-body) em     { font-style: italic; }

/* Links carry meaning — exempt from §4.6 accent-count discipline
   (resolved as §7 resolves functional glyphs). */
:is(.md, body.vscode-body) a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color var(--dur-fast) var(--ease-instrument);
}
:is(.md, body.vscode-body) a:hover { border-bottom-color: var(--accent); }
:is(.md, body.vscode-body) a:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus-ring);
  outline-offset: 2px;
}
:is(.md, body.vscode-body) small { color: var(--fg-3); }

/* ─── Lists ───────────────────────────────────────────────── */
:is(.md, body.vscode-body) ul,
:is(.md, body.vscode-body) ol {
  font-size: var(--type-body);
  line-height: 1.72;
  padding-left: var(--space-6);
  margin: var(--space-3) 0;
}
:is(.md, body.vscode-body) li { margin: var(--space-1) 0; }
:is(.md, body.vscode-body) li > ul,
:is(.md, body.vscode-body) li > ol { margin: var(--space-1) 0; }
:is(.md, body.vscode-body) ul li::marker { color: var(--accent-soft); }
:is(.md, body.vscode-body) ol li::marker {
  font-family: var(--font-mono);
  font-size: var(--type-body-sm);
  color: var(--fg-3);
}

/* ─── Code — re-derives the `.codeblock` treatment (§4.5) ─────
   Inline `code` gets a subtle chip; fenced `pre` matches the
   `controls.css` `.codeblock` surface exactly. */
:is(.md, body.vscode-body) :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--accent);
  background: var(--bg-elev-2);
  padding: 1.5px 5px;
  border-radius: var(--radius-2);
}
:is(.md, body.vscode-body) pre {
  font-family: var(--font-mono);
  font-size: var(--type-code);
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg-elev-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 14px 16px;
  margin: var(--space-5) 0;
  overflow-x: auto;
}
:is(.md, body.vscode-body) pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* ─── Blockquote — re-derives the `.alert--note` callout (§4.5) ─
   Plain `> quote` reads as the note callout. A previewer may add
   `.ok` / `.warn` / `.alert` to map a quote onto the semantic
   layer (§4.4); the brand accent stays separate from status. */
:is(.md, body.vscode-body) blockquote {
  margin: var(--space-5) 0;
  padding: 14px 18px;
  background: var(--bg-callout);
  border-left: 3px solid var(--accent-warm);
  color: var(--fg-1);
}
:is(.md, body.vscode-body) blockquote p {
  font-size: var(--type-body-sm);
  margin: var(--space-2) 0;
  color: inherit;
}
:is(.md, body.vscode-body) blockquote p:first-child { margin-top: 0; }
:is(.md, body.vscode-body) blockquote p:last-child  { margin-bottom: 0; }
:is(.md, body.vscode-body) blockquote.ok    { background: var(--ok-bg-tint);    border-left-color: var(--ok); }
:is(.md, body.vscode-body) blockquote.warn  { background: var(--warn-bg-tint);  border-left-color: var(--warn); }
:is(.md, body.vscode-body) blockquote.alert { background: var(--alert-bg-tint); border-left-color: var(--alert); }

/* ─── Horizontal rule — hair rule ─────────────────────────── */
:is(.md, body.vscode-body) hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--rule);
  margin: var(--space-7) 0;
}

/* ─── Tables — the R—Net sites-table pattern (`.table`) ─────── */
:is(.md, body.vscode-body) table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--type-body-sm);
  color: var(--fg-1);
  margin: var(--space-5) 0;
}
:is(.md, body.vscode-body) th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
  padding: 8px 12px;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--rule-strong);
}
:is(.md, body.vscode-body) td {
  padding: 9px 12px;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule);
}
:is(.md, body.vscode-body) tbody tr:last-child td { border-bottom: 0; }
/* Rebalance the final lines of a wrapped cell so a lone word is never
   stranded on its own line. Pure polish: never changes column widths,
   never affects single-line or numeric cells, ignored harmlessly where
   unsupported (Chromium + recent Safari yes, Firefox lagging — fallback
   is today's behavior). Harmless on the §17.5 strip: its cells are
   single-line tokens, which pretty leaves untouched. */
:is(.md, body.vscode-body) :is(td, th) { text-wrap: pretty; }

/* ─── Images ──────────────────────────────────────────────── */
:is(.md, body.vscode-body) img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

/* ============================================================
   Preview chrome — supplied by the previewer, not the markdown
   ============================================================
   Form is fixed by the system; only content varies (from front
   matter). The classification stripe uses the `ground-deep`
   primitive directly — a fixed formal-document marker, not the
   brand accent. */
.doc {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--space-7) var(--space-10);
}

/* Accent stripe — identical to the system's `.stripe-accent`. */
.doc-stripe {
  height: var(--bw-stripe);
  background: var(--accent);
}

/* §10 classification stripe — drawn only for formal documents. */
.doc-classstripe {
  height: 3px;
  background: var(--ground-deep);
}
.doc-classstripe[hidden] { display: none; }

/* Eyebrow — left: wordmark + label · right: classification + rev. */
.doc-eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: var(--space-4);
}
.doc-eyebrow .accent   { color: var(--accent); }
.doc-eyebrow .classtag { color: var(--accent-warm); }

/* Title + metadata block sit at the head of the .md body. */
.md .doc-title-meta {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: var(--space-2) 0 0 0;
}

/* Deck — the §10.1 standfirst between the h1 and the metadata
   block. Body face, not mono: read, not scanned (§17.4). The one
   chrome region that carries a sentence rather than a token. */
.md .doc-deck {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 60ch;
  margin: var(--space-3) 0 0 0;
}

/* Footer — left: wordmark / sign-off · right: locating metadata. */
.doc-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  border-top: var(--bw-hair) solid var(--rule);
  margin-top: var(--space-8);
  padding-top: var(--space-3);
}

/* ============================================================
   VS Code preview chrome (§17.5)
   ============================================================
   The built-in markdown preview renders into `body.vscode-body`
   with no `.doc` wrapper, so the chrome is drawn from the body
   box itself plus the front-matter table that the
   `bierner.markdown-yaml-preamble` extension renders as the
   body's first child. Form is fixed by the system; content
   varies via front matter (§17.4). The footer carries the fixed
   wordmark only — variable footer metadata waits for a richer
   target (§17.5, deferred).
   ============================================================ */

/* The preview body is the document column — centered, 720px from
   the shared body rule above, with `.doc`-equivalent padding. */
body.vscode-body {
  margin: 0 auto;
  padding: 0 var(--space-7) var(--space-10);
  box-sizing: border-box;
}

/* Accent stripe — mirrors `.doc-stripe`, drawn at the column top.
   `::before` is a pseudo-element, so the preamble table below is
   still `:first-child`. */
body.vscode-body::before {
  content: "";
  display: block;
  height: var(--bw-stripe);
  background: var(--accent);
  margin-bottom: var(--space-4);
}

/* Metadata strip — the front-matter table (§17.5)
   ------------------------------------------------------------
   The preamble extension emits front matter as one <table>: a
   row of <th> keys above a row of <td> values. CSS reaches a
   column only by position — there is no text-content selector —
   so this target does not try to render the whole block. The
   strip is CAPPED at the first five columns, and §17.5 names a
   canonical key order that front-loads the flattened eyebrow:
   doc-id, node, class, status, rev — the identity and condition
   an editor wants at a glance.

   Everything past the cap — `description`, `title`, owner, the
   dates, any project keys — does not render here; it stays in
   the front matter for the standalone target and the project's
   tooling. The cap is what makes the strip safe: it cannot
   overrun its line, `description` can never blow it out, and
   the §17.4 "data, not chrome" boundary holds for the strip.

   Column one is shrink-wrapped and ruled off as the doc-id
   register; columns two–five are the condition readout. The
   `ground-deep` bottom rule is the §10 classification stripe. */
body.vscode-body > table:first-child {
  width: 100%;
  margin: 0 0 var(--space-7);
  border: 0;
  border-bottom: 3px solid var(--ground-deep);
}
/* The cap — only the first five columns render. */
body.vscode-body > table:first-child th:nth-child(n+6),
body.vscode-body > table:first-child td:nth-child(n+6) {
  display: none;
}
body.vscode-body > table:first-child th,
body.vscode-body > table:first-child td {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border: 0;
  background: none;
  padding: 0 var(--space-5) var(--space-1) 0;
}
body.vscode-body > table:first-child th {
  font-weight: 500;
  color: var(--fg-3);
}
body.vscode-body > table:first-child td {
  color: var(--accent-warm);
  padding-bottom: var(--space-3);
}

/* Column 1 — doc-id as the register mark. The canonical order
   leads with `doc-id` (§17.5); the column is shrink-wrapped to
   its content, ruled off with a hairline, and the value carries
   `--accent`, not `--accent-warm` — the same accent the
   standalone eyebrow gives `doc-id` at its right edge (§17.4).
   The identifier reads as a register in both targets; this rule
   is the strip's analog of the eyebrow edge. */
body.vscode-body > table:first-child th:first-child,
body.vscode-body > table:first-child td:first-child {
  width: 1%;
  border-right: var(--bw-hair) solid var(--rule);
}
body.vscode-body > table:first-child th:first-child + th,
body.vscode-body > table:first-child td:first-child + td {
  padding-left: var(--space-5);
}
body.vscode-body > table:first-child td:first-child {
  color: var(--accent);
  font-weight: 500;
}
/* A strip of only doc-id has no readout to rule off from. */
body.vscode-body > table:first-child th:first-child:last-child,
body.vscode-body > table:first-child td:first-child:last-child {
  border-right: 0;
}

/* Footer — hairline rule and a wordmark. The wordmark text is the
   one project-level knob this target exposes: a consumer project
   sets `--doc-footer` to a quoted string in a CSS file loaded after
   `markdown.css` (§17.5). `none` drops the footer; unset uses the
   system default. This is project-level only — per-document footer
   metadata is not reachable from CSS (§17.5, deferred). */
body.vscode-body::after {
  content: var(--doc-footer, "JR / R—NET ◇ CHARTS & VECTORS");
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-3);
  border-top: var(--bw-hair) solid var(--rule);
  margin-top: var(--space-8);
  padding-top: var(--space-3);
}