/* ============================================================
   EU Legislative Screener — Shared shell
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700;8..60,800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --ceps: #00665E; --ceps-dark: #004D40; --ceps-light: #00897B;
  --accent: #C75B12; --accent-soft: #F4A261; --gold: #D4A017;
  --bg: #FBFCFC; --bg-card: #FFFFFF; --bg-ink: #14241F; --bg-tint: #EEF2F4;
  --ink: #1A2B3C; --ink-2: #3C4D46; --ink-3: #6B7A72; --ink-4: #9AA7A0;
  --hair: #E8ECEF; --hair-strong: #D0D5DA;
  /* B-38 minimalist redesign: row separators + bar tracks + row hover */
  --hair-row: #F0F3F2; --hover-tint: rgba(0,102,94,0.03);
  --positive: #2E7D32; --warn: #C75B12; --neg: #A83232;

  /* B-37 step 4: ghost-token aliases. These names were used across templates
     with per-file inline fallbacks (--line had THREE different fallback
     colours) or page-local :root forks; defining them here gives every bare
     use one canonical value. Page-local <style> :root blocks still override
     (they load after this file), so no existing page shifts. New code should
     use the canonical name on the right. */
  --line: var(--hair);        /* → prefer --hair */
  --muted: var(--ink-3);      /* → prefer --ink-3 */
  --ink-1: var(--ink);        /* → prefer --ink */
  --paper: var(--bg);         /* → prefer --bg */
  --card: var(--bg-card);     /* → prefer --bg-card */

  /* Group palette */
  --g-left: #8B0A10; --g-sd: #E4002B; --g-greens: #00A651;
  --g-renew: #F6C100; --g-epp: #0B3E8A; --g-ecr: #0082CA;
  --g-pfe: #1B3A5B; --g-esn: #6B3410; --g-ni: #7A7A7A;
}
html[data-theme="editorial"] {
  --bg: #F6F4EE; --bg-tint: #EEEBE1; --ink: #14241F;
  --hair: #DFDACB; --hair-strong: #C2BBAA;
}
html[data-theme="terminal"] {
  --bg: #0F1714; --bg-card: #14201B; --bg-tint: #1A2923; --bg-ink: #0A100E;
  --ink: #E6EDE8; --ink-2: #B5C4BC; --ink-3: #7E8E85; --ink-4: #55655D;
  --hair: #223029; --hair-strong: #334640;
  --ceps: #4FD1A0; --ceps-dark: #3BAA80; --ceps-light: #6FE3B6;
  --accent: #F4A261; --gold: #E9C46A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[data-theme="terminal"] body { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: "tnum" 1; }
.serif { font-family: 'Source Serif 4', Georgia, serif; }
.tnum { font-variant-numeric: tabular-nums; }

/* NAV — B-38 minimalist: white 52px bar, quiet links, teal underline active.
   (Previous dark-ink bar kept only for the terminal theme.) */
.nav {
  display: flex; align-items: center;
  background: var(--bg-card); color: var(--ink);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--hair);
  height: 52px; padding: 0 32px; gap: 28px;
}
html[data-theme="terminal"] .nav { background: #050908; color: #fff; border-bottom-color: #223029; }
.nav-brand {
  font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em;
  display: flex; align-items: center;
  color: var(--ink);
}
.nav-brand .brand-euro { color: var(--ceps); }
html[data-theme="terminal"] .nav-brand { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #fff; }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; align-self: stretch; }
.nav-link {
  padding: 6px 12px; font-size: 12.5px;
  color: var(--ink-3); font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  display: inline-flex; align-items: center; align-self: center;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ceps); font-weight: 600; border-bottom-color: var(--ceps); }
.nav-link.report { color: var(--gold); font-weight: 600; }
.nav-link.report.active { color: var(--gold); border-bottom-color: var(--gold); }
html[data-theme="terminal"] .nav-link { color: rgba(255,255,255,0.7); }
html[data-theme="terminal"] .nav-link:hover { color: #fff; }
html[data-theme="terminal"] .nav-link.active { color: #fff; border-bottom-color: var(--ceps-light); }

/* ----- Institution dropdown (Parliament ▾) -----------------------------
   CSS-only unfold: opens on hover and on keyboard focus (focus-within),
   no JS. nav-soon = greyed placeholder for institutions not built yet. */
.nav-group { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-group-toggle { cursor: pointer; user-select: none; }
.nav-menu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 190px; padding: 6px 0;
  background: var(--bg-card); border: 1px solid var(--hair);
  border-top: 2px solid var(--ceps);
  box-shadow: 0 12px 28px -14px rgba(20,36,31,0.25);
}
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display: block; }
.nav-menu-item {
  display: block; padding: 9px 18px; font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3); border-left: 2px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-menu-item:hover { color: var(--ink); background: var(--hover-tint); }
.nav-menu-item.active { color: var(--ceps); border-left-color: var(--ceps); font-weight: 600; }
.nav-soon { color: var(--ink-4); opacity: 0.6; cursor: default; }
html[data-theme="terminal"] .nav-menu { background: #050908; border-color: #223029; }
html[data-theme="terminal"] .nav-menu-item { color: rgba(255,255,255,0.7); }
html[data-theme="terminal"] .nav-menu-item:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* The old carded "lens / sentence-builder" styles lived here (Phase 8a).
   Retired in the B-38 minimalist redesign: the dashboard lens is now the
   page hero and self-contains its styles (webapp/templates/index.html →
   .lens-hero / .lens-sentence / .chip-sel / .lens-stats). No other page
   used these selectors, so they were removed rather than left to rot. */

.admin-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px 1px;
  font-size: 10px;
  font-weight: 700;
  background: var(--accent, #C75B12);
  color: #fff;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}

/* ----- Admin section entry pill (top nav, far right) ------------------
   Phase C, Shape A: a single pill that takes admins to the admin
   section. Visually distinct from regular nav-link tabs (rounded,
   muted background, separator on its left) so it never blends with
   regular site navigation. The pill lights up whenever the user is
   anywhere under admin.* — leaving the section dims it back down. */
.admin-pill {
  margin-left: 14px;
  padding: 5px 12px 5px 14px;
  border-left: 1px solid var(--hair);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  border-radius: 999px;
  background: var(--bg-tint);
  transition: color .15s, background .15s;
  /* a hairline gap between border-left and pill background */
  background-clip: padding-box;
}
.admin-pill:hover {
  color: var(--ink);
  background: var(--hair);
}
.admin-pill.active {
  color: #fff;
  background: var(--accent, #C75B12);
}
.admin-pill-glyph { font-size: 13px; opacity: 0.85; }
.admin-pill-count {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10px; font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  line-height: 1.4;
}
.admin-pill.active .admin-pill-count { background: rgba(0,0,0,0.30); }

/* ----- Admin section layout shell ------------------------------------
   Below the top nav, a band carries the section eyebrow + subnav.
   Visible only on admin.* pages (the band lives in admin/_layout.html,
   not in base.html — leaving the section makes the band disappear). */
.admin-shell-band {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--hair);
  padding: 14px 0 0;
}
.admin-shell-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.admin-shell-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3); font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 10px;
}
.admin-shell-eyebrow .live-dot {
  width: 6px; height: 6px;
  /* override the default green Live dot — admin band uses the accent
     so the band reads as 'admin mode' rather than 'live data'. */
  background: var(--accent, #C75B12);
}
.admin-shell-band .admin-subnav {
  margin-bottom: 0;
  padding-bottom: 10px;
}
.admin-shell-content { padding-top: 0; }

/* Mobile: the admin pill takes a fixed slot but the regular tabs scroll
   horizontally. Below ~480px, drop the glyph to save space; the badge
   stays since it's the value-carrying element. */
@media (max-width: 480px) {
  .admin-pill { margin-left: 8px; padding: 5px 10px; }
  .admin-pill-glyph { display: none; }
}

/* Sub-navigation for /admin/* (Access requests | Users). Sits below the
   page hero, above the per-page tabs. Phase C. */
.admin-subnav {
  display: flex; gap: 6px; margin-bottom: 14px;
  padding-bottom: 8px;
}
.admin-subnav-link {
  font-size: 12px; font-weight: 600;
  color: var(--ink-3); text-decoration: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.admin-subnav-link:hover { color: var(--ink); background: var(--bg-tint); }
.admin-subnav-link.active {
  color: #fff; background: var(--ceps);
}
.admin-subnav-link .count {
  display: inline-block;
  padding: 0 6px;
  font-size: 9.5px; font-weight: 700;
  background: rgba(0,0,0,0.10);
  color: inherit;
  border-radius: 999px;
}
.admin-subnav-link.active .count { background: rgba(255,255,255,0.25); }
.nav-right {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-4);
}
html[data-theme="terminal"] .nav-right { color: rgba(255,255,255,0.6); }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4FD1A0;
  box-shadow: 0 0 0 0 rgba(79,209,160,0.6);
  animation: livepulse 2s infinite; display: inline-block;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(79,209,160,0.6); }
  70% { box-shadow: 0 0 0 6px rgba(79,209,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,209,160,0); }
}

/* Shell */
.shell { max-width: 1400px; margin: 0 auto; padding: 24px 28px 64px; }

/* Breadcrumb */
.crumb {
  font-size: 11.5px; color: var(--ink-3);
  margin-bottom: 14px; display: flex; gap: 6px; align-items: center;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--ceps); }
