/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════════════ */
:root {
  /* Sticky header height — a shared token because present.html and the admin
     layout both need to line up against it (sticky offsets, calc(100vh - …)).
     Kept as one source of truth so it scales consistently with everything
     else when the root font-size changes at the responsive-scale breakpoint. */
  --header-h: 4rem; /* 56px */

  /* ── Spacing scale (4pt base, expressed in rem so it scales with the root
     font-size — see the responsive-scale media query below) ── */
  --space-1: 0.2857rem; /* 4px  */
  --space-2: 0.5714rem; /* 8px  */
  --space-3: 0.8571rem; /* 12px */
  --space-4: 1.1429rem; /* 16px */
  --space-5: 1.7143rem; /* 24px */
  --space-6: 2.2857rem; /* 32px */
  --space-7: 3.4286rem; /* 48px */
  --space-8: 4.5714rem; /* 64px */
  --space-9: 6.8571rem; /* 96px */

  /* ── Surfaces — warm paper palette ── */
  --bg:          oklch(97.5% 0.008 72);
  --surface:     oklch(99.8% 0.003 72);
  --surface-alt: oklch(97.0% 0.010 72);
  --border:      oklch(88.0% 0.012 72);
  --text:        oklch(14.5% 0.020 265);
  --muted:       oklch(52.0% 0.018 265);
  --muted-soft:  oklch(61.0% 0.015 265);
  --accent:      oklch(47.5% 0.22 262);
  --accent-dark: oklch(40.0% 0.22 262);
  /* Fill for buttons/badges carrying near-white text — separate token so a
     theme (e.g. gesis-theme.css) can tune it for that specific text pairing
     without touching --accent's other roles (borders, links, dots). No
     override here means no visual change from the previous single-token
     behaviour. */
  --accent-fill:       var(--accent);
  --accent-fill-hover: var(--accent-dark);
  --header-bg:     oklch(99% 0.006 265);
  --header-text:   oklch(22% 0.025 265);

  /* Header sub-palette */
  --header-subtle: oklch(40.0% 0.018 265);
  --header-dim:    oklch(82.0% 0.012 265);

  /* Header glass tokens — inverted per theme */
  --header-btn-bg:    rgba(0,0,0,.04);
  --header-btn-bd:    rgba(0,0,0,.10);
  --header-btn-hover: rgba(0,0,0,.08);
  --header-btn-hbd:   rgba(0,0,0,.14);
  --header-lg-bg:     rgba(0,0,0,.04);
  --header-lg-bd:     rgba(0,0,0,.08);
  --header-lg-hover:  rgba(0,0,0,.06);

  --code-bg:     oklch(96.5% 0.010 72);
  --hover-bg:    oklch(95.5% 0.012 72);

  /* ── Tooltip ── */
  --tooltip-bg:     oklch(14.5% 0.020 265);
  --tooltip-text:   oklch(93.5% 0.008 265);
  --tooltip-border: oklch(32.0% 0.026 265);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.11), 0 4px 12px rgba(0,0,0,.06);

  /* Radii (rem, same reasoning as spacing) */
  --radius:    0.8571rem; /* 12px */
  --radius-sm: 0.5714rem; /* 8px  */
  --radius-xs: 0.4286rem; /* 6px  */

  /* ── Status — OKLCH for perceptual consistency ── */
  --s-changed:        oklch(62.0% 0.165 70);   --s-changed-bg:        oklch(99.0% 0.022 95);
  --s-unchanged:      oklch(54.0% 0.155 155);  --s-unchanged-bg:      oklch(99.0% 0.018 150);
  --s-error:          oklch(51.0% 0.215 25);   --s-error-bg:          oklch(97.5% 0.018 20);
  --s-new:            oklch(50.5% 0.250 295);  --s-new-bg:            oklch(97.5% 0.018 295);
  --s-binary_changed: oklch(60.5% 0.210 45);   --s-binary_changed-bg: oklch(98.5% 0.022 75);

  /* ── Diff ── */
  --diff-add:      oklch(50.0% 0.155 155); --diff-add-bg:  oklch(99.0% 0.018 150); --diff-add-text: oklch(43.0% 0.130 155);
  --diff-del:      oklch(44.0% 0.190 25);  --diff-del-bg:  oklch(97.5% 0.018 20);  --diff-del-text: oklch(38.0% 0.170 25);
  --diff-eq-bg:    oklch(97.5% 0.008 72);
  --diff-omit-bg:  oklch(96.5% 0.010 72);

  /* ── AI verdict palette ── */
  --v-minor:      oklch(74.0% 0.170 75);  --v-minor-bg:   oklch(99.0% 0.022 95);  --v-minor-text:  oklch(38.5% 0.135 55);
  --v-mixed:      oklch(62.0% 0.235 300); --v-mixed-bg:   oklch(97.5% 0.018 295); --v-mixed-text:  oklch(38.0% 0.230 295);
  --v-noise-bg:   oklch(97.5% 0.018 245); --v-noise-text: oklch(38.0% 0.200 265);
}

