@layer base, layout, components, utility;

/* ============================================================
   DESIGN CORE — FONTS
   Self-hosted, same-origin @font-face for every family a skin selects via --font-display/-body/-mono.
   Strict CSP forbids a remote @import/url() (default-src 'self'), so every src is a LOCAL /fonts/...
   path; each site serves its own family subset from its own public/fonts/ (staticDir). font-display:
   swap avoids a blocked first paint.

   Fonts are fontsource-hashed, per-subset files (e.g. be-vietnam-pro-latin-400-normal-PpnXBOrz.woff2),
   split latin / latin-ext / vietnamese with fontsource's unicode-range. Every REFERENCED face here is
   proven to resolve on the site that selects its family by design.test.ts's face-resolves guard.

   P6 reconciliation (this file): Newsreader (oldbooks display/body) is wired to its REAL hashed files —
   weights 400/500/600 normal + 400 italic, per subset — so oldbooks admin renders Newsreader instead
   of falling back to Georgia. The dead Inter faces (unreferenced by any skin) were removed, and the
   JetBrains-Mono weight-600 faces were dropped: no admin element renders mono at 600, and those files
   ship only on veritart — a declared-but-unresolved referenced face is exactly what the guard forbids.
   ============================================================ */

/* ---------- Be Vietnam Pro (veritart + seedy: --font-display / --font-body) ---------- */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-400-normal-PpnXBOrz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-ext-400-normal-CiZNW1ec.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-vietnamese-400-normal-CRcqvyg1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-500-normal-B6LVzGNe.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-ext-500-normal-h0Fp6aX0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-vietnamese-500-normal-DREgrEoJ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-600-normal-BZDkUTrt.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-ext-600-normal-BNd8euf0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-vietnamese-600-normal-nyU-ZL2p.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-700-normal-DlW1Zbsh.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-latin-ext-700-normal-C8_gqRu2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/be-vietnam-pro-vietnamese-700-normal-Csr0PCuG.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---------- JetBrains Mono (veritart + seedy + oldbooks: --font-mono) — weights 400/500 only.
   No admin element renders mono at 600 (verified: no rule pins it, none inherits a 600 ancestor), and
   the 600 files ship only on veritart, so a 600 face would be an unresolved referenced face on
   seedy/oldbooks. A stray inherited-600 mono glyph synthesizes bold from 400. ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-400-normal-V6pRDFza.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-400-normal-Bc8Ftmh3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-vietnamese-400-normal-ByoDsISC.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-500-normal-BWZEU5yA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext-500-normal-Cut-4mMH.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-vietnamese-500-normal-BvH7FW2L.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ---------- Newsreader (oldbooks display/body) — REAL hashed faces, weights 400/500/600 normal +
   400 italic (markdown `*em*` renders <em>), split latin / latin-ext / vietnamese (oldbooks lists
   Vietnamese content). unicode-range values are fontsource's, identical to the Be Vietnam Pro block
   above. ---------- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-latin-400-normal-BFBkh4jY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext-400-normal-svq1FPys.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-vietnamese-400-normal-DdKr49mV.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-latin-400-italic-CEihAR-f.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext-400-italic-BMTE_bNQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/newsreader-vietnamese-400-italic-bZegYFuM.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/newsreader-latin-500-normal-B66TYsaK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext-500-normal-BNHmvKvI.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/newsreader-vietnamese-500-normal-CL6a8tp2.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/newsreader-latin-600-normal-30OJ_TG_.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/newsreader-latin-ext-600-normal-BXv5iMHi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/newsreader-vietnamese-600-normal-CaH84vfx.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ============================================================
   DESIGN CORE — TOKENS
   The non-color primitives (ported verbatim from crucix's tokens.css — sizing, type scale, radii,
   glass/shadow/glow recipe, motion, layout, z-index, content-type hues) plus the SLOT-ROLE colour
   contract every skin overrides. Primitives keep their crucix names (a size is a size on every site);
   colours that must vary per site route through the slot roles below instead — that split is the
   whole point of this file: `components.css` references ONLY these two sets, never a raw crucix ramp
   (`--mint-*`, `--color-text-*`, ...), so it re-skins correctly with zero rewrite (D3/D4).
   ============================================================ */