.crumb .sep { color: var(--ink-4); }

/* Card */
.card {
  background: var(--bg-card); border: 1px solid var(--hair);
  border-radius: 14px; padding: 20px 24px;
  margin-bottom: 18px;
}
.card.pad-sm { padding: 14px 18px; }
.card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; gap: 12px;
}
.card-title {
  font-family: 'Source Serif 4', serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
}
html[data-theme="terminal"] .card-title { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.card-sub {
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}
.card-explainer {
  font-size: 11.5px; color: var(--ink-3); font-style: italic;
  margin: -2px 0 12px;
}
html[data-theme="terminal"] .card-explainer { font-style: normal; }

/* Section head (larger) */
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 28px 0 12px; gap: 16px;
}
.sec-title {
  font-family: 'Source Serif 4', serif;
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.015em;
}
html[data-theme="terminal"] .sec-title { font-family: 'JetBrains Mono', monospace; font-size: 17px; }
.sec-sub { font-size: 11.5px; color: var(--ink-3); font-style: italic; }
html[data-theme="terminal"] .sec-sub { font-style: normal; }

/* Page header (hero) */
.page-hero {
  background: var(--bg-card); border: 1px solid var(--hair);
  border-radius: 14px; padding: 22px 28px;
  margin-bottom: 18px; position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 24px -12px rgba(20,36,31,0.08);
}
.page-hero h1 {
  font-family: 'Source Serif 4', serif;
  font-size: 30px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 4px;
}
html[data-theme="terminal"] .page-hero h1 { font-family: 'JetBrains Mono', monospace; font-size: 22px; }
.page-hero .eyebrow {
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600; margin-bottom: 8px;
  display: flex; gap: 10px; align-items: center;
}
.page-hero .sub { font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* KPI row */
.kpi-row {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.kpi { display: flex; flex-direction: column; gap: 2px; }
.kpi .v {
  font-family: 'Inter', sans-serif;
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
html[data-theme="terminal"] .kpi .v { font-family: 'JetBrains Mono', monospace; }
.kpi .v.pos { color: var(--positive); } .kpi .v.neg { color: var(--neg); }
.kpi .l {
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500;
}

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-tint); color: var(--ink-2);
  border: 1px solid var(--hair);
}
.pill.ceps { background: var(--ceps); color: #fff; border-color: var(--ceps); }
.pill.dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}

/* Stage pills */
.stage-pill {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  color: #fff; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.stage-proposed { background: #6B7A72; }
.stage-referral, .stage-referred { background: #0B3E8A; }
.stage-committee { background: #00665E; }
.stage-report { background: #00897B; }
.stage-trilogue { background: #C75B12; }
.stage-provisional { background: #D4A017; }
.stage-plenary { background: #6A4C93; }
.stage-adopted { background: #2E7D32; }
.stage-signed { background: #1982C4; }

/* Bars */
.bar {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; font-size: 12.5px;
}
.bar-label {
  min-width: 110px; font-weight: 500;
  font-size: 12px; color: var(--ink-2);
}
.bar-track {
  flex: 1; height: 20px;
  background: var(--bg-tint); border-radius: 3px;
  overflow: hidden; position: relative;
}
.bar-fill {
  height: 100%; display: flex; align-items: center;
  padding-left: 7px; color: #fff; font-weight: 600;
  font-size: 10.5px; border-radius: 3px;
  font-variant-numeric: tabular-nums;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.bar-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); min-width: 36px;
  text-align: right; font-variant-numeric: tabular-nums;
}

/* Row hover lists */
.row-list { display: flex; flex-direction: column; }
.row-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 6px; border-bottom: 1px solid var(--hair);
  cursor: pointer; transition: background .12s, padding-left .12s;
  border-radius: 4px; margin: 0 -6px;
  padding-left: 6px; padding-right: 6px;
}
.row-item:last-child { border-bottom: none; }
.row-item:hover { background: var(--bg-tint); padding-left: 10px; }
.row-rk {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--ink-3); width: 22px;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.row-photo {
  width: 32px; height: 32px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--bg-tint); flex-shrink: 0;
  position: relative;
}
.row-photo.grp-dot::after {
  content: ''; position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--grp, var(--ceps));
  border: 2px solid var(--bg-card);
}
.row-info { flex: 1; min-width: 0; }
.row-name {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-meta {
  font-size: 11px; color: var(--ink-3);
  margin-top: 1px; display: flex; gap: 6px; align-items: center;
}
.row-meta .grp-chip {
  padding: 1px 6px; border-radius: 3px;
  background: var(--grp-soft, var(--bg-tint));
  color: var(--grp, var(--ink-2));
  font-weight: 600; font-size: 10px;
}
.row-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Timeline */
.timeline { border-left: 2px solid var(--hair); padding-left: 14px; }
.tl-item { position: relative; padding: 6px 0 14px; }
.tl-item::before {
  content: ''; position: absolute;
  left: -20px; top: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ceps);
  box-shadow: 0 0 0 3px var(--bg-card);
}
.tl-item.cur::before { background: var(--accent); animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 4px rgba(199,91,18,0.25); }
  50% { box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 9px rgba(199,91,18,0); }
}
.tl-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tl-title { font-size: 13px; font-weight: 600; margin-top: 2px; }
.tl-body { font-size: 12px; color: var(--ink-2); margin-top: 2px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--hair-strong);
  background: var(--bg-card); color: var(--ink);
  transition: all .15s;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.btn:hover { border-color: var(--ceps); color: var(--ceps); }
.btn.primary { background: var(--ceps); border-color: var(--ceps); color: #fff; }
.btn.primary:hover { background: var(--ceps-dark); border-color: var(--ceps-dark); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--bg-tint); }

/* Utility */
.muted { color: var(--ink-3); }
.tight { margin: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.flex { display: flex; } .items-center { align-items: center; } .gap-10 { gap: 10px; } .gap-16 { gap: 16px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.fs-11 { font-size: 11px; } .fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; }

/* Footer */
.foot {
  margin-top: 48px; padding: 20px 0;
  border-top: 1px solid var(--hair);
  font-size: 11px; color: var(--ink-3);
  text-align: center;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--hair-strong); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* Tooltip */
#tip {
  position: fixed; pointer-events: none;
  background: var(--bg-ink); color: #fff;
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.4;
  z-index: 1000; display: none; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
#tip .tip-name { font-weight: 600; margin-bottom: 2px; font-family: 'Source Serif 4', serif; font-size: 13px; }
#tip .tip-meta { color: rgba(255,255,255,0.75); font-size: 11px; }

/* ============================================================
   B-38 — Minimalist redesign vocabulary (2026-07)
   Sections sit directly on the page: no cards, no shadows.
   Rhythm = whitespace + one hairline rule under each serif H2.
   Migrated pages use ONLY these classes + tokens; .card & friends
   above stay alive for not-yet-migrated pages (admin, auth, report).
   ============================================================ */

/* Page column. Default 1120px (list pages); .reading = 960px (detail). */
.pg { max-width: 1120px; margin: 0 auto; padding: 20px 4px 40px; }
.pg.reading { max-width: 960px; }

/* Title block */
.eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-4); font-weight: 600; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.pg-title {
  font-family: 'Source Serif 4', serif;
  font-size: 34px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 12px;
}
html[data-theme="terminal"] .pg-title { font-family: 'JetBrains Mono', monospace; font-size: 24px; }
.pg-lede { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0; max-width: 760px; }

/* Section: whitespace above, serif H2 + faint sub on one hairline rule */
.sect { margin-top: 56px; }
.sect-head {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--hair); padding-bottom: 10px;
}
.sect-title {
  font-family: 'Source Serif 4', serif;
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0;
}
html[data-theme="terminal"] .sect-title { font-family: 'JetBrains Mono', monospace; font-size: 15px; }
.sect-note { font-size: 12px; color: var(--ink-4); }
.sect-note.right { margin-left: auto; }
/* Footnote under a section's content */
.footnote { font-size: 11px; color: var(--ink-4); margin-top: 12px; line-height: 1.6; max-width: 720px; }

/* Stat columns: label-under-number, no boxes */
.statline { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 28px; }
.statline .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--bg-ink); font-variant-numeric: tabular-nums; line-height: 1;
}
html[data-theme="terminal"] .statline .v { color: var(--ink); }
.statline .l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-4); font-weight: 500; margin-top: 4px;
}

