tokens.css

/*
 * danieldeusing-design — design tokens.
 *
 * The single source of truth for the "terminal" theme: CRT phosphor on
 * JetBrains Mono, $-prompts, ASCII rules, scanline overlay. Four variants
 * selected via html[data-theme]: warm (default), green, mono, paper.
 * :root holds the warm defaults so the theme works with no attribute set.
 *
 * These are plain CSS custom properties — they work in any framework, any
 * browser, with or without a build step. Load this file first; base.css and
 * components.css resolve against the variables declared here.
 *
 * ── WHY EVERY ACCENT IS PER-THEME, AND WHY A LITERAL IS NEVER OK ──
 * A status colour has to clear WCAG AA 4.5:1 against every surface it can land
 * on — --background, --card AND --muted. Do that arithmetic across the four
 * themes and the two admissible luminance bands DO NOT OVERLAP:
 *
 *   light themes: darkest surface is warm's --muted  #ece3cf -> accent L <= 0.1328
 *   dark themes:  lightest surface is green's --muted #071509 -> accent L >= 0.2021
 *                                   (mono's #111111 wants      accent L >= 0.2002)
 *
 * A gap of 0.0692 with nothing in it. So NO single hex can serve four themes:
 * the two near-black themes need a light tint, the two light themes a dark one,
 * and every compromise fails both. That is arithmetic, not taste — which is why
 * --destructive, --success, --warning, --info and --pending are each declared
 * four times.
 *
 * Cockpit carried twelve hardcoded accents that predate these tokens; every one
 * missed AA on at least one theme and four sat inside the gap, clearing neither
 * side. Adding a status colour? Add a TOKEN here with its measured worst-case
 * ratio in a trailing comment. Do not tune a literal at the call site — that
 * forks the palette and fixes exactly one theme.
 *
 * ── FIVE STATUS ACCENTS, BECAUSE A STATE MACHINE HAS MORE THAN THREE STATES ──
 * good / attention / bad covers a verdict. It does not cover the two states a
 * dashboard spends most of its time showing, and cockpit forked a literal for
 * each of them rather than go without:
 *
 *   --info     a state, not a verdict. In flight, informational, recorded and
 *              fine but not a win: dispatching, gated, started-by-hand, "silent
 *              for a reason". Blue, so it never reads as an alarm.
 *   --pending  NO verdict yet. Still running, timed out, could not determine,
 *              not recorded: the answer is absent, which is different from the
 *              answer being bad. Violet, so it never reads as --destructive.
 *
 * Both are peers of --success/--warning/--destructive and obey the same rule:
 * one value for the two light themes, one for the two near-black ones, each
 * measured against --background, --card AND --muted.
 */

:root {
  --background: #f5efe2;
  --foreground: #43352a;
  --card: #efe7d4;
  --card-foreground: #43352a;
  --popover: #efe7d4;
  --popover-foreground: #43352a;
  --primary: #8a4516;
  --primary-foreground: #f8f3e8;
  --secondary: #ece3cf;
  --secondary-foreground: #43352a;
  --muted: #ece3cf;
  --muted-foreground: #71614e;
  --accent: #8a4516;
  --accent-foreground: #f8f3e8;
  --destructive: #a02c2c;
  --success: #1a6b2e;      /* 5.16:1 worst surface */
  --warning: #845600;      /* 4.97:1 worst surface */
  --info: #1c5f9e;         /* 5.17:1 worst surface */
  --pending: #5f3dc4;      /* 5.58:1 worst surface */
  --border: #d9cdb6;
  --input: #d9cdb6;
  --ring: #8a4516;

  --glow: rgba(160, 82, 45, 0.1);
  --glow-soft: rgba(160, 82, 45, 0.05);
  --scanline-opacity: 0.15;

  /* The per-theme inputs of the derived colours below (DERIVED COLOURS). */
  --cat-l: 0.45;           /* categorical text, worst over the whole hue circle: 5.57:1 */
  --cat-c: 0.075;
  --backdrop: rgb(0 0 0 / 0.5);   /* a --card dialog on the dimmed page: 3.62:1 by its fill */

  --radius: 0rem;

  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", "Menlo", monospace;
}

/* CRT phosphor green */
html[data-theme="green"] {
  --background: #020604;
  --foreground: #4fdd7d;
  --card: #04110a;
  --card-foreground: #4fdd7d;
  --popover: #04110a;
  --popover-foreground: #4fdd7d;
  --primary: #33ff66;
  --primary-foreground: #02160a;
  --secondary: #071509;
  --secondary-foreground: #4fdd7d;
  --muted: #071509;
  --muted-foreground: #3da45e;
  --accent: #33ff66;
  --accent-foreground: #02160a;
  --destructive: #ff5c5c;
  --success: #4ade80;      /* 10.76:1 worst surface */
  --warning: #f5b32b;      /* 10.15:1 worst surface */
  --info: #4dabf7;         /* 7.57:1 worst surface */
  --pending: #b197fc;      /* 7.77:1 worst surface */
  --border: #1c4a2c;
  --input: #1c4a2c;
  --ring: #33ff66;
  --glow: rgba(51, 255, 102, 0.35);
  --glow-soft: rgba(51, 255, 102, 0.12);
  --scanline-opacity: 0.5;
  --cat-l: 0.74;           /* 7.65:1 worst */
  --cat-c: 0.12;
  --backdrop: rgb(0 0 0 / 0.6);   /* dims only: a dialog's fill 1.08:1 on it, its --control-edge 4.89:1 */
}

