/* ============================================================================
   Storyline Kids — Design Tokens + Component Library
   ============================================================================
   Multi-anchor palette: Slate (brand), Terracotta (signal), Camel (accent),
   Saffron (data). Critical is deepest terracotta — whole warm spectrum is
   coherent.

   Dark mode is the default (in :root). [data-theme="dark"] block preserved
   for explicit activation when light mode is later built.

   Typography: Cabinet Grotesk (display) + General Sans (body) via Fontshare.

   This file is canonical. tokens.json / tokens.css are the source-of-truth;
   any change there propagates here, and from here cascades to every page CSS
   via legacy aliases.
   ============================================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=cabinet-grotesk@400,500,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   ANCHORS — four core colors with semantic roles
   ============================================================================ */

:root {

  /* Brand / data — Directoire Blue (Pantone 18-4244 TCX).
     The calm workhorse. Used for brand, links, neutral facts, above-target. */
  --color-brand:         #0061a3;
  --color-brand-hover:   #1f7cba;
  --color-brand-pressed: #004e87;

  /* Simply Green (Pantone 17-5641) — Trellus accent. The doubled "ll" of the
     wordmark (the trellis posts). Brand accent only, not a status color. */
  --color-simply:        #009b74;

  /* Signal / alert — Tangerine Tango (Pantone 17-1463 TCX).
     RESERVED for critical / bad / high-attention data ONLY.
     Never for labels, framing, or section headers. */
  --color-signal:         #dd4124;
  --color-signal-hover:   #c93820;
  --color-signal-pressed: #b8341d;

  /* Healthy — Simply Green (Pantone 17-5936 TCX).
     Sparingly — genuine positives only (rising, flourishing, target). */
  --color-healthy:        #009b74;
  --color-healthy-hover:  #00ae84;
  --color-healthy-pressed:#00805f;

  /* Accent — Micro Chip neutral grey (Pantone 14-4105 TCX).
     Replaces the deprecated Camel. Small-scale chrome, neutral indicators. */
  --color-accent: #babcc0;

  /* Data alias — points at brand (Directoire Blue) so any legacy "data" use
     becomes the calm workhorse blue per the new discipline. */
  --color-data: var(--color-brand);

  /* === SECONDARY — critical + neutrals === */

  /* Critical — destructive ONLY. Shares signal-pressed (Tangerine deep). */
  --color-critical:       #b8341d;
  --color-critical-hover: #9c2c18;

  /* Neutral grey — surface tone, dividers, soft / steady / watch states.
     (Old warm-grey tokens repointed to neutral so legacy callers don't break.) */
  --color-warm-grey:      #babcc0;   /* Micro Chip */
  --color-warm-grey-deep: #868c93;

  /* === FOREGROUND VARIANTS (lighter shades for use AS TEXT on dark) === */

  --color-brand-fg:    #5b9bd5;   /* lighter blue */
  --color-signal-fg:   #e76547;   /* lighter tangerine */
  --color-critical-fg: #e76547;   /* shares signal-fg */
  --color-healthy-fg:  #2ec196;   /* lighter green */
  --color-accent-fg:   #d8dde2;   /* cool light grey */
  --color-data-fg:     var(--color-brand-fg);

  /* === SURFACES (dark mode default) ===
     Cool neutral ramp. Page bg sits under Carbon cards. */

  --color-bg-page:     #191e24;   /* neutral-850 — page ground */
  --color-bg-elevated: #272f38;   /* Carbon — raised surfaces / cards */
  --color-bg-muted:    #2f3742;   /* neutral-700 — hairline rules inside surfaces */
  --color-border:      #39424d;   /* neutral-600 — container borders */
  --color-bg-sidebar:  #15191e;   /* neutral-900 — deepest, sidebar chrome */

  /* === TEXT on current surface ===
     Pantone Wispy Clouds + Micro Chip + Neutral-400. Cool / slightly cool. */

  --color-text-primary:   #f0efee;   /* Wispy Clouds — body, headings */
  --color-text-secondary: #babcc0;   /* Micro Chip — supporting text (workhorse) */
  --color-text-tertiary:  #868c93;   /* Neutral-400 — labels, metadata, baseline */
  --color-text-on-accent: #f0efee;   /* Wispy Clouds on filled accent backgrounds */

  /* === ENGAGEMENT TIER (6-step categorical for bar / breakdown viz) ===
     Healthy (green) → neutral → declining (tangerine). */

  --color-tier-1: #2ec196;                       /* lightest healthy green */
  --color-tier-2: var(--color-healthy);          /* #009b74 — Simply Green */
  --color-tier-3: var(--color-text-secondary);   /* #babcc0 — neutral mid */
  --color-tier-4: var(--color-text-tertiary);    /* #868c93 — neutral darker */
  --color-tier-5: var(--color-signal);           /* #dd4124 — Tangerine alert */
  --color-tier-6: var(--color-signal-pressed);   /* #b8341d — deepest, most declining */

  /* === HEATMAP INTENSITY (Directoire Blue at 6 opacity steps) === */

  --color-chart-1: rgba(0, 97, 163, 0.20);
  --color-chart-2: rgba(0, 97, 163, 0.35);
  --color-chart-3: rgba(0, 97, 163, 0.55);
  --color-chart-4: rgba(0, 97, 163, 0.75);
  --color-chart-5: rgba(0, 97, 163, 0.90);
  --color-chart-6: rgba(0, 97, 163, 1.00);

  /* === TYPOGRAPHY === */

  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;       /* editorial serif — headings */
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif; /* body */
  --font-numeric: 'General Sans', system-ui, -apple-system, sans-serif; /* big number values — stay sans for legibility */

  --text-xs:   11px;   /* eyebrows, micro-labels */
  --text-sm:   13px;   /* secondary body, table cells */
  --text-base: 14px;   /* body */
  --text-md:   16px;   /* emphasized body */
  --text-lg:   18px;   /* section subheads */
  --text-xl:   22px;   /* card titles */
  --text-2xl:  28px;   /* page subheads */
  --text-3xl:  36px;   /* big metric numbers */
  --text-4xl:  48px;   /* hero metrics */
  --text-5xl:  64px;   /* display */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-extra:   800;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.10em;

  /* === RADII === */

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-pill: 999px;

  /* === SPACING SCALE (px-named) === */

  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* === TRANSITIONS === */

  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;

  /* === GRADIENT UTILITY (brand ribbon, 90deg) ===
     Brand blue + healthy green with a neutral midpoint. Signal/red is
     excluded on purpose — red is reserved for alerts, never chrome. */

  --gradient-chart: linear-gradient(90deg,
    var(--color-brand)     0%,
    var(--color-warm-grey) 33%,
    var(--color-healthy)   66%,
    var(--color-data)      100%);

  /* ==========================================================================
     LEGACY ALIASES — keep pre-v2.4 token names working without rename sweep.
     Every old --space-N / --radius-X / --tier-N / --chart-N / --font-sans /
     etc. reference in page CSS resolves through these to the new tokens.
     ========================================================================== */

  /* Spacing (old 1-based numbering → same px values, new px-named tokens) */
  --space-1:  var(--space-4);    /* 4px  */
  --space-2:  var(--space-8);    /* 8px  */
  --space-3:  var(--space-12);   /* 12px */
  --space-5:  var(--space-20);   /* 20px */
  --space-6:  var(--space-24);   /* 24px */
  --space-10: var(--space-40);   /* 40px */

  /* Radii */
  --radius-sharp: var(--radius-none);
  --radius-soft:  var(--radius-sm);

  /* Tiers + charts (old un-prefixed names) */
  --tier-1: var(--color-tier-1);
  --tier-2: var(--color-tier-2);
  --tier-3: var(--color-tier-3);
  --tier-4: var(--color-tier-4);
  --tier-5: var(--color-tier-5);
  --tier-6: var(--color-tier-6);

  --chart-1: var(--color-chart-1);
  --chart-2: var(--color-chart-2);
  --chart-3: var(--color-chart-3);
  --chart-4: var(--color-chart-4);
  --chart-5: var(--color-chart-5);
  --chart-6: var(--color-chart-6);

  /* Typography */
  --font-sans: var(--font-body);
  --font-mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --leading-loose:    var(--leading-relaxed);
  --tracking-snug:    -0.01em;
  --tracking-widest:  0.12em;

  /* Color anchor aliases (very old --bg / --accent / --text / etc. patterns) */
  --bg:             var(--color-bg-page);
  --surface:        var(--color-bg-elevated);
  --surface2:       var(--color-bg-muted);
  --surface-alt:    var(--color-bg-muted);
  --border:         var(--color-border);
  --border-thin:    1px solid var(--color-border);
  --border-strong:  var(--color-brand-pressed);

  --text:           var(--color-text-primary);
  --text-dim:       var(--color-text-secondary);
  --text-muted:     var(--color-text-secondary);
  --text-faint:     var(--color-text-tertiary);
  --text-tertiary:  var(--color-text-tertiary);
  --text2:          var(--color-text-secondary);
  --text3:          var(--color-text-tertiary);

  --accent:         var(--color-brand-fg);
  --accent-hover:   var(--color-text-primary);
  --accent-deep:    var(--color-brand-pressed);
  --accent-muted:   var(--color-bg-muted);
  --accent-tint:    var(--color-warm-grey);
  --accent-warm:    var(--color-accent-fg);
  --accent-dim:     rgba(77, 89, 99, 0.18);

  --action:         var(--color-signal);
  --action-hover:   var(--color-signal-hover);
  --action-deep:    var(--color-signal-pressed);
  --action-tint:    var(--color-accent);

  --critical:       var(--color-critical);
  --critical-hover: var(--color-critical-hover);

  --error:          var(--color-critical-fg);   /* tangerine */
  --error-bg:       rgba(221, 65, 36, 0.15);
  --warning:        var(--color-signal-fg);     /* tangerine */
  --warning-bg:     rgba(221, 65, 36, 0.12);
  --success:        var(--color-healthy-fg);    /* green */
  --success-bg:     rgba(0, 155, 116, 0.15);
  --info:           var(--color-brand-fg);      /* blue */
  --info-bg:        rgba(0, 97, 163, 0.14);

  --green:          var(--color-healthy-fg);    /* now genuinely green */
  --green-bg:       rgba(0, 155, 116, 0.15);
  --red:            var(--color-critical-fg);
  --red-bg:         rgba(221, 65, 36, 0.15);
  --orange:         var(--color-signal-fg);     /* tangerine — same as red per discipline */
  --orange-bg:      rgba(221, 65, 36, 0.12);
  --yellow:         var(--color-text-tertiary); /* per discipline: soft attention = neutral text + colored dot */
  --yellow-bg:      rgba(134, 140, 147, 0.14);

  /* Categorical data-viz accents — extra hues a 4-color brand palette can't
     supply for multi-series charts (engagement bands, giving trends,
     discipleship environments). Defined canonically here so every page that
     loads design-system.css resolves them; previously only declared locally
     in render_household/pipeline/seasonality/team_dynamics.css, leaving these
     bars transparent (invisible against the track) on every other page. */
  --cyan:           #22d3ee;
  --cyan-dim:       rgba(34, 211, 238, 0.14);
  --purple:         #a78bfa;
  --purple-dim:     rgba(167, 139, 250, 0.14);
  --accent2:        var(--color-brand-fg);   /* 4th categorical hue */

  /* ============================================================================
     TIER 2 SEMANTIC (new spec — components should consume these going forward)
     ============================================================================ */

  --accent-data:    var(--color-brand);      /* Directoire Blue — primary / brand / neutral facts */
  --accent-healthy: var(--color-healthy);    /* Simply Green — positives, sparingly */
  --accent-alert:   var(--color-signal);     /* Tangerine — CRITICAL ONLY */
  --on-accent:      var(--color-text-on-accent);

  /* ============================================================================
     TIER 3 APPLICATION (status framework per the discipline)
     ============================================================================ */

  --brand-mark:      var(--accent-data);
  --status-rising:   var(--accent-healthy);    /* colored text + dot */
  --status-steady:   var(--color-text-tertiary); /* NO color — baseline */
  --status-soft:     var(--accent-alert);       /* DOT ONLY; text stays neutral */
  --status-critical: var(--accent-alert);       /* colored text + dot */

  --chart-above-target: var(--accent-data);
  --chart-below-target: var(--accent-alert);
  --chart-target-line:  var(--accent-healthy);
  --chart-axis:         var(--color-border);
}

