/* ============================================================================
   PGE Design System — pge.css
   Version 1.0 · direction "1a Modern SaaS"
   Source of truth: /handoff/DESIGN_SYSTEM.md in the design-system handoff.

   Structure
     §1   Tokens (:root)
     §2   Base / reset / typography
     §3   Layout shell — top bar, secondary tool nav, live tape, page header
     §4   Cards & panels
     §5   KPI tiles
     §6   Buttons & CTAs
     §7   Form fields
     §8   Badges & pills
     §9   Tables
     §10  Signal bars, gauges, sparklines, chokepoint rail (data-viz primitives)
     §11  Signal-tier utilities (calm / watch / elevated / alarm / flat)
     §12  Utility helpers
     §13  Motion primitives (pulse, live tape)
     §14  Compat shims — legacy .pge-* classes used by existing templates
     §15  Responsive
   ============================================================================ */

/* §1 --------------------------------------------------------------- Tokens -- */
:root {
  /* Surfaces */
  --pge-page:        #f5f4f0;
  --pge-card:        #ffffff;
  --pge-subtle:      #fbfaf7;
  --pge-hairline:    #e7e5df;
  --pge-hairline-2:  #f0eee9;
  --pge-ink-strip:   #14171c;      /* live tape background */

  /* Text */
  --pge-ink:         #14171c;
  --pge-muted:       #5b6470;
  --pge-faint:       #8a929e;

  /* Brand accent */
  --pge-accent:      #2f5fe0;
  --pge-accent-soft: #eef2fd;
  --pge-accent-ring: #e3e8f6;

  /* Signal palette */
  --pge-calm:        #157f4f;
  --pge-watch:       #b07d12;
  --pge-elevated:    #cf6412;
  --pge-alarm:       #c02626;
  --pge-flat:        #9aa4b0;

  --pge-calm-bg:     #e9f3ec;
  --pge-watch-bg:    #fbf2e3;
  --pge-elevated-bg: #fbeee2;
  --pge-alarm-bg:    #fbe9e9;

  /* Financial semantics — reuse signal */
  --pge-pos:         #157f4f;
  --pge-neg:         #c02626;

  /* Radii */
  --pge-r-card: 12px;
  --pge-r-ctrl: 8px;
  --pge-r-chip: 6px;
  --pge-r-bar:  3px;

  /* Elevation — reserved for CTAs and the login card */
  --pge-shadow: 0 8px 30px rgba(20,23,28,.06);

  /* Type stack */
  --pge-font-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Helvetica, Arial, sans-serif;
  --pge-font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular",
                    "Cascadia Mono", Menlo, Consolas, "Courier New", monospace;

  /* Pico v2 hooks — retint Pico defaults so existing pico-styled pages
     inherit the new palette without any template edits. */
  --pico-font-family:       var(--pge-font-sans);
  --pico-background-color:  var(--pge-page);
  --pico-color:             var(--pge-ink);
  --pico-h1-color:          var(--pge-ink);
  --pico-h2-color:          var(--pge-ink);
  --pico-h3-color:          var(--pge-ink);
  --pico-h4-color:          var(--pge-ink);
  --pico-muted-color:       var(--pge-muted);
  --pico-muted-border-color:var(--pge-hairline);
  --pico-primary:           var(--pge-accent);
  --pico-primary-hover:     #1f4dcf;
  --pico-primary-focus:     rgba(47,95,224,.20);
  --pico-primary-background: var(--pge-accent);
  --pico-primary-hover-background: #1f4dcf;
  --pico-primary-border:    var(--pge-accent);
  --pico-primary-inverse:   #fff;
  --pico-card-box-shadow:   none;
  --pico-border-radius:     var(--pge-r-ctrl);
}

/* §2 -------------------------------------------------------- Base & type -- */
html { background: var(--pge-page); }
body {
  font-family: var(--pge-font-sans);
  color: var(--pge-ink);
  background: var(--pge-page);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--pge-font-sans);
  color: var(--pge-ink);
  letter-spacing: -.015em;
  margin: 0 0 .6rem;
}
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

/* Every number in the app goes mono. Templates that mark values with
   .pge-num get the mono face + tabular figures automatically. */
.pge-num, .pge-mono, code, kbd, samp, tt, pre {
  font-family: var(--pge-font-mono);
  font-variant-numeric: tabular-nums;
}

.pge-eyebrow {
  font-family: var(--pge-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pge-faint);
}