/* white-phosphor terminal */
html[data-theme="mono"] {
  --background: #050505;
  --foreground: #d4d4d4;
  --card: #0d0d0d;
  --card-foreground: #d4d4d4;
  --popover: #0d0d0d;
  --popover-foreground: #d4d4d4;
  --primary: #ffffff;
  --primary-foreground: #050505;
  --secondary: #111111;
  --secondary-foreground: #d4d4d4;
  --muted: #111111;
  --muted-foreground: #8a8a8a;
  --accent: #ffffff;
  --accent-foreground: #050505;
  --destructive: #ff5c5c;
  --success: #4ade80;      /* 10.84:1 worst surface */
  --warning: #f5b32b;      /* 10.22:1 worst surface */
  --info: #4dabf7;         /* 7.63:1 worst surface */
  --pending: #b197fc;      /* 7.82:1 worst surface */
  --border: #333333;
  --input: #333333;
  --ring: #ffffff;
  --glow: rgba(255, 255, 255, 0.25);
  --glow-soft: rgba(255, 255, 255, 0.08);
  --scanline-opacity: 0.45;
  --cat-l: 0.74;           /* 7.71:1 worst */
  --cat-c: 0.12;
  --backdrop: rgb(0 0 0 / 0.6);   /* dims only: a dialog's fill 1.07:1 on it, its --control-edge 5.55:1 */
}

/* black-on-white terminal (e-ink / printout) */
html[data-theme="paper"] {
  --background: #fafafa;
  --foreground: #1f1f1f;
  --card: #f1f1f1;
  --card-foreground: #1f1f1f;
  --popover: #f1f1f1;
  --popover-foreground: #1f1f1f;
  --primary: #000000;
  --primary-foreground: #fafafa;
  --secondary: #efefef;
  --secondary-foreground: #1f1f1f;
  --muted: #efefef;
  --muted-foreground: #595959;
  --accent: #000000;
  --accent-foreground: #fafafa;
  --destructive: #b3261e;
  --success: #1a7031;      /* 5.36:1 worst surface */
  --warning: #8f5d00;      /* 4.89:1 worst surface */
  --info: #1c5f9e;         /* 5.74:1 worst surface */
  --pending: #5f3dc4;      /* 6.19:1 worst surface */
  --border: #d4d4d4;
  --input: #d4d4d4;
  --ring: #000000;
  --glow: rgba(0, 0, 0, 0.06);
  --glow-soft: rgba(0, 0, 0, 0.04);
  --scanline-opacity: 0.12;
  --cat-l: 0.45;           /* 6.18:1 worst */
  --cat-c: 0.075;
  --backdrop: rgb(0 0 0 / 0.5);   /* a --card dialog on the dimmed page: 3.64:1 by its fill */
}

/*
 * ── LAYOUT + TYPE SCALE — not per-theme, and that is the point ─────────────
 *
 * Colours are declared four times because the arithmetic forces it (above).
 * Measurements are the opposite case: there is exactly one right answer and it
 * must not vary by theme, by page, or by surface. They live in one :root block
 * so that is structurally obvious.
 *
 * WHY THESE EXIST AT ALL. Audited 2026-08-05, the five surfaces had FOUR
 * different content widths — cockpit 78rem, netmon 1180px, danieldeusing.de
 * 72rem (Tailwind max-w-6xl), the containers dashboard none — and netmon set a
 * flat `font: 13px` where everything else sat at 0.75rem. Nobody chose that;
 * each surface just picked a number in isolation because the design system
 * offered none. A token nobody has to think about is the only fix that stays
 * fixed: the next page inherits the answer instead of inventing a fifth one.
 *
 * "SAME FONT SIZE DEPENDING ON WINDOW SIZE" is two mechanisms, not one, and
 * they are easy to confuse:
 *   - This scale sets the RATIOS. It is fixed in rem and does not track the
 *     viewport, so a caption is the same amount smaller than body text on every
 *     surface, always.
 *   - The fluid root font size below makes the whole page track the WINDOW, by
 *     laying out at a 1920px reference and growing above it. Since 0.29.0 that
 *     is THIS FILE's job and a surface gets it by loading the stylesheet - there
 *     is nothing to call and nothing to forget. This comment used to order every
 *     surface to call `initResolutionZoom()` pre-paint; that has been a no-op
 *     since 0.29.0, and a page that still does it scales TWICE. Scale without
 *     the fluid size = fixed on a 4K screen; the fluid size without the scale =
 *     uniform sizes drifting apart between pages.
 *
 * WHY THE STEPS ARE 1px APART AT THE BOTTOM. This is a terminal UI: body is
 * 12px and the useful range is 10-15px, so a geometric ratio scale (1.25×,
 * 1.333×) would give three usable steps and then jump straight past everything
 * that matters. The small end is hand-tuned to the pixel; only the display
 * sizes, where a pixel stops being visible, open up. Sizes are rem so a reader
 * who raises their browser's base font gets the whole scale with them.
 */