/* ============================================================================
   Dark mode — explicit activation (same as :root for now)
   ============================================================================ */

[data-theme="dark"] {
  --color-bg-page:     #191e24;
  --color-bg-elevated: #272f38;
  --color-bg-muted:    #2f3742;
  --color-border:      #39424d;

  --color-text-primary:   #f0efee;
  --color-text-secondary: #babcc0;
  --color-text-tertiary:  #868c93;
}

/* Light mode placeholder — surfaces + text colors when designed.
   Anchor / signal / accent / data colors stay constant. */

/* ============================================================================
   RESET
   ============================================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
img, svg { display: block; max-width: 100%; }
button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-brand); color: var(--color-text-on-accent); }

/* ============================================================================
   BASE TYPOGRAPHY
   ============================================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-xl); font-weight: var(--weight-medium); }
h4 { font-size: var(--text-md); font-weight: var(--weight-medium); }
h5 { font-size: var(--text-base); font-weight: var(--weight-medium); font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
h6 { font-size: var(--text-xs); font-weight: var(--weight-medium); font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-tertiary); }

p { line-height: var(--leading-normal); color: var(--color-text-secondary); }
p + p { margin-top: var(--space-16); }

strong { font-weight: var(--weight-medium); color: var(--color-text-primary); }
em { font-style: italic; }

ul, ol { padding-left: var(--space-24); }
li + li { margin-top: var(--space-8); }

a { color: var(--color-data-fg); transition: color var(--transition-fast); }
a:hover { color: var(--color-text-primary); }

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-32) 0; }

code, pre { font-family: var(--font-mono); font-size: 0.9em; color: var(--color-accent-fg); }

/* ============================================================================
   FORM ELEMENTS (base)
   ============================================================================ */

