/* ============================================================================
   lab.xobb.org — shared design system
   ----------------------------------------------------------------------------
   SINGLE SOURCE OF VISUAL TRUTH. Every page and every module (E8, board export,
   methodology, future Radar / Tabletop / Vendor) MUST use the custom properties
   defined on :root below. Do NOT invent new colours, spacing, type sizes, radii
   or shadows in module CSS — compose from these tokens so the whole hub reads as
   one calm, document-like "briefing instrument".

   Aesthetic: a well-typeset government/board briefing crossed with an instrument
   panel. Near-black ink on warm paper, one confident accent (deep slate-teal),
   hairline rules, generous space, real type hierarchy. No gradients, no glass,
   no emoji, no centred hero blob.

   The palette deliberately matches ai-study's deck theme (decks/_theme/xobb.css)
   so live tools and exported board decks share one visual language.

   TOKEN INDEX (names other modules must use verbatim)
   ----------------------------------------------------------------------------
   COLOUR — ink / paper
     --ink            near-black primary text / strong rules
     --ink-soft       secondary text, de-emphasised headings
     --ink-mute       captions, metadata, table headers
     --ink-faint      disabled / placeholder
     --rule           hairline borders (1px dividers)
     --rule-strong    1.5px emphasis rule (table header underline)
     --paper          page background (warm off-white)
     --paper-card     raised surface / card background (white)
     --paper-sunk     inset / code / well background
     --paper-header   site header background (slightly tinted paper)

   COLOUR — accent (the ONE confident accent)
     --accent         deep slate-teal, primary accent (links, key numbers)
     --accent-strong  darker accent for hover / pressed
     --accent-soft    muted desaturated companion (cover subtitles, soft fills)
     --accent-tint    very light accent wash for backgrounds / selected rows
     --on-accent      text colour to use ON an --accent fill (paper)

   COLOUR — maturity ramp (SEQUENTIAL single-hue, NOT traffic light)
     A 4-step muted->saturated ramp on the accent hue for ML0..ML3. Lightness
     decreases as level rises (higher = darker/more saturated = "more present").
     NEVER rely on colour alone: always pair with the ML label and the
     .maturity-pip shape count. Foreground tokens give AA-contrast text/ink to
     place on each step.
     --ml0 / --ml0-ink   not yet at Level 1   (lightest / faint)
     --ml1 / --ml1-ink   Maturity Level 1
     --ml2 / --ml2-ink   Maturity Level 2
     --ml3 / --ml3-ink   Maturity Level 3      (deepest / most saturated)

   COLOUR — semantic status (with non-colour pairing required)
     --status-ok      / --status-ok-tint      met / strong / implemented
     --status-warn    / --status-warn-tint    partial / attention
     --status-risk    / --status-risk-tint    gap / not implemented / alert
     --status-info    / --status-info-tint    neutral note
     (signal = --status-risk; matches deck theme --signal #b04a3a)

   SPACING SCALE (4px base; use for margin/padding/gap)
     --space-0 0  --space-1 4px  --space-2 8px  --space-3 12px
     --space-4 16px --space-5 24px --space-6 32px --space-7 48px
     --space-8 64px --space-9 96px

   TYPE SCALE (modular, ~1.2; fluid where it helps)
     --text-xs  --text-sm  --text-base  --text-md  --text-lg
     --text-xl  --text-2xl --text-3xl   --text-4xl  --text-5xl
     plus --leading-tight / --leading-snug / --leading-normal
     and  --tracking-tight / --tracking-wide / --tracking-caps

   FONT FAMILIES
     --font-display   Schibsted Grotesk  (headings / UI — the "briefing" voice)
     --font-serif     Source Serif 4     (long-form prose / lede)
     --font-body      Source Sans 3      (UI body / forms / tables)
     --font-mono      JetBrains Mono     (data, IDs, control codes, metrics)

   RADII / SHADOW / RULE / LAYOUT
     --radius-xs 2px  --radius-sm 4px  --radius-md 6px  --radius-lg 10px  --radius-pill 999px
     --shadow-1 (resting card)  --shadow-2 (raised)  --shadow-focus (focus ring)
     --rule-width 1px  --hairline (1px solid --rule shorthand value)
     --measure 68ch (prose max width)
     --container 1080px (page max width)  --container-wide 1280px
     --header-h 60px

   MOTION
     --ease-out / --ease-in-out / --dur-fast / --dur-base
     (all motion is wrapped in prefers-reduced-motion guards)
   ============================================================================ */