:root {
  /* Content column. Was 78rem — cockpit's, the widest of the four found when the
     surfaces were unified — and is 92rem since 2026-08-21 (Daniel: "we still go
     too early into max-width where we increase the paddings to the sides").

     78rem capped the page at 1248px, so on a 1920 screen roughly 190px of margin
     opened on each side while the widest thing in the estate — /automation/review's
     11-column activity table — wanted 1353px and had 1200. It paid the difference
     in wrapped repo paths and timestamps split across two lines. The number is
     picked FROM that measurement rather than by eye: 88rem is the first that fits
     1353 at all, and 92rem clears it by 71px while still leaving an 81px gutter
     beside the `ls -l` rail at 1920.

     THE CAP ONLY BINDS ABOVE ~1744px (with the rail: 92rem + 2×--content-pad +
     --ls-nav-inset). Below that the page was already fluid and is untouched, which
     is why this change is invisible on a laptop and only shows on the monitors it
     was raised about.

     ONE NUMBER FOR EVERY SECTION. A table section must never be wider than the
     prose sections beside it (Daniel, same day) — a page whose blocks start at
     different left edges reads as broken, whatever each block individually needs.
     A surface that wants more width raises THIS, it does not add a bleed class.
     A page whose content genuinely is not a column (a full-bleed dashboard table)
     sets `max-width: none` deliberately; it does not pick another number. */
  --content-w: 90rem;   /* 1440px — the reading column's cap, see above */

  /* ── NO WIDE-SCREEN SCALING ────────────────────────────────────────────────
     REMOVED 2026-09-01 (Daniel: "let us stop doing this zoom thing"). From 0.29.0
     to 0.55.0 this set a fluid root font-size above a 1920px viewport, so type,
     the content column and the vertical rhythm all grew on a large display. It
     replaced an older JS `zoom`, and the intent was sound — a 4K panel should not
     show a postage stamp of 12px text.

     In practice it made large displays WORSE, not better, and the reasons are
     worth keeping because they are not obvious from the idea:

       · everything authored in px silently opted out. Icons carry their size as
         width/height attributes, controls had px heights, one component wrote an
         inline px style — so on a 4K screen the text doubled while those stood
         still. Chasing that took four releases (0.52-0.55) and still left the
         page looking wrong, because the fix was never one thing.
       · what did scale, scaled too much. Icons at 2x read as oversized beside
         their labels, and a table sized for a 1472px column at 1x had its columns
         overlap once every measurement in it doubled.

     A fixed reading column is the boring answer and the right one: the page caps
     at --content-w and the rest of the viewport is margin. Nothing to opt out of,
     nothing to keep in step.

     The root font-size is therefore the browser's own again, which is also the
     accessible answer — a reader who has set a larger default gets it, and text
     zoom works (WCAG 1.4.4). `data-scale="fixed"` (0.47.0) went with it: an
     opt-out of a behaviour that no longer exists is dead markup that reads as
     load-bearing. Setting it is harmless and does nothing. */

  /* Horizontal breathing room, i.e. Daniel's "same margins left and right".
     Vertical padding stays a page's own business — a doc and a dashboard do
     not want the same headroom, and pretending otherwise is what produced the
     four widths in the first place. */
  --content-pad: 1.5rem;

  /* ONE SIZE FOR TEXT (Daniel, 2026-08-11). There used to be four — `--fs-xs` 10px, `--fs-sm`
     11px, `--fs-base` 12px, `--fs-md` 13px — and they are gone, not renamed.

     They were never a hierarchy. Four sizes one pixel apart cannot be told apart on sight, so
     nothing in the estate ever CHOSE between them: every surface picked whichever felt right at
     the time, and one repository card ended up rendering text at 10.2px, 10.8px, 10.88px, 11px,
     12px and 13px at once. Differences that small do not read as emphasis, they read as a page
     that has not been finished — which is exactly how Daniel found this, by looking at a card and
     asking why the words were different sizes.

     The fix is not discipline, it is REMOVING THE CHOICE. With one text size there is no near-miss
     to pick, and `font-size` stops being a decision anybody makes while writing a component.

     What survives is the part that is genuinely a hierarchy: three heading steps, each a clear
     jump rather than a nudge. If something needs to be quieter than body text, that is what
     `--muted-foreground` is for — never an opacity step, which is an alpha nobody measured
     (utilities.css). Colour and weight separate a label from its value far better than one pixel
     ever did, and they keep working at any zoom. */
  --fs-base: 0.75rem;   /* 12px — ALL normal text: body, tables, labels, badges, notes, controls */
  --fs-lg: 0.9375rem;   /* 15px — h3 / section heads */
  --fs-xl: 1.125rem;    /* 18px — h2, a dialog title, a stat value */

  /* ── VERTICAL RHYTHM BETWEEN SECTIONS ──────────────────────────────────────
     The reset zeroes every margin (`* { margin: 0 }`) and nothing here ever put
     heading spacing back, so for as long as this package has existed each
     surface has invented its own gap. cockpit carries
     `section.doc { margin-top: 2.5rem }` privately in portal.css; the family
     financing page had nothing at all and read as one unbroken column. Two
     surfaces, two answers, and the drift is invisible until they are seen side
     by side — which is the whole reason this package exists.

     2.5rem is cockpit's existing value, promoted rather than invented, so the
     surface that already had a considered answer does not move. */
  --space-section: 2.5rem;
  --fs-2xl: 1.5rem;     /* 24px — h1 and .page-title: an app page's title */

  --lh-tight: 1.3;      /* headings and single-line chrome */
  --lh-base: 1.5;       /* body copy; matches base.css */

  /* The label column of a .field-row. DECLARED here, not merely read with a fallback in
     components.css — that is the difference between a token and a phantom. A consumer that
     overrode `--field-label-w` was flagged by design-conformance's phantom-token check, and
     correctly: from the outside, a name the system never declares is indistinguishable from a
     typo. Override it per panel when a panel's labels are genuinely longer. */
  --field-label-w: 8.5rem;
}

/*
 * ── ONE DISPLAY STEP, for a public page's title (0.60.0) ────────────────────────
 *
 * danieldeusing.de titles its pages at 30px, and at 36px from 40rem wide (Tailwind `text-3xl
 * sm:text-4xl`, on all twelve of its page titles), while the scale above tops out at --fs-2xl,
 * 24px. The public site is a source of truth, so the ruling (the lead, 2026-09-28) was to give the
 * system ONE display step rather than shrink the site's titles to fit the scale. The step carries
 * the site's own breakpoint — 40rem, its `sm:`, which is also where the system's phone gutter
 * steps (--content-pad, below) — so a title that uses it needs no media query of its own.
 *
 * WHO MAY USE IT: a public-site page title (`.page-title--display`, in content.css) and an error
 * page's status code. Nothing else. An app surface's title stays --fs-2xl, and this is not a text
 * size: nothing a person reads as body copy, a label or a heading inside a page takes it.
 */
