/* ============================================================
   burg — Webfonts
   Display = Space Grotesk (the wordmark voice — geometric, a little
   mechanical, reads great lowercase + tight).
   UI/body = Hanken Grotesk (a clean humanist grotesque, the workhorse).
   Code/data = JetBrains Mono (commit hashes, metrics, the Lion's verdicts).

   Version-locked WOFF2 files are vendored from Fontsource and ship in
   the Composer package for offline and deterministic rendering.
   ============================================================ */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('./assets/fonts/space-grotesk-latin-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('./assets/fonts/hanken-grotesk-latin-variable.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('./assets/fonts/jetbrains-mono-latin-variable.woff2') format('woff2-variations');
}

/* ============================================================
   burg — Color
   A dev-intelligence dashboard with a warm, editorial palette.
   Two meanings carried by two hues, and they never mix:
     • Lion (amber)  = the Lion's JUDGMENT — audits, attention, active.
     • Bird (teal)   = the Bird's BLESSING — passing, anointed, success.
   Parchment is the neutral field; Mane is the deep warm ink.
   Rule from the brief: text on a colored fill always uses the darkest
   stop of the SAME family — never black or gray.
   ============================================================ */

:root {
  /* ---- Parchment (warm neutral surfaces, light) ---- */
  --parchment-50:  #FBFAF6;   /* brightest leaf */
  --parchment-100: #F6F4ED;
  --parchment-200: #F1EFE8;   /* brand Parchment — the base surface */
  --parchment-300: #E8E4D8;
  --parchment-400: #D8D2C2;   /* hairline borders / worn edge */
  --parchment-500: #C2B9A4;

  /* ---- Mane (warm near-black ink — text) ---- */
  --mane-900: #2A1700;        /* deepest ink */
  --mane-800: #412402;        /* brand Mane */
  --mane-700: #5A3608;
  --warm-600: #6E6048;        /* muted body / captions */
  --warm-500: #8C7E64;
  --warm-400: #A99A80;
  --warm-300: #C6BBA3;

  /* ---- Lion (amber — JUDGMENT: audits, attention, active) ---- */
  --lion-700: #8F6011;        /* dark text on light lion fill */
  --lion-600: #BA7517;        /* brand Lion mid */
  --lion-500: #EF9F27;        /* brand Lion — primary accent */
  --lion-300: #F6C575;
  --lion-100: #FAEEDA;        /* brand Lion light fill */

  /* ---- Bird (teal — BLESSING: passing, anointed, success) ---- */
  --bird-800: #085041;        /* brand Bird dark text */
  --bird-700: #0F6E56;        /* brand Bird mid */
  --bird-500: #1D9E75;        /* brand Bird — success base */
  --bird-400: #2CB888;        /* brightened (dark-mode pop) */
  --bird-300: #6FCBAE;
  --bird-100: #E1F5EE;        /* brand Bird light fill */

  /* ---- Night field (dark mode — warm espresso, never cold) ---- */
  --night-950: #14100A;
  --night-900: #1B1611;       /* base dark surface */
  --night-800: #241E17;
  --night-700: #2F271D;
  --night-600: #3D3326;

  /* ---- Functional reds (errors only — NOT a brand hue) ---- */
  --red-600: #B23A2A;
  --red-500: #CF4A36;
  --red-100: #F6DCD5;

  /* ============================================================
     SEMANTIC ALIASES — light theme (default)
     Reach for these in components, not the raw scales above.
     ============================================================ */
  --bg:              var(--parchment-200);
  --bg-sunk:         var(--parchment-300);
  --surface-card:    var(--parchment-50);
  --surface-raised:  #ffffff;
  --surface-inset:   var(--parchment-100);

  --text-strong:     var(--mane-900);
  --text-body:       var(--mane-800);
  --text-muted:      var(--warm-600);
  --text-faint:      var(--warm-500);
  --text-on-lion:    var(--mane-800);   /* darkest of the Lion's neighbor — brand rule */
  --text-on-bird:    var(--bird-100);   /* light leaf on a solid teal fill */

  /* Lion = primary accent (judgment) */
  --accent:          var(--lion-500);
  --accent-strong:   var(--lion-600);
  --accent-ink:      var(--lion-700);   /* lion text on light fills */
  --accent-soft:     var(--lion-100);

  /* Bird = success / anointed (blessing) */
  --good:            var(--bird-500);
  --good-strong:     var(--bird-700);
  --good-ink:        var(--bird-800);
  --good-soft:       var(--bird-100);

  /* Functional danger (errors) */
  --danger:          var(--red-500);
  --danger-strong:   var(--red-600);
  --danger-soft:     var(--red-100);

  --border:          var(--parchment-400);
  --border-strong:   var(--warm-400);
  --rule:            var(--parchment-300);
  --rule-soft:       var(--parchment-200);

  --focus-ring:      var(--lion-500);

  color-scheme: light;
}