[data-theme="dark"] {
  /* ── Elevation stack (lightest wins; each step clearly above previous) ──
     bg 15 → surface-alt 17.5 → surface 21 → header 24 → hover 25.5
     Previously: 12.5 → 12.5 (!) → 16.5 → 18.5 → 20 — four tokens in 7.5pts, two identical */
  --bg:          oklch(15.0% 0.020 265);
  --surface:     oklch(21.0% 0.026 265);
  --surface-alt: oklch(17.5% 0.022 265);
  --border:      oklch(29.5% 0.026 265);
  --text:        oklch(93.5% 0.008 265);
  --muted:       oklch(60.0% 0.018 265);
  --muted-soft:  oklch(68.0% 0.015 265);
  --accent:      oklch(72.0% 0.21 262);
  --accent-dark: oklch(78.0% 0.18 262);
  --accent-fill:       var(--accent);
  --accent-fill-hover: var(--accent-dark);
  --header-bg:     oklch(24.0% 0.028 265);
  --header-text:   oklch(93.5% 0.008 265);
  --header-subtle: oklch(45.0% 0.014 265);
  --header-dim:    oklch(26.0% 0.025 265);
  --header-btn-bg:    rgba(255,255,255,.07);
  --header-btn-bd:    rgba(255,255,255,.12);
  --header-btn-hover: rgba(255,255,255,.14);
  --header-btn-hbd:   rgba(255,255,255,.20);
  --header-lg-bg:     rgba(255,255,255,.06);
  --header-lg-bd:     rgba(255,255,255,.10);
  --header-lg-hover:  rgba(255,255,255,.08);
  --code-bg:     oklch(14.0% 0.018 265);
  --hover-bg:    oklch(25.5% 0.030 265);

  /* Tooltip: lifted above dark surface for clear contrast */
  --tooltip-bg:     oklch(28.0% 0.030 265);
  --tooltip-text:   oklch(93.5% 0.008 265);
  --tooltip-border: oklch(44.0% 0.032 265);

  /* Shadows: softened to match less-dark bg */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.20);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.28);
  --shadow-md: 0 4px 20px rgba(0,0,0,.40);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.50);

  /* Status foregrounds unchanged; backgrounds lifted into 17–19% zone */
  --s-changed:        oklch(76.0% 0.145 80);  --s-changed-bg:        oklch(18.5% 0.048 75);
  --s-unchanged:      oklch(72.0% 0.160 145); --s-unchanged-bg:      oklch(17.5% 0.042 155);
  --s-error:          oklch(72.0% 0.170 22);  --s-error-bg:          oklch(17.0% 0.052 25);
  --s-new:            oklch(72.0% 0.180 295); --s-new-bg:            oklch(17.5% 0.042 285);
  --s-binary_changed: oklch(74.0% 0.160 50);  --s-binary_changed-bg: oklch(18.5% 0.048 52);

  /* Diff surfaces */
  --diff-add:      oklch(62.0% 0.165 145); --diff-add-bg:  oklch(19.5% 0.055 148); --diff-add-text: oklch(70.0% 0.155 145);
  --diff-del:      oklch(65.0% 0.190 22);  --diff-del-bg:  oklch(18.5% 0.060 25);  --diff-del-text: oklch(72.0% 0.175 22);
  --diff-eq-bg:    oklch(21.0% 0.026 265); /* = --surface */
  --diff-omit-bg:  oklch(17.5% 0.022 265); /* = --surface-alt */

  /* Verdict palette: same recessed-nook zone */
  --v-minor-bg:   oklch(18.5% 0.048 75);  --v-minor-text:  oklch(76.0% 0.145 80);
  --v-mixed-bg:   oklch(17.5% 0.042 285); --v-mixed-text:  oklch(72.0% 0.175 300);
  --v-noise-bg:   oklch(18.0% 0.042 245); --v-noise-text:  oklch(70.0% 0.160 245);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 87.5%; /* 14px equivalent — respects browser user-preference scaling */
}

/* Default render scale — matches the 125% browser-zoom look the design was
   tuned against. Per the responsive-design guideline ("font sizes should be
   designed in dependence of the base font size (rem)... on breakpoints try
   to manipulate only that base font size"), every font-size, spacing token
   (--space-*) and radius token (--radius-*) in this file is in rem, so
   bumping the root font-size here scales typography, padding, margins and
   gaps together — not just text — without touching a single component rule.
   Standards-based (unlike the non-standard `zoom` property this replaced),
   respects the user's own browser zoom/font-size preference on top, and
   degrades gracefully to the unscaled 100% layout in any browser.
   Scoped to tablet/desktop widths — phones keep their own hand-tuned 100%
   layout rather than a further-shrunk effective viewport. */
@media (min-width: 800px) {
  html { font-size: 109.375%; } /* 87.5% × 1.25 */
}

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .2s, color .2s;
  overflow-x: hidden;
}

/* Slim scrollbar */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: var(--muted); }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════════ */
header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0 2rem;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
[data-theme="dark"] header {
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 2px 10px rgba(0,0,0,.45);
}

/* Brand + primary nav (Overview) grouped together on the left, separate
   from the utility controls (language, Admin, theme) on the right — the
   dashboard/Overview pair are the two primary content pages, Admin/theme
   are settings, so they shouldn't visually read as one undifferentiated
   nav cluster. */
/* Home / Data Catalogue Monitor / Technical Details — three equal peer
   nav items (all .header-btn, same font size/weight), not a brand + nav
   split, so none of the three visually outranks the others. */
.brand-group { display: flex; align-items: center; gap: 0.4286rem; }

.header-controls { display: flex; align-items: center; gap: 0.4286rem; }
header nav { display: flex; align-items: center; gap: 0.4286rem; }

.header-btn {
  background: transparent;
  border: none;
  color: var(--header-subtle);
  padding: 0.3571rem 0.7857rem;
  min-height: 44px;
  font-size: 0.8571rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3571rem;
  text-decoration: none;
  transition: color .15s;
  flex-shrink: 0;
  white-space: nowrap;
}
.header-btn:hover { color: var(--header-text); }
.header-btn.active { color: var(--accent); font-weight: 700; }

/* Language toggle */
.lang-toggle { display: flex; gap: 0.0714rem; background: var(--header-lg-bg); border: 1px solid var(--header-lg-bd); border-radius: var(--radius-xs); padding: 0.1429rem; }
.lang-btn {
  background: transparent;
  border: none;
  color: var(--header-subtle);
  border-radius: 0.2857rem;
  padding: 0.2857rem 0.7143rem;
  min-height: 44px;
  font-size: 0.7857rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: .04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background .12s, color .12s;
}
.lang-btn:hover { background: var(--header-lg-hover); color: var(--header-text); }
.lang-btn[aria-pressed="true"],
.lang-btn[aria-current="page"] { background: var(--accent-fill); color: oklch(99% 0.005 262); }