:root {
  --fs-display: 1.875rem;   /* 30px, below 40rem */
  --lh-display: 1.2;        /* the display step's leading, danieldeusing.de's: --lh-tight's 1.3 opened
                               a two-line title into two separate lines */
}
@media (min-width: 40rem) {
  :root { --fs-display: 2.25rem; }   /* 36px */
}

/*
 * ── CONTROLS, CARDS AND GLYPHS — one number each (0.60.0) ──────────────────────
 *
 * The drift the content width had in 2026-08, one level down. seedr and configr each settled on a
 * 28px single-line control (Tailwind `h-7`) for their inputs, filter and sort triggers and icon
 * buttons — independently, which is the best evidence a number is right — while the system
 * offered no height at all, so a compact button sat a few pixels short of the field beside it and
 * every surface squared the row up by hand. `--control-h` is that 28px. A control takes it as
 * `min-block-size`, never `height`: a coarse pointer's 44px and a wrapped label still grow it.
 *
 * `--card-pad` is the 12px card inset seedr and configr both use; `.card-terminal` takes it. The
 * system's own .85rem 1.1rem was the one card inset in the estate nobody else had.
 *
 * THE GLYPH SIZES ARE NOT THE TABLE THAT WAS REMOVED. Until 0.56.0 a rem table here existed only
 * to make icons grow with the fluid root font size; once that went, it converted px into the
 * identical px and was deleted as indirection. These answer a different question. A glyph drawn
 * as a CSS mask (the icon tokens at the end of this file) has no intrinsic size, so something has
 * to give it a box — and ONE TEXT SIZE forbids that something from being `font-size`. Four steps,
 * each a visible jump: 12px beside a label, 14px the default inside a control, 16px for a larger
 * control, 24px for an empty state or a page-level load. An inline <svg> inside a system control
 * takes the same token, so a lucide component and a mask sit at one size in one row.
 *
 * `--dot-size` is the 8px status dot netmon and cockpit already drew. `--status-h` is
 * footer.status's height, declared so a page can reserve exactly that much room above it.
 */
:root {
  --control-h: 1.75rem;   /* 28px — every single-line control */
  --card-pad: 0.75rem;    /* 12px */
  --icon-sm: 0.75rem;     /* 12px — beside a label, in a tag, a clear button */
  --icon-size: 0.875rem;  /* 14px — the default glyph */
  --icon-lg: 1rem;        /* 16px */
  --icon-xl: 1.5rem;      /* 24px — empty state, page-level load */
  --dot-size: 0.5rem;     /* 8px */
  --status-h: 2rem;       /* 32px — footer.status */
}

/* THE PHONE GUTTER. 1.5rem a side is 48px of a 375px screen: an eighth of every line spent on
   margin on the device where lines are shortest. danieldeusing.de had already answered it
   privately, 1.25rem below 40rem in its own layout, and a private answer is exactly how the
   estate once ended up with four content widths. The token carries it now, so everything that
   reads the gutter gets the phone value without a breakpoint of its own. */
@media (max-width: 40rem) {
  :root { --content-pad: 1.25rem; }
}

/*
 * ── DERIVED COLOURS — declared once, resolved per theme (0.60.0) ────────────────
 *
 * Each of these is computed from a per-theme input, so it is right on all four themes without
 * being declared four times: the arithmetic lives in the input, and the numbers below measure
 * what the four themes actually produce (sRGB compositing of the token hexes, 8-bit, WCAG relative
 * luminance) against --background / --card / --muted.
 *
 * THE CONTROL EDGE. A field's border is a boundary the reader has to find, so WCAG 1.4.11 asks 3:1
 * of it — and --border was never built for that. It is a divider, quiet on purpose so a table does
 * not read as a spreadsheet. The estate had three answers for a field edge (--border, --input,
 * which is the same hex, and configr's --primary at 30%, 1.55-2.65:1) and none cleared 3:1 on
 * every theme. The foreground at 60% does, on every theme and surface:
 *
 *     warm 3.41 / 3.31 / 3.24    green 4.56 / 4.53 / 4.52    mono 5.23 / 5.20 / 5.19    paper 4.29 / 4.20 / 4.18
 *
 * Every FIELD takes it: input, textarea, select and filter triggers, the search field, a bordered
 * icon button, a popup panel. A CONTAINER keeps --border — a card is not a control and must not
 * outline itself like one.
 *
 * CATEGORICAL HUES. Twelve named hues on one lightness/chroma pair per theme (--cat-l and --cat-c,
 * in the theme blocks above): cockpit's identity-tag mechanism, with names instead of free angles.
 * Measured over the WHOLE hue circle, not only the twelve — worst text contrast warm 5.57, paper
 * 6.18, green 7.65, mono 7.71 — and every hue lies inside sRGB at these L/C, so no browser has to
 * gamut-map one into a different colour. --background on a categorical fill (a solid tag) is at
 * least 6.20:1. The skill's rule that a colour naming a THING belongs to the surface still holds
 * for the ASSIGNMENT: which vendor, agent or series gets which hue is the surface's call. The
 * palette is shared. A surface that derives a hue from a name (a hash) picks one of these twelve
 * names, never an angle of its own — the measurement covers the names, not whatever a hash
 * produces.
 *
 * ELEVATION. A popup and a dialog glow; they do not cast a shadow. A black drop shadow is the one
 * non-token colour a component can smuggle in, it vanishes on the two near-black themes, and on
 * the light ones it is another design language. The phosphor glow is the one the system already
 * spoke: the dropdown and select panels drew 20px of --glow-soft before these tokens existed.
 * Named --elev-* on purpose, because Tailwind owns the shadow namespace and a token there would
 * reskin its utilities.
 * The modal scrim (--backdrop, per theme above) DIMS the page; it cannot SEPARATE a dialog on the
 * dark themes, where a near-black card over a scrimmed near-black page is 1.04-1.08:1 whatever the
 * alpha. On warm and paper the dialog's own fill separates it (--card against the scrimmed page:
 * 3.58 and 3.64:1 at worst); on green and mono its edge does (--control-edge against the scrimmed
 * page: 4.75 and 5.39:1). That is why every popup and dialog is edged with --control-edge.
 */
