/* ============================================================
   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; } }