:root {
  /* ---------- SPACING — dense scale (crucix tokens.css:162-174) ---------- */
  --size-0: 0.125rem; /*  2px — hairline gap */
  --size-1: 0.25rem; /*  4px */
  --size-2: 0.375rem; /*  6px */
  --size-3: 0.5rem; /*  8px */
  --size-4: 0.75rem; /* 12px */
  --size-5: 1rem; /* 16px */
  --size-6: 1.5rem; /* 24px */
  --size-7: 2rem; /* 32px */
  --size-8: 3rem; /* 48px */
  --size-9: 4rem; /* 64px */

  /* Minimum interactive hit-area — WCAG 2.5.8 Target Size (Minimum). */
  --tap-min: 24px;

  /* ---------- RADII (crucix tokens.css:180-184) ---------- */
  --radius-0: 0; /* badges, chips */
  --radius-1: 2px; /* panels, cards */
  --radius-2: 3px; /* buttons, inputs */
  --radius-3: 6px; /* modals, large panels */

  /* ---------- TYPE SCALE — dense (crucix tokens.css:186-208) ----------
     Every step multiplies by --fs-scale (default 1) so a skin loosens the WHOLE type ramp with ONE
     knob (oldbooks sets it > 1 for its serif) without touching the fixed control/row-height grid below
     — scaling those would misalign the dense data tables. The px comments are at scale 1. */
  --fs-scale: 1;
  --fs-micro: calc(0.675rem * var(--fs-scale)); /* 10.8px — chip text, dense meta */
  --fs-xs: calc(0.75rem * var(--fs-scale)); /* 12px — meta, table cells */
  --fs-sm: calc(0.85rem * var(--fs-scale)); /* 13.6px — default UI text */
  --fs-base: calc(0.9rem * var(--fs-scale)); /* 14.4px — body copy */
  --fs-md: calc(0.975rem * var(--fs-scale)); /* 15.6px — lede, subhead */
  --fs-lg: calc(1.125rem * var(--fs-scale)); /* 18px — h3 */
  --fs-xl: calc(1.375rem * var(--fs-scale)); /* 22px — h2 */
  --fs-2xl: calc(1.75rem * var(--fs-scale)); /* 28px — h1 */
  --fs-3xl: calc(2.25rem * var(--fs-scale)); /* 36px — hero */
  --fs-4xl: calc(3rem * var(--fs-scale)); /* 48px — display */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-mono: 0.02em;
  --tracking-caps: 0.12em;

  /* ---------- GLASS (backdrop-blur surfaces) (crucix tokens.css:142-152) ----------
     A dark-navy glass recipe by default — the ambient chrome identity (D2). Light skins neutralize
     these toward their own surface colour rather than leaving a navy tint behind cream/paper (P6). */
  --glass-subtle: oklch(14% 0.02 250 / 0.3);
  --glass-medium: oklch(14% 0.02 250 / 0.55);
  --glass-strong: oklch(14% 0.02 250 / 0.75);
  --glass-blur: 20px;
  --glass-blur-soft: 12px;
  --glass-blur-chip: 4px;

  /* ---------- SHADOW + GLOW (crucix tokens.css:154-160) ---------- */
  --glow-accent: 0 0 32px -8px oklch(85% 0.17 170 / 0.35);
  --glow-accent-sm: 0 0 16px -6px oklch(85% 0.17 170 / 0.25);
  --glow-cyan: 0 0 32px -8px oklch(78% 0.12 220 / 0.3);
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-2: 0 4px 16px oklch(0% 0 0 / 0.5);
  --shadow-3: 0 12px 40px oklch(0% 0 0 / 0.6);

  /* ---------- EASINGS + DURATIONS (crucix tokens.css:210-234) ---------- */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---------- LAYOUT ---------- */
  --layout-max: 1440px;
  --layout-reading: 68ch;
  --sidebar-w: 220px;
  --header-h: 44px;

  /* ---------- CONTROL / ROW HEIGHTS — fixed grid for alignment ---------- */
  --h-ctrl-xs: 22px; /* chips, dense buttons */
  --h-ctrl-sm: 26px; /* default buttons, inputs */
  --h-ctrl-md: 30px; /* primary actions, bigger inputs */
  --h-ctrl-lg: 36px; /* rare — form submit row */
  --h-row-xs: 24px; /* ultra-dense log rows */
  --h-row-sm: 28px; /* default table row */
  --h-row-md: 32px; /* card list row */

  /* ---------- Z ---------- */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  /* ---------- CONTENT-TYPE HUES (crucix tokens.css:50-57) ----------
     Each content type keeps its own hue everywhere, on every skin — a taxonomy colour, not a brand
     colour, so it is a primitive (fixed) rather than a slot role (overridden). */
  --c-article: oklch(85% 0.17 170); /* mint    — articles */
  --c-prompt: oklch(78% 0.15 300); /* violet  — prompts */
  --c-tool: oklch(80% 0.14 220); /* cyan    — tools */
  --c-skill: oklch(80% 0.1 55); /* peach   — skills */
  --c-page: oklch(80% 0.13 25); /* rose    — static pages */
  --c-media: oklch(80% 0.14 330); /* magenta — media */
  --c-mcp: oklch(82% 0.18 145); /* lime    — mcp events */
  --c-api: oklch(80% 0.14 260); /* indigo  — api events */

  /* ============================================================
     SLOT-ROLE COLOUR CONTRACT
     Neutral dark fallbacks only — every skin (design/skins/*.css) OVERRIDES every one of these in its
     own :root{}, appended after this file (later wins the cascade at equal specificity). A value here
     should never be visible in a real render; it exists so components.css/the coverage guard have
     something defined even before a skin is selected.
     ============================================================ */
  --color-surface: oklch(20% 0 0);
  --color-surface-raised: oklch(26% 0 0);
  --color-ink: oklch(95% 0 0);
  --color-ink-muted: oklch(72% 0 0);
  --color-border: oklch(55% 0 0 / 0.16);
  --color-border-hover: oklch(65% 0 0 / 0.3);
  --color-accent: oklch(75% 0.08 240);
  --color-accent-ink: oklch(15% 0 0);
  --color-link: var(--color-accent);
  --color-danger: oklch(65% 0.2 25);
  --color-success: oklch(75% 0.15 155);
  --color-warning: oklch(78% 0.14 85);
  --color-info: oklch(75% 0.1 220);
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* ---------- ADMIN ATMOSPHERE (per-skin) ----------
     The admin canvas + its ambient glow, expressed as slot-like knobs so `body.admin`
     (admin-chrome.ts) wears each site's OWN atmosphere instead of a hard-coded one. Neutral
     defaults here = a flat page on the surface colour with no glow (what oldbooks/seedy keep); a
     skin that has an ambient identity (veritart) overrides `--admin-ambient` and deepens
     `--admin-canvas` below its surfaces so the admin reads as part of that site, not a generic
     dashboard. Kept OUT of the `components.css` navy-literal firewall on purpose: the glow hues
     live in the skin, never the shared component library. */
  --admin-canvas: var(--color-surface);
  --admin-ambient: none;

  /* ============================================================
     TRIO-COMPAT ALIASES (crucix tokens.css:244-289)
     `--space-*`/`--text-*`/`--radius-sm/-md` map onto the primitives above so markup ported from the
     trio-compat vocabulary keeps working without a rewrite. Value-preserving (--space-4 = 1rem, same
     as --size-5).
     ============================================================ */
  --text-sm: var(--fs-sm);
  --text-base: var(--fs-base);
  --text-lg: var(--fs-lg);
  --text-xl: var(--fs-xl);
  --text-2xl: var(--fs-2xl);
  --leading-normal: var(--lh-body);
  --weight-normal: 400;
  --weight-bold: 700;

  --space-0: 0;
  --space-1: var(--size-1);
  --space-2: var(--size-3);
  --space-3: var(--size-4);
  --space-4: var(--size-5);
  --space-5: var(--size-6);
  --space-6: var(--size-7);
  --space-7: var(--size-8);
  --space-8: var(--size-9);

  --radius-sm: var(--radius-1);
  --radius-md: var(--radius-2);

  --measure: var(--layout-reading);
  --container: var(--layout-max);
}

/* ============================================================
   DESIGN CORE — COMPONENTS
   The admin-kit component library, ported from crucix's components.css and tokenized to the slot-role
   contract (tokens.css) — no baked navy `oklch(...250...)` literal survives (guarded by design.test.ts)
   and every crucix-native colour var (`--color-text-*`, `--color-elevated`, `--tint-*`, `--color-
   accent2`, ...) is replaced by a slot role, a content-type hue primitive, or a `color-mix()` tint
   derived from one — so the SAME markup re-skins correctly on a light site (D3/D4). Ambient decorative
   gradients that use a fixed content-hue (mint/cyan/violet) as ATMOSPHERE rather than as a functional
   surface/border/text colour are left as ported — that is the crucix "gallery glow" identity (D2),
   tuned per skin in P6, not a slot-coverage concern.

   Layer discipline matches crucix: shell/workbench is @layer layout (structural), everything else here
   is @layer components. The `@layer` ORDER itself is declared once, in utilities.css.
   ============================================================ */

/* ============================================================
   LAYOUT — admin shell + workbench (crucix components.css:152-238)
   ============================================================ */