label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-base), background var(--transition-base);
}
input:hover, textarea:hover, select:hover { border-color: var(--color-brand-pressed); }
input:focus, textarea:focus, select:focus { border-color: var(--color-text-primary); background: var(--color-bg-page); }
textarea { line-height: var(--leading-normal); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-text-tertiary); }

/* ============================================================================
   BUTTON COMPONENT
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent-fg);
  background: var(--color-accent-fg);    /* light camel/tan */
  color: var(--color-bg-page);            /* dark ink — high contrast on light bg */
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}
.btn:hover { background: var(--color-accent); border-color: var(--color-accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--color-accent-fg); border-color: var(--color-accent-fg); }

/* High-emphasis variant (the previous default — terracotta CTA).
   Reserved for moments that genuinely warrant the loudest call. */
.btn--signal {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-text-on-accent);
}
.btn--signal:hover { background: var(--color-signal-hover); border-color: var(--color-signal-hover); }

.btn--brand {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-on-accent);
}
.btn--brand:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }

.btn--critical {
  background: var(--color-critical);
  border-color: var(--color-critical);
  color: var(--color-text-on-accent);
}
.btn--critical:hover { background: var(--color-critical-hover); border-color: var(--color-critical-hover); }

.btn--ghost { background: transparent; color: var(--color-text-primary); border-color: var(--color-text-primary); }
.btn--ghost:hover { background: var(--color-text-primary); color: var(--color-bg-page); border-color: var(--color-text-primary); }