/* Web fonts: one request, display=swap, restricted weights to stay fast.
   Mirrors the deck theme's families so web + decks match. */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* --- colour: ink / paper --- */
  --ink:           #0e1116;
  --ink-soft:      #2b2f36;
  --ink-mute:      #5a6470;
  --ink-faint:     #98a0aa;
  --rule:          #dcdcd6;
  --rule-strong:   #0e1116;
  --paper:         #f7f5f0;
  --paper-card:    #ffffff;
  --paper-sunk:    #efece4;
  --paper-header:  #fbfaf6;

  /* --- colour: the one accent (deep slate-teal) --- */
  --accent:        #284b63;
  --accent-strong: #1c394c;
  --accent-soft:   #84a59d;
  --accent-tint:   #e7edf0;
  --on-accent:     #f7f5f0;

  /* --- maturity ramp: sequential single-hue, muted -> saturated ---
     Built on the accent slate-teal hue. Lighter = lower presence, darker =
     higher. Each step's *-ink token is an AA-contrast foreground for that fill.
     ML0 is a neutral grey-blue (deliberately reads as "absent", not a colour
     judgement); ML1..ML3 march toward the deep accent. */
  --ml0:           #d7dbdd;  --ml0-ink: #3a4148;
  --ml1:           #9db5bd;  --ml1-ink: #16242c;
  --ml2:           #4f7e8e;  --ml2-ink: #ffffff;
  --ml3:           #1f4b5b;  --ml3-ink: #ffffff;
  /* track colour behind maturity bars/pips */
  --ml-track:      #e7e4dc;

  /* --- semantic status (always pair with a label/icon, never colour alone) --- */
  --status-ok:        #2f6b4f;  --status-ok-tint:   #e2efe7;
  --status-warn:      #8a6418;  --status-warn-tint: #f4ecd9;
  --status-risk:      #b04a3a;  --status-risk-tint: #f6e3df;
  --status-info:      #284b63;  --status-info-tint: #e7edf0;

  /* --- 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 */

  /* --- type scale (modular ~1.2; a couple of fluid clamps for headings) --- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 — UI body */
  --text-md:   1.0625rem; /* 17 — prose body */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.5vw, 2.125rem);  /* 28–34 */
  --text-3xl:  clamp(2.125rem, 1.6rem + 2.4vw, 2.75rem);  /* 34–44 */
  --text-4xl:  clamp(2.75rem, 2rem + 3.4vw, 3.75rem);     /* 44–60 */
  --text-5xl:  clamp(3.25rem, 2.2rem + 5vw, 5rem);        /* 52–80 */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.08em;

  /* --- font families --- */
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* --- radii --- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* --- shadows (low, document-like — no neon glow) --- */
  --shadow-1: 0 1px 2px rgba(14, 17, 22, 0.05), 0 1px 1px rgba(14, 17, 22, 0.04);
  --shadow-2: 0 2px 6px rgba(14, 17, 22, 0.07), 0 6px 18px rgba(14, 17, 22, 0.06);
  --shadow-focus: 0 0 0 3px rgba(40, 75, 99, 0.35);

  /* --- rules / layout --- */
  --rule-width: 1px;
  --hairline: 1px solid var(--rule);
  --measure: 68ch;
  --container: 1080px;
  --container-wide: 1280px;
  --header-h: 60px;

  /* --- motion --- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg, video, canvas { display: block; max-width: 100%; }
svg { height: auto; }

/* Hairline texture: a faint top keyline so the page reads as a "document sheet" */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  z-index: 100;
}

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); letter-spacing: 0; }

/* Eyebrow / kicker — the small uppercase label above a heading.
   The hallmark of the briefing voice. */
.eyebrow,
.kicker {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}

/* Section label — like .kicker but muted, used over data blocks */
.label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-mute);
}

p { line-height: var(--leading-normal); }