@layer layout {
  /* App-shell grid: a full-width header (row 1), the sidebar + main content (row 2), and a FULL-WIDTH
     footer (row 3, spanning both columns) — exactly like the public site's edge-to-edge footer bar. The
     page (body) scrolls; the header and sidebar are sticky so they stay put while the content scrolls
     and the footer sits below everything. */
  .admin-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--header-h) 1fr auto;
    min-height: 100vh;
  }
  .admin-layout > .admin-header { grid-column: 1 / -1; }
  .admin-layout > .admin-footer { grid-column: 1 / -1; grid-row: 3; }
  .admin-layout > .admin-sidebar {
    grid-row: 2;
    position: sticky;
    top: var(--header-h);
    align-self: start;
    max-height: calc(100vh - var(--header-h));
    border-right: 1px solid var(--color-border);
    background:
      radial-gradient(ellipse 140% 40% at 0% 0%, oklch(84% 0.17 165 / 0.07), transparent 55%),
      radial-gradient(ellipse 80% 30% at 0% 100%, oklch(80% 0.14 220 / 0.04), transparent 60%),
      var(--glass-subtle);
    backdrop-filter: blur(var(--glass-blur));
    overflow-y: auto;
  }
  .admin-layout > .admin-main {
    grid-row: 2;
    padding: var(--size-5);
    min-width: 0;
    background:
      radial-gradient(1600px 500px at 10% 0%, oklch(84% 0.17 165 / 0.03), transparent 55%),
      radial-gradient(1200px 400px at 90% 0%, oklch(80% 0.14 220 / 0.025), transparent 55%);
  }

  .admin-header {
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding-inline: var(--size-4);
    border-bottom: 1px solid var(--color-border);
    background:
      radial-gradient(ellipse 30% 200% at 0% 50%, oklch(84% 0.17 165 / 0.06), transparent 55%),
      var(--glass-medium);
    backdrop-filter: blur(var(--glass-blur));
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }

  /* Dense 3-pane workbench: nav | content | context */
  .workbench {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr 300px;
    min-height: 100vh;
  }
  .workbench > .wb-nav {
    border-right: 1px solid var(--color-border);
    background: var(--glass-subtle);
    overflow-y: auto;
  }
  .workbench > .wb-main { overflow-y: auto; min-width: 0; }
  .workbench > .wb-side {
    border-left: 1px solid var(--color-border);
    background: var(--glass-subtle);
    overflow-y: auto;
  }
}