/* ============================================================
   SEMANTIC ALIASES — dark theme ("the Historian's reading room
   after hours") — a warm espresso field, never cold charcoal.
   ============================================================ */
[data-theme="dark"] {
  --bg:              var(--night-900);
  --bg-sunk:         var(--night-950);
  --surface-card:    var(--night-800);
  --surface-raised:  var(--night-700);
  --surface-inset:   var(--night-950);

  --text-strong:     var(--parchment-50);
  --text-body:       var(--parchment-200);
  --text-muted:      var(--warm-300);
  --text-faint:      var(--warm-400);
  --text-on-lion:    var(--mane-900);   /* still the Mane — dark ink on amber */
  --text-on-bird:    var(--night-950);

  --accent:          var(--lion-500);
  --accent-strong:   var(--lion-300);
  --accent-ink:      var(--lion-300);
  --accent-soft:     #3A2A0E;

  --good:            var(--bird-400);
  --good-strong:     var(--bird-300);
  --good-ink:        var(--bird-300);
  --good-soft:       #0C2A22;

  --danger:          #E0664F;
  --danger-strong:   #EC8470;
  --danger-soft:     #3A1E18;

  --border:          var(--night-600);
  --border-strong:   var(--warm-500);
  --rule:            var(--night-700);
  --rule-soft:       var(--night-800);

  --focus-ring:      var(--lion-500);

  color-scheme: dark;
}

@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--text-strong);
    --text-faint: var(--text-strong);
    --border: var(--border-strong);
  }
}

@media (forced-colors: active) {
  :root {
    --focus-ring: Highlight;
  }
}

/* ============================================================
   burg — Typography
   Display = Space Grotesk (the wordmark + headings; geometric, a touch
   mechanical). UI/body = Hanken Grotesk (the readable workhorse).
   Code/data = JetBrains Mono — and mono is a SIGNATURE voice here:
   commit hashes, metrics, repo paths and the Lion's verdicts all run
   mono so the "machine reading your code" feeling stays present.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-grotesk: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', 'Menlo', monospace;

  /* Roles */
  --font-display: var(--font-grotesk);  /* wordmark, headings, big numbers */
  --font-body:    var(--font-sans);     /* UI + reading copy */
  --font-code:    var(--font-mono);     /* hashes, metrics, verdicts */

  /* ---- Weights ---- */
  --w-regular:  400;  /* @kind font */
  --w-medium:   500;  /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold:     700;  /* @kind font */
  --w-black:    800;  /* @kind font — display punch */

  /* ---- Type scale (1rem = 16px). A compact dashboard scale: the UI
     base is 15px; display sizes stay confident but not editorial. ---- */
  --t-display: 3.5rem;     /* 56px — hero / big metric */
  --t-h1:      2.5rem;     /* 40px */
  --t-h2:      1.875rem;   /* 30px */
  --t-h3:      1.375rem;   /* 22px */
  --t-h4:      1.125rem;   /* 18px */
  --t-body-lg: 1.0625rem;  /* 17px — lede */
  --t-body:    0.9375rem;  /* 15px — base UI reading */
  --t-small:   0.8125rem;  /* 13px */

  /* Mono / data voice */
  --t-code:    0.8125rem;  /* 13px — hashes, inline data */
  --t-label:   0.75rem;    /* 12px — field labels, meta */
  --t-micro:   0.6875rem;  /* 11px — chip text, footnotes */

  /* ---- Line heights ---- */
  --lh-tight: 1.08;   /* @kind font — display */
  --lh-snug:  1.28;   /* @kind font — headings */
  --lh-body:  1.55;   /* @kind font — reading */
  --lh-code:  1.5;    /* @kind font — mono blocks */

  /* ---- Tracking ---- */
  --track-tight:  -0.02em;  /* display / wordmark @kind font */
  --track-snug:   -0.01em;  /* headings @kind font */
  --track-normal: 0;        /* @kind font */
  --track-label:  0.04em;   /* small UI labels @kind font */
  --track-caps:   0.08em;   /* SMALL-CAPS section labels @kind font */
  --track-wide:   0.16em;   /* spaced meta / overlines @kind font */
}