:root {
  --control-edge: color-mix(in srgb, var(--foreground) 60%, transparent);

  --cat-red: oklch(var(--cat-l) var(--cat-c) 25);
  --cat-orange: oklch(var(--cat-l) var(--cat-c) 50);
  --cat-amber: oklch(var(--cat-l) var(--cat-c) 80);
  --cat-lime: oklch(var(--cat-l) var(--cat-c) 125);
  --cat-green: oklch(var(--cat-l) var(--cat-c) 150);
  --cat-teal: oklch(var(--cat-l) var(--cat-c) 185);
  --cat-cyan: oklch(var(--cat-l) var(--cat-c) 210);
  --cat-blue: oklch(var(--cat-l) var(--cat-c) 255);
  --cat-indigo: oklch(var(--cat-l) var(--cat-c) 275);
  --cat-violet: oklch(var(--cat-l) var(--cat-c) 295);
  --cat-purple: oklch(var(--cat-l) var(--cat-c) 315);
  --cat-pink: oklch(var(--cat-l) var(--cat-c) 350);

  --elev-float: 0 0 20px var(--glow-soft);   /* popups: dropdown, select, context menu, tooltip */
  --elev-modal: 0 0 40px var(--glow-soft);   /* dialogs */
}

/* PAPER IS A LIGHT THEME, whatever the screen was showing: print.css repaints every surface
   white. The dark themes' categorical pair is light text (L 0.74), 2.19:1 on white paper at
   worst, so on paper every theme takes the light pair (7.10:1). It lives here, not in print.css,
   because the tokens-only apps load this file and never that one. */
@media print {
  :root,
  html[data-theme] {
    --cat-l: 0.45;
    --cat-c: 0.075;
  }
}

/*
 * ── TONE — one attribute drives every component's state colour (0.60.0) ────────
 *
 * `data-tone="warning"` on a notice, a callout, a banner, a tag, an icon button or a dot, and the
 * component reads `var(--tone, <its own default>)`. Before this every family spelled state its
 * own way — cockpit by attribute through a JS vocabulary, configr by a tone prop mapped to class
 * strings, seedr by a switch per component — so one state was three sets of rules that could
 * disagree. The attribute is the whole contract: seven values, the five status accents plus
 * primary and muted, each resolving to a token already measured on every theme. An unknown value
 * sets nothing, so the component falls back to its own default instead of to no colour at all.
 *
 * IT INHERITS, deliberately: a component draws its glyph on a pseudo-element, and a pseudo-element
 * only sees the tone by inheriting it. A component whose default is NEUTRAL stops it at its own root:
 * without a `data-tone` of its own it sets `--tone: initial` (a notice, a tag, a count, a card, a
 * fold, a choice card: each file says so at the rule), so a neutral tag inside a toned card stays
 * neutral, and its glyph still takes its own host's tone. A component with no such reset takes its
 * container's tone.
 *
 * The tone is a TEXT, EDGE and GLYPH colour. Under text it is at most a 6% tint: tone text on a 6%
 * tone tint measures 4.53:1 or better on every theme and surface, and at 8% paper's warning falls
 * to 4.41.
 */
[data-tone="primary"] { --tone: var(--primary); }
[data-tone="success"] { --tone: var(--success); }
[data-tone="warning"] { --tone: var(--warning); }
[data-tone="destructive"] { --tone: var(--destructive); }
[data-tone="info"] { --tone: var(--info); }
[data-tone="pending"] { --tone: var(--pending); }
[data-tone="muted"] { --tone: var(--muted-foreground); }

/*
 * ── MOTION — the kill switch lives in the one file every surface loads (0.60.0) ──
 *
 * `html.anim-off` is a promise that nothing on the page moves. The pre-paint script sets it from
 * `prefers-reduced-motion`, the footer's `[x] anim` toggle sets it by hand. Until 0.60.0 it lived
 * in components.css and stopped KEYFRAMES only, which broke the promise twice over:
 *
 *   · a hover fade, a sliding panel and a colour change are motion too. seedr had to add its own
 *     `transition: none` under the same class to keep the switch honest;
 *   · a surface loading tokens.css without components.css (netmon, configr, seedr's studio) had no
 *     switch at all.
 *
 * So it stops both, from here. `!important` because it overrides every rule that animates,
 * whatever that rule's specificity: the one place in the system where that is the whole point.
 * The block cursor is hidden rather than frozen — it exists to blink, and a still block after a
 * wordmark reads as a rendering fault.
 *
 * The keyframes the components share are declared here as well, named `dd-*` so a consumer's own
 * `spin` (Tailwind ships one) can never shadow them. A file that RUNS an animation also stops it
 * under `prefers-reduced-motion: reduce` itself: this switch only covers a page whose pre-paint
 * script maps the preference onto the class, and not every page has one.
 */
@keyframes dd-spin {
  to { transform: rotate(1turn); }
}
@keyframes dd-pulse {
  50% { opacity: 0.25; }
}
html.anim-off *,
html.anim-off *::before,
html.anim-off *::after {
  animation: none !important;
  transition: none !important;
}
html.anim-off .cursor-block {
  display: none;
}
/* Forced colours stop every transition too, the same way (the lead's ruling, 0.60.0). A colour in
   mid-transition is a plain interpolated colour, not a system colour. Measured: for .15s an opted-out
   element painted the AUTHOR's palette on the forced page (a segment word at 1.02:1, a beige card
   block on black), and a forced one showed its old look until the transition ended. It hit every
   package that transitions something it redraws, so it is answered once, here. */