/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {
  /* ---------- CARD (crucix components.css:333-389) ---------- */
  .card {
    background:
      radial-gradient(ellipse 80% 50% at 0% 0%, oklch(84% 0.17 165 / 0.04), transparent 55%),
      var(--glass-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    padding: var(--size-4);
    position: relative;
    backdrop-filter: blur(var(--glass-blur-soft));
    min-width: 0;
    transition:
      border-color var(--dur-base) var(--ease-out),
      background var(--dur-base) var(--ease-out);
  }
  .card:hover {
    border-color: var(--color-border-hover);
    background:
      radial-gradient(ellipse 80% 50% at 0% 0%, oklch(84% 0.17 165 / 0.07), transparent 55%),
      var(--color-surface);
  }
  .card-tight { padding: var(--size-3); }
  .card-flush { padding: 0; }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-3);
    padding: var(--size-3) var(--size-4);
    border-bottom: 1px solid var(--color-border);
    min-height: 32px;
  }
  .card-body { padding: var(--size-4); }
  .card-footer {
    padding: var(--size-2) var(--size-4);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-muted);
  }
  .card-title {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
  }
  .card-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-mono);
  }

  /* ---------- BUTTONS (crucix components.css:399-462) ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-2);
    height: var(--h-ctrl-sm);
    padding: 0 var(--size-3);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1;
    color: var(--color-ink);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
  }
  .btn:hover {
    border-color: var(--color-border-hover);
    background: color-mix(in oklch, var(--color-surface-raised) 85%, var(--color-ink) 15%);
    color: var(--color-ink);
    text-decoration: none;
  }
  .btn:active { transform: translateY(1px); }
  .btn svg { width: 13px; height: 13px; }

  .btn-primary {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-accent) 22%, transparent),
      color-mix(in oklch, var(--color-accent) 10%, transparent)
    );
    border-color: var(--color-border-hover);
    color: var(--color-accent);
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05);
  }
  .btn-primary:hover {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--color-accent) 32%, transparent),
      color-mix(in oklch, var(--color-accent) 15%, transparent)
    );
    color: var(--color-ink);
  }

  .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-ink-muted);
  }
  .btn-ghost:hover { background: var(--glass-subtle); color: var(--color-ink); }

  .btn-danger {
    color: var(--color-danger);
    border-color: color-mix(in oklch, var(--color-danger) 25%, transparent);
  }
  .btn-danger:hover {
    background: color-mix(in oklch, var(--color-danger) 10%, transparent);
    border-color: color-mix(in oklch, var(--color-danger) 50%, transparent);
  }

  .btn-xs { height: var(--h-ctrl-xs); padding: 0 var(--size-2); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .btn-sm { height: var(--h-ctrl-sm); padding: 0 var(--size-3); font-size: var(--fs-xs); }
  .btn-md { height: var(--h-ctrl-md); padding: 0 var(--size-4); font-size: var(--fs-sm); }
  .btn-lg { height: var(--h-ctrl-lg); padding: 0 var(--size-5); font-size: var(--fs-base); }
  .btn-icon { width: var(--h-ctrl-sm); padding: 0; }
  .btn-icon.btn-xs { width: var(--h-ctrl-xs); }
  .btn-icon.btn-md { width: var(--h-ctrl-md); }

  /* ---------- BADGES (crucix components.css:482-513) ---------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    height: 16px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    background: var(--glass-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-0);
    white-space: nowrap;
  }
  .badge::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.8;
  }
  .badge-accent { color: var(--color-accent); border-color: color-mix(in oklch, var(--color-accent) 35%, transparent); background: color-mix(in oklch, var(--color-accent) 8%, transparent); }
  .badge-cyan { color: var(--c-tool); border-color: color-mix(in oklch, var(--c-tool) 35%, transparent); background: color-mix(in oklch, var(--c-tool) 8%, transparent); }
  .badge-violet { color: var(--c-prompt); border-color: color-mix(in oklch, var(--c-prompt) 35%, transparent); background: color-mix(in oklch, var(--c-prompt) 8%, transparent); }
  .badge-success { color: var(--color-success); border-color: color-mix(in oklch, var(--color-success) 35%, transparent); background: color-mix(in oklch, var(--color-success) 8%, transparent); }
  .badge-warning { color: var(--color-warning); border-color: color-mix(in oklch, var(--color-warning) 35%, transparent); background: color-mix(in oklch, var(--color-warning) 8%, transparent); }
  .badge-danger { color: var(--color-danger); border-color: color-mix(in oklch, var(--color-danger) 35%, transparent); background: color-mix(in oklch, var(--color-danger) 8%, transparent); }
  .badge-draft { color: var(--color-ink-muted); border-color: var(--color-border); }
  .badge-plain::before { display: none; }

  /* ---------- STATUS DOT (crucix components.css:516-534) ---------- */
  .dot-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-mono);
    color: var(--color-ink-muted);
    white-space: nowrap;
  }
  .dot-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
  }
  .dot-status.ok { color: var(--color-success); }
  .dot-status.warn { color: var(--color-warning); }
  .dot-status.err { color: var(--color-danger); }
  .dot-status.run { color: var(--color-accent); }
  .dot-status.run::before { animation: dot-status-pulse 1.6s ease-in-out infinite; }
  @keyframes dot-status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* ---------- TABLES — dense by default (crucix components.css:617-664) ---------- */
  .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
  }
  .table th, .table td {
    text-align: left;
    padding: var(--size-2) var(--size-3);
    height: var(--h-row-sm);
    border-bottom: 1px solid var(--color-border);
    line-height: 1.3;
  }
  .table th {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    background: var(--color-surface-raised);
    height: 26px;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .table tr:hover td { background: var(--color-surface-raised); }
  .table td { color: var(--color-ink-muted); }
  .cell-title { color: var(--color-ink); font-weight: 500; }

  .table.table-zebra tbody tr:nth-child(even) td { background: var(--color-surface); }
  .table.table-compact th, .table.table-compact td {
    padding: 3px var(--size-3);
    height: var(--h-row-xs);
    font-size: var(--fs-xs);
  }
  .table.table-bordered th, .table.table-bordered td { border-right: 1px solid var(--color-border); }
  .table.table-bordered th:last-child, .table.table-bordered td:last-child { border-right: 0; }
  .table th.sortable { cursor: pointer; user-select: none; }
  .table th.sortable::after { content: '↕'; margin-left: 4px; color: var(--color-ink-muted); font-size: 0.85em; }
  .table th.sort-asc::after { content: '↑'; color: var(--color-accent); }
  .table th.sort-desc::after { content: '↓'; color: var(--color-accent); }
  .table td.numeric { font-family: var(--font-mono); text-align: right; color: var(--color-ink); letter-spacing: var(--tracking-mono); }
  .table td.checkbox, .table th.checkbox { width: 28px; padding-right: 0; }
  .table td.row-id { font-family: var(--font-mono); color: var(--color-ink-muted); font-size: var(--fs-micro); letter-spacing: var(--tracking-mono); }
  .table .row-expand { background: var(--color-surface); }
  .table .row-expand td { padding: var(--size-3); }

  /* ---------- DEFINITION LIST — key/value dense (crucix components.css:667-696) ---------- */
  .dl-dense {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 0;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
  }
  .dl-dense > dt {
    padding: 4px 0;
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    font-size: var(--fs-micro);
    border-bottom: 1px dashed var(--color-border);
  }
  .dl-dense > dd {
    padding: 4px 0;
    margin: 0;
    color: var(--color-ink);
    letter-spacing: var(--tracking-mono);
    border-bottom: 1px dashed var(--color-border);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .dl-dense > dt:last-of-type, .dl-dense > dd:last-of-type { border-bottom: 0; }
  .dl-dense > dd.ok { color: var(--color-success); }
  .dl-dense > dd.warn { color: var(--color-warning); }
  .dl-dense > dd.err { color: var(--color-danger); }

  /* ---------- NAV (crucix components.css:699-734) ---------- */
  .nav-group-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    padding: var(--size-3) var(--size-3) var(--size-1);
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--size-2);
    padding: 4px var(--size-3);
    margin-inline: var(--size-1);
    height: 26px;
    font-size: var(--fs-sm);
    color: var(--color-ink-muted);
    border-radius: var(--radius-2);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
  }
  .nav-item:hover { background: var(--glass-subtle); color: var(--color-ink); text-decoration: none; }
  .nav-item.active {
    background: color-mix(in oklch, var(--color-accent) 10%, transparent);
    border-color: color-mix(in oklch, var(--color-accent) 20%, transparent);
    color: var(--color-accent);
  }
  .nav-item svg { width: 13px; height: 13px; flex: none; opacity: 0.85; }
  .nav-item-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-mono);
  }

  /* ---------- TABS (crucix components.css:737-794) ---------- */
  .tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    height: 30px;
  }
  .tab {
    padding: 0 var(--size-3);
    height: 100%;
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--dur-fast), border-color var(--dur-fast);
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
  .tab:hover { color: var(--color-ink); }
  .tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
  }
  .tab .tab-badge {
    padding: 0 5px;
    font-size: var(--fs-micro);
    background: color-mix(in oklch, var(--color-accent) 8%, transparent);
    color: var(--color-accent);
    border-radius: 999px;
    line-height: 14px;
  }
  .tab[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; }

  .tabs.tabs-pill {
    border-bottom: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 2px;
    border-radius: var(--radius-2);
    gap: 1px;
    display: inline-flex;
    height: auto;
  }
  .tabs.tabs-pill .tab {
    border-bottom: 0;
    padding: 4px var(--size-3);
    height: 22px;
    border-radius: var(--radius-1);
    margin: 0;
  }
  .tabs.tabs-pill .tab.active {
    background: color-mix(in oklch, var(--color-accent) 8%, transparent);
    color: var(--color-accent);
  }

  /* ---------- METRIC (crucix components.css:797-916) ---------- */
  .metric {
    padding: var(--size-3) var(--size-4);
    background:
      radial-gradient(ellipse 120% 80% at 0% 0%, oklch(84% 0.17 165 / 0.06), transparent 55%),
      var(--glass-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  }
  .metric:hover {
    border-color: var(--color-border-hover);
    background:
      radial-gradient(ellipse 120% 80% at 0% 0%, oklch(84% 0.17 165 / 0.09), transparent 55%),
      var(--color-surface);
  }
  .metric.m-cyan {
    background:
      radial-gradient(ellipse 120% 80% at 0% 0%, oklch(80% 0.14 220 / 0.06), transparent 55%),
      var(--glass-subtle);
  }
  .metric.m-violet {
    background:
      radial-gradient(ellipse 120% 80% at 0% 0%, oklch(78% 0.15 300 / 0.06), transparent 55%),
      var(--glass-subtle);
  }
  .metric.m-peach {
    background:
      radial-gradient(ellipse 120% 80% at 0% 0%, oklch(80% 0.1 55 / 0.06), transparent 55%),
      var(--glass-subtle);
  }
  .metric-label {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-muted);
  }
  .metric-value {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .metric-row { display: flex; align-items: baseline; gap: var(--size-2); }
  .metric-unit {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-mono);
  }
  .metric-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--color-success);
    letter-spacing: var(--tracking-mono);
  }
  .metric-delta.neg { color: var(--color-danger); }
  .metric-spark { margin-top: var(--size-2); }

  /* Metric strip — even denser horizontal bar */
  .metric-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    background: var(--glass-subtle);
    overflow: hidden;
  }
  .metric-strip > * {
    padding: var(--size-3) var(--size-4);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .metric-strip > *:last-child { border-right: 0; }
  .metric-strip .k {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .metric-strip .v {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .metric-strip .d {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--color-success);
    letter-spacing: var(--tracking-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .metric-strip .d.neg { color: var(--color-danger); }

  /* ---------- TOAST (crucix components.css:919-936) ---------- */
  .toast {
    display: flex;
    align-items: flex-start;
    gap: var(--size-3);
    padding: var(--size-2) var(--size-3);
    background: var(--glass-strong);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-2);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow-2);
    min-width: 280px;
    font-size: var(--fs-xs);
  }
  .toast-title { font-size: var(--fs-sm); color: var(--color-ink); font-weight: 500; }
  .toast-msg { font-size: var(--fs-micro); color: var(--color-ink-muted); margin-top: 1px; }
  .toast-danger { border-left-color: var(--color-danger); }
  .toast-warning { border-left-color: var(--color-warning); }
  .toast-success { border-left-color: var(--color-success); }

  /* ---------- CONTENT-TYPE CHIP (crucix components.css:1060-1076) ---------- */
  .type-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 7px;
    height: 16px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid currentColor;
    white-space: nowrap;
  }
  .type-chip::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
  }

  /* ---------- PROGRESS (crucix components.css:1079-1089) ----------
     Width is data-driven and CSP forbids inline `style=` — the fill is a `.fill-N` utility class
     (utilities.css) applied to `.bar` server-side, not a width declared here. */
  .progress {
    height: 4px;
    background: var(--color-surface);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .progress > .bar {
    height: 100%;
    background: var(--color-accent);
  }

  /* ---------- CALLOUT (crucix components.css:1297-1319) ---------- */
  .callout {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: var(--size-3);
    padding: var(--size-3) var(--size-4);
    border: 1px solid var(--color-border-hover);
    background: color-mix(in oklch, var(--color-accent) 8%, transparent);
    border-radius: var(--radius-1);
    align-items: start;
    font-size: var(--fs-sm);
  }
  .callout .callout-icon { color: var(--color-accent); margin-top: 2px; }
  .callout-title { font-weight: 600; color: var(--color-ink); margin-bottom: 2px; font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .callout-body { font-size: var(--fs-xs); color: var(--color-ink-muted); line-height: var(--lh-body); }
  .callout-info { border-color: var(--color-info); background: color-mix(in oklch, var(--color-info) 8%, transparent); }
  .callout-info .callout-icon, .callout-info .callout-title { color: var(--color-info); }
  .callout-warning { border-color: var(--color-warning); background: color-mix(in oklch, var(--color-warning) 8%, transparent); }
  .callout-warning .callout-icon, .callout-warning .callout-title { color: var(--color-warning); }
  .callout-danger { border-color: var(--color-danger); background: color-mix(in oklch, var(--color-danger) 8%, transparent); }
  .callout-danger .callout-icon, .callout-danger .callout-title { color: var(--color-danger); }

  /* ---------- RING / GAUGE — solid-stroke base (crucix components.css:1322-1330) ----------
     The `#ring-grad-accent` gradient variant is not ported (it needs an SVG <defs> emitted by the
     admin markup, out of P0's scope) — every ring uses this solid var(--color-accent) stroke. */
  .ring-stat {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--size-3);
    align-items: center;
  }
  .ring-stat svg { width: 56px; height: 56px; transform: rotate(-90deg); }
  .ring-stat .ring-bg { fill: none; stroke: var(--color-surface); stroke-width: 6; }
  .ring-stat .ring-fg { fill: none; stroke: var(--color-accent); stroke-width: 6; stroke-linecap: round; }

  /* ---------- HEATMAP — class-based intensity variant (crucix components.css:2217-2239) ----------
     The structural grid/labels/base cell live here; the `.l1`..`.l4` intensity classes are data-driven
     (chosen server-side per datum) so they live in utilities.css alongside `.fill-N`. */
  .heatmap {
    display: grid;
    grid-template-columns: auto repeat(24, 1fr);
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-mono);
  }
  .heatmap .hm-row-label, .heatmap .hm-col-label {
    color: var(--color-ink-muted);
    padding: 2px 4px;
    white-space: nowrap;
  }
  .heatmap .hm-col-label { text-align: center; }
  .heatmap .hm-cell {
    aspect-ratio: 1;
    background: color-mix(in oklch, var(--color-ink) 3%, transparent);
    border-radius: 1px;
  }

  /* ---------- FUNNEL (crucix components.css:1341-1371) ----------
     Same CSP constraint as `.progress`: `.fn-bar`'s width is a `.fill-N` utility class, not a rule
     here. */
  .funnel { display: flex; flex-direction: column; gap: var(--size-1); }
  .funnel .step {
    display: grid;
    grid-template-columns: 120px 1fr 56px;
    gap: var(--size-3);
    align-items: center;
    font-size: var(--fs-xs);
  }
  .funnel .step .fn-label { color: var(--color-ink-muted); }
  .funnel .step .fn-track {
    background: var(--color-surface);
    height: 18px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  .funnel .step .fn-bar {
    height: 100%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--size-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: oklch(0% 0 0 / 0.78);
    letter-spacing: var(--tracking-mono);
  }
  .funnel .step .fn-pct {
    font-family: var(--font-mono);
    color: var(--color-ink-muted);
    font-size: var(--fs-micro);
    text-align: right;
    letter-spacing: var(--tracking-mono);
  }

  /* ---------- Charts — shared chart classes used by both admin and public surfaces ---------- */
  .article-chart {
    margin: 0 0 var(--size-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-1);
    background: var(--glass-subtle);
    padding: var(--size-4);
    overflow: hidden;
  }
  .article-chart__head { margin-bottom: var(--size-2); }
  .article-chart__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--color-ink); letter-spacing: var(--tracking-tight); }
  .article-chart__sub { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-ink-muted); letter-spacing: var(--tracking-mono); }
  .article-chart__legend { display: flex; flex-wrap: wrap; gap: var(--size-2) var(--size-4); margin: var(--size-2) 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-ink-muted); }
  .article-chart__caption { margin: var(--size-3) 0 0; font-size: var(--fs-xs); color: var(--color-ink-muted); line-height: var(--lh-body); }
  .article-chart__source { opacity: 0.8; }
  .article-chart__plot { width: 100%; aspect-ratio: 960 / 430; position: relative; }
  .admin-trend .article-chart__plot { aspect-ratio: auto; height: clamp(220px, 30vh, 340px); }
  .article-chart__svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .article-chart__grid { stroke: var(--color-border); stroke-width: 1; opacity: 0.45; }
  .article-chart__axis { stroke: var(--color-border); stroke-width: 1; }
  .acl-y, .acl-x { fill: var(--color-ink-muted); font-family: var(--font-mono); font-size: 11px; }
  .article-chart__data { margin-top: var(--size-3); }
  .article-chart__data summary { cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
  .article-chart__table-scroll { overflow-x: auto; }
  .article-chart__data table { width: 100%; border-collapse: collapse; margin-top: var(--size-2); font-size: var(--fs-xs); }
  .article-chart__data th, .article-chart__data td { text-align: left; padding: var(--size-1) var(--size-2); border-bottom: 1px solid var(--color-border); color: var(--color-ink-muted); }

  /* adminTrend — dual-series area+lines */
  .admin-trend__fill-top { stop-color: var(--color-accent); stop-opacity: 0.22; }
  .admin-trend__fill-bot { stop-color: var(--color-accent); stop-opacity: 0; }
  .admin-trend__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .admin-trend__line--primary { stroke: var(--color-accent); }
  .admin-trend__line--secondary { stroke: var(--c-tool); }
  .admin-trend__line--comparison { stroke: var(--color-ink-muted); stroke-width: 1.5; opacity: 0.65; }
  .admin-trend__key { display: inline-flex; align-items: center; gap: var(--size-1); }
  .admin-trend__key::before { content: ''; width: 12px; height: 3px; border-radius: 2px; background: currentColor; }
  .admin-trend__key--primary { color: var(--color-accent); }
  .admin-trend__key--secondary { color: var(--c-tool); }
  .admin-trend__key--comparison { color: var(--color-ink-muted); }
  .admin-trend__pt { fill: var(--color-accent); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
  .admin-trend__pt.is-active { opacity: 1; r: 4; }
  .admin-trend__readout {
    position: absolute;
    top: 0;
    left: calc(var(--_x, 0) * 100%);
    transform: translateX(-50%);
    pointer-events: none;
    background: var(--glass-strong);
    backdrop-filter: blur(var(--glass-blur-chip));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    padding: var(--size-1) var(--size-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--color-ink);
    white-space: nowrap;
    box-shadow: var(--shadow-2);
  }
  .admin-trend__readout[hidden] { display: none; }

  /* barChart — labelled horizontal bars */
  .article-chart--bars .article-chart__bars { display: flex; flex-direction: column; gap: var(--size-2); }
  .acb-row { display: grid; grid-template-columns: minmax(5rem, 8rem) 1fr auto; align-items: center; gap: var(--size-3); font-size: var(--fs-sm); }
  .acb-label { color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acb-track { display: block; height: 10px; background: var(--color-surface); border-radius: var(--radius-2); overflow: hidden; }
  .acb-track svg { width: 100%; height: 100%; display: block; }
  .acb-fs--accent { fill: var(--color-accent); }
  .acb-fs--danger { fill: var(--color-danger); }
  .acb-fs--muted { fill: var(--color-ink-muted); }
  .acb-val { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-ink); font-variant-numeric: tabular-nums; }
  .acb-val--accent { color: var(--color-accent); }
  .acb-val--danger { color: var(--color-danger); }
  .acb-val--muted { color: var(--color-ink-muted); }

  /* donutChart — a normalized stroke-dasharray ring + legend */
  .acp-wrap { display: flex; align-items: center; gap: var(--size-5); flex-wrap: wrap; }
  .acp-plot { position: relative; width: 128px; height: 128px; flex: none; }
  .acp-svg { width: 100%; height: 100%; display: block; }
  .acp-track { stroke: var(--color-border); opacity: 0.4; }
  .acp-seg--accent { stroke: var(--color-accent); }
  .acp-seg--danger { stroke: var(--color-danger); }
  .acp-seg--muted { stroke: var(--color-ink-muted); }
  .acp-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .acp-center-num { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--color-ink); line-height: 1; }
  .acp-center-sub { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-ink-muted); }
  .acp-legend { display: flex; flex-direction: column; gap: var(--size-1); margin: 0; padding: 0; list-style: none; }
  .acp-key { display: flex; align-items: center; gap: var(--size-2); font-size: var(--fs-sm); }
  .acp-key::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: currentColor; flex: none; }
  .acp-key--accent { color: var(--color-accent); }
  .acp-key--danger { color: var(--color-danger); }
  .acp-key--muted { color: var(--color-ink-muted); }
  .acp-key-label { color: var(--color-ink); }
  .acp-key-val { margin-left: auto; font-family: var(--font-mono); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }

  /* sparkline — the inline KPI-tile trend */
  .ac-spark { width: 100%; height: 32px; display: block; overflow: visible; }
  .ac-spark__line { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
  .ac-spark__area { fill: color-mix(in oklch, var(--color-accent) 12%, transparent); stroke: none; }
}