/* ═══════════════════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════════════════ */
.breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.6429rem 2rem;
  font-size: 0.8571rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.1429rem;
}
.breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 0.2857rem; color: var(--border); font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════
   PAGE LEDE
═══════════════════════════════════════════════════════════════════════ */
.page-lede { margin-bottom: var(--space-5); }
.lede-heading { font-size: 1.5714rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--text); margin-bottom: 0.3571rem; }
.lede-subhead { font-size: 1rem; color: var(--text); line-height: 1.55; max-width: 68ch; }
.lede-subhead a { color: var(--accent); text-decoration: none; font-weight: 500; }
.lede-subhead a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════
   EDITORIAL META STRIP
═══════════════════════════════════════════════════════════════════════ */
.index-meta {
  display: flex;
  flex-wrap: wrap;
  /* stretch (not center): the "changes on record" stat grew a 3rd line
     (the significant/minor split) taller than its siblings — stretch lets
     the divider and the shorter columns span the row's true height
     instead of the divider being pinned to a fixed height that no longer
     matched, which is what made this strip look off. */
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.meta-stat { display: flex; flex-direction: column; gap: 0.2143rem; justify-content: flex-start; min-width: 9.2857rem; }
.meta-n    { font-size: 2.2857rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--text); }
.meta-lbl  { font-size: 0.7857rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.meta-div  { width: 1px; background: var(--border); flex-shrink: 0; margin: 0 1.7143rem; align-self: stretch; }

/* "Changes on record" composition — significant vs. minor is a status
   distinction (see PRODUCT.md "status is sacred"), so it gets pills in the
   same semantic colors already used for verdict badges/timeline dots
   elsewhere on this page, not a muted caption easy to skim past — no new
   color vocabulary introduced. */
.meta-split { display: flex; align-items: center; gap: 0.3571rem; flex-wrap: wrap; margin-top: 0.4286rem; }
.meta-split-badge {
  display: inline-flex; align-items: center;
  font-size: 0.7143rem; font-weight: 700; line-height: 1.4;
  padding: 0.1071rem 0.5rem; border-radius: 9999px; white-space: nowrap;
}
.meta-split-badge-sig { background: var(--s-changed-bg); color: var(--s-changed); }
.meta-split-badge-min { background: var(--v-minor-bg);   color: var(--v-minor-text); }

/* ═══════════════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════════════ */
main { max-width: 1340px; margin: 0 auto; padding: var(--space-6) 2rem; width: 100%; position: relative; }

/* ═══════════════════════════════════════════════════════════════════════
   CARD
═══════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5714rem;
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat {
  animation: fadeUp .45s cubic-bezier(0,0,0,1) both;
}
.stat:nth-child(1) { animation-delay: .05s; }
.stat:nth-child(2) { animation-delay: .12s; }
.stat:nth-child(3) { animation-delay: .19s; }
.stat:nth-child(4) { animation-delay: .26s; }

/* Cards fade in together after above-fold content; no stagger (product register) */
.pcard { animation: fadeUp .35s cubic-bezier(0,0,0,1) .07s both; }

/* ═══════════════════════════════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════════════════════════════ */
.stats-bar { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); }

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2857rem 1.5714rem;
  flex: 1;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .15s;
}
.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat .lbl { font-size: 0.7143rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 0.4286rem; display: flex; align-items: center; gap: 0.3571rem; }
.stat .val { font-size: 2.7143rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.stat .sub { font-size: 0.7857rem; color: var(--muted); margin-top: 0.2857rem; }

/* ═══════════════════════════════════════════════════════════════════════
   PLATFORM GRID & CARDS
═══════════════════════════════════════════════════════════════════════ */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.4286rem;
}

.pcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2857rem 1.4286rem;
  text-decoration: none;
  color: var(--text);
  display: block;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .18s, transform .14s, border-color .14s, background .14s;
  position: relative;
  order: 0;
}
.pcard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--accent);
}

/* Status: background tint + full border + grid order promotion */
.pcard[data-status="changed"]        { background: var(--s-changed-bg);        border-color: var(--s-changed); }
.pcard[data-status="binary_changed"] { background: var(--s-binary_changed-bg); border-color: var(--s-binary_changed); }
.pcard[data-status="error"]          { background: var(--s-error-bg);          border-color: var(--s-error); }
.pcard[data-status="new"]            { background: var(--s-new-bg);            border-color: var(--s-new); }
.pcard[data-status="unchanged"]      { border-color: var(--border); }

.pcard .pname { font-size: 1rem; font-weight: 700; margin-bottom: 0.2857rem; letter-spacing: -.01em; }
.pcard .pmeta { display: flex; align-items: center; gap: 0.4286rem; flex-wrap: wrap; margin-bottom: 0.7143rem; }
.pcard .pfoot { font-size: 0.7857rem; color: var(--muted); line-height: 1.5; }
.pcard .pfoot strong { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1429rem 0.5714rem;
  border-radius: 9999px;
  font-size: 0.7143rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .03em;
  white-space: nowrap;
  text-transform: uppercase;
}
.badge-changed        { background: var(--s-changed-bg);        color: var(--s-changed); }
.badge-unchanged      { background: var(--s-unchanged-bg);      color: var(--s-unchanged); }
.badge-error          { background: var(--s-error-bg);          color: var(--s-error); }
.badge-new            { background: var(--s-new-bg);            color: var(--s-new); }
.badge-binary_changed { background: var(--s-binary_changed-bg); color: var(--s-binary_changed); }
.badge-degraded       { background: var(--s-error-bg);          color: var(--s-error); }