/* ============================================================
   burg — Spacing, layout & radii
   A 4px base on a calm dashboard rhythm. burg's mark is flat and
   geometric; surfaces are softly rounded (cards 12px) but controls
   stay crisp. Nothing pill-shaped except status pills and avatars.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  --target-control: 2.75rem;

  /* ---- Container widths ---- */
  --measure:       68ch;    /* ideal reading measure */
  --width-card:    21rem;   /* a single ribbon/anointment card */
  --width-content: 46rem;
  --width-wide:    72rem;
  --width-max:     90rem;

  /* ---- Radii — flat/geometric brand: crisp controls, soft cards ---- */
  --radius-0:    0;
  --radius-xs:   4px;     /* chips, tags, small inputs */
  --radius-sm:   6px;     /* inputs, badges */
  --radius-md:   8px;     /* buttons */
  --radius-lg:   12px;    /* cards, dialogs */
  --radius-xl:   16px;    /* large panels */
  --radius-full: 999px;   /* status pills, avatars, dots */

  /* ---- Border widths ---- */
  --bw-hair:  1px;
  --bw-rule:  1.5px;      /* card framing rule */
  --bw-thick: 2px;       /* the Lion's amber heading rule / active */
}

/* Main page regions share this gutter. Cards and controls use their own spacing. */
:root { --space-page-x: 1rem; --space-page-y: 1rem; --width-navigation: 15rem; }
@media (min-width: 40rem) {
  :root { --space-page-x: 1.5rem; --space-page-y: 1.25rem; }
}
@media (min-width: 64rem) {
  :root { --space-page-x: 2rem; --space-page-y: 1.5rem; }
}

/* ============================================================
   burg — Effects: shadows, borders, motion
   Warm, low elevation derived from the Mane ink — paper with weight,
   not glossy SaaS float. Motion is quiet and confident: short, eased,
   no bounce (the Lion doesn't fidget).
   ============================================================ */

:root {
  /* ---- Elevation (warm, low — shadows tinted toward Mane brown) ---- */
  --shadow-flat:   0 1px 0 rgba(42,23,0,0.05);
  --shadow-card:   0 1px 2px rgba(42,23,0,0.05), 0 4px 12px rgba(42,23,0,0.06);
  --shadow-raised: 0 2px 6px rgba(42,23,0,0.07), 0 14px 30px rgba(42,23,0,0.10);
  --shadow-pop:    0 10px 20px rgba(42,23,0,0.12), 0 28px 56px rgba(42,23,0,0.16);

  /* A faint top crease so cards feel like stacked stock */
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(42,23,0,0.04);

  /* Press / focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 38%, transparent);

  /* The Lion's glow — used ONLY on the active/attention state, sparingly */
  --ring-lion: 0 0 0 3px color-mix(in srgb, var(--lion-500) 30%, transparent);
  --ring-bird: 0 0 0 3px color-mix(in srgb, var(--bird-500) 30%, transparent);

  /* ---- Border presets ---- */
  --border-hair: var(--bw-hair) solid var(--border);
  --border-rule: var(--bw-rule) solid var(--border-strong);

  /* ---- Motion ---- */
  --ease-quiet: cubic-bezier(0.2, 0, 0, 1);     /* @kind other */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   340ms;  /* @kind other */
}

[data-theme="dark"] {
  --shadow-flat:   0 1px 0 rgba(0,0,0,0.3);
  --shadow-card:   0 1px 2px rgba(0,0,0,0.40), 0 6px 16px rgba(0,0,0,0.44);
  --shadow-raised: 0 2px 6px rgba(0,0,0,0.50), 0 16px 36px rgba(0,0,0,0.54);
  --shadow-pop:    0 10px 24px rgba(0,0,0,0.58), 0 28px 60px rgba(0,0,0,0.64);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.3);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ============================================================
   burg — Base elements & brand utilities
   Element defaults plus the small vocabulary the whole system leans
   on: the wordmark, the Anointment pill (the Bird's blessing), the
   Ribbon mark (the Lion's judgment), the Lion's verdict line, and the
   mono data voice (hashes, metrics, repo paths). Plain CSS classes so
   HTML cards, UI kits and assets all share one language.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--t-h1); letter-spacing: var(--track-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); font-weight: var(--w-semibold); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

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

::selection { background: var(--accent-soft); color: var(--text-strong); }

/* ------------------------------------------------------------
   The parchment field. A barely-there warm grain so cream never
   reads as flat #fff. Layer on any large surface.
   ------------------------------------------------------------ */
.burg-paper {
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(42,23,0,0.018) 0.5px, transparent 0.5px),
    radial-gradient(rgba(42,23,0,0.018) 0.5px, transparent 0.5px);
  background-size: 8px 8px, 8px 8px;
  background-position: 0 0, 4px 4px;
}