/* ============================================================
   DESIGN CORE — UTILITIES
   The @layer order (`base, layout, components, utility`) is declared ONCE, as `LAYER_ORDER` in
   index.ts, and prepended ahead of everything else in `readDesignCss()`'s concatenated output — NOT
   here. It must be the first `@layer`-related at-rule in that output, since CSS fixes layer order at
   first mention; declaring it here (last file concatenated) would let components.css's earlier
   `@layer layout {…}`/`@layer components {…}` blocks register the order first instead. `utility`
   always wins a specificity tie against layout/components, so a utility class placed on a component
   element genuinely overrides it. `base` is reserved for a future html/body reset; nothing in P0 uses
   it yet.

   Below: CSP-safe, class-based, data-driven geometry. The CSP is `style-src 'self'` with no
   `'unsafe-inline'` (http.ts), so a bar/track fill CANNOT be an inline `style="width:NN%"` — the admin
   picks the nearest `.fill-N` class server-side from the datum instead. `.progress > .bar` and
   `.funnel .fn-bar` (components.css) declare no width of their own; one of these classes supplies it.
   Same idea for the heatmap: `.hm-cell.l1`..`.l4` are the four discrete intensity steps chosen
   server-side from a per-cell value, tinting the accent slot rather than baking in mint.
   ============================================================ */