.btn--quiet { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn--quiet:hover { color: var(--color-text-primary); border-color: var(--color-text-primary); background: transparent; }

/* Legacy alias for .btn--action (was terracotta) — keep it pointing at the
   high-emphasis variant so any old markup that used it still pops. */
.btn--action {
  background: var(--color-signal);
  border-color: var(--color-signal);
  color: var(--color-text-on-accent);
}
.btn--action:hover { background: var(--color-signal-hover); border-color: var(--color-signal-hover); }

.btn--block { width: 100%; }

/* ============================================================================
   LAYOUT PRIMITIVES
   ============================================================================ */

.page { min-height: 100vh; display: flex; flex-direction: column; }
.container { max-width: 960px; margin: 0 auto; padding: 0 var(--space-24); width: 100%; }
.container--narrow { max-width: 720px; }
.container--wide   { max-width: 1200px; }

/* ============================================================================
   CARD
   ============================================================================ */

.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-32);
}
.card--quiet { border-color: transparent; background: var(--color-bg-muted); }
.card--bare  { background: transparent; border-color: var(--color-brand-pressed); }

/* ============================================================================
   EDITORIAL ELEMENTS
   ============================================================================ */

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
}
.eyebrow--accent { color: var(--color-accent-fg); }
.eyebrow--brand  { color: var(--color-brand-fg); }
.eyebrow--quiet  { color: var(--color-text-tertiary); }