/* ------------------------------------------------------------
   THE WORDMARK — always lowercase "burg" with a Lion-amber period.
   Space Grotesk, tight tracking. Use .burg-wordmark on a span/link.
   ------------------------------------------------------------ */
.burg-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
  text-transform: lowercase;
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.burg-wordmark::after {
  content: ".";
  color: var(--accent);
  /* the amber period is the only flourish — keep it tight to the b */
  margin-left: 0.01em;
}
.burg-wordmark--lg { font-size: 2.25rem; }
.burg-wordmark--xl { font-size: 3.5rem; }

/* ------------------------------------------------------------
   THE ANOINTMENT — the Bird's blessing. A teal status pill on a
   light-leaf fill with dark-teal text (the brief's canonical example:
   "12 anointed"). Teal means PASSING — never use it for attention.
   ------------------------------------------------------------ */
.anointment {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  padding: 0.32em 0.7em;
  border-radius: var(--radius-full);
  background: var(--good-soft);
  color: var(--good-ink);
  border: var(--bw-hair) solid color-mix(in srgb, var(--good) 30%, transparent);
  white-space: nowrap;
  line-height: 1.1;
}
.anointment__dot {
  width: 0.5em; height: 0.5em; border-radius: var(--radius-full);
  background: var(--good); flex: none;
}
.anointment--solid {
  background: var(--good); color: var(--text-on-bird);
  border-color: var(--good);
}

/* ------------------------------------------------------------
   THE RIBBON — the Lion's judgment / inspection. An amber mark that
   labels an audit. Amber means ATTENTION — never use it for success.
   ------------------------------------------------------------ */
.ribbon {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  padding: 0.3em 0.6em;
  border-radius: var(--radius-xs);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: var(--bw-hair) solid color-mix(in srgb, var(--accent) 32%, transparent);
  white-space: nowrap;
  line-height: 1.1;
}
.ribbon--solid { background: var(--accent); color: var(--text-on-lion); border-color: var(--accent); }

/* ------------------------------------------------------------
   THE LION'S VERDICT — a short declarative judgment on code. Mono,
   strong ink, with an amber tick in the margin. Never exclamatory.
   "This controller is doing three jobs. Pick one."
   ------------------------------------------------------------ */
.verdict {
  font-family: var(--font-mono);
  font-size: var(--t-code);
  line-height: var(--lh-code);
  color: var(--text-strong);
  padding-left: var(--space-4);
  border-left: var(--bw-thick) solid var(--accent);
}

/* ------------------------------------------------------------
   MONO DATA VOICE — hashes, metrics, repo paths, file lines.
   ------------------------------------------------------------ */
.mono { font-family: var(--font-mono); font-size: var(--t-code); letter-spacing: var(--track-normal); }
.hash { font-family: var(--font-mono); font-size: var(--t-code); color: var(--text-muted); }
.metric {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
  line-height: 1;
}
.repo-path { font-family: var(--font-mono); font-size: var(--t-small); color: var(--text-muted); }

/* ------------------------------------------------------------
   OVERLINE — spaced small-caps section label (mono).
   ------------------------------------------------------------ */
.overline {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-faint);
  font-weight: var(--w-medium);
}

/* The footer anagram line — the brand's ONLY whimsy, stated flat. */
.anagram-line {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  font-style: italic;
  color: var(--text-faint);
}

/* Focus visibility for everything interactive */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--bw-thick) solid transparent;
  outline-offset: var(--space-1);
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}

/* ============================================================
   burg — Component styles
   Class-based styling for the React primitives. Components stay thin;
   all visual state lives here so hover / focus / active ship with the
   system. Lion (amber) = primary/active; Bird (teal) = success/anoint.
   ============================================================ */