@layer utility {
  .fill-0 { width: 0%; }
  .fill-1 { width: 1%; }
  .fill-2 { width: 2%; }
  .fill-3 { width: 3%; }
  .fill-4 { width: 4%; }
  .fill-5 { width: 5%; }
  .fill-6 { width: 6%; }
  .fill-7 { width: 7%; }
  .fill-8 { width: 8%; }
  .fill-9 { width: 9%; }
  .fill-10 { width: 10%; }
  .fill-11 { width: 11%; }
  .fill-12 { width: 12%; }
  .fill-13 { width: 13%; }
  .fill-14 { width: 14%; }
  .fill-15 { width: 15%; }
  .fill-16 { width: 16%; }
  .fill-17 { width: 17%; }
  .fill-18 { width: 18%; }
  .fill-19 { width: 19%; }
  .fill-20 { width: 20%; }
  .fill-21 { width: 21%; }
  .fill-22 { width: 22%; }
  .fill-23 { width: 23%; }
  .fill-24 { width: 24%; }
  .fill-25 { width: 25%; }
  .fill-26 { width: 26%; }
  .fill-27 { width: 27%; }
  .fill-28 { width: 28%; }
  .fill-29 { width: 29%; }
  .fill-30 { width: 30%; }
  .fill-31 { width: 31%; }
  .fill-32 { width: 32%; }
  .fill-33 { width: 33%; }
  .fill-34 { width: 34%; }
  .fill-35 { width: 35%; }
  .fill-36 { width: 36%; }
  .fill-37 { width: 37%; }
  .fill-38 { width: 38%; }
  .fill-39 { width: 39%; }
  .fill-40 { width: 40%; }
  .fill-41 { width: 41%; }
  .fill-42 { width: 42%; }
  .fill-43 { width: 43%; }
  .fill-44 { width: 44%; }
  .fill-45 { width: 45%; }
  .fill-46 { width: 46%; }
  .fill-47 { width: 47%; }
  .fill-48 { width: 48%; }
  .fill-49 { width: 49%; }
  .fill-50 { width: 50%; }
  .fill-51 { width: 51%; }
  .fill-52 { width: 52%; }
  .fill-53 { width: 53%; }
  .fill-54 { width: 54%; }
  .fill-55 { width: 55%; }
  .fill-56 { width: 56%; }
  .fill-57 { width: 57%; }
  .fill-58 { width: 58%; }
  .fill-59 { width: 59%; }
  .fill-60 { width: 60%; }
  .fill-61 { width: 61%; }
  .fill-62 { width: 62%; }
  .fill-63 { width: 63%; }
  .fill-64 { width: 64%; }
  .fill-65 { width: 65%; }
  .fill-66 { width: 66%; }
  .fill-67 { width: 67%; }
  .fill-68 { width: 68%; }
  .fill-69 { width: 69%; }
  .fill-70 { width: 70%; }
  .fill-71 { width: 71%; }
  .fill-72 { width: 72%; }
  .fill-73 { width: 73%; }
  .fill-74 { width: 74%; }
  .fill-75 { width: 75%; }
  .fill-76 { width: 76%; }
  .fill-77 { width: 77%; }
  .fill-78 { width: 78%; }
  .fill-79 { width: 79%; }
  .fill-80 { width: 80%; }
  .fill-81 { width: 81%; }
  .fill-82 { width: 82%; }
  .fill-83 { width: 83%; }
  .fill-84 { width: 84%; }
  .fill-85 { width: 85%; }
  .fill-86 { width: 86%; }
  .fill-87 { width: 87%; }
  .fill-88 { width: 88%; }
  .fill-89 { width: 89%; }
  .fill-90 { width: 90%; }
  .fill-91 { width: 91%; }
  .fill-92 { width: 92%; }
  .fill-93 { width: 93%; }
  .fill-94 { width: 94%; }
  .fill-95 { width: 95%; }
  .fill-96 { width: 96%; }
  .fill-97 { width: 97%; }
  .fill-98 { width: 98%; }
  .fill-99 { width: 99%; }
  .fill-100 { width: 100%; }

  /* Heatmap intensity — four discrete steps, increasing accent-tint alpha (crucix components.css
     :2236-2239 ported values: .12/.28/.5/.8). */
  .hm-cell.l1 { background: color-mix(in oklch, var(--color-accent) 12%, transparent); }
  .hm-cell.l2 { background: color-mix(in oklch, var(--color-accent) 28%, transparent); }
  .hm-cell.l3 { background: color-mix(in oklch, var(--color-accent) 50%, transparent); }
  .hm-cell.l4 { background: color-mix(in oklch, var(--color-accent) 80%, transparent); }
}