/* Text tabs: quiet labels, teal underline on the active one */
.ttabs {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--hair); padding-bottom: 0;
}
.ttab {
  padding: 6px 2px 10px; font-size: 13px; font-weight: 500;
  color: var(--ink-4); background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; white-space: nowrap;
}
.ttab:hover { color: var(--ink); }
.ttab.active { color: var(--ceps); font-weight: 600; border-bottom-color: var(--ceps); }
.ttab .n { font-family: 'JetBrains Mono', monospace; opacity: 0.6; font-size: 11px; }

/* Hairline rows (lists/tables without boxes). Column header + rows. */
.hrow-head {
  display: flex; gap: 16px; padding: 10px 4px 6px;
  font-size: 10px; color: var(--ink-4);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.hrow {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 4px; border-bottom: 1px solid var(--hair-row);
  color: var(--bg-ink); transition: background .12s;
}
html[data-theme="terminal"] .hrow { color: var(--ink); }
a.hrow:hover, .hrow.link:hover { background: var(--hover-tint); }
.hrow .grow { flex: 1; min-width: 0; }
.hrow .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .num {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: var(--ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.hrow .num.faint { color: var(--ink-4); }

/* Thin segmented composition bar (group shares etc.) */
.seg-track {
  display: flex; height: 6px; border-radius: 3px; overflow: hidden;
  background: var(--hair-row);
}
.seg-track > span { height: 100%; }

/* Simple value bar on a quiet track */
.mbar { background: var(--hair-row); border-radius: 3px; height: 12px; overflow: hidden; display: flex; }
.mbar > span { height: 100%; }

/* Group dot (political-group colour marker) */
.gdot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grp, var(--ceps)); flex-shrink: 0;
}

/* Underline inputs/selects (search-first pages) */
.uline-input, .uline-select {
  border: none; border-bottom: 1px solid var(--hair-strong);
  background: transparent; border-radius: 0;
  font: inherit; color: var(--ink); padding: 6px 2px;
  outline: none; transition: border-color .15s;
}
.uline-input:focus, .uline-select:focus { border-bottom-color: var(--ceps); }
.uline-input::placeholder { color: var(--ink-4); }

/* Shared list-search bar (see templates/_search.html). Layout only — the
   input reuses .uline-input above. One GET form per list page, filtered
   server-side. */
.search-bar { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.search-bar__icon { color: var(--ink-4); flex-shrink: 0; }
.search-bar__input { min-width: 240px; max-width: 420px; }

/* Chip-select sentence filter — a serif sentence with inline
   dotted-underline <select> "chips". Shared by the dashboard lens and the
   MEPs "who works on a topic?" finder. Pages may JS-auto-size each chip to
   its selected label so the sentence reflows (cosmetic). */
.chip-sentence {
  font-family: 'Source Serif 4', serif;
  font-size: 30px; line-height: 1.6; letter-spacing: -0.012em;
  font-weight: 500; color: var(--bg-ink);
}
html[data-theme="terminal"] .chip-sentence { font-family: 'JetBrains Mono', monospace; }
.chip-sentence .muted { color: var(--ink-4); }
select.chip-sel {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  display: inline; padding: 0 20px 1px 2px; margin: 0;
  border: none; border-bottom: 2px dotted rgba(0,102,94,0.45); border-radius: 0;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%2300665E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center;
  font-family: 'Source Serif 4', serif; font-size: 30px; font-weight: 600;
  letter-spacing: -0.012em; color: var(--ceps); cursor: pointer;
  line-height: 1.3; transition: border-color .15s; outline: none;
}
select.chip-sel.active, select.chip-sel:focus { border-bottom: 2px solid var(--ceps); }
/* NB: macOS renders the native <select> popup at the OS level and ignores
   option font-size, so the open list can't be shrunk with CSS. chip-select.js
   progressively replaces the native popup with the custom .chipdd dropdown
   below (compact list, large closed chip). This rule is only a non-macOS
   fallback for the un-enhanced native select. */
select.chip-sel option {
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--ink);
}
@media (max-width: 720px) { .chip-sentence, select.chip-sel { font-size: 20px; } }

/* Custom chip dropdown (chip-select.js enhances select.chip-sel into this):
   the trigger keeps the large serif chip look; the open list is a compact
   Inter menu at a sane size, cross-platform. */
select.chip-sel.enhanced { display: none; }
.chipdd { position: relative; display: inline; }
.chipdd-trigger {
  display: inline; cursor: pointer; margin: 0;
  padding: 0 20px 1px 2px; border: none; border-radius: 0;
  border-bottom: 2px dotted rgba(0,102,94,0.45); background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' fill='none' stroke='%2300665E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center;
  font-family: 'Source Serif 4', serif; font-size: 30px; font-weight: 600;
  letter-spacing: -0.012em; color: var(--ceps); line-height: 1.3;
}
html[data-theme="terminal"] .chipdd-trigger { font-family: 'JetBrains Mono', monospace; }
.chipdd-trigger.active, .chipdd.open .chipdd-trigger { border-bottom-style: solid; }
.chipdd-list {
  position: absolute; top: 100%; left: 0; z-index: 70; margin-top: 5px;
  min-width: 200px; max-width: 380px; max-height: 340px; overflow-y: auto;
  padding: 4px 0; background: var(--bg-card);
  border: 1px solid var(--hair); border-top: 2px solid var(--ceps);
  box-shadow: 0 12px 28px -14px rgba(20,36,31,0.28);
}
.chipdd-opt {
  padding: 6px 14px; font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  white-space: nowrap; cursor: pointer;
}
.chipdd-opt:hover { background: var(--hover-tint); }
.chipdd-opt.sel { color: var(--ceps); font-weight: 600; }
@media (max-width: 720px) { .chipdd-trigger { font-size: 20px; } }

/* ============================================================
   TREE DIAGRAM (.tree*) — the /admin/pipeline/map truth-tree
   ------------------------------------------------------------
   A node-link diagram of the ingestion pipeline: root → source →
   script → table → transform/consumer. Rendered as inline SVG so
   the nodes inherit these tokens (and therefore themes) instead of
   carrying colours in JavaScript.

   Encoding, kept in one place so the legend and the diagram agree:
     · node FILL   = data freshness  (positive / warn / neg / ink-4)
     · node STROKE = wiring reality  (positive auto, accent timer,
                                      warn manual, hair local-only)
     · node SHAPE  = kind (circle source, square script,
                     diamond table, small square transform,
                     dot consumer) — set by the markup, not here.
   ============================================================ */
.tree-stage {
  position: relative;
  border: 1px solid var(--hair); border-radius: 8px;
  background: var(--bg-card);
  overflow: hidden;                /* the SVG pans inside; page never scrolls */
  touch-action: none;              /* wheel/drag belong to the diagram */
}
.tree-stage svg { display: block; width: 100%; height: 100%; cursor: grab; }
.tree-stage svg.grabbing { cursor: grabbing; }

/* Links: hairlines, so the nodes carry the meaning. */
.tree-link { fill: none; stroke: var(--hair-strong); stroke-width: 1.2px; }
.tree-link.dim { stroke: var(--hair); opacity: 0.45; }

/* Node group: the hit area is the whole group. */
.tree-node { cursor: pointer; }
.tree-node .shape {
  stroke-width: 2px; stroke: var(--hair);
  transition: fill 0.12s ease, stroke 0.12s ease;
}
.tree-node.dim { opacity: 0.28; }
.tree-node.match .label { fill: var(--accent); font-weight: 650; }
.tree-node.selected .shape { stroke: var(--ceps); stroke-width: 3px; }

/* Freshness → fill */
.tree-node.f-fresh   .shape { fill: var(--positive); }
.tree-node.f-warn    .shape { fill: var(--warn); }
.tree-node.f-stale   .shape { fill: var(--neg); }
.tree-node.f-unknown .shape { fill: var(--ink-4); }
.tree-node.f-none    .shape { fill: var(--bg-card); }

/* Wiring → stroke */
.tree-node.w-auto   .shape { stroke: var(--positive); }
.tree-node.w-timer  .shape { stroke: var(--accent); }
.tree-node.w-manual .shape { stroke: var(--warn); }
.tree-node.w-local  .shape { stroke: var(--hair-strong); }
.tree-node.w-orphan .shape { stroke: var(--neg); stroke-dasharray: 3 2; }

.tree-node .label {
  font-family: 'Inter', sans-serif; font-size: 12px;
  fill: var(--ink); dominant-baseline: middle;
}
.tree-node .label.mono-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
}
.tree-node .sublabel { font-size: 10.5px; fill: var(--ink-3); dominant-baseline: middle; }
.tree-node .badge-bg { fill: var(--bg-tint); stroke: var(--hair); stroke-width: 1px; }
.tree-node .badge-tx {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9.5px;
  fill: var(--ink-3); text-anchor: middle; dominant-baseline: middle;
}