/* ---------------- Button ---------------- */
.burg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-semibold);
  line-height: 1;
  min-height: var(--target-control);
  letter-spacing: var(--track-normal);
  padding: 0.7em 1.1em;
  border: var(--bw-hair) solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-on-lion);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-quiet),
              background var(--dur-fast) var(--ease-quiet),
              color var(--dur-fast) var(--ease-quiet),
              border-color var(--dur-fast) var(--ease-quiet),
              box-shadow var(--dur-fast) var(--ease-quiet);
}
.burg-btn:hover  { background: var(--accent-strong); border-color: var(--accent-strong); text-decoration: none; }
.burg-btn:active { transform: translateY(1px); }
.burg-btn:focus-visible { outline: var(--bw-thick) solid transparent; outline-offset: var(--space-1); box-shadow: var(--ring); }
.burg-btn[disabled], .burg-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}

/* secondary — neutral surface */
.burg-btn--secondary {
  background: var(--surface-raised); border-color: var(--border-strong); color: var(--text-body);
}
.burg-btn--secondary:hover { background: var(--surface-inset); border-color: var(--border-strong); color: var(--text-strong); }

/* outline — the Lion's quiet form */
.burg-btn--outline { background: transparent; color: var(--accent-ink); border-color: var(--accent); }
.burg-btn--outline:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }

/* success — the Bird's action (anoint / approve) */
.burg-btn--success { background: var(--good); border-color: var(--good); color: var(--text-on-bird); }
.burg-btn--success:hover { background: var(--good-strong); border-color: var(--good-strong); }

/* ghost — quiet text action */
.burg-btn--ghost {
  background: transparent; color: var(--text-body); border-color: transparent;
}
.burg-btn--ghost:hover { background: var(--surface-inset); color: var(--text-strong); }

/* sizes */
.burg-btn--sm { font-size: var(--t-small); padding: 0.5em 0.85em; border-radius: var(--radius-sm); }
.burg-btn--lg { font-size: var(--t-body-lg); padding: 0.8em 1.5em; }

.burg-btn__icon { display: inline-flex; }
.burg-btn__icon svg { width: 1.05em; height: 1.05em; stroke-width: 2; }

/* ---------------- IconButton ---------------- */
.burg-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--target-control); height: var(--target-control);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quiet), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.burg-iconbtn:hover { background: var(--surface-inset); color: var(--accent-ink); border-color: var(--border-strong); }
.burg-iconbtn:active { transform: translateY(1px); }
.burg-iconbtn:focus-visible { outline: var(--bw-thick) solid transparent; outline-offset: var(--space-1); box-shadow: var(--ring); }
.burg-iconbtn--bare { border-color: transparent; background: transparent; }
.burg-iconbtn svg { width: 1.1rem; height: 1.1rem; stroke-width: 2; }

/* ---------------- Badge ---------------- */
.burg-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-weight: var(--w-medium);
  padding: 0.32em 0.6em;
  border-radius: var(--radius-xs);
  border: var(--bw-hair) solid currentColor;
  color: var(--text-muted);
  background: transparent;
  line-height: 1.1;
  white-space: nowrap;
}
.burg-badge--lion   { color: var(--accent-ink); }
.burg-badge--bird   { color: var(--good-ink); }
.burg-badge--danger { color: var(--danger-strong); }
.burg-badge--solid-lion { background: var(--accent); color: var(--text-on-lion); border-color: var(--accent); }
.burg-badge--solid-bird { background: var(--good); color: var(--text-on-bird); border-color: var(--good); }
.burg-badge__dot { width: 0.5em; height: 0.5em; border-radius: var(--radius-full); background: currentColor; flex: none; }

/* ---------------- Tag ---------------- */
.burg-tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-normal);
  padding: 0.28em 0.65em;
  border-radius: var(--radius-xs);
  background: var(--surface-inset);
  color: var(--text-muted);
  border: var(--bw-hair) solid var(--border);
  cursor: default;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.burg-tag--active { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
button.burg-tag { cursor: pointer; }

/* ---------------- Card ---------------- */
.burg-card {
  position: relative;
  background: var(--surface-card);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  color: var(--text-body);
}
.burg-card--flat { box-shadow: none; }
.burg-card--inset { background: var(--surface-inset); box-shadow: none; }
.burg-card--interactive { transition: box-shadow var(--dur-base) var(--ease-quiet), transform var(--dur-base) var(--ease-quiet); cursor: pointer; }
.burg-card--interactive:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }

/* ---------------- Form controls ---------------- */
.burg-field { display: flex; flex-direction: column; gap: var(--space-2); }
.burg-label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-muted);
  font-weight: var(--w-medium);
}
.burg-input, .burg-select, .burg-textarea {
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--text-strong);
  background: var(--surface-raised);
  border: var(--bw-hair) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6em 0.7em;
  min-height: var(--target-control);
  width: 100%;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.burg-input::placeholder, .burg-textarea::placeholder { color: var(--text-faint); }
.burg-input:focus, .burg-select:focus, .burg-textarea:focus {
  outline: var(--bw-thick) solid transparent; outline-offset: var(--space-1); border-color: var(--focus-ring); box-shadow: var(--ring);
}

@media (forced-colors: active) {
  .burg-btn:focus-visible,
  .burg-iconbtn:focus-visible,
  .burg-input:focus,
  .burg-select:focus,
  .burg-textarea:focus {
    outline-color: Highlight;
  }
}
.burg-input[disabled], .burg-select[disabled] { opacity: 0.5; cursor: not-allowed; }
.burg-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.05em, calc(100% - 13px) 1.05em;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25em;
}
.burg-input--invalid, .burg-select--invalid { border-color: var(--danger); }
.burg-help { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--text-faint); letter-spacing: var(--track-label); }
.burg-help--error { color: var(--danger); }

/* Checkbox / Radio — square ledger boxes; checked = Lion */
.burg-check {
  display: inline-flex; align-items: flex-start; gap: var(--space-3);
  font-family: var(--font-body); font-size: var(--t-body); color: var(--text-body);
  cursor: pointer;
}
.burg-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.burg-check__box {
  flex: none;
  width: 1.15em; height: 1.15em; margin-top: 0.12em;
  border: var(--bw-rule) solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-on-lion);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.burg-check--radio .burg-check__box { border-radius: var(--radius-full); }
.burg-check input:checked + .burg-check__box { background: var(--accent); border-color: var(--accent); }
.burg-check input:focus-visible + .burg-check__box { box-shadow: var(--ring); }
.burg-check__box svg { width: 0.8em; height: 0.8em; opacity: 0; transition: opacity var(--dur-fast); stroke-width: 3; }
.burg-check input:checked + .burg-check__box svg { opacity: 1; }
.burg-check--radio .burg-check__box::after {
  content: ""; width: 0.5em; height: 0.5em; border-radius: var(--radius-full);
  background: var(--text-on-lion); transform: scale(0); transition: transform var(--dur-fast);
}
.burg-check--radio input:checked + .burg-check__box::after { transform: scale(1); }

/* Switch — checked = Lion (active) */
.burg-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-family: var(--font-body); color: var(--text-body); }
.burg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.burg-switch__track {
  width: 2.6rem; height: 1.45rem; border-radius: var(--radius-full);
  background: var(--bg-sunk); border: var(--bw-hair) solid var(--border-strong);
  position: relative; transition: background var(--dur-base) var(--ease-quiet), border-color var(--dur-base);
}
.burg-switch__thumb {
  position: absolute; top: 1px; left: 1px;
  width: 1.2rem; height: 1.2rem; border-radius: var(--radius-full);
  background: var(--surface-raised); box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-quiet);
}
.burg-switch input:checked + .burg-switch__track { background: var(--accent); border-color: var(--accent); }
.burg-switch input:checked + .burg-switch__track .burg-switch__thumb { transform: translateX(1.15rem); }
.burg-switch input:focus-visible + .burg-switch__track { box-shadow: var(--ring); }

/* ---------------- Avatar ---------------- */
.burg-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-mono); font-weight: var(--w-medium); font-size: var(--t-small);
  letter-spacing: var(--track-label); text-transform: uppercase;
  border: var(--bw-hair) solid var(--border); overflow: hidden; flex: none;
}
.burg-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- Tabs ---------------- */
.burg-tabs { display: flex; gap: var(--space-5); border-bottom: var(--bw-hair) solid var(--border); }
.burg-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: var(--t-body); font-weight: var(--w-medium);
  color: var(--text-muted); padding: var(--space-3) 0; position: relative;
  transition: color var(--dur-fast);
}
.burg-tab:hover { color: var(--text-strong); }
.burg-tab[aria-selected="true"] { color: var(--accent-ink); font-weight: var(--w-semibold); }
.burg-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent);
}