/* Status icons — shape/text distinction, never colour alone (WCAG 1.4.1) */
.badge-changed::before        { content: '▲ '; font-size: 0.5714rem; vertical-align: 1px; }
.badge-binary_changed::before { content: '≈ '; font-size: 0.6429rem; }
.badge-error::before          { content: '✕ '; font-size: 0.6429rem; }
.badge-new::before            { content: '★ '; font-size: 0.5714rem; }
.badge-unchanged::before      { content: '✓ '; font-size: 0.6429rem; }
.badge-degraded::before       { content: '◐ '; font-size: 0.6429rem; }

/* ═══════════════════════════════════════════════════════════════════════
   CONTEXTUAL GLOSSARY TOOLTIPS
═══════════════════════════════════════════════════════════════════════ */
.gloss {
  border-bottom: 1px dashed var(--muted);
  cursor: help;
  display: inline;
  position: relative;
}
.gloss::after {
  content: attr(data-def);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border: 1px solid var(--tooltip-border);
  padding: 0.5rem 0.7857rem;
  border-radius: var(--radius-xs);
  font-size: 0.7857rem;
  line-height: 1.55;
  width: 250px;
  white-space: normal;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  box-shadow: var(--shadow-lg);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}
.gloss::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--tooltip-border);
  z-index: 501;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.gloss:hover::after,  .gloss:focus::after  { opacity: 1; }
.gloss:hover::before, .gloss:focus::before { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   TIER CHIPS
═══════════════════════════════════════════════════════════════════════ */
.tier { display: inline-flex; padding: 0.1429rem 0.5rem; border-radius: 0.3571rem; font-size: 0.7143rem; font-weight: 700; font-family: 'Cascadia Code','Fira Code',Consolas,monospace; letter-spacing: .02em; }
.t1 { background: oklch(95% 0.028 222); color: oklch(43% 0.12 228); }
.t2 { background: oklch(94% 0.032 262); color: oklch(40% 0.20 265); }
.t3 { background: oklch(93% 0.028 292); color: oklch(39% 0.22 298); }
.t4 { background: oklch(95% 0.022 320); color: oklch(37% 0.20 322); }
[data-theme="dark"] .t1 { background: oklch(20% 0.045 225); color: oklch(80% 0.12 220); }
[data-theme="dark"] .t2 { background: oklch(18% 0.045 262); color: oklch(79% 0.12 260); }
[data-theme="dark"] .t3 { background: oklch(17% 0.045 295); color: oklch(76% 0.15 296); }
[data-theme="dark"] .t4 { background: oklch(17% 0.040 322); color: oklch(73% 0.17 320); }

/* ═══════════════════════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════════════════════ */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9286rem; }
.tbl th {
  text-align: left; padding: 0.7143rem 1rem;
  font-size: 0.7143rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); border-bottom: 2px solid var(--border); background: var(--surface-alt);
}
.tbl td { padding: 0.7143rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover td { background: var(--hover-bg); }
.tbl a { color: var(--accent); }
.tbl a:hover { text-decoration: underline; }

/* Scrollable wrapper so wide tables don't force a full-page scroll on mobile */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3571rem;
  padding: 0.3571rem 0.9286rem;
  min-height: 44px;
  border-radius: var(--radius-xs);
  font-size: 0.8571rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .14s, box-shadow .14s, transform .1s, opacity .14s;
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent-fill);
  color: oklch(99% 0.005 262);
  border-color: var(--accent-fill);
  box-shadow: 0 1px 4px rgba(37,99,235,.3);
}
.btn-primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }

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

/* ═══════════════════════════════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════════════════════════════ */
.sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1429rem; }
.sec-ttl { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }

/* ═══════════════════════════════════════════════════════════════════════
   DIFF
═══════════════════════════════════════════════════════════════════════ */
.diff-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.diff-tbl {
  font-family: 'Cascadia Code', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 0.8929rem;
  line-height: 1.65;
  width: 100%;
  border-collapse: collapse;
}
.diff-tbl td { padding: 0.0714rem 1rem; white-space: pre-wrap; word-break: break-all; }
.diff-tbl td:first-child { width: 22px; text-align: center; padding: 0.0714rem 0.4286rem; user-select: none; border-right: 1px solid var(--border); }

.di { background: var(--diff-add-bg); }
.di td:first-child { color: var(--diff-add); font-weight: 700; }
.di td:last-child  { color: var(--diff-add-text); }
.dd { background: var(--diff-del-bg); }
.dd td:first-child { color: var(--diff-del); font-weight: 700; }
.dd td:last-child  { color: var(--diff-del-text); text-decoration: line-through; opacity: .8; }
.de { background: var(--diff-eq-bg); }
.de td:first-child { color: var(--border); }
.de td:last-child  { color: var(--muted); }
.do td { background: var(--diff-omit-bg); color: var(--muted); font-style: italic; text-align: center; font-family: inherit; padding: 0.2143rem 1rem; }

/* Diff stat pills */
.diff-stats { display: flex; flex-wrap: wrap; gap: 0.5714rem; margin-bottom: 1.4286rem; }
.dpill { padding: 0.3571rem 0.8571rem; border-radius: var(--radius-xs); font-size: 0.8571rem; font-weight: 600; }
.dpill-add { background: var(--diff-add-bg); color: var(--diff-add); }
.dpill-del { background: var(--diff-del-bg); color: var(--diff-del); }
.dpill-neu { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); }