/* Management bar above the stage */
.tree-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.tree-bar .grow { flex: 1; }
.tree-search {
  font-family: 'Inter', sans-serif; font-size: 12.5px;
  padding: 5px 10px; width: 230px;
  border: 1px solid var(--hair); border-radius: 6px;
  background: var(--bg-card); color: var(--ink);
}
.tree-fpill {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--hair); background: var(--bg-card); color: var(--ink-3);
  cursor: pointer;
}
.tree-fpill[aria-pressed="true"] {
  border-color: var(--ceps); color: var(--ceps); background: var(--bg-tint);
}
.tree-txtbtn {
  border: 0; background: none; padding: 3px 2px;
  font-size: 11.5px; color: var(--accent); cursor: pointer;
}

/* Legend — the encoding, spelled out beside the diagram */
.tree-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--ink-3); padding: 8px 2px 0;
}
.tree-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tree-legend i {
  width: 9px; height: 9px; border: 2px solid var(--hair); background: var(--bg-card);
  display: inline-block;
}
.tree-legend i.rounded { border-radius: 50%; }
.tree-legend i.diamond { transform: rotate(45deg); }
.tree-legend i.f-fresh { background: var(--positive); border-color: var(--positive); }
.tree-legend i.f-warn  { background: var(--warn); border-color: var(--warn); }
.tree-legend i.f-stale { background: var(--neg); border-color: var(--neg); }
.tree-legend i.f-unknown { background: var(--ink-4); border-color: var(--ink-4); }