/* ============================================================
   BRAND COMPONENTS
   ============================================================ */

/* ---------------- RibbonCard (the Lion's audit) ---------------- */
.burg-ribbon-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--surface-card);
  border: var(--bw-hair) solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  color: var(--text-body);
}
.burg-ribbon-card--anointed { border-top-color: var(--good); }
.burg-ribbon-card--interactive { transition: box-shadow var(--dur-base) var(--ease-quiet), transform var(--dur-base) var(--ease-quiet); cursor: pointer; }
.burg-ribbon-card--interactive:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.burg-ribbon-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.burg-ribbon-card__id { font-family: var(--font-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--text-faint); }
.burg-ribbon-card__target { font-family: var(--font-mono); font-size: var(--t-code); color: var(--text-body); word-break: break-all; }
.burg-ribbon-card__verdict {
  font-family: var(--font-mono); font-size: var(--t-code); line-height: var(--lh-code);
  color: var(--text-strong);
  padding-left: var(--space-4); border-left: var(--bw-thick) solid var(--accent);
}
.burg-ribbon-card--anointed .burg-ribbon-card__verdict { border-left-color: var(--good); }
.burg-ribbon-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); }

/* ---------------- LionVerdict (standalone judgment line) ---------------- */
.burg-verdict {
  font-family: var(--font-mono); font-size: var(--t-code); line-height: var(--lh-code);
  color: var(--text-strong);
  padding-left: var(--space-4); border-left: var(--bw-thick) solid var(--accent);
}
.burg-verdict__cite { display: block; margin-top: var(--space-2); font-size: var(--t-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-faint); }

/* ---------------- HistorianEntry (timeline row) ---------------- */
.burg-historian { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
.burg-historian__rail { display: flex; flex-direction: column; align-items: center; }
.burg-historian__dot {
  width: 0.7rem; height: 0.7rem; border-radius: var(--radius-full);
  background: var(--accent); border: 2px solid var(--surface-card);
  box-shadow: 0 0 0 1px var(--border); flex: none; margin-top: 0.2rem;
}
.burg-historian__dot--bird { background: var(--good); }
.burg-historian__line { width: 1.5px; flex: 1; background: var(--rule); margin-top: var(--space-1); min-height: var(--space-4); }
.burg-historian__body { padding-bottom: var(--space-5); }
.burg-historian__time { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--track-label); color: var(--text-faint); }
.burg-historian__title { font-family: var(--font-body); font-weight: var(--w-semibold); color: var(--text-strong); margin: 0.15rem 0 0; }

/* ============================================================
   Semantic layer additions
   Classes for components whose element is chosen by meaning rather
   than appearance. See docs/SEMANTIC-CONTRACT.md.
   Tokens only — no literal values.
   ============================================================ */

/* Available to assistive tech, absent from the visual layout. Used where a
   value must be reachable by a screen reader but would be noise on screen —
   the absolute timestamp, the required-field announcement. `title` is not a
   substitute: it is unreachable by keyboard and by touch. */
.burg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The mono data voice — hashes, paths, exit codes, durations. */
.burg-mono { font-family: var(--font-mono); font-size: var(--t-code); }

.burg-timestamp { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.burg-field__required { color: var(--danger); margin-inline-start: var(--space-1); }

/* --- Alert ------------------------------------------------- */
.burg-alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border: var(--bw-hair) solid var(--border);
  border-inline-start-width: var(--bw-thick);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-body);
}
.burg-alert__title {
  font-size: var(--t-label);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-strong);
  margin: 0;
}
.burg-alert__body > :last-child { margin-bottom: 0; }
.burg-alert--info { border-inline-start-color: var(--accent); }
.burg-alert--success { border-inline-start-color: var(--good); }
.burg-alert--warning { border-inline-start-color: var(--accent-strong); }
.burg-alert--danger { border-inline-start-color: var(--danger); background: var(--danger-soft); }

/* --- Page header ------------------------------------------- */
.burg-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: var(--bw-hair) solid var(--rule);
}
.burg-page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-faint);
  display: block;
  margin-block-end: var(--space-1);
}
.burg-page-header__title { margin: 0; }
.burg-page-header__subtitle { color: var(--text-muted); margin: var(--space-1) 0 0; max-width: var(--measure); }
.burg-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --- Record list — the reader scans for one record ---------- */
.burg-list { list-style: none; margin: 0; padding: 0; }
.burg-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--bw-hair) solid var(--rule-soft);
  min-block-size: 2.75rem;
}
.burg-list__item:last-child { border-block-end: 0; }
.burg-list__item:hover { background: var(--surface-inset); }
.burg-list__link { color: inherit; text-decoration: none; flex: 1; }
.burg-list__link:hover { text-decoration: underline; }
.burg-list__meta { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); }