@media (forced-colors: active) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/*
 * ── `hidden` HIDES — one rule, in the one file every surface loads (0.60.0) ─────
 *
 * The UA's `[hidden] { display: none }` is a one-attribute selector, so ANY author rule that sets
 * `display` outruns it: a class with `display: flex`, an inline `style="display: block"`, or a
 * narrow-screen query that restacks a key/value table as `.ask table.kv tr { display: block }`.
 * The element stays on screen, and that is worse than a cosmetic slip: an element `hidden` failed
 * to hide is still in the accessibility tree, so a screen reader announces rows nobody can see.
 * initTablePagination() pages a table this way, and every component that toggles `hidden` relies
 * on it.
 *
 * So the system answers it ONCE, here and not beside a component: tokens.css is the one file every
 * surface loads (netmon, configr and seedr's studio load it without base.css), and one rule covers
 * every element, so no component carries a `[hidden]` guard of its own. `!important` because it
 * must beat every rule that sets `display` whatever its specificity, an inline style included.
 * `hidden="until-found"` is left to the UA: find-in-page reveals such an element, and the UA hides
 * it with `content-visibility`, not `display`. The `i` is the UA's own: the attribute's keywords
 * are case-insensitive.
 */
[hidden]:not([hidden="until-found" i]) { display: none !important; }

/*
 * ── ICON MASKS — the token half of the icon system (0.60.0) ─────────────────────
 *
 * One lucide icon per token, as an SVG data url for a CSS MASK — never for an <img> or a
 * background image. `.ico` (icons.css) and `[data-icon]` draw them; a glyph drawn in a rule of its
 * own takes the whole recipe, its forced-colours half included:
 *
 *     .glyph {
 *       inline-size: var(--icon-size); block-size: var(--icon-size);
 *       background: currentColor;
 *       mask: var(--ico-check) center / contain no-repeat;
 *     }
 *     @media (forced-colors: active) {
 *       .glyph { forced-color-adjust: preserve-parent-color; }
 *       @supports not (forced-color-adjust: preserve-parent-color) {
 *         .glyph { forced-color-adjust: none; background: CanvasText; }
 *       }
 *     }
 *
 * The second half is not optional. Forced colours (Windows High Contrast) swap every author
 * background for Canvas, and a mask glyph IS a background: without it every glyph paints nothing.
 * `preserve-parent-color` paints the glyph in the colour its parent was forced to — CanvasText in
 * text, LinkText in a link, ButtonText in a button. NOT `forced-color-adjust: none` alone: the
 * glyph then keeps its AUTHOR colour, measured at 1.11-1.78:1 against the forced palette, or
 * nothing at all. CanvasText is the fallback for an engine without the value.
 *
 * COLOUR THE PARENT, NEVER THE GLYPH. `preserve-parent-color` takes over only while the glyph has
 * no colour of its own: a class or an inline style that colours the glyph itself makes it act like
 * `none`, and the glyph keeps that colour — measured at 2.94:1 on a dark palette and at nothing on
 * three other theme × palette pairs. Put the colour (a `.text-*`, a tone, a link) on the element
 * around the glyph. Nothing on the glyph enforces this, by ruling: a `color: inherit` there would
 * lose to any more specific colour, and the system adds no `!important` guard for it.
 *
 * A mask keeps only the shape and paints it in currentColor, so one token is right on all four
 * themes and in every state colour with no fill declared per theme — the reason the bin and the
 * pencil were masks before any of this existed. The stroke is black because a mask reads only its
 * alpha; the stroke width is lucide's 2 on a 24-unit box, the glyph seedr and configr already ship
 * through lucide-react, so a mask here and a lucide component there are the same drawing.
 *
 * Source: lucide 0.559.0, the version configr's lucide-react resolves, and the one
 * scripts/check-icons.mjs regenerates every token from and compares byte for byte; this is the one
 * place the version is named. seedr resolves 0.575.0: the first 21 tokens, which were taken from
 * it, are byte-identical in both, and of the other 30 only `clock` differs there, listing its two
 * strokes in the other order — the same picture. Token names are the estate's `data-icon` words,
 * which are not always lucide's current file names: `filter` is lucide's `funnel` and `home` is
 * its `house` (lucide renamed both and ships the old names as aliases; markup keeps the word a
 * reader expects). `star-filled` is `star` with its fill closed, the pressed state of a favourite
 * toggle. `github` is one of lucide's brand glyphs, which lucide deprecates and drops at 1.0: this
 * token is a copy, so the drop cannot reach it, and a regeneration from lucide 1.x carries this
 * one over unchanged.
 *
 * THE SET is the 0.60.0 spec's icon table (I1), 51 words, and nothing else: every token is
 * bytes on every page that loads this file, and a name outside the set is an empty box on the page
 * that uses it. A glyph a surface needs and the set lacks is a new spec entry first, then a line
 * here. The skill's references/icons.md lists each word and what needs it.
 *
 * EXTENDING IT. One declaration per icon, in this block, generated from lucide rather than drawn
 * by hand, named after its `data-icon` word, and one mapping line for it further down. Two
 * characters must never appear inside the url: a semicolon, because scripts/build.mjs splits a
 * declaration there, and a raw hash, which starts a fragment in a data url (write %23). `<` and
 * `>` are percent-encoded, attributes single-quoted, and no attribute may repeat — a duplicate
 * makes the SVG invalid and the mask paints nothing. scripts/check-icons.mjs fails each of those,
 * a token with no mapping line, a token that is not lucide's drawing of its word, and a
 * `data-icon` word or `var(--ico-…)` reference with no token in the directories it scans: src/,
 * examples/, runtime/, templates/ and the skill's references/ (and any other checkout named on its
 * command line).
 *
 * The licence below is a comment that opens with a bang, the form a minifier keeps, because it
 * has to travel with the path data into every copy, the minified bundle included. (Nothing else in
 * this file opens that way; a tool that collects such comments finds exactly one.)
 */