/* Detail panel: the management layer for the selected node */
.tree-panel { font-size: 12.5px; }
.tree-panel .pnl-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-4); font-weight: 600;
}
.tree-panel .pnl-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--ink); font-weight: 600;
  word-break: break-all; margin: 2px 0 8px;
}
.tree-panel dl { display: grid; grid-template-columns: 74px 1fr; gap: 3px 10px; margin: 0; }
.tree-panel dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-4); padding-top: 2px;
}
.tree-panel dd { margin: 0; color: var(--ink-2); }
.tree-panel dd a { color: var(--ceps); }
.tree-panel .empty { color: var(--ink-3); font-style: italic; }
.tree-chip {
  display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px;
  border: 1px solid var(--hair); border-radius: 5px; background: var(--bg-card);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  color: var(--ink-2);
}
.tree-chip .prov { font-family: 'Inter', sans-serif; color: var(--ink-4); }
.tree-chip .prov.pushed { color: var(--ceps); }

@media (max-width: 900px) {
  .tree-split { grid-template-columns: 1fr !important; }
}

/* ----- Pipeline self-inspection banner (.insp*) -----------------------
   The verdict strip above the tree on /admin/pipeline/map: when the program
   last looked at the pipeline, whether anything is wrong, and — the part a
   single snapshot cannot give you — what is NEW since the previous look.
   Severity colour comes from the left border only; the strip stays quiet
   enough to sit above a diagram without competing with it. */