.rule         { width: 32px; height: 1px; background: var(--color-border); border: 0; }
.rule--full   { width: 100%; height: 1px; background: var(--color-border); border: 0; }
.rule--gradient {
  width: 100%;
  height: 2px;
  background: var(--gradient-chart);
  border: 0;
  border-radius: var(--radius-pill);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);   /* brand-forward default; context rules below scale up, never down */
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-brand);
}
/* Trellus color split — "tre" + "us" Directoire Blue, the doubled "ll" Simply
   Green. Lowercase always; never swap the split or recolor. */
.wordmark__b { color: var(--color-brand); }
.wordmark__g { color: var(--color-simply); }
/* Legacy heavy-weight split; retained for any unconverted wordmark markup. */
.wordmark .heavy { font-weight: var(--weight-bold); color: var(--color-brand); }
/* Trellus wordmark — single SVG asset (/static/trellus-wordmark.svg): green "t",
   off-white "rellus". Sized off the inherited .wordmark font-size so every
   per-context rule (masthead, header strip, sidebar) carries over unchanged. */
.wordmark .tw,
.tw {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: -0.2em;
}

/* ============================================================================
   APP HEADER (canonical strip — wordmark · divider · page title + actions)
   Promoted here so every page renders the header identically regardless of
   which page stylesheet it loads. The h1 override below is the single source
   of truth for the "sans, small, uppercase" page-title treatment — without it
   pages fall back to the global serif 48px h1. Page CSS may still override.
   ============================================================================ */

.app-header {
  background: var(--color-bg-page);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.app-header-left { display: flex; align-items: center; gap: var(--space-4); }
.app-header-left img { display: none; }
.home-link {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.home-link:hover { color: var(--color-text-primary); }
.header-divider { width: 1px; height: 24px; background: var(--color-border); }
.app-header h1 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
  margin: 0;
}
.header-actions { display: flex; align-items: center; gap: var(--space-3); }

.colophon {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-tertiary);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-20);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}

/* ============================================================================
   TABS (segmented)
   ============================================================================ */