/*!
 * Lucide (https://lucide.dev): the path data in the icon tokens below.
 *
 * ISC License
 *
 * Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2023 as part of Feather (MIT).
 * All other copyright (c) for Lucide are held by Lucide Contributors 2025.
 *
 * Permission to use, copy, modify, and/or distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 *
 * ---
 *
 * The MIT License (MIT) (for portions derived from Feather)
 *
 * Copyright (c) 2013-2023 Cole Bemis
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
:root {
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ico-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --ico-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  --ico-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z'/%3E%3C/svg%3E");
  --ico-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
  --ico-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ico-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  --ico-trash-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
  --ico-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
  --ico-loader-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E");
  --ico-refresh-cw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
  --ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  --ico-star-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E");
  --ico-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E");
  --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  --ico-image-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 5h6'/%3E%3Cpath d='M19 2v6'/%3E%3Cpath d='M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3C/svg%3E");
  --ico-triangle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ico-package: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E");
  --ico-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --ico-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --ico-circle-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  --ico-circle-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ico-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
  --ico-arrow-up-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E");
  --ico-external-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
  --ico-github: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
  --ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --ico-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ico-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
  --ico-power: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10'/%3E%3Cpath d='M18.4 6.6a9 9 0 1 1-12.77.04'/%3E%3C/svg%3E");
  --ico-upload: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E");
  --ico-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E");
  --ico-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  --ico-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --ico-circle-fading-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 0 1 7.38 16.75'/%3E%3Cpath d='m16 12-4-4-4 4'/%3E%3Cpath d='M12 16V8'/%3E%3Cpath d='M2.5 8.875a10 10 0 0 0-.5 3'/%3E%3Cpath d='M2.83 16a10 10 0 0 0 2.43 3.4'/%3E%3Cpath d='M4.636 5.235a10 10 0 0 1 .891-.857'/%3E%3Cpath d='M8.644 21.42a10 10 0 0 0 7.631-.38'/%3E%3C/svg%3E");
  --ico-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --ico-chevrons-up-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E");
  --ico-chevrons-down-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 20 5-5 5 5'/%3E%3Cpath d='m7 4 5 5 5-5'/%3E%3C/svg%3E");
  --ico-folder-tree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z'/%3E%3Cpath d='M3 5a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M3 3v13a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
  --ico-folder-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
  --ico-file-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 12.5 8 15l2 2.5'/%3E%3Cpath d='m14 12.5 2 2.5-2 2.5'/%3E%3C/svg%3E");
  --ico-panel-left-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m14 9 3 3-3 3'/%3E%3C/svg%3E");
  --ico-maximize-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='m21 3-7 7'/%3E%3Cpath d='m3 21 7-7'/%3E%3Cpath d='M9 21H3v-6'/%3E%3C/svg%3E");
  --ico-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
  --ico-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3C/svg%3E");
  --ico-panel-left-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M9 3v18'/%3E%3Cpath d='m16 15-3-3 3-3'/%3E%3C/svg%3E");
}

/*
 * ── THE MAPPING — `data-icon` names the glyph, `--ico` carries it (0.60.0) ───────
 *
 * `data-icon="refresh-cw"` on any element sets `--ico` to that word's mask, so a component draws
 * its glyph with `mask: var(--ico)` and never names a token: `.ico`, `.btn-icon[data-icon]::before`,
 * `.tag[data-icon]`, `.empty[data-icon]`. It sits here, beside the tokens, for the reason
 * `[data-tone]` does: a file that draws a glyph then needs this file and nothing else, so a
 * tokens-only surface (netmon, configr, seedr's studio) can load any one component file.
 *
 * IT IS THE ONE RULE IN THIS FILE INSIDE A CASCADE LAYER, and the layer is what keeps it a default.
 * A component swaps the glyph by state on the element that carries the word — a busy icon button
 * shows the loader, a pressed favourite the filled star — by setting `--ico` there itself. The
 * Tailwind entry imports this file unlayered and every component file in `layer(components)`, and
 * an unlayered rule beats every layered one whatever its specificity: left unlayered, this mapping
 * would keep the star hollow and the busy button showing its idle glyph in every Tailwind app, and
 * no utility could override it either. In `base` it is the weakest rule that sets `--ico` in
 * every entry: under the unlayered component files of the build-free bundle, under Tailwind's
 * `components` and `utilities`. A Tailwind app imports this file after `tailwindcss` (every
 * consumer does), so the block joins Tailwind's own `base` layer instead of opening a new one.
 * scripts/check-icons.mjs rebuilds both entries' layer order in a page of its own (Tailwind's
 * theme, base, components, utilities with this file unlayered; the bundle's unlayered files) and
 * asserts the mapping resolves there, and that a component's state glyph and a utility beat it.
 * It simulates the order; it does not compile Tailwind.
 *
 * `--ico` INHERITS, as `--tone` does, because a pseudo-element only sees it by inheriting. So an
 * element with no word of its own takes the nearest glyph above it: give every `.ico` its own
 * `data-icon`.
 */