/* Lede / standfirst — set in the serif for the document feel */
.lede {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.prose {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: 1.6;
  max-width: var(--measure);
  color: var(--ink-soft);
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2, .prose h3 { font-family: var(--font-display); color: var(--ink); margin-top: var(--space-6); }
.prose strong { color: var(--ink); font-weight: 600; }

.muted { color: var(--ink-mute); }
.mono  { font-family: var(--font-mono); font-feature-settings: "tnum"; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-strong); }

small { font-size: var(--text-sm); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.875em;
}
:not(pre) > code {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
  color: var(--ink-soft);
}
pre {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.5;
}
pre code { background: none; border: none; padding: 0; color: inherit; }

hr {
  border: none;
  border-top: var(--hairline);
  margin: var(--space-6) 0;
}

/* ---------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container--wide { max-width: var(--container-wide); }
.container--prose { max-width: 760px; }

/* main grows so footer pins to bottom on short pages */
main { flex: 1 0 auto; }

.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.grid { display: grid; gap: var(--space-5); }
.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* A hairline-ruled section header: kicker + title + optional meta */
.section-head {
  border-top: 2px solid var(--ink);
  padding-top: var(--space-3);
  margin-bottom: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.section-head .label,
.section-head .kicker { flex: 0 0 auto; }

/* visually hidden but accessible */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* skip link for keyboard users */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }

/* ---------------------------------------------------------------------------
   5. SITE HEADER  (rendered by assets/lab.js renderHeader)
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper-header) 92%, transparent);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: var(--hairline);
}
.site-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 0 var(--space-5);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Wordmark: monospace control-code feel + serifed name */
.site-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.site-brand__mark {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  text-transform: uppercase;
}
.site-brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
}
.site-brand:hover .site-brand__name { color: var(--accent); }

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.site-nav a {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { background: var(--accent-tint); color: var(--accent); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--accent-tint);
}
/* disabled "soon" items: not links, clearly marked, with a chip */
.site-nav__soon {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--ink-faint);
  padding: var(--space-2) var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: default;
}

@media (max-width: 720px) {
  .site-header__inner { gap: var(--space-3); }
  .site-nav { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-nav a, .site-nav__soon { padding-inline: var(--space-2); }
  .site-nav__soon .chip { display: none; }
}

/* ---------------------------------------------------------------------------
   6. SITE FOOTER  (rendered by assets/lab.js renderFooter)
   --------------------------------------------------------------------------- */
.site-footer {
  flex-shrink: 0;
  margin-top: var(--space-9);
  border-top: var(--hairline);
  background: var(--paper-header);
}
.site-footer__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: start;
}
.site-footer__brand .site-brand { margin-bottom: var(--space-3); }
.site-footer__col h2 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-mute);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.site-footer__col ul { list-style: none; padding: 0; }
.site-footer__col li + li { margin-top: var(--space-2); }
.site-footer__col a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: var(--text-base);
}
.site-footer__col a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__fine {
  grid-column: 1 / -1;
  border-top: var(--hairline);
  padding-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-mute);
  line-height: 1.5;
  max-width: var(--measure);
}
.site-footer__fine .mono { font-size: var(--text-xs); }

@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   7. BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--paper-card);
  --btn-fg: var(--ink);
  --btn-bd: var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { border-color: var(--ink-mute); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--accent);
}
.btn--primary:hover {
  --btn-bg: var(--accent-strong);
  --btn-bd: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-fg: var(--accent);
}
.btn--ghost:hover { --btn-bg: var(--accent-tint); border-color: transparent; }

.btn--sm { padding: 0.4rem 0.7rem; font-size: var(--text-sm); }
.btn--lg { padding: 0.75rem 1.4rem; font-size: var(--text-md); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* arrow affordance helper for link-buttons */
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(2px); }

/* ---------------------------------------------------------------------------
   8. CARDS
   --------------------------------------------------------------------------- */
.card {
  background: var(--paper-card);
  border: var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
}
.card--flush { padding: 0; overflow: hidden; }

/* Tool card (hub) — a clickable briefing tile with an accent keyline */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-card);
  border: var(--hairline);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.tool-card[href]:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
/* "in design" tiles read as quieter / not-yet-live */
.tool-card--soon {
  border-top-color: var(--ink-faint);
  background: var(--paper-header);
}
.tool-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.tool-card__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-mute);
  letter-spacing: var(--tracking-caps);
}
.tool-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: var(--space-1) 0 var(--space-2);
}
.tool-card__desc {
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: 1.5;
  flex: 1 1 auto;
}
.tool-card__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
}
.tool-card--soon .tool-card__foot { color: var(--ink-mute); }

/* ---------------------------------------------------------------------------
   9. BADGES / CHIPS / PILLS
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
/* status chips — colour PLUS a leading glyph so colour is never the sole cue */
.chip--live   { background: var(--status-ok-tint);   color: var(--status-ok);   border-color: color-mix(in srgb, var(--status-ok) 30%, transparent); }
.chip--soon   { background: var(--paper-sunk);        color: var(--ink-mute);    border-color: var(--rule); }
.chip--warn   { background: var(--status-warn-tint);  color: var(--status-warn); border-color: color-mix(in srgb, var(--status-warn) 35%, transparent); }
.chip--risk   { background: var(--status-risk-tint);  color: var(--status-risk); border-color: color-mix(in srgb, var(--status-risk) 35%, transparent); }
.chip--info   { background: var(--status-info-tint);  color: var(--status-info); border-color: color-mix(in srgb, var(--status-info) 30%, transparent); }
.chip--neutral{ background: var(--paper-sunk);        color: var(--ink-soft);    border-color: var(--rule); }