/* A row that reveals rather than navigates. <summary> is the whole row's
   target, so it — not the <li> — carries the padding and the 44px minimum
   that the link row gets, and the panel's links sit below it where they have
   room to name what they open. */
.burg-list__item--reveals { display: block; padding: 0; }
.burg-list__item--reveals:hover { background: transparent; }
.burg-list__disclosure { display: block; }
.burg-list__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  min-block-size: 2.75rem;
  cursor: pointer;
  list-style: none;
}
.burg-list__summary::-webkit-details-marker { display: none; }
.burg-list__summary:hover { background: var(--surface-inset); }
.burg-list__summary:focus-visible {
  outline: var(--bw-thick) solid transparent;
  outline-offset: calc(var(--space-1) * -1);
  box-shadow: var(--ring);
}
.burg-list__name { flex: 1; }
.burg-list__summary::after {
  content: '';
  inline-size: 0.4rem;
  block-size: 0.4rem;
  margin-inline-start: var(--space-3);
  border-inline-end: var(--bw-thick) solid currentColor;
  border-block-end: var(--bw-thick) solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
}
.burg-list__disclosure[open] > .burg-list__summary::after { transform: rotate(45deg); }
.burg-list__detail { padding: 0 var(--space-4) var(--space-3); }

/* --- Record table — the reader compares down a column ------- */
.burg-table { inline-size: 100%; border-collapse: collapse; }
.burg-table caption {
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-faint);
  padding-block-end: var(--space-2);
}
.burg-table th {
  text-align: start;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-faint);
  font-weight: var(--w-medium);
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--bw-hair) solid var(--border);
  white-space: nowrap;
}
.burg-table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--bw-hair) solid var(--rule-soft);
  vertical-align: top;
}
.burg-table tbody tr:last-child td { border-block-end: 0; }
.burg-table tbody tr:hover { background: var(--surface-inset); }
.burg-table__numeric { text-align: end; font-variant-numeric: tabular-nums; }
.burg-table__wrap { overflow-x: auto; }

/* --- Definition list — facts about one subject -------------- */
.burg-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); }
.burg-dl dt {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-faint);
}
.burg-dl dd { margin: 0; color: var(--text-strong); }
.burg-dl--stacked { grid-template-columns: 1fr; gap: var(--space-1); }

/* --- Empty state -------------------------------------------- */
.burg-empty { color: var(--text-faint); text-align: center; padding: var(--space-6) var(--space-5); }
.burg-empty__title { color: var(--text-muted); font-weight: var(--w-medium); margin: 0 0 var(--space-2); }
.burg-empty--inline { text-align: start; padding: var(--space-4); }

/* Page shell: the host supplies navigation destinations and page content. */
.burg-page-shell { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); width: 100%; min-height: 100dvh; }
.burg-page-shell__navigation { min-width: 0; padding: var(--space-page-y) 0.75rem; border-bottom: 1px solid var(--border); }
.burg-page-shell__navigation a { display: flex; align-items: center; min-height: var(--target-control); padding: 0.5rem 0.75rem; overflow-wrap: anywhere; }
.burg-page-shell__navigation a[aria-current='page'] { font-weight: 700; text-decoration: underline; }
.burg-page-shell__content { min-width: 0; padding: var(--space-page-y) var(--space-page-x); }
.burg-page-shell__content--bleed { padding: 0; }
.burg-page-shell__skip { position: fixed; top: 0.5rem; left: 0.5rem; transform: translateY(-200%); z-index: 100; padding: 0.75rem; background: var(--bg); color: var(--text-body); }
.burg-page-shell__skip:focus { transform: none; }
.burg-page-shell a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 64rem) {
  .burg-page-shell { grid-template-columns: var(--width-navigation) minmax(0, 1fr); }
  .burg-page-shell--without-navigation { grid-template-columns: minmax(0, 1fr); }
  .burg-page-shell__navigation { position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--border); }
}
@media print {
  .burg-page-shell { display: block; min-height: 0; }
  .burg-page-shell__navigation, .burg-page-shell__skip { display: none; }
}