@layer base {
  [data-icon="check"] { --ico: var(--ico-check); }
  [data-icon="minus"] { --ico: var(--ico-minus); }
  [data-icon="x"] { --ico: var(--ico-x); }
  [data-icon="search"] { --ico: var(--ico-search); }
  [data-icon="filter"] { --ico: var(--ico-filter); }
  [data-icon="arrow-up"] { --ico: var(--ico-arrow-up); }
  [data-icon="arrow-down"] { --ico: var(--ico-arrow-down); }
  [data-icon="chevron-down"] { --ico: var(--ico-chevron-down); }
  [data-icon="chevron-left"] { --ico: var(--ico-chevron-left); }
  [data-icon="trash-2"] { --ico: var(--ico-trash-2); }
  [data-icon="pencil"] { --ico: var(--ico-pencil); }
  [data-icon="loader-circle"] { --ico: var(--ico-loader-circle); }
  [data-icon="refresh-cw"] { --ico: var(--ico-refresh-cw); }
  [data-icon="star"] { --ico: var(--ico-star); }
  [data-icon="star-filled"] { --ico: var(--ico-star-filled); }
  [data-icon="history"] { --ico: var(--ico-history); }
  [data-icon="home"] { --ico: var(--ico-home); }
  [data-icon="image-plus"] { --ico: var(--ico-image-plus); }
  [data-icon="triangle-alert"] { --ico: var(--ico-triangle-alert); }
  [data-icon="package"] { --ico: var(--ico-package); }
  [data-icon="download"] { --ico: var(--ico-download); }
  [data-icon="circle-check"] { --ico: var(--ico-circle-check); }
  [data-icon="circle-alert"] { --ico: var(--ico-circle-alert); }
  [data-icon="circle-x"] { --ico: var(--ico-circle-x); }
  [data-icon="info"] { --ico: var(--ico-info); }
  [data-icon="copy"] { --ico: var(--ico-copy); }
  [data-icon="clock"] { --ico: var(--ico-clock); }
  [data-icon="arrow-up-down"] { --ico: var(--ico-arrow-up-down); }
  [data-icon="external-link"] { --ico: var(--ico-external-link); }
  [data-icon="github"] { --ico: var(--ico-github); }
  [data-icon="mail"] { --ico: var(--ico-mail); }
  [data-icon="plus"] { --ico: var(--ico-plus); }
  [data-icon="eye"] { --ico: var(--ico-eye); }
  [data-icon="eye-off"] { --ico: var(--ico-eye-off); }
  [data-icon="power"] { --ico: var(--ico-power); }
  [data-icon="upload"] { --ico: var(--ico-upload); }
  [data-icon="send"] { --ico: var(--ico-send); }
  [data-icon="arrow-left"] { --ico: var(--ico-arrow-left); }
  [data-icon="arrow-right"] { --ico: var(--ico-arrow-right); }
  [data-icon="circle-fading-arrow-up"] { --ico: var(--ico-circle-fading-arrow-up); }
  [data-icon="chevron-right"] { --ico: var(--ico-chevron-right); }
  [data-icon="chevrons-up-down"] { --ico: var(--ico-chevrons-up-down); }
  [data-icon="chevrons-down-up"] { --ico: var(--ico-chevrons-down-up); }
  [data-icon="folder-tree"] { --ico: var(--ico-folder-tree); }
  [data-icon="folder-open"] { --ico: var(--ico-folder-open); }
  [data-icon="file-code"] { --ico: var(--ico-file-code); }
  [data-icon="panel-left-open"] { --ico: var(--ico-panel-left-open); }
  [data-icon="maximize-2"] { --ico: var(--ico-maximize-2); }
  [data-icon="folder"] { --ico: var(--ico-folder); }
  [data-icon="file"] { --ico: var(--ico-file); }
  [data-icon="panel-left-close"] { --ico: var(--ico-panel-left-close); }

  /* FORCED COLOURS (Windows High Contrast) replace every author background with the system
     Canvas, and a mask glyph IS a background: measured in Chromium, every glyph the mapping feeds
     painted nothing, on every theme and both palettes. `preserve-parent-color` is the fix the
     property exists for: the glyph's `color` becomes the colour its parent was FORCED to —
     CanvasText in text, LinkText in a link, ButtonText in a button, GrayText when disabled,
     HighlightText on a selection a component redrew — and the background it paints with is left
     alone. `--tone: currentColor` brings the glyphs that paint `var(--tone, …)` along.
     NOT `forced-color-adjust: none` alone, for the reason ICON MASKS gives above: the glyph keeps
     the author's colour.
     An engine without `preserve-parent-color` gets `none` and a CanvasText background, and no
     `color`. The `none` lets a component's own `@supports not` branch paint `currentColor` (under
     `auto` the mode forces that background to Canvas, and a disabled glyph vanished); leaving
     `color` alone keeps that `currentColor` its host's forced colour. controls.css's pressed icon
     button is HighlightText on Highlight that way, 11.31:1 on a light palette and 8.73:1 on a dark
     one; when this rule set a CanvasText `color`, it measured 1.86:1 and 2.41:1. The background is
     a floor, not a rule over anyone: a component paints its glyph in a rule that outranks `base`
     (unlayered, or a later layer), so it carries that `@supports not` branch itself, as
     controls.css, feedback.css and tags.css do.
     The default reaches every `[data-icon]::before` glyph; one drawn from a named token, on
     ::after, or painted from a private variable is its own file's to cover (check-icons fails a
     src file that paints a mask with no fallback of its own).
     THE FALLBACK PAINTS ANY `[data-icon]::before`, because a selector cannot tell a glyph from
     text. So `data-icon` goes only on an element whose ::before IS its glyph — never on one whose
     ::before is a word or a mark (`.prompt`'s `$ `, `.comment`'s `# `, `.tag--bracket`'s `[ `,
     `.btn-terminal`'s `> `): in an engine without `preserve-parent-color` that text would sit on a
     CanvasText box. Put a `.ico` child in such an element instead. In `base` for the
     reason the mapping is: a component's own forced-colours rule wins, and since neither branch
     sets `color`, `currentColor` in that rule is still its host's. */
  @media (forced-colors: active) {
    @supports (forced-color-adjust: preserve-parent-color) {
      [data-icon]::before {
        forced-color-adjust: preserve-parent-color;
        --tone: currentColor;
      }
    }
    @supports not (forced-color-adjust: preserve-parent-color) {
      [data-icon]::before {
        forced-color-adjust: none;
        background: CanvasText;
      }
    }
  }
}