/* Split diff */
.diff-split { table-layout: fixed; }
.diff-split colgroup col.gutter  { width: 24px; }
.diff-split colgroup col.content { width: calc(50% - 24px); }
.diff-split thead th { padding: 0.5714rem 1rem; font-size: 0.7143rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--surface-alt); border-bottom: 2px solid var(--border); font-weight: 700; }
.diff-split td.sg { width: 24px; text-align: center; padding: 0.0714rem 0.2857rem; user-select: none; border-right: 1px solid var(--border); font-weight: 700; }
.diff-split td.sc { padding: 0.0714rem 0.8571rem; white-space: pre-wrap; word-break: break-all; }
.diff-split .s-del td.sg { background: var(--diff-del-bg); color: var(--diff-del); }
.diff-split .s-del td.sc { background: var(--diff-del-bg); color: var(--diff-del-text); }
.diff-split .s-ins td.sg { background: var(--diff-add-bg); color: var(--diff-add); }
.diff-split .s-ins td.sc { background: var(--diff-add-bg); color: var(--diff-add-text); }
.diff-split .s-eq  td.sg { background: var(--diff-eq-bg);  color: var(--border); }
.diff-split .s-eq  td.sc { background: var(--diff-eq-bg);  color: var(--muted); }
.diff-split .s-nil td.sg { background: var(--surface-alt); }
.diff-split .s-nil td.sc { background: var(--surface-alt); }
.diff-split .s-omit td   { background: var(--diff-omit-bg); color: var(--muted); font-style: italic; text-align: center; font-family: inherit; padding: 0.2143rem 1rem; }
.diff-split td.split-divider { width: 2px; background: var(--border); padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   MARKDOWN CONTENT
═══════════════════════════════════════════════════════════════════════ */
.md h1,.md h2,.md h3,.md h4 { margin: 1.4286rem 0 0.5714rem; font-weight: 700; line-height: 1.3; }
.md h1 { font-size: 1.4286rem; } .md h2 { font-size: 1.2143rem; } .md h3 { font-size: 1.0714rem; }
.md p  { margin-bottom: 0.8571rem; max-width: 72ch; }
.md ul,.md ol { margin: 0.4286rem 0 0.8571rem 1.5714rem; }
.md li { margin-bottom: 0.2143rem; max-width: 72ch; }
.md a  { color: var(--accent); }
.md table { margin: 0.8571rem 0; border-collapse: collapse; min-width: max-content; }
.md th,.md td { padding: 0.4286rem 0.8571rem; border: 1px solid var(--border); }
.md th { background: var(--surface-alt); font-weight: 600; }
.md code { background: var(--code-bg); padding: 0.0714rem 0.3571rem; border-radius: 0.2143rem; font-size: 0.8571rem; font-family: monospace; }
.md pre  { background: var(--code-bg); padding: 0.8571rem 1.1429rem; border-radius: var(--radius-sm); overflow-x: auto; margin-bottom: 0.8571rem; }
.md { overflow-x: auto; word-break: break-word; }

/* ═══════════════════════════════════════════════════════════════════════
   SKIP NAVIGATION (a11y)
═══════════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 10000;
  padding: 0.7143rem 1.2857rem;
  background: var(--accent-fill);
  color: oklch(99% 0.005 262);
  font-weight: 700;
  font-size: 0.9286rem;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  text-decoration: none;
  transition: top .1s;
  white-space: nowrap;
}
.skip-link:focus { top: 0; outline: none; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════════════════ */
/* Screen-reader only: visually hidden but announced by assistive technology */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -0.0714rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Section sub-label */
.spec-label {
  font-size: 0.7857rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.4286rem;
}
/* Inset metadata box */
.meta-box {
  padding: 1rem;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
/* Highlighted inset box (current snapshot = green-tinted) */
.meta-box-highlight {
  padding: 1rem;
  background: var(--diff-add-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--diff-add);
}

/* ═══════════════════════════════════════════════════════════════════════
   MISC UTILITIES
═══════════════════════════════════════════════════════════════════════ */
.hash  { font-family: monospace; font-size: 0.7857rem; color: var(--muted); background: var(--code-bg); padding: 0.0714rem 0.3571rem; border-radius: 0.2143rem; }

.empty {
  text-align: center; padding: 3.4286rem 1.4286rem; color: var(--muted); font-size: 0.9286rem;
  border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface-alt);
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5714rem; align-items: start; }
.two-col > * { min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   AI PANEL  (shared across index + platform pages)
═══════════════════════════════════════════════════════════════════════ */
.ai-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2857rem 1.5714rem;
  box-shadow: var(--shadow-sm);
}
.ai-v-substantive { background: var(--s-changed-bg);  border-color: var(--s-changed); }
.ai-v-minor       { background: var(--v-minor-bg);    border-color: var(--v-minor); }
.ai-v-noise       { border-color: var(--accent); }
.ai-v-mixed       { background: var(--v-mixed-bg);    border-color: var(--v-mixed); }
.ai-v-unknown     { border-color: var(--border); }

.ai-header  { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5714rem; margin-bottom:0.8571rem; }
.ai-icon    { font-size:1.2857rem; line-height:1; }
.ai-title   { font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.ai-ts      { font-size:0.7857rem; color:var(--muted); }
.ai-summary { font-size:0.9286rem; line-height:1.65; margin:0; color:var(--text); }

.ai-badge { display:inline-flex; padding:0.1429rem 0.6429rem; border-radius:9999px; font-size:0.7143rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.ai-v-substantive-badge { background:var(--s-changed-bg);  color:var(--s-changed); }
.ai-v-minor-badge       { background:var(--v-minor-bg);    color:var(--v-minor-text); }
.ai-v-noise-badge       { background:var(--v-noise-bg);    color:var(--v-noise-text); }
.ai-v-mixed-badge       { background:var(--v-mixed-bg);    color:var(--v-mixed-text); }
.ai-v-unknown-badge     { background:var(--surface-alt);   color:var(--muted); }

.ai-model-chip { font-size:0.7143rem; font-family:monospace; padding:0.1429rem 0.5rem; border-radius:0.2857rem; background:var(--surface-alt); border:1px solid var(--border); color:var(--muted); }

.ai-details { margin-top:1rem; }
.ai-details summary { font-size:0.8571rem; font-weight:600; color:var(--accent); cursor:pointer; user-select:none; padding:0.2857rem 0; list-style:none; display:flex; align-items:center; gap:0.3571rem; }
.ai-details summary::before { content:'▸'; font-size:0.7143rem; transition:transform .15s; }
.ai-details[open] summary::before { transform:rotate(90deg); }
.ai-details summary:hover { opacity:.8; }
.ai-platform-list { margin-top:0.7143rem; display:flex; flex-direction:column; gap:0.4286rem; }
.ai-platform-row  { display:flex; align-items:baseline; flex-wrap:wrap; gap:0.5714rem; padding:0.6429rem 0.8571rem; background:var(--surface-alt); border-radius:var(--radius-sm); border:1px solid var(--border); font-size:0.8571rem; }
.ai-pname    { font-weight:700; min-width:180px; letter-spacing:-.01em; }
.ai-conf     { font-size:0.7143rem; color:var(--muted); font-style:italic; }
.ai-psummary { color:var(--text); flex:1; min-width:200px; line-height:1.55; }
.ai-perror   { color:var(--s-error); font-size:0.7857rem; width:100%; }

/* ── AI unavailable state (quota exceeded / API error) ── */
.ai-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 0.8571rem;
  padding: 0.2857rem 0 0.1429rem;
}
.ai-unavail-icon {
  font-size: 1.4286rem;
  line-height: 1;
  flex-shrink: 0;
  opacity: .55;
  margin-top: 0.0714rem;
}
.ai-unavail-body {
  display: flex;
  flex-direction: column;
  gap: 0.2857rem;
}
.ai-unavail-title {
  font-size: 0.9286rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.ai-unavail-detail {
  font-size: 0.8571rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHANGE-CLASS PILLS  (shared across platform + diff pages)
═══════════════════════════════════════════════════════════════════════ */
.cc-pill {
  display:inline-block; padding:0.1429rem 0.5rem; border-radius:0.2857rem;
  font-size:0.7143rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.cc-noise      { background: var(--surface-alt);      color: var(--muted); }
.cc-cosmetic   { background: var(--v-minor-bg);        color: var(--v-minor-text); }
.cc-link       { background: var(--s-unchanged-bg);    color: var(--s-unchanged); }
.cc-content    { background: var(--s-new-bg);          color: var(--s-new); }
.cc-structural { background: var(--s-error-bg);        color: var(--s-error); }

/* ═══════════════════════════════════════════════════════════════════════
   GRID CONTROLS  (homepage catalogue filter / sort bar)
═══════════════════════════════════════════════════════════════════════ */
.grid-controls {
  display: flex;
  align-items: center;
  gap: 0.4286rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.gc-label {
  font-size: 0.7143rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-right: var(--space-1);
  flex-shrink: 0;
}
.gc-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3571rem 1rem;
  min-height: 44px;
  font-size: 0.7857rem;
  font-weight: 600;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  cursor: pointer;
  color: var(--muted);
  transition: background .14s, color .14s, border-color .14s;
  font-family: inherit;
  white-space: nowrap;
  letter-spacing: .01em;
}
.gc-btn:hover:not(.active):not([aria-pressed="true"]) { background: var(--hover-bg); color: var(--text); border-color: var(--muted); }
.gc-btn.active, .gc-btn[aria-pressed="true"] { background: var(--accent-fill); color: oklch(99% 0.005 262); border-color: var(--accent-fill); }
.gc-sep   { width: 1px; height: 20px; background: var(--border); align-self: center; flex-shrink: 0; margin: 0 0.4286rem; }
.gc-group { display: flex; align-items: center; gap: 0.4286rem; }

/* z-index isolation for homepage stacking context */
.page-lede, .index-meta, .grid-controls, .platform-grid,
.ai-panel, .run-timeline, .rr-tl, .historical-banner { position: relative; z-index: 1; }


/* ═══════════════════════════════════════════════════════════════════════
   AI RUN BANNER  (inside AI analysis panel on homepage)
═══════════════════════════════════════════════════════════════════════ */
.ai-run-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.7143rem;
  margin-bottom: 0.8571rem;
  border-bottom: 1px solid var(--border);
}
.ai-run-label {
  font-size: 0.7143rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.ai-run-sep { color: var(--border); font-size: 0.7857rem; }
.ai-run-ts  { font-size: 0.8571rem; font-weight: 700; color: var(--text); }

/* ── Last-run note (fallback when no AI analysis) ── */
.last-run-note {
  font-size: 0.8571rem;
  color: var(--muted);
  margin-bottom: var(--space-6);
  padding: 0.6429rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-alt);
}
.last-run-note strong { color: var(--text); font-weight: 700; }

/* ── Historical run banner ── */
.historical-banner {
  display: flex;
  align-items: center;
  gap: 0.7143rem;
  padding: 0.6429rem 1rem;
  background: var(--s-new-bg);
  border: 1px solid var(--s-new);
  border-radius: var(--radius-xs);
  font-size: 0.8571rem;
  color: var(--text);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.hist-icon { font-size: 0.8571rem; color: var(--s-new); flex-shrink: 0; }
.hist-back {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8571rem;
  white-space: nowrap;
}
.hist-back:hover { text-decoration: underline; }

/* ── Incident annotation (known-issue note on an error platform card) ── */
.pcard-incident-note {
  font-size: 0.7143rem;
  line-height: 1.4;
  color: var(--s-error);
  background: var(--s-error-bg);
  border: 1px solid var(--s-error);
  border-radius: var(--radius-xs);
  padding: 0.4286rem 0.5714rem;
  margin-top: 0.4286rem;
}
.pcard-incident-note strong { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   CHANGED PLATFORM CHIPS  (inside AI panel on homepage)
═══════════════════════════════════════════════════════════════════════ */
.run-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4286rem;
  margin: 0.8571rem 0 1rem;
}
.run-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3571rem;
  padding: 0.2857rem 0.7143rem;
  min-height: 32px;
  border-radius: 9999px;
  font-size: 0.7857rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  transition: background .12s, border-color .12s, transform .1s;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.run-chip:hover { background: var(--hover-bg); border-color: var(--muted); transform: translateY(-1px); }
.run-chip-v {
  font-size: 0.6429rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-soft);
}
.run-chip-v-substantive { border-color: var(--s-changed);  background: var(--s-changed-bg); }
.run-chip-v-minor       { border-color: var(--v-minor);    background: var(--v-minor-bg); }
.run-chip-v-noise       { border-color: var(--accent);     background: var(--v-noise-bg); }
.run-chip-v-mixed       { border-color: var(--v-mixed);    background: var(--v-mixed-bg); }

/* ═══════════════════════════════════════════════════════════════════════
   RUN TIMELINE  (standalone card + merged inset inside AI panel)
═══════════════════════════════════════════════════════════════════════ */
.run-timeline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9286rem 1.2857rem 1.0714rem;
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  overflow: clip;
}
/* Merged inset at base of AI panel */
.rr-tl {
  margin: 1.1429rem -1.5714rem -1.2857rem;
  padding: 0.9286rem 1.2857rem 1.0714rem;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  overflow: clip;
}
.rr-tl .tl-dot { border-color: var(--surface-alt); }

.tl-hdr { display: flex; align-items: center; gap: 0.5714rem; margin-bottom: 0.5714rem; }
.tl-hdr-label {
  font-size: 0.7143rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.tl-hdr-count { font-size: 0.7143rem; color: var(--muted-soft); }

.tl-legend { display: flex; align-items: center; gap: 0.8571rem; margin-left: auto; }
.tl-legend-item {
  display: inline-flex; align-items: center; gap: 0.2857rem;
  font-size: 0.6429rem; color: var(--muted-soft); white-space: nowrap;
}
.tl-legend-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tl-legend-substantive { background: var(--s-changed); }
.tl-legend-minor       { background: var(--v-minor); }
.tl-legend-noise       { background: var(--accent); }
.tl-legend-note { font-size: 0.6429rem; color: var(--muted-soft); white-space: nowrap; }

.tl-scrub {
  position: relative; height: 4px; border-radius: 9999px;
  background: var(--border); margin-bottom: 0.7857rem; cursor: pointer;
}
.tl-scrub-thumb {
  position: absolute; top: 0; height: 100%; min-width: 24px;
  border-radius: 9999px; background: var(--muted-soft);
  cursor: grab; transition: background .12s;
}
.tl-scrub-thumb:hover, .tl-scrub-thumb:active { background: var(--accent); cursor: grabbing; }

.tl-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 0.1429rem;
  /* Fades the LEFT edge — older history trails off that way now that the
     newest run sits on the right and is the default-visible side. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
  mask-image: linear-gradient(to right, transparent 0%, black 30%);
}
.tl-scroll::-webkit-scrollbar { display: none; }
.tl-track {
  display: inline-flex; align-items: flex-start; gap: 0;
  min-width: 100%; position: relative; padding: 0.1429rem 0 0.2857rem;
}
.tl-track::before {
  content: ''; position: absolute; top: 9px; left: 20px; right: 20px;
  height: 1px; background: var(--border); z-index: 0;
}
.tl-day {
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 auto; min-width: 68px; position: relative; z-index: 1;
}
.tl-node {
  display: flex; flex-direction: column; align-items: center; gap: 0.2143rem;
  text-decoration: none; color: var(--text); padding: 0.2143rem 0.4286rem 0.2857rem;
  border-radius: var(--radius-xs); transition: background .12s; width: 100%;
}
.tl-node:hover { background: var(--hover-bg); }
.tl-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--surface);
  transition: transform .12s; flex-shrink: 0; position: relative; z-index: 1;
}
.tl-node:hover .tl-dot { transform: scale(1.3); }
.tl-sel .tl-dot { width: 13px; height: 13px; box-shadow: 0 0 0 3px var(--accent); background: var(--accent); }

.tl-v-substantive .tl-dot { background: var(--s-changed);  border-color: var(--s-changed-bg); }
.tl-v-minor .tl-dot       { background: var(--v-minor);    border-color: var(--v-minor-bg); }
.tl-v-noise .tl-dot       { background: var(--accent);     border-color: var(--surface); }
.tl-v-mixed .tl-dot       { background: var(--v-mixed);    border-color: var(--v-mixed-bg); }
.tl-v-unknown .tl-dot     { background: var(--border); }
.tl-sel.tl-v-substantive .tl-dot { box-shadow: 0 0 0 3px var(--s-changed); }
.tl-sel.tl-v-minor .tl-dot       { box-shadow: 0 0 0 3px var(--v-minor); }
.tl-sel.tl-v-noise .tl-dot       { box-shadow: 0 0 0 3px var(--accent); }
.tl-sel.tl-v-mixed .tl-dot       { box-shadow: 0 0 0 3px var(--v-mixed); }

.tl-date { font-size: 0.7143rem; font-weight: 600; color: var(--muted); white-space: nowrap; letter-spacing: .01em; line-height: 1.3; }
.tl-time { font-size: 0.6429rem; color: var(--muted-soft); white-space: nowrap; line-height: 1.2; }
.tl-sel .tl-date { color: var(--text); font-weight: 700; }
.tl-sel .tl-time { opacity: 1; color: var(--text); }
.tl-cnt {
  font-size: 0.6429rem; font-weight: 800; background: var(--accent-fill);
  color: oklch(99% 0.005 262); border-radius: 9999px;
  padding: 0 0.3571rem; min-width: 14px; text-align: center; line-height: 15px; height: 15px;
}
.tl-day-active > .tl-node > .tl-date { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════
   PRESENTATION / EDITORIAL COMPONENTS
   Shared by /present and /present/technical (see present.html, technical.html).
═══════════════════════════════════════════════════════════════════════ */
.pres-section { max-width: 1320px; margin: 0 auto; padding: 4.2857rem 2rem; }
.pres-section + .pres-section { border-top: 1px solid var(--border); }

.pres-sec-marker {
  width: 28px; height: 3px;
  background: var(--accent); border-radius: 0.1429rem;
  margin-bottom: 1.1429rem;
}
.pres-sec-title {
  font-size: 1.7143rem; font-weight: 800; margin-bottom: 0.4286rem;
  letter-spacing: -.022em;
}
/* max-width caps line length — measured ~149 chars/line uncapped on a full
   ~1210px content column, well past the 65-75ch this project's own
   typography principle asks for. */
.pres-sec-sub { font-size: 0.9286rem; color: var(--muted); margin-bottom: 2.5714rem; max-width: 70ch; }

/* ── Pipeline ── */
.pipeline-ol {
  list-style: none; margin: 0.5714rem 0 0; padding: 0;
  border: 1px solid var(--border); border-radius: 0.7143rem; overflow: hidden;
}
.pipeline-ol li {
  display: flex; align-items: flex-start; gap: 1.4286rem;
  padding: 1.2857rem 1.7143rem; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.pipeline-ol li:last-child { border-bottom: none; }
.pipeline-ol li.pl-featured { background: var(--surface-alt); }
.pl-num {
  font-size: 0.7143rem; font-weight: 800; color: var(--accent);
  letter-spacing: .12em; min-width: 26px; padding-top: 0.2143rem; flex-shrink: 0;
}
.pl-body strong { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 0.3571rem; }
.pl-body p { font-size: 0.8571rem; color: var(--muted); line-height: 1.65; margin: 0; }

/* ── Tier tiles ── */
.tier-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2857rem; }
.tier-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0.7143rem; padding: 1.2857rem 1.4286rem;
}
.tier-tile .tt-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;
}
.tier-tile .tt-label { font-size: 0.9286rem; font-weight: 700; }
.tier-tile .tt-count {
  font-size: 0.9286rem; font-weight: 800; color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent); padding: 0.0714rem 0.5714rem; border-radius: 0.2857rem;
}
.tier-tile .tt-desc { font-size: 0.7857rem; color: var(--muted); line-height: 1.5; }

/* ── Tech stack (three-column card row) ── */
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1429rem; }
.three-col .card h3 {
  font-size: 0.7857rem; font-weight: 700; margin-bottom: 1rem;
  color: var(--accent); text-transform: uppercase; letter-spacing: .08em;
}
.three-col .card ul { padding-left: 1.2857rem; }
.three-col .card li { font-size: 0.9286rem; margin-bottom: 0.6429rem; line-height: 1.55; }
.three-col .card code { font-size: 0.7857rem; background: var(--code-bg); padding: 0.0714rem 0.3571rem; border-radius: 0.2143rem; font-family: monospace; }