.tabs {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tab {
  padding: var(--space-12) var(--space-20);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.tab + .tab { border-left: 1px solid var(--color-border); }
.tab:hover { color: var(--color-text-primary); background: var(--color-bg-muted); }
.tab.active { background: var(--color-brand); color: var(--color-text-on-accent); }

/* ============================================================================
   CHIPS
   ============================================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-12);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  background: transparent;
}
.chip--brand    { border-color: var(--color-brand-fg);    color: var(--color-text-primary); background: rgba(77,89,99,0.18); }
.chip--signal   { border-color: var(--color-signal-fg);   color: var(--color-signal-fg);   background: rgba(130,56,42,0.18); }
.chip--accent   { border-color: var(--color-accent-fg);   color: var(--color-accent-fg);   background: rgba(184,150,108,0.16); }
.chip--data     { border-color: var(--color-data-fg);     color: var(--color-data-fg);     background: rgba(212,161,50,0.14); }
.chip--critical { border-color: var(--color-critical-fg); color: var(--color-critical-fg); background: rgba(74,28,16,0.30); }

/* ============================================================================
   BANNERS
   ============================================================================ */

.banner {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-16);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.banner--error   { border-color: var(--color-critical-fg); color: var(--color-critical-fg); background: rgba(74,28,16,0.30); }
.banner--warning { border-color: var(--color-signal-fg);   color: var(--color-signal-fg);   background: rgba(130,56,42,0.15); }
.banner--success { border-color: var(--color-text-primary); color: var(--color-text-primary); background: rgba(77,89,99,0.18); }
.banner--info    { border-color: var(--color-data-fg);     color: var(--color-data-fg);     background: rgba(212,161,50,0.14); }

/* ============================================================================
   SITE HEADER
   ============================================================================ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--space-24);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.site-header .wordmark { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.site-nav { display: flex; gap: var(--space-24); }
.site-nav a {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.site-nav a:hover { color: var(--color-text-primary); }

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.empty-state {
  text-align: center;
  padding: var(--space-64) var(--space-24);
  color: var(--color-text-tertiary);
}
.empty-state p { font-size: var(--text-sm); }
.empty-state p + p { margin-top: var(--space-8); }
.empty-state strong { color: var(--color-accent-fg); font-weight: var(--weight-medium); }

/* ============================================================================
   PROSE (markdown-rendered content)
   ============================================================================ */

.prose {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  margin-top: var(--space-32);
  margin-bottom: var(--space-12);
  color: var(--color-text-primary);
}
.prose h1 { font-size: var(--text-xl); }
.prose h2 { font-size: var(--text-lg); }
.prose h3 { font-size: var(--text-md); font-weight: var(--weight-medium); }
.prose p { margin-bottom: var(--space-16); }
.prose ul, .prose ol { margin: var(--space-12) 0 var(--space-20); }
.prose strong { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.prose a { color: var(--color-data-fg); text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--color-data-fg); }

/* ============================================================================
   DATA-VIZ HELPERS (swatch row showing tier colors)
   ============================================================================ */

.swatch-row { display: flex; height: 6px; border-radius: var(--radius-pill); overflow: hidden; }
.swatch-row > * { flex: 1; height: 100%; }
.swatch-tier-1 { background: var(--color-tier-1); }
.swatch-tier-2 { background: var(--color-tier-2); }
.swatch-tier-3 { background: var(--color-tier-3); }
.swatch-tier-4 { background: var(--color-tier-4); }
.swatch-tier-5 { background: var(--color-tier-5); }
.swatch-tier-6 { background: var(--color-tier-6); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
  :root {
    --text-4xl: 36px;
    --text-3xl: 28px;
    --text-2xl: 24px;
  }
  .container { padding: 0 var(--space-16); }
  .card { padding: var(--space-24); }
  .site-header { padding: var(--space-12) var(--space-16); }
}