/* ============================================================
   SKIN — colorgears
   Clean SaaS identity — electric indigo accent on a deep-slate base.
   Professional, high-contrast, engineering-grade.
   ============================================================ */
:root {
  --color-surface: oklch(16% 0.015 265);
  --color-surface-raised: oklch(20% 0.015 265);
  --color-ink: oklch(95% 0.01 265);
  --color-ink-muted: oklch(78% 0.01 265);
  --color-border: oklch(70% 0.14 265 / 0.12);
  --color-border-hover: oklch(70% 0.14 265 / 0.3);
  --color-accent: oklch(72% 0.18 265);
  --color-accent-ink: oklch(13% 0.015 265);
  --color-link: oklch(72% 0.18 265);
  --color-danger: oklch(70% 0.2 25);
  --color-success: oklch(80% 0.17 155);
  --color-warning: oklch(82% 0.14 85);
  --color-info: oklch(78% 0.12 220);

  --color-base: var(--color-accent-ink);
  --color-elevated: var(--color-surface-raised);
  --color-text-1: var(--color-ink);
  --color-text-2: var(--color-ink-muted);
  --color-text-3: oklch(55% 0.02 265);
  --color-text-mute: oklch(42% 0.02 265);
  --color-accent-dim: oklch(60% 0.12 265);
  --color-accent2: var(--color-info);
  --color-border-accent: oklch(70% 0.14 265 / 0.2);
  --color-border-strong: oklch(70% 0.14 265 / 0.45);
  --font-display: system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', monospace;

  --admin-canvas: var(--color-base);
  --admin-ambient:
    radial-gradient(1200px 600px at 20% -10%, oklch(72% 0.18 265 / 0.05), transparent 60%),
    radial-gradient(900px 500px at 85% -5%, oklch(78% 0.12 220 / 0.04), transparent 60%);
  color-scheme: dark;
}

/* colorgears.com public layer — site chrome, layout, typography */