.insp {
  border: 1px solid var(--hair); border-left: 3px solid var(--ink-4);
  border-radius: 6px; background: var(--bg-tint);
  padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px;
}
.insp-ok      { border-left-color: var(--positive); }
.insp-warn    { border-left-color: var(--warn); }
.insp-problem { border-left-color: var(--neg); }

.insp-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.insp-verdict { font-weight: 650; color: var(--ink); font-size: 13px; }
.insp-ok      .insp-verdict { color: var(--positive); }
.insp-warn    .insp-verdict { color: var(--warn); }
.insp-problem .insp-verdict { color: var(--neg); }
.insp-when { color: var(--ink-3); font-size: 11.5px; }

.insp-new { margin-top: 7px; color: var(--ink-2); }
.insp-quiet { color: var(--ink-3); }

.insp-finding { margin-top: 5px; }
.insp-finding > summary {
  cursor: pointer; padding: 3px 0; color: var(--ink-2);
  display: flex; gap: 8px; align-items: baseline;
}
.insp-finding > summary:hover { color: var(--ink); }
.insp-sev {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; padding: 1px 6px; border-radius: 3px;
  border: 1px solid currentColor;
}
.insp-sev-problem { color: var(--neg); }
.insp-sev-warn    { color: var(--warn); }
.insp-count { margin-left: auto; color: var(--ink-3); font-size: 11.5px; }
.insp-body { padding: 4px 0 8px 14px; }
.insp-body p { margin: 0 0 6px; color: var(--ink-3); max-width: 78ch; }
.insp-foot {
  margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--hair);
  font-size: 11px; color: var(--ink-3);
}
.insp-foot a { color: var(--ceps); }