a { color: var(--pge-accent); text-decoration-color: rgba(47,95,224,.35); }
a:hover { color: #1f4dcf; }

main.container, .container { max-width: 1360px; padding: 0 26px; margin: 0 auto; }

/* §3 ------------------------------------------------------- Layout shell -- */
.pge-topbar {
  background: var(--pge-card);
  border-bottom: 1px solid var(--pge-hairline);
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pge-topbar-left { display: flex; align-items: center; gap: 22px; min-width: 0; }
.pge-logo {
  width: 34px; height: 34px;
  background: var(--pge-ink); color: #fff;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--pge-font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  flex-shrink: 0;
}
.pge-nav-primary,
.pge-nav-util { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pge-nav-primary { font-size: 13.5px; }
.pge-nav-primary a { color: var(--pge-muted); text-decoration: none; font-weight: 500; }
.pge-nav-primary a:hover { color: var(--pge-ink); }
.pge-nav-primary a.active,
.pge-nav-primary li.active a { color: var(--pge-accent); font-weight: 600; }
.pge-nav-util { font-size: 12.5px; }
.pge-nav-util a { color: var(--pge-muted); text-decoration: none; font-weight: 500; }
.pge-nav-util a:hover { color: var(--pge-ink); }
.pge-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--pge-accent-soft); color: var(--pge-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--pge-font-mono);
  font-size: 11.5px; font-weight: 600;
  flex-shrink: 0;
}

.pge-toolnav {
  background: var(--pge-subtle);
  border-bottom: 1px solid var(--pge-hairline);
  padding: 9px 26px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  font-family: var(--pge-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .6px; text-transform: uppercase;
}
.pge-toolnav a { color: var(--pge-faint); text-decoration: none; }
.pge-toolnav a:hover { color: var(--pge-ink); }
.pge-toolnav a.active { color: var(--pge-accent); font-weight: 700; }
.pge-toolnav .pge-alert-dot {
  display: inline-block; width: 6px; height: 6px; background: var(--pge-alarm);
  border-radius: 50%; margin-left: 5px; vertical-align: middle;
  animation: pge-pulse 1.6s infinite;
}

.pge-livetape {
  background: var(--pge-ink-strip); color: #fff;
  padding: 10px 20px;
  overflow: hidden; white-space: nowrap;
  font-family: var(--pge-font-mono);
  font-size: 12px;
  display: flex; align-items: center; gap: 18px;
  border-radius: var(--pge-r-card);
  margin: 8px 0 4px;
}
.pge-livetape-live {
  background: var(--pge-alarm); color: #fff;
  font-weight: 700; font-size: 10px; letter-spacing: .7px;
  padding: 2px 9px; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.pge-livetape-dot {
  display: inline-block; width: 6px; height: 6px; background: #fff;
  border-radius: 50%; animation: pge-pulse 1.6s infinite;
}
.pge-livetape-track {
  display: inline-flex; gap: 22px; align-items: center;
  min-width: max-content;   /* keep full width so translateX slides */
  animation: pge-marquee 36s linear infinite;
}
.pge-livetape:hover .pge-livetape-track { animation-play-state: paused; }
.pge-livetape-item { color: #c5cad3; }
.pge-livetape-item strong { color: #fff; margin-left: 4px; font-weight: 600; }
.pge-livetape-item.calm  strong { color: #8ec9a3; }
.pge-livetape-item.watch strong { color: #e8c48d; }
.pge-livetape-item.alarm strong { color: #f0a3a3; }
.pge-livetape-item.flat  strong { color: #c5cad3; }

.pge-pageheader {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; padding: 24px 0 18px; margin-bottom: 10px;
}
.pge-pageheader h1 { margin: 4px 0 6px; }
.pge-pageheader p {
  margin: 0; color: var(--pge-muted); font-size: 13.5px;
  max-width: 720px; line-height: 1.5;
}
.pge-pageheader-meta {
  font-family: var(--pge-font-mono); font-size: 11px;
  color: var(--pge-faint); letter-spacing: .4px;
  text-align: right; white-space: nowrap;
}

/* §4 ----------------------------------------------------- Cards & panels -- */
.pge-card, article {
  background: var(--pge-card);
  border: 1px solid var(--pge-hairline);
  border-radius: var(--pge-r-card);
  padding: 18px 20px;
  box-shadow: none;
}
.pge-card > h2, .pge-card > h3, .pge-card-title {
  font-size: 14px; font-weight: 600; color: var(--pge-ink);
  margin: 0 0 12px; letter-spacing: -.1px;
  display: flex; align-items: center; gap: 8px;
}
.pge-card-title .pge-tick {
  display: inline-block; width: 3px; height: 15px;
  background: var(--pge-accent); border-radius: 2px;
}
.pge-card.pge-alarm {
  border-top: 3px solid var(--pge-alarm);
  border-radius: 0 0 var(--pge-r-card) var(--pge-r-card);
}
.pge-card.pge-watch    { border-top: 3px solid var(--pge-watch); border-radius: 0 0 var(--pge-r-card) var(--pge-r-card); }
.pge-card.pge-elevated { border-top: 3px solid var(--pge-elevated); border-radius: 0 0 var(--pge-r-card) var(--pge-r-card); }
.pge-card.pge-calm     { border-top: 3px solid var(--pge-calm); border-radius: 0 0 var(--pge-r-card) var(--pge-r-card); }

/* §5 --------------------------------------------------------- KPI tiles -- */
.pge-kpi-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0 0 18px;
}
.pge-kpi {
  background: var(--pge-card);
  border: 1px solid var(--pge-hairline);
  border-radius: 10px;
  padding: 12px 14px;
}
.pge-kpi-lbl {
  font-family: var(--pge-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--pge-faint);
  margin-bottom: 5px;
}
.pge-kpi-num {
  font-family: var(--pge-font-mono);
  font-size: 26px; font-weight: 600; line-height: 1;
  letter-spacing: -.4px; color: var(--pge-ink);
}
.pge-kpi-sub {
  font-size: 11.5px; color: var(--pge-muted); margin-top: 5px;
}
.pge-kpi.calm .pge-kpi-num     { color: var(--pge-calm); }
.pge-kpi.watch .pge-kpi-num    { color: var(--pge-watch); }
.pge-kpi.elevated .pge-kpi-num { color: var(--pge-elevated); }
.pge-kpi.alarm .pge-kpi-num    { color: var(--pge-alarm); }
.pge-kpi.flat .pge-kpi-num     { color: var(--pge-flat); }

/* §6 ----------------------------------------------------------- Buttons -- */
button, [role="button"], input[type="submit"], .pge-btn {
  font-family: var(--pge-font-sans);
  font-size: 13px; font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--pge-r-ctrl);
  border: 1px solid var(--pge-accent);
  background: var(--pge-accent); color: #fff;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
button:hover, [role="button"]:hover, input[type="submit"]:hover, .pge-btn:hover {
  background: #1f4dcf; border-color: #1f4dcf; color: #fff;
}
.pge-btn.dark, button.dark { background: var(--pge-ink); border-color: var(--pge-ink); }
.pge-btn.dark:hover, button.dark:hover { background: #000; border-color: #000; }

button.secondary, [role="button"].secondary, .pge-btn.secondary,
button.outline, [role="button"].outline, .pge-btn.outline {
  background: var(--pge-card); color: var(--pge-ink);
  border: 1px solid #cfcbc2;
}
button.secondary:hover, [role="button"].secondary:hover, .pge-btn.secondary:hover,
button.outline:hover, [role="button"].outline:hover, .pge-btn.outline:hover {
  background: var(--pge-subtle); color: var(--pge-ink);
  border-color: var(--pge-ink);
}
button.pge-danger, [role="button"].pge-danger, .pge-btn.danger {
  background: var(--pge-card); color: var(--pge-alarm);
  border: 1px solid #e6c3c3;
}
button.pge-danger:hover, .pge-btn.danger:hover {
  background: var(--pge-alarm-bg); border-color: var(--pge-alarm); color: var(--pge-alarm);
}

.pge-btn-cta {
  display: block; width: 100%;
  background: var(--pge-accent-soft); color: var(--pge-accent);
  border: 1px solid #d5e0fb; border-radius: 9px;
  padding: 12px 16px;
  font-family: var(--pge-font-sans); font-size: 13.5px; font-weight: 600;
  text-align: left; text-decoration: none;
}
.pge-btn-cta:hover { background: #e2ebfe; color: var(--pge-accent); }

/* §7 ------------------------------------------------------ Form fields -- */
input:not([type="submit"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select, textarea, .pge-input {
  font-family: var(--pge-font-sans);
  font-size: 13.5px;
  background: var(--pge-card);
  color: var(--pge-ink);
  border: 1px solid #cfcbc2;
  border-radius: var(--pge-r-ctrl);
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus, .pge-input:focus {
  outline: none;
  border: 1.5px solid var(--pge-accent);
  box-shadow: 0 0 0 3px var(--pge-accent-ring);
}
label { font-size: 13px; color: var(--pge-ink); }
label > small.pge-eyebrow,
label .pge-eyebrow { display: block; margin-bottom: 4px; }

/* §8 ---------------------------------------------------- Badges & pills -- */
.pge-pill, .pge-badge {
  display: inline-block;
  font-family: var(--pge-font-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--pge-r-chip);
  background: #eef1f4; color: var(--pge-muted);
}
.pge-pill.domain-military,    .pge-badge.domain-military    { background: var(--pge-alarm-bg);    color: var(--pge-alarm); }
.pge-pill.domain-economic,    .pge-badge.domain-economic    { background: var(--pge-calm-bg);     color: var(--pge-calm); }
.pge-pill.domain-resource,    .pge-badge.domain-resource    { background: var(--pge-watch-bg);    color: var(--pge-watch); }
.pge-pill.domain-mixed,       .pge-badge.domain-mixed       { background: #eef1f4;                color: #46536b; }
.pge-pill.domain-demographic, .pge-badge.domain-demographic { background: #eef1f4;                color: var(--pge-muted); }
.pge-pill.status-active,      .pge-badge.status-active      { background: var(--pge-calm-bg);     color: var(--pge-calm); }
.pge-pill.status-resolved,    .pge-badge.status-resolved    { background: #eef1f4;                color: var(--pge-muted); }
.pge-pill.status-dnh,         .pge-badge.status-dnh         { background: #f3f1ec;                color: var(--pge-faint); }
.pge-pill.calm,     .pge-badge.calm     { background: var(--pge-calm-bg);     color: var(--pge-calm); }
.pge-pill.watch,    .pge-badge.watch    { background: var(--pge-watch-bg);    color: var(--pge-watch); }
.pge-pill.elevated, .pge-badge.elevated { background: var(--pge-elevated-bg); color: var(--pge-elevated); }
.pge-pill.alarm,    .pge-badge.alarm    { background: var(--pge-alarm-bg);    color: var(--pge-alarm); }
.pge-pill.flat,     .pge-badge.flat     { background: #eef1f4;                color: var(--pge-flat); }

/* Legacy semantic badge aliases (kept for issue-list markup). */
.pge-badge.success, .pge-pill.success { background: var(--pge-calm-bg);  color: var(--pge-calm); }
.pge-badge.danger,  .pge-pill.danger  { background: var(--pge-alarm-bg); color: var(--pge-alarm); }
.pge-badge.info,    .pge-pill.info    { background: var(--pge-accent-soft); color: var(--pge-accent); }
.pge-badge.muted,   .pge-pill.muted   { background: #eef1f4; color: var(--pge-muted); }
.pge-badge.warning, .pge-pill.warning { background: var(--pge-watch-bg); color: var(--pge-watch); }
.pge-badge.solid-navy, .pge-pill.solid-navy { background: var(--pge-ink); color: #fff; }

/* Actor-type pills — one colour per stakeholder category.
   state = navy (formal sovereign), individual = accent blue (a person),
   org = calm green (institution), non_state = alarm red (armed group),
   bloc = elevated orange (multi-state coalition). */
.pge-pill.type-state,      .pge-badge.type-state      { background: #e6ebf3;                color: #2a3a55; }
.pge-pill.type-individual, .pge-badge.type-individual { background: var(--pge-accent-soft); color: var(--pge-accent); }
.pge-pill.type-org,        .pge-badge.type-org        { background: var(--pge-calm-bg);     color: var(--pge-calm); }
.pge-pill.type-non_state,  .pge-badge.type-non_state  { background: var(--pge-alarm-bg);    color: var(--pge-alarm); }
.pge-pill.type-bloc,       .pge-badge.type-bloc       { background: var(--pge-elevated-bg); color: var(--pge-elevated); }

/* §9 ------------------------------------------------------------ Tables -- */
table.pge-list, table.pge-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--pge-card);
  border: 1px solid var(--pge-hairline);
  border-radius: var(--pge-r-card);
  overflow: hidden;
}
table.pge-list thead th, table.pge-table thead th {
  background: var(--pge-subtle);
  font-family: var(--pge-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--pge-faint);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pge-hairline);
}
table.pge-list tbody td, table.pge-table tbody td {
  font-size: 13.5px; color: var(--pge-muted);
  padding: 11px 14px;
  border-bottom: 1px solid var(--pge-hairline-2);
}
table.pge-list tbody td:first-child { color: var(--pge-ink); font-weight: 600; }
table.pge-list tbody tr:nth-child(even),
table.pge-table tbody tr:nth-child(even) { background: var(--pge-subtle); }
table.pge-list tbody tr:hover,
table.pge-table tbody tr:hover { background: #f4f2ec; }
table.pge-list tbody td.pge-num, table.pge-table tbody td.pge-num { text-align: right; }
table.pge-list tbody tr:last-child td,
table.pge-table tbody tr:last-child td { border-bottom: none; }

/* §10 ------------------------------------------ Data-viz primitives ------ */
.pge-signal-row {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 130px 1fr 60px;
  padding: 8px 0; border-bottom: 1px solid var(--pge-hairline-2);
  font-size: 12.5px;
}
.pge-signal-row:last-child { border-bottom: none; }
.pge-signal-row .pge-signal-lbl { color: var(--pge-ink); font-weight: 500; }
.pge-signal-track {
  position: relative; height: 6px; background: #f3f1ec; border-radius: var(--pge-r-bar);
}
.pge-signal-track::before {
  content: ""; position: absolute; left: 50%; top: -1px;
  width: 1px; height: 8px; background: #cfcbc2;
}
.pge-signal-fill { position: absolute; top: 0; height: 6px; border-radius: var(--pge-r-bar); }
.pge-signal-val {
  font-family: var(--pge-font-mono); font-size: 12.5px; font-weight: 600;
  text-align: right;
}

.pge-gauge { display: inline-block; text-align: center; }
.pge-gauge svg { display: block; }
.pge-gauge-num {
  font-family: var(--pge-font-mono); font-weight: 600;
  font-size: 22px; margin-top: -8px;
}

.pge-sparkline { display: inline-block; vertical-align: middle; }
.pge-sparkline polyline { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.pge-chokepoint-rail {
  position: relative; height: 44px; margin: 6px 0 10px;
  border-bottom: 1px solid var(--pge-hairline);
}
.pge-chokepoint-rail .cp-dot {
  position: absolute; top: 12px;
  border-radius: 50%; box-shadow: 0 0 0 3px rgba(255,255,255,.85);
  transform: translate(-50%, -50%);
}

/* §11 -------------------------------------------- Signal-tier colors ----- */
.tier-calm,     .pge-calm-fg     { color: var(--pge-calm); }
.tier-watch,    .pge-watch-fg    { color: var(--pge-watch); }
.tier-elevated, .pge-elevated-fg { color: var(--pge-elevated); }
.tier-alarm,    .pge-alarm-fg    { color: var(--pge-alarm); }
.tier-flat,     .pge-flat-fg     { color: var(--pge-flat); }

.tier-calm-bg     { background: var(--pge-calm-bg); }
/* Full-row background tints for tables (very subtle — never overpower). */
tr.tier-calm-row  > td { background: rgba(21, 127, 79, 0.045); }
tr.tier-watch-row > td { background: rgba(176, 125, 18, 0.055); }
tr.tier-alarm-row > td { background: rgba(192, 38, 38, 0.055); }
.tier-watch-bg    { background: var(--pge-watch-bg); }
.tier-elevated-bg { background: var(--pge-elevated-bg); }
.tier-alarm-bg    { background: var(--pge-alarm-bg); }
.tier-flat-bg     { background: #eef1f4; }

/* Portfolio semantics — reuse signal green/red */
.pge-pos { color: var(--pge-pos); }
.pge-neg { color: var(--pge-neg); }

/* §12 --------------------------------------------------------- Utility -- */
.pge-muted { color: var(--pge-muted); }
.pge-faint { color: var(--pge-faint); }
.pge-ink   { color: var(--pge-ink); }
.pge-hair  { border-color: var(--pge-hairline); }
.pge-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pge-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pge-flex   { display: flex; gap: 12px; align-items: center; }
.pge-space  { flex: 1; }

/* §13 --------------------------------------------------------- Motion --- */
@keyframes pge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
@keyframes pge-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.pge-pulse { animation: pge-pulse 1.6s infinite; }

/* §14 --------------------------------------- Compat shims (legacy classes) -
   Existing templates use .pge-nav-brand, .pge-nav-2row, .pge-footer, etc.
   Bind them to the new tokens so no per-template edit is required yet. */
nav.pge-nav-2row {
  display: block !important;   /* override Pico's flex on <nav> */
  background: var(--pge-card);
  border-bottom: 1px solid var(--pge-hairline);
  padding: 0;
}
nav.pge-nav-2row .pge-nav-row {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 26px; max-width: 1360px; margin: 0 auto;
  flex-wrap: wrap;
}
nav.pge-nav-2row .pge-nav-row ul {
  display: flex; align-items: center; gap: 18px;
  list-style: none; margin: 0; padding: 0; flex-wrap: wrap;
}
nav.pge-nav-2row .pge-nav-row ul li { margin: 0; padding: 0; }
nav.pge-nav-2row .pge-nav-row-2 {
  padding: 9px 26px; background: var(--pge-subtle);
  border-top: 1px solid var(--pge-hairline);
}
nav.pge-nav-2row ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
nav.pge-nav-2row .pge-nav-brand strong {
  background: var(--pge-ink); color: #fff;
  padding: 4px 10px; border-radius: 6px;
  font-family: var(--pge-font-mono); font-weight: 700; letter-spacing: .5px;
  font-size: 12px;
}
nav.pge-nav-2row .pge-nav-primary { margin-right: auto; }
nav.pge-nav-2row .pge-nav-primary a {
  color: var(--pge-muted); text-decoration: none;
  font-family: var(--pge-font-sans); font-size: 13.5px; font-weight: 500;
}
nav.pge-nav-2row .pge-nav-primary a:hover { color: var(--pge-ink); }
nav.pge-nav-2row .pge-nav-util a {
  color: var(--pge-muted); text-decoration: none;
  font-size: 12.5px; font-weight: 500;
}
nav.pge-nav-2row .pge-nav-util a:hover { color: var(--pge-ink); }
nav.pge-nav-2row .pge-nav-secondary {
  font-family: var(--pge-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .6px; text-transform: uppercase;
}
nav.pge-nav-2row .pge-nav-secondary a { color: var(--pge-faint); text-decoration: none; }
nav.pge-nav-2row .pge-nav-secondary a:hover { color: var(--pge-ink); }

footer.pge-footer {
  padding: 30px 26px; margin-top: 30px;
  border-top: 1px solid var(--pge-hairline);
  color: var(--pge-faint);
  font-family: var(--pge-font-mono); font-size: 11px; letter-spacing: .5px;
}
footer.pge-footer .pge-footer-row {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 20px; flex-wrap: wrap;
}
footer.pge-footer .pge-footer-row > small { display: inline-block; }
footer.pge-footer .pge-footer-freshness {
  color: var(--pge-muted);
  margin-left: auto;   /* belt + braces — pushes to the right edge */
  text-align: right;
}

.pge-error { color: var(--pge-alarm); font-weight: 500; }

/* Issue cards — one per issue on the home page, with a domain-tinted
   left border and a matching mono chip. Colours use the tier palette
   for the four domains (M/E/D/R) so the whole app stays coherent. */
.pge-issue-card {
  background: var(--pge-card);
  border: 1px solid var(--pge-hairline);
  border-left: 4px solid var(--pge-flat);
  border-radius: var(--pge-r-card);
  padding: 14px 18px;
  margin: 14px 0;
}
.pge-issue-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--pge-hairline-2);
}
.pge-issue-card-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.pge-issue-name {
  color: var(--pge-ink); text-decoration: none; font-weight: 600;
  font-size: 15.5px;
}
.pge-issue-name:hover { color: var(--pge-accent); }
.pge-issue-meta {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pge-domain-badge {
  display: inline-block; width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 4px;
  font-family: var(--pge-font-mono); font-size: 11px; font-weight: 700;
  color: #fff;
}
.pge-issue-domain-tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--pge-r-chip);
  font-family: var(--pge-font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
}
.pge-issue-hyp-count {
  font-family: var(--pge-font-mono); font-size: 11px;
  color: var(--pge-muted);
}
.pge-issue-card-actions { display: inline-flex; gap: 8px; }

.pge-issue-card-m     { border-left-color: var(--pge-alarm); }
.pge-issue-card-e     { border-left-color: var(--pge-calm); }
.pge-issue-card-d     { border-left-color: var(--pge-accent); }
.pge-issue-card-r     { border-left-color: var(--pge-watch); }
.pge-issue-card-mixed { border-left-color: var(--pge-ink); }
.pge-domain-badge-m     { background: var(--pge-alarm); }
.pge-domain-badge-e     { background: var(--pge-calm); }
.pge-domain-badge-d     { background: var(--pge-accent); }
.pge-domain-badge-r     { background: var(--pge-watch); }
.pge-domain-badge-mixed { background: var(--pge-ink); }
.pge-issue-card-m     .pge-issue-domain-tag { background: var(--pge-alarm-bg);    color: var(--pge-alarm); }
.pge-issue-card-e     .pge-issue-domain-tag { background: var(--pge-calm-bg);     color: var(--pge-calm); }
.pge-issue-card-d     .pge-issue-domain-tag { background: var(--pge-accent-soft); color: var(--pge-accent); }
.pge-issue-card-r     .pge-issue-domain-tag { background: var(--pge-watch-bg);    color: var(--pge-watch); }
.pge-issue-card-mixed .pge-issue-domain-tag { background: #eef1f4;                color: var(--pge-muted); }

/* Inline action-cluster — small buttons side-by-side in a table row. */
.pge-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pge-actions button, .pge-actions [role="button"] {
  padding: 6px 10px; font-size: 12px;
}

/* Full-width search-bar over a table. */
.pge-search-bar {
  width: 100%; margin: 12px 0 10px;
  padding: 10px 14px;
  font-family: var(--pge-font-sans); font-size: 13.5px;
  background: var(--pge-card); color: var(--pge-ink);
  border: 1px solid #cfcbc2; border-radius: var(--pge-r-ctrl);
}
.pge-search-bar:focus { outline: none; border: 1.5px solid var(--pge-accent);
  box-shadow: 0 0 0 3px var(--pge-accent-ring); }

/* Filter bar — a light card with a grid of small controls for
   list-page filtering (Markets, Sanctions, Procurement…). */
.pge-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 12px 16px;
  margin: 12px 0 14px;
  background: var(--pge-subtle);
  border: 1px solid var(--pge-hairline);
  border-radius: var(--pge-r-card);
}
.pge-filter-bar label { margin: 0; }
/* Normalise heights inside filter bars and card forms — Pico's default
   makes <select> ~4px taller than <input> because of the caret icon.
   Force every control to a common box-sizing + height so they align. */
.pge-filter-bar input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.pge-filter-bar select, .pge-filter-bar textarea,
.pge-card > form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.pge-card > form select, .pge-card > form textarea {
  box-sizing: border-box;
  height: 40px;
  padding: 8px 12px;
  line-height: 1.35;
  font-size: 13.5px;
}
.pge-filter-bar textarea, .pge-card > form textarea { height: auto; min-height: 40px; }

/* Muted hint text under form controls. */
.pge-form-hint {
  display: block; margin-top: 6px;
  font-family: var(--pge-font-sans); font-size: 12px; color: var(--pge-muted);
  line-height: 1.45;
}

/* ---------------- Legacy compat shims for un-refactored templates ---
   Every subpage carries `{% set theme = "pge" %}` but many still use
   old class names / <hgroup> markup from the rand.css era. These shims
   keep them looking coherent under pge.css without touching each file. */

hgroup { margin: 0 0 14px; }
hgroup > h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.01em; }
hgroup > h2 { margin: 0 0 4px; font-size: 18px; }
hgroup > p  { margin: 0; color: var(--pge-muted); font-size: 13.5px; }

/* Old KPI-tile class names — alias to the new macro's classes. */
.pge-kpi-label { font-family: var(--pge-font-mono); font-size: 10px;
                 font-weight: 600; letter-spacing: .6px;
                 text-transform: uppercase; color: var(--pge-faint); }
.pge-kpi .pge-kpi-label ~ .pge-kpi-num { color: var(--pge-elevated); }

/* Old .pge-kpi tier modifiers (danger/warning/info/success). */
.pge-kpi.danger  { border-top: 3px solid var(--pge-alarm); }
.pge-kpi.warning { border-top: 3px solid var(--pge-watch); }
.pge-kpi.info    { border-top: 3px solid var(--pge-accent); }
.pge-kpi.success { border-top: 3px solid var(--pge-calm); }

/* Section head style used in movement digest, cross-impact, journal. */
.pge-head {
  font-family: var(--pge-font-sans); font-weight: 600; font-size: 15px;
  color: var(--pge-ink); border-left: 3px solid var(--pge-accent);
  padding: 4px 0 4px 10px; margin: 22px 0 10px;
}
.pge-head.pge-sec-hyp { border-left-color: var(--pge-accent); }
.pge-head.pge-sec-pos { border-left-color: var(--pge-calm); }
.pge-head.pge-sec-wt  { border-left-color: var(--pge-watch); }
.pge-head.pge-sec-gd  { border-left-color: var(--pge-elevated); }

/* Old .pge-sec accordion — keep the summary button legible. */
details.pge-sec > summary[role="button"] {
  border-radius: var(--pge-r-ctrl);
  font-family: var(--pge-font-sans);
}

/* Old .pge-muted-panel / <article> full-width dim panel. */
article.pge-muted, article.pge-muted-panel {
  background: var(--pge-subtle); border: 1px solid var(--pge-hairline);
  color: var(--pge-muted); border-radius: var(--pge-r-card);
  padding: 14px 18px;
}

/* Retint any Tom-Select controls to match. */
.ts-control  { border-radius: var(--pge-r-ctrl) !important; border-color: #cfcbc2 !important; }
.ts-dropdown { border-radius: var(--pge-r-ctrl) !important; }

/* §15 ------------------------------------------------------- Responsive -- */
@media (max-width: 900px) {
  .pge-topbar { flex-wrap: wrap; }
  .pge-nav-primary { gap: 12px; font-size: 12.5px; }
  .pge-toolnav { gap: 12px; font-size: 10px; letter-spacing: .5px; }
  .pge-livetape-item { font-size: 11px; }
  .pge-pageheader { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pge-pageheader-meta { text-align: left; }
}
@media (max-width: 640px) {
  main.container, .container { padding: 0 14px; }
  body { font-size: 14px; }

  /* --- Nav: wrap and shrink both rows -------------------------------- */
  /* Two problems being solved here:
     1. Mobile Safari < 14.5 silently ignores `gap` on flex containers.
     2. The desktop `.pge-nav-primary a` / `.pge-nav-util a` / `.pge-nav-
        secondary a` rules have 3-class specificity and were beating my
        mobile `.pge-nav-row a` rule (2-class). We match specificity now,
        and belt-and-braces with `margin-right` on <li> so even if some
        Pico rule zeroes the anchor padding, the gap survives. */
  nav.pge-nav-2row { padding: 8px 4px; }
  nav.pge-nav-2row .pge-nav-row {
    flex-wrap: wrap; row-gap: 4px;
    padding: 10px 14px;
  }
  nav.pge-nav-2row .pge-nav-row ul {
    flex-wrap: wrap; row-gap: 2px;
  }
  nav.pge-nav-2row .pge-nav-row ul li {
    margin: 0 14px 0 0 !important;   /* the real visible gap */
    padding: 0;
    display: inline-flex; align-items: center;
  }
  nav.pge-nav-2row .pge-nav-row ul li:last-child { margin-right: 0 !important; }

  /* Match the desktop-rule specificity so font-size + touch-padding win. */
  nav.pge-nav-2row .pge-nav-primary a,
  nav.pge-nav-2row .pge-nav-util a,
  nav.pge-nav-2row .pge-nav-brand a {
    display: inline-block;
    padding: 4px 0 !important;
    font-size: 13px !important;
  }
  nav.pge-nav-2row .pge-nav-secondary a {
    display: inline-block;
    padding: 3px 0 !important;
    font-size: 10.5px !important; letter-spacing: .4px;
  }
  nav.pge-nav-2row .pge-nav-row-2 { padding: 8px 14px; }
  /* Row-2 items get a slightly larger between-item gap because caps are
     visually tight. */
  nav.pge-nav-2row .pge-nav-row-2 ul li { margin-right: 16px !important; }
  nav.pge-nav-2row .pge-nav-row-2 ul li:last-child { margin-right: 0 !important; }
  /* Brand chip. */
  nav.pge-nav-2row .pge-nav-brand strong { font-size: 11px; padding: 3px 8px; }

  /* --- Filter bars, KPIs, page header on phones ---------------------- */
  .pge-filter-bar { grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
  .pge-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .pge-signal-row { grid-template-columns: 90px 1fr 50px; gap: 8px; font-size: 12px; }
  .pge-kpi { padding: 10px 12px; }
  .pge-kpi-num { font-size: 22px; }

  /* --- Live tape: shorter items so more fit ------------------------- */
  .pge-livetape { padding: 8px 12px; }
  .pge-livetape-track { gap: 14px; }

  /* --- Page header: smaller title, no forced wrap --------------------- */
  .pge-pageheader h1 { font-size: 20px; }
  .pge-pageheader p  { font-size: 13px; }

  /* --- CARD-MODE TABLES ---
     Every .pge-list table (except .pge-wide) collapses to a stack of
     labelled cards, one per row. The JS in base.html has copied each
     <th> caption onto its <td> as data-label; we render it here.
     Tables that MUST stay tabular (matrix pages, tight numeric grids)
     opt out by adding class="pge-wide".
  ---------------------------------------------------------------------- */
  table.pge-list:not(.pge-wide) {
    border: none; background: transparent; border-radius: 0;
    display: block; width: 100%;
    overflow: visible;   /* let the cards flow, no horizontal scroll */
  }
  table.pge-list:not(.pge-wide) thead { display: none; }
  table.pge-list:not(.pge-wide) tbody,
  table.pge-list:not(.pge-wide) tr,
  table.pge-list:not(.pge-wide) td { display: block; width: 100%; }
  table.pge-list:not(.pge-wide) tr {
    background: var(--pge-card);
    border: 1px solid var(--pge-hairline);
    border-radius: var(--pge-r-card);
    margin: 10px 0; padding: 6px 12px;
    box-sizing: border-box;
  }
  table.pge-list:not(.pge-wide) td {
    padding: 8px 0; border-bottom: 1px solid var(--pge-hairline-2);
    display: flex; align-items: baseline; gap: 10px;
  }
  table.pge-list:not(.pge-wide) td:last-child { border-bottom: none; }
  table.pge-list:not(.pge-wide) td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    font-family: var(--pge-font-mono);
    font-size: 10.5px; font-weight: 600; letter-spacing: .5px;
    text-transform: uppercase; color: var(--pge-faint);
    line-height: 1.5;
  }
  /* Rows with no data-label (empty-state colspan cells) shouldn't
     render an empty label chip. */
  table.pge-list:not(.pge-wide) td[data-label=""]::before,
  table.pge-list:not(.pge-wide) td:not([data-label])::before { display: none; }

  /* --- Issue cards on mobile: shrink padding + stack the header ------ */
  .pge-issue-card { padding: 12px 14px; }
  .pge-issue-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pge-issue-card-actions { align-self: flex-end; }

  /* --- Dashboard grid: single column below tablet ------------------- */
  .pge-dash-grid { grid-template-columns: 1fr; }

  /* --- Footer: stack the two lines, both left-aligned ---------------- */
  footer.pge-footer .pge-footer-row { flex-direction: column; gap: 6px; }
  footer.pge-footer .pge-footer-freshness {
    margin-left: 0; text-align: left;
  }

  /* --- Details/summary in help + accordions: less padding ----------- */
  .pge-help > details > summary { padding: 12px 14px; font-size: 14.5px; }
  .pge-help .pge-help-body { padding: 6px 14px 14px 22px; }
}