/* a tiny status dot/shape preceding chip text (shape varies = non-colour cue) */
.chip__dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.chip--soon .chip__dot { border-radius: 1px; background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

/* monospace data badge (IDs, control codes, versions) */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-mute);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xs);
  padding: 0.15em 0.45em;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   10. MATURITY TREATMENT  (ML0..ML3) — colour + label + shape, never colour alone
   --------------------------------------------------------------------------- */

/* Badge: a filled level token. data-ml="0|1|2|3" sets the fill + foreground. */
.ml-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 0.3em 0.6em 0.3em 0.4em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.ml-badge[data-ml="0"] { background: var(--ml0); color: var(--ml0-ink); }
.ml-badge[data-ml="1"] { background: var(--ml1); color: var(--ml1-ink); }
.ml-badge[data-ml="2"] { background: var(--ml2); color: var(--ml2-ink); }
.ml-badge[data-ml="3"] { background: var(--ml3); color: var(--ml3-ink); }

/* Pips: the non-colour cue — N filled squares of 3 communicate the level by
   COUNT and SHAPE, independent of hue. Use inside or beside an .ml-badge. */
.ml-pips { display: inline-flex; gap: 2px; }
.ml-pips .pip {
  width: 7px; height: 7px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.28;
}
.ml-pips .pip.is-on { opacity: 1; }

/* Horizontal maturity bar (for tables / the radar legend) */
.ml-bar {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ml-track);
  overflow: hidden;
}
.ml-bar__fill { height: 100%; border-radius: inherit; }
.ml-bar__fill[data-ml="0"] { background: var(--ml0); }
.ml-bar__fill[data-ml="1"] { background: var(--ml1); }
.ml-bar__fill[data-ml="2"] { background: var(--ml2); }
.ml-bar__fill[data-ml="3"] { background: var(--ml3); }

/* Maturity legend swatch row (used by E8 / radar) */
.ml-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ml-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ink-mute); }
.ml-legend__swatch { width: 14px; height: 14px; border-radius: var(--radius-xs); border: 1px solid rgba(14,17,22,0.08); }
.ml-legend__swatch[data-ml="0"] { background: var(--ml0); }
.ml-legend__swatch[data-ml="1"] { background: var(--ml1); }
.ml-legend__swatch[data-ml="2"] { background: var(--ml2); }
.ml-legend__swatch[data-ml="3"] { background: var(--ml3); }

/* ---------------------------------------------------------------------------
   11. TABLES — authoritative, data-dense, hairline-ruled
   --------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: var(--hairline); border-radius: var(--radius-md); background: var(--paper-card); }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
table.data th, table.data td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--hairline);
}
table.data thead th {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-mute);
  border-bottom: 1.5px solid var(--rule-strong);
  position: sticky;
  top: 0;
  background: var(--paper-card);
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--accent-tint); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); font-feature-settings: "tnum"; }
table.data caption { caption-side: top; text-align: left; padding-bottom: var(--space-3); color: var(--ink-mute); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   12. CALLOUTS / NOTES (privacy, disclaimer, info)
   --------------------------------------------------------------------------- */
.note {
  border: var(--hairline);
  border-left: 3px solid var(--accent);
  background: var(--paper-card);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  color: var(--ink-soft);
}
.note__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.note--privacy { border-left-color: var(--status-ok); }
.note--privacy .note__title { color: var(--status-ok); }
.note--warn { border-left-color: var(--status-warn); background: var(--status-warn-tint); }
.note--warn .note__title { color: var(--status-warn); }
.note--disclaimer { border-left-color: var(--ink-mute); background: var(--paper-sunk); }
.note--disclaimer .note__title { color: var(--ink-mute); }

/* ---------------------------------------------------------------------------
   13. FORMS  (shared base — modules layer specifics)
   --------------------------------------------------------------------------- */
label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-base); color: var(--ink-soft); }
input[type="text"], input[type="search"], input[type="email"], input[type="number"], select, textarea {
  font: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* ---------------------------------------------------------------------------
   14. FOCUS / ACCESSIBILITY
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* keep focus ring off when using box-shadow ring on form fields */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

::selection { background: rgba(40, 75, 99, 0.18); }

/* ---------------------------------------------------------------------------
   15. MOTION PREFERENCES
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   16. PRINT  (board-facing output should print cleanly)
   --------------------------------------------------------------------------- */
@media print {
  body { background: #fff; }
  body::before, .site-header, .site-footer, .skip-link { display: none !important; }
  .tool-card, .card { box-shadow: none; }
  a { color: var(--ink); text-decoration: underline; }
}