/* ── View link ── */
.pres-view-link {
  display: inline-flex; align-items: center; gap: 0.5714rem;
  margin-top: 2rem; padding: 0.7143rem 1.4286rem;
  background: var(--accent-fill); color: oklch(99% 0.003 262);
  border-radius: var(--radius-sm); text-decoration: none;
  font-size: 0.9286rem; font-weight: 700;
  box-shadow: 0 2px 8px color-mix(in oklch, var(--accent) 30%, transparent);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.pres-view-link:hover {
  background: var(--accent-fill-hover); transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in oklch, var(--accent) 40%, transparent);
}

@media (max-width: 900px) {
  .tier-row  { grid-template-columns: repeat(2, 1fr); }
  .three-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tier-row { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  main          { padding: var(--space-5) 1.2857rem; }
  .stats-bar    { flex-wrap: wrap; }
  .stat         { min-width: 140px; flex: 1 1 140px; }
  .two-col      { grid-template-columns: 1fr; }
  header        { padding: 0 1.2857rem; }
  .breadcrumb   { padding: 0.6429rem 1.2857rem; }
}
@media (max-width: 600px) {
  .platform-grid { grid-template-columns: 1fr; gap: 1rem; }
  .stats-bar     { gap: 0.7143rem; }
  .stat .val     { font-size: 2rem; }
  /* Timeline + run chips */
  .tl-day    { min-width: 58px; }
  .tl-legend { display: none; }
  .run-chips { gap: 0.2857rem; }
  .run-chip  { font-size: 0.7143rem; padding: 0.2857rem 0.5714rem; min-height: 44px; }
  /* "Data Catalogue Monitor" wraps to 2 lines below ~415px at the default
     size, and header has a fixed height (--header-h, shared with other
     pages' sticky-offset math — see the admin layout's
     calc(100vh - var(--header-h)) — so it can't just grow to fit wrapped
     text without breaking those). Shrinking the nav text keeps all three
     items on one line through phone widths instead. */
  .brand-group { gap: 0.2857rem; }
  .brand-group .header-btn { font-size: 0.7857rem; padding: 0.3571rem 0.5714rem; }
}
@media (max-width: 560px) {
  /* Audit accordion: stack row-right below name, collapse meta to column */
  .audit-name      { min-width: 0; }
  .audit-row-right { margin-left: 0; width: 100%; }
  .audit-body-meta { flex-direction: column; gap: 0.5714rem; }
  .tbl th, .tbl td { padding: 0.4286rem 0.5714rem; }
}
@media (max-width: 400px) {
  /* Below ~400px there still isn't room for "Home" + "Data Catalogue
     Monitor" + "Technical Details" + the language toggle + Dark on one
     line, even at the reduced size from the 600px breakpoint above.
     Shrink the nav text further and tighten button padding rather than
     truncate/hide any nav item. */
  .brand-group { gap: 0.1429rem; }
  .brand-group .header-btn { font-size: 0.7143rem; }
  .header-btn  { padding: 0.2857rem 0.4286rem; }
  .lang-toggle { gap: 0; }
  .lang-btn    { padding: 0.2857rem 0.4286rem; }
  /* Dark collapses to icon-only — accessible name now comes from
     aria-label (added alongside title) rather than the visible label
     text, which is still present for everyone else via .header-btn-label. */
  .header-btn-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}