/* ── Skip link (a11y) ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-accent, #6b7bf5);
  color: var(--color-accent-ink, #1a1d2e);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
}

/* ── Homepage hero + features ── */
.hero {
  text-align: center;
  padding: 3rem 0 2rem;
}
.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.hero-sub {
  font-size: 1.25rem;
  color: var(--color-ink-muted, #b0b8c8);
  max-width: 540px;
  margin: 0 auto 2rem;
  line-height: 1.5;
}
.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn-primary {
  background: var(--color-accent, #6b7bf5);
  color: var(--color-accent-ink, #1a1d2e);
}
.btn-ghost {
  border: 1px solid var(--color-border-hover, rgba(255,255,255,0.2));
  color: var(--color-ink, #e8ecf0);
}

.features { padding: 2rem 0; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.feature {
  padding: 1.25rem;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 8px;
}
.feature h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
}
.feature p {
  font-size: 0.875rem;
  color: var(--color-ink-muted, #b0b8c8);
  line-height: 1.5;
}

.section-heading {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--color-ink-muted, #b0b8c8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
}

.index-desc {
  color: var(--color-ink-muted, #b0b8c8);
  margin-bottom: 2rem;
}

.cta-strip { padding: 2rem 0 1rem; }
.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.cta-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-ink, #e8ecf0);
  transition: border-color 0.15s;
}
.cta-card:hover { border-color: var(--color-accent, #6b7bf5); }
.cta-card strong { font-size: 1rem; }
.cta-card span { font-size: 0.8125rem; color: var(--color-ink-muted, #b0b8c8); }

.comments-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.comments-section h2 { font-size: 1.125rem; font-weight: 600; }

.not-found-links { margin-top: 2rem; }
.not-found-links h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.not-found-links ul { list-style: none; padding: 0; }
.not-found-links li { margin-bottom: 0.5rem; }
.not-found-links a { color: var(--color-accent, #6b7bf5); text-decoration: none; font-weight: 500; }
.not-found-links a:hover { text-decoration: underline; }

.pages-list {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding: 1.5rem 0;
}
.page-link {
  color: var(--color-accent, #6b7bf5);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}
.page-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .hero-title { font-size: 1.75rem; }
  .hero-sub { font-size: 1rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .page-main { padding: 1.5rem 1rem 3rem; }
  .site-header { padding: 0.75rem 1rem; }
  .site-footer { padding: 1rem; flex-direction: column; gap: 0.5rem; }
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.site-brand {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-accent, #6b7bf5);
  text-decoration: none;
}
.site-nav {
  display: flex;
  gap: 1.5rem;
}
.site-nav a {
  color: var(--color-ink-muted, #b0b8c8);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-accent, #6b7bf5);
}

.page-main {
  max-width: 740px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}
.page-main h1 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.page-main .lead {
  font-size: 1.125rem;
  color: var(--color-ink-muted, #b0b8c8);
  margin-bottom: 2rem;
}
.page-main .published {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-ink-muted, #b0b8c8);
  margin-bottom: 1.5rem;
}

.body h2 { font-size: 1.375rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.5rem; }
.body h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.body p { line-height: 1.7; margin-bottom: 1rem; }
.body ul, .body ol { line-height: 1.7; margin-bottom: 1rem; padding-left: 1.5rem; }
.body li { margin-bottom: 0.35rem; }
.body strong { font-weight: 600; }
.body a { color: var(--color-accent, #6b7bf5); text-decoration: underline; text-underline-offset: 2px; }
.body code {
  font-family: var(--font-mono, ui-monospace, 'Cascadia Code', monospace);
  font-size: 0.875em;
  background: rgba(255,255,255,0.06);
  padding: 0.15em 0.35em;
  border-radius: 3px;
}
.body pre {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 6px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.body pre code {
  background: none;
  padding: 0;
  font-size: 0.8125rem;
}
.body hr {
  border: none;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
  margin: 2rem 0;
}
.body blockquote {
  border-left: 3px solid var(--color-accent, #6b7bf5);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 1.5rem 0;
  color: var(--color-ink-muted, #b0b8c8);
  font-style: italic;
}
.body blockquote p { margin-bottom: 0.5rem; }
.body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}
.body th, .body td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  text-align: left;
}
.body th {
  font-weight: 600;
  background: rgba(255,255,255,0.03);
}
.body strong { color: var(--color-ink, #e8ecf0); }

.breadcrumb {
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
}
.breadcrumb a {
  color: var(--color-ink-muted, #b0b8c8);
  text-decoration: none;
}

.entry-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.entry-card {
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.entry-card h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.entry-card h2 a {
  color: var(--color-ink, #e8ecf0);
  text-decoration: none;
}
.entry-card h2 a:hover {
  color: var(--color-accent, #6b7bf5);
}
.entry-card time {
  font-size: 0.8125rem;
  color: var(--color-ink-muted, #b0b8c8);
}
.entry-card p {
  margin-top: 0.5rem;
  color: var(--color-ink-muted, #b0b8c8);
  line-height: 1.6;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
}
.post-nav-link {
  color: var(--color-accent, #6b7bf5);
  text-decoration: none;
  font-size: 0.875rem;
  max-width: 45%;
}
.post-nav-link:hover { text-decoration: underline; }
.post-nav-link.older { text-align: right; margin-left: auto; }

.children ul {
  list-style: none;
  padding: 0;
}
.children li { margin-bottom: 0.5rem; }
.children a { color: var(--color-accent, #6b7bf5); }
.children .desc { color: var(--color-ink-muted, #b0b8c8); font-size: 0.875rem; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  font-size: 0.875rem;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--color-border, rgba(255,255,255,0.08));
  font-size: 0.8125rem;
  color: var(--color-ink-muted, #b0b8c8);
}
.site-footer nav {
  display: flex;
  gap: 1rem;
}
.site-footer a {
  color: var(--color-ink-muted, #b0b8c8);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--color-accent, #6b7bf5);
}

.empty {
  color: var(--color-ink-muted, #b0b8c8);
}

/* ── Print ── */
@media print {
  .site-header, .site-footer, .skip-link, .post-nav, .hero-cta, .cta-strip { display: none; }
  .page-main { max-width: none; padding: 0; }
  .body a { color: inherit; }
  .body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #666; }
  .body code { background: #f0f0f0; color: #333; }
  .body pre { border-color: #ccc; }
}

/* sites/colorgears.com/public/styles/colorgears-instruments.css
 *
 * CSS for the Web Insights instrument (instruments/web-insights) mounted on colorgears.com at
 * `/free-seo-tools/web-insights/` (Task 8 — moved here from veritart.me/check; Task 9 renamed the
 * dir `check` -> `web-insights` and the slug `insights` -> `free-seo-tools/web-insights`). These
 * rules use only the engine's shared design tokens (--color-*, --size-*, --radius-*, --fs-*,
 * --font-mono, --tracking-caps), which are part of the design foundation shared across all skins
 * (readDesignCss()), so the same rules that worked on veritart's skin work unmodified on colorgears'.
 *
 * `.instrument-form*` (below) is the SHARED form-rendering CSS every `instrumentRoutes`-mounted
 * instrument depends on (packages/engine/src/instruments/routes.ts emits these classes). It used to
 * live only in veritart-public.css (posture's stylesheet); Task 9 removed posture (and its mount),
 * so this is now the sole surviving copy — required here since colorgears is the only site left
 * mounting an instrument.
 */

@layer components {

/* `.page-main` (colorgears-public.css) caps content at ~46rem — too narrow for the check-dashboard's
 * 2-col grid (`@media (min-width: 768px)`, below) to ever activate: the container itself is already
 * narrower than the breakpoint that's supposed to widen it. `insightsLayout` (site.ts) opts the
 * instrument's `<main>` into this wider modifier instead of overriding `.page-main` globally. */
.page-main--wide { max-width: 72rem; }

.instrument-form__intro { color: var(--color-text-2); font-size: var(--fs-sm); margin: 0 0 var(--size-2); max-width: 40rem; }
.instrument-form { display: flex; flex-direction: column; gap: var(--size-4); max-width: 40rem; margin: var(--size-6) 0; }
.instrument-form__field { display: flex; flex-direction: column; gap: var(--size-1); font-size: var(--fs-sm); color: var(--color-text-2); }
.instrument-form__field input { background: var(--color-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-2); color: var(--color-text-1); padding: var(--size-3) var(--size-4); font-size: var(--fs-base); font-family: inherit; }
.instrument-form__field input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.instrument-form button[type="submit"] { align-self: flex-start; background: var(--color-accent); color: var(--color-accent-ink); border: 0; border-radius: var(--radius-2); padding: var(--size-3) var(--size-6); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.instrument-form button[type="submit"]:hover { background: var(--color-accent-dim); }

.check-results { display: block; margin: var(--size-6) 0; }

.check-banner { display: flex; align-items: baseline; gap: var(--size-3); padding: var(--size-4) var(--size-5); border-radius: var(--radius-2); margin: 0 0 var(--size-5); font-size: var(--fs-sm); }
.check-banner--incomplete { background: color-mix(in oklch, var(--color-warning) 12%, transparent); border: 1px solid color-mix(in oklch, var(--color-warning) 35%, transparent); color: var(--color-text-1); }
.check-banner--grade { background: color-mix(in oklch, var(--color-accent) 10%, transparent); border: 1px solid color-mix(in oklch, var(--color-accent) 35%, transparent); }
.check-banner__label { color: var(--color-text-3); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-micro); margin-right: var(--size-2); }
.check-banner__value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 700; color: var(--color-text-1); }
.check-banner--grade[data-grade="A"] .check-banner__value,
.check-banner--grade[data-grade="B"] .check-banner__value { color: var(--color-success); }
.check-banner--grade[data-grade="C"] .check-banner__value { color: var(--color-warning); }
.check-banner--grade[data-grade="D"] .check-banner__value,
.check-banner--grade[data-grade="F"] .check-banner__value { color: var(--color-danger); }

.check-redirect-notice { font-size: var(--fs-xs); color: var(--color-text-2); background: var(--color-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-1); padding: var(--size-3) var(--size-4); margin: 0 0 var(--size-5); }

/* 768px breakpoint is well inside `.page-main--wide`'s 72rem (1152px) container, so the 2-col grid
 * has room to breathe once it activates (verified: at 72rem, 2 columns are ~552px each). */
.check-dashboard { display: grid; grid-template-columns: 1fr; gap: var(--size-5); }
@media (min-width: 768px) { .check-dashboard { grid-template-columns: 1fr 1fr; } }

.check-section { background: var(--color-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-2); padding: var(--size-4) var(--size-5); }
.check-section h2 { font-size: var(--fs-lg); margin: 0 0 var(--size-3); }
.check-section__incomplete { color: var(--color-warning); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.check-section__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--size-2); }

.check-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--size-1) var(--size-3); padding: var(--size-2) var(--size-3); border-radius: var(--radius-1); font-size: var(--fs-sm); }
.check-item__symbol { font-family: var(--font-mono); width: 1.25em; flex-shrink: 0; }
.check-item__label { font-weight: 600; color: var(--color-text-1); min-width: 8rem; }
.check-item__status { text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); color: var(--color-text-3); }
.check-item__detail { color: var(--color-text-2); flex: 1 1 100%; word-break: break-word; }
.check-item--pass .check-item__symbol { color: var(--color-success); }
.check-item--warn .check-item__symbol { color: var(--color-warning); }
.check-item--fail .check-item__symbol { color: var(--color-danger); }
.check-item--info .check-item__symbol,
.check-item--unknown .check-item__symbol { color: var(--color-info); }

}