/* Long Haul Ledger — operator dashboard
   Neutral graphite/slate, one restrained accent (safety orange), tabular numerals.
   US is the editorial anchor, not a design theme: no flag styling, no patriotic palette. */

:root {
  --bg: #0f1215;
  --bg-elev: #151a1e;
  --bg-panel: #1a2025;
  --ink: #e1e5e8;
  --ink-dim: #a3acb4;
  --ink-mute: #7b858d;
  --line: #2a3238;
  --line-soft: #20272c;
  --accent: #d08a45;
  --accent-dim: #9c6a3a;
  --accent-glow: rgba(208, 138, 69, 0.14);
  --map-land: #2b3339;
  --map-land-hover: #3a444c;
  --map-seed: var(--map-land);
  --map-seed-hover: var(--map-land-hover);
  --map-selected: #d08a45;
  --map-ocean: #0b0e10;
  --signal: #9aa5ae;
  --danger-soft: #b0a08c;
  --proto: #c4b8d8;
  --proto-line: #6e6880;
  --radius: 4px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --header-h: 60px;
  --rail-w: 330px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* —— Header —— */
.site-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.6rem 1.25rem;
  min-height: var(--header-h);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 40;
}
.brand { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.brand-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.brand-title {
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0;
}
.brand-tagline {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.header-nav { display: flex; gap: 0.4rem; flex-shrink: 0; }
.hnav {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.38rem 0.65rem;
  text-decoration: none;
  white-space: nowrap;
}
.hnav:hover { color: var(--ink); border-color: var(--ink-mute); text-decoration: none; }
.hnav-primary { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-glow); }
.hnav-primary:hover { color: var(--accent); border-color: var(--accent); }
.header-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
.date-stamp {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 0.32rem 0.5rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
}

/* —— PROTOTYPE badge + explainer (one style everywhere) —— */
.proto-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--proto);
  border: 1px dashed var(--proto-line);
  border-radius: 3px;
  padding: 0.16rem 0.42rem;
  background: repeating-linear-gradient(135deg, rgba(196, 184, 216, 0.07) 0 4px, transparent 4px 8px);
  white-space: nowrap;
  vertical-align: middle;
}
.proto-badge-sm { font-size: 0.55rem; padding: 0.08rem 0.32rem; }
.proto-badge[hidden] { display: none; }
.proto-note {
  margin: 0.15rem 0 0.55rem;
  font-size: 0.76rem;
  color: var(--proto);
  border-left: 2px dashed var(--proto-line);
  padding-left: 0.55rem;
  max-width: 52rem;
}
.proto-callout {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.8rem;
  color: var(--ink-dim);
  border: 1px dashed var(--proto-line);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  margin: 0.6rem 0 0.2rem;
}
.us-callout {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ink);
  border: 1px solid var(--accent-dim);
  border-radius: var(--radius);
  background: var(--accent-glow);
  padding: 0.5rem 0.7rem;
  margin: 0 0 0.6rem;
  max-width: 52rem;
}

.badge-sm {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.12rem 0.32rem;
  border-radius: 3px;
  border: 1px solid var(--line);
  color: var(--ink-mute);
}
.badge-sm.real {
  color: #9fb4c6;
  border-color: #4f6272;
}
.badge-sm.sample {
  color: var(--proto);
  border: 1px dashed var(--proto-line);
}
.badge-sm.kind {
  color: var(--ink-mute);
  border-color: var(--line-soft);
}

/* —— Layout —— */
.main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr var(--rail-w);
  grid-template-rows: minmax(280px, 42vh) 1fr;
  gap: 0;
  min-height: 0;
}
.map-stage {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--map-ocean);
  overflow: hidden;
  min-height: 260px;
}
.map-label {
  position: absolute;
  top: 0.65rem;
  left: 0.75rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  max-width: 11.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.35;
}
.map-label-toggle {
  display: none;
  appearance: none;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(15, 18, 21, 0.9);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.55rem 0.28rem 0.35rem;
  cursor: pointer;
  pointer-events: auto;
  line-height: 1;
}
.map-label-toggle:hover,
.map-label-toggle:focus-visible {
  border-color: var(--accent-dim);
  color: var(--accent);
  outline: none;
}
.map-label-toggle-icon {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 1px solid var(--accent-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-style: italic;
  font-weight: 600;
  color: var(--accent);
}
.map-label-toggle-text { color: var(--accent-dim); }
.map-label-body {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  background: rgba(15, 18, 21, 0.82);
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.map-label-title {
  color: var(--ink-dim);
  letter-spacing: 0.12em;
  font-weight: 500;
  margin-bottom: 0.1rem;
}
#world-map-host {
  width: 100%;
  height: 100%;
  position: relative;
}
#world-map-host svg {
  width: 100%;
  height: 100%;
  max-height: none;
  shape-rendering: geometricPrecision;
  overflow: visible;
}
#world-map-host path {
  fill: var(--map-land);
  stroke: #0e1216;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 0.15s ease;
}
#world-map-host path:hover { fill: var(--map-land-hover); }
#world-map-host path.seed { fill: var(--map-seed); }
#world-map-host path.seed:hover { fill: var(--map-seed-hover); }
#world-map-host path.selected {
  fill: var(--map-selected) !important;
  stroke: #f0c79a;
  stroke-width: 1.2;
}
#world-map-host path.stub-known { fill: var(--map-land); }
#world-map-host path.stub-known:hover { fill: var(--map-land-hover); }

#world-map-host path.dimmed {
  fill: #1a2229 !important;
  opacity: 0.35;
  pointer-events: none;
}
/* Neutral atlas: every country gets the same treatment (no seeded / drillable highlight). */
#world-map-host path.has-admin1 { stroke: #0e1216; }
#drill-layer .admin1-path {
  fill: #343e46;
  stroke: #0e1216;
  stroke-width: 0.7;
  cursor: pointer;
  vector-effect: non-scaling-stroke;
}
#drill-layer .admin1-path:hover { fill: #45515b; }
#drill-layer .admin1-path.selected {
  fill: var(--map-selected) !important;
  stroke: #f0c79a;
  stroke-width: 1.1;
}
/* Drilled country: world-level fill hidden; outline comes from the drill layer
   (same projection as the state equivalents) so nothing sits offset beneath. */
#world-map-host path.drill-under {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: none;
}
#drill-layer .country-outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
#drill-layer .country-base {
  fill: #343e46;
  stroke: none;
  pointer-events: none;
}
#drill-layer .inset-frame {
  fill: #11161a;
  stroke: #4a5560;
  stroke-width: 1px;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}
#drill-layer .inset-label {
  fill: var(--ink-mute);
  font-family: var(--font);
  letter-spacing: 0.02em;
  pointer-events: none;
}
#drill-layer .city-marker { cursor: pointer; }
#drill-layer .city-dot {
  fill: #d9dee2;
  stroke: #0e1216;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
#drill-layer .city-marker.label-hidden .city-dot { fill: #9aa4ac; }
#drill-layer .city-marker.selected .city-dot {
  fill: #ffffff;
  stroke: var(--accent);
  stroke-width: 1.6px;
}
#drill-layer .city-label {
  fill: var(--ink);
  font-family: var(--font);
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(14, 18, 22, 0.9);
  stroke-linejoin: round;
}
#drill-layer .city-label.selected { fill: var(--accent); font-weight: 500; }
#drill-layer .city-leader {
  stroke: rgba(217, 222, 226, 0.55);
  stroke-width: 0.8px;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.map-breadcrumb {
  position: absolute;
  left: 0.75rem;
  bottom: 0.55rem;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  max-width: calc(100% - 4.5rem);
  font-size: 0.68rem;
  background: rgba(15, 18, 21, 0.88);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0.3rem 0.5rem;
}
.bc-sep { color: var(--ink-mute); margin: 0 0.1rem; }
.bc-current { color: var(--accent); font-weight: 500; }
.bc-link {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bc-link:hover { color: var(--accent); }
.map-label-note {
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.58rem;
}


.panel {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--line);
  overflow: auto;
  background: var(--bg);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.panel-body { flex: 0 0 auto; }
/* Emerald $ lives in the empty space under the details on desktop. It is a
   sibling after the content, so it can never sit on top of it; sticky keeps it
   centred in the viewport while the page scrolls through that empty space. */
.panel-dollar {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}
.panel-dollar.is-roomy { visibility: visible; }
.panel-dollar-glyph {
  position: sticky;
  top: calc(50vh - 6rem);
  display: block;
  width: max-content;
  margin: 2.5rem auto;
  font-family: var(--font-display), Georgia, serif;
  font-weight: 500;
  font-size: 12rem;
  line-height: 1;
  color: rgba(46, 140, 105, 0.11);
  text-shadow: 0 0 1.6rem rgba(46, 140, 105, 0.12);
  perspective: 640px;
  animation: rail-dollar-pulse 7.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .panel-dollar-glyph { animation: rail-dollar-pulse-static 8s ease-in-out infinite; }
}

.rail {
  grid-column: 2;
  grid-row: 1 / span 2;
  overflow: auto;
  background: var(--bg-elev);
  border-left: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* —— News column dollar watermark (empty-space mark) —— */
.rail-dollar {
  position: sticky;
  top: 32vh;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  margin: 0;
  pointer-events: none;
  user-select: none;
}
.rail-dollar-glyph {
  font-family: var(--font-display), Georgia, serif;
  font-weight: 500;
  font-size: clamp(7rem, 28vw, 12.5rem);
  line-height: 1;
  color: rgba(46, 140, 105, 0.11);
  text-shadow: 0 0 1.6rem rgba(46, 140, 105, 0.12);
  transform: translateY(-42%);
  perspective: 640px;
  animation: rail-dollar-pulse 7.5s ease-in-out infinite;
}
/* Carousel spin (both $ marks): the inner .dollar-spin turns on the vertical
   axis inside its perspective parent. Backfaces stay visible (mirrored $ on
   the far half) and one faint depth layer behind it gives the glyph a little
   thickness, so edge-on it reads as a thin emerald sliver, not a gap. */
.dollar-spin {
  position: relative;
  display: inline-block;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  animation: rail-dollar-spin 57.14s linear infinite;
}
.dollar-spin::after {
  content: '$';
  position: absolute;
  inset: 0;
  backface-visibility: visible;
  text-shadow: none;
  opacity: 0.4;
  transform: translateZ(-0.035em);
}
@keyframes rail-dollar-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@keyframes rail-dollar-pulse {
  0%, 100% {
    color: rgba(46, 140, 105, 0.08);
    text-shadow: 0 0 1.2rem rgba(46, 140, 105, 0.08);
  }
  50% {
    color: rgba(52, 158, 118, 0.18);
    text-shadow: 0 0 2.2rem rgba(46, 140, 105, 0.22);
  }
}
.rail-head,
.feed {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .rail-dollar-glyph {
    animation: rail-dollar-pulse-static 8s ease-in-out infinite;
  }
  .dollar-spin { animation: none; transform: none; }
  @keyframes rail-dollar-pulse-static {
    0%, 100% { color: rgba(46, 140, 105, 0.1); text-shadow: none; }
    50% { color: rgba(52, 158, 118, 0.16); text-shadow: none; }
  }
}


/* —— Country panel —— */
.panel-empty {
  padding: 2rem 1.5rem;
  color: var(--ink-dim);
  max-width: 36rem;
}
.panel-empty h2 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
}
.panel-empty p { margin: 0.5rem 0; font-size: 0.92rem; }
.seed-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}
.chip {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.chip:hover, .chip.active {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: var(--accent-glow);
}

.country-head {
  padding: 1.1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}
.country-head h2 {
  font-family: var(--font-display);
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.tier-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}
.snapshot {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.9rem;
  max-width: 52rem;
}
.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.metric {
  flex: 1 1 7rem;
  min-width: 7rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
}
.metric .label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.metric .value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink);
  margin-top: 0.15rem;
}
.metric.is-proto { border-style: dashed; border-color: var(--line); }
.metric-unit { text-transform: none; letter-spacing: 0; color: var(--ink-mute); font-family: var(--font-mono); font-size: 0.6rem; margin-left: 0.25rem; }
.metric .hint {
  font-size: 0.7rem;
  color: var(--ink-mute);
}

.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0.75rem;
  overflow-x: auto;
}
.tab {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 0.85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-body { padding: 1rem 1.25rem 1.5rem; }
.section-note {
  font-size: 0.78rem;
  color: var(--ink-mute);
  margin: 0 0 0.85rem;
}

.signal-list, .opening-list { display: flex; flex-direction: column; gap: 0.65rem; }
.signal-card, .opening-card, .industry-card, .region-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
}
.signal-card { cursor: default; }
.signal-card .top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}
.signal-card h3, .opening-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 560;
  color: var(--ink);
}
.signal-card .weight {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--signal);
  white-space: nowrap;
}
.signal-card p, .opening-card p {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
}
.signal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
  font-size: 0.68rem;
  color: var(--ink-mute);
  font-family: var(--font-mono);
}
.tag {
  border: 1px solid var(--line);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.55rem;
}
.industry-card, .region-card {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.industry-card:hover, .region-card:hover,
.industry-card.active, .region-card.active {
  border-color: var(--accent-dim);
  background: #20272d;
}
.industry-card h3, .region-card h3 {
  margin: 0 0 0.3rem;
  font-size: 0.88rem;
  font-weight: 560;
}
.industry-card p, .region-card p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.filter-bar .clear {
  font-size: 0.75rem;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

.opening-card .gap-label {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--danger-soft);
  margin-bottom: 0.25rem;
}
.opening-card .horizon {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
  margin-top: 0.45rem;
}

.stub-note {
  margin: 1rem 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--accent-dim);
  border-radius: var(--radius);
  background: var(--accent-glow);
  color: var(--ink-dim);
  font-size: 0.85rem;
}

/* —— Feed rail —— */
.rail-head {
  padding: 0.9rem 1rem 0.6rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  z-index: 2;
}
.rail-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.rail-head .sub {
  font-size: 0.72rem;
  color: var(--ink-mute);
  margin-top: 0.2rem;
}
.feed {
  padding: 0.65rem 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feed-item {
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-panel);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.feed-item:hover { border-color: var(--accent-dim); }
.feed-item.is-live:hover { border-color: var(--ink-mute); }
.feed-item .country {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.feed-item .title {
  font-size: 0.82rem;
  margin: 0.2rem 0;
  color: var(--ink);
}
.feed-item .meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.feed-item .source-name {
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 11rem;
}
.rail-head .sub strong { color: var(--ink-dim); font-weight: 500; }

/* —— About strip —— */
.about-strip {
  border-top: 1px solid var(--line);
  padding: 1rem 1.25rem 1.25rem;
  background: #0f1317;
  color: var(--ink-dim);
  font-size: 0.82rem;
}
.about-strip h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
}
.about-strip p { margin: 0.35rem 0; max-width: 70rem; }
.about-strip .domain {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* —— Mobile —— */
@media (max-width: 900px) {
  .main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 34vh) auto auto;
  }
  .map-stage {
    grid-column: 1;
    grid-row: 1;
    border-right: none;
  }
  .panel {
    grid-column: 1;
    grid-row: 2;
    border-right: none;
    max-height: none;
  }
  .rail {
    grid-column: 1;
    grid-row: 3;
    border-top: 1px solid var(--line);
    max-height: 50vh;
  }
  .site-header { flex-wrap: wrap; gap: 0.45rem 0.75rem; }
  .brand { flex-basis: 100%; }
  .brand-tagline { font-size: 0.72rem; }
  .header-nav { order: 2; }
  .header-meta { order: 3; margin-left: auto; }
  .header-meta .proto-badge { display: none; }
}

@media (max-width: 520px) {
  .site-header { padding: 0.65rem 0.85rem; }
  .date-stamp { font-size: 0.65rem; padding: 0.25rem 0.4rem; }
  .country-head, .tab-body { padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* —— Map zoom / pan —— */
.map-viewport {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  /* enlarge in px (see applyMapTransform) so SVG reflows crisp; no will-change */
}
#world-map-host {
  touch-action: none;
  overflow: hidden;
  cursor: grab;
}
.map-stage.is-panning #world-map-host,
.map-stage.is-zoomed #world-map-host { cursor: grab; }
.map-stage.is-panning #world-map-host { cursor: grabbing; }

.zoom-controls {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  background: rgba(15, 18, 21, 0.88);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.35rem;
  min-width: 2.6rem;
}
.zoom-btn {
  appearance: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  min-width: 1.75rem;
  width: 100%;
  height: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-panel);
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}
.zoom-btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.zoom-reset {
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: auto;
  padding: 0 0.2rem;
  height: 1.55rem;
}
.zoom-level {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-mute);
  padding: 0.15rem 0;
  text-align: center;
  width: 100%;
}

.desk-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}
.desk-hint {
  font-size: 0.72rem;
  color: var(--ink-mute);
}

/* —— Leadership accordion —— */
.leadership-acc {
  margin-top: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.leadership-acc > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.leadership-acc > summary::-webkit-details-marker { display: none; }
.leadership-acc > summary::before {
  content: '▸';
  color: var(--ink-mute);
  font-size: 0.75rem;
}
.leadership-acc[open] > summary::before { content: '▾'; }
.leadership-body {
  padding: 0 0.7rem 0.75rem;
  border-top: 1px solid var(--line-soft);
}
.lead-empty {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.8rem;
}
.lead-finer-note {
  font-size: 0.78rem;
  color: var(--danger-soft);
  margin: 0.5rem 0;
}
.lead-level { margin-top: 0.55rem; }
.lead-level-nested {
  margin-top: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--line);
}
.lead-level-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.4rem;
}
.lead-more {
  font-size: 0.68rem;
  color: var(--accent-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0.65rem 0 0.15rem;
  text-align: center;
}
.lead-role {
  background: var(--bg-elev);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.4rem;
}
.lead-role-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: flex-start;
}
.lead-title {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lead-name {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
  margin-top: 0.1rem;
}
.lead-badges { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.lead-contact {
  font-size: 0.78rem;
  margin-top: 0.35rem;
  color: var(--ink-dim);
}
.lead-contact a { color: var(--accent); }
.lead-switch { color: var(--ink-mute); }
.lead-meta {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--ink-dim);
}
.lead-k {
  display: inline-block;
  min-width: 4.2rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
}
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary, .btn-ghost {
  appearance: none;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-primary {
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
}
.btn-primary:hover { border-color: var(--accent); background: rgba(208, 138, 69, 0.24); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
}
.btn-ghost:hover { border-color: var(--accent-dim); color: var(--accent); }
.btn-inline { padding: 0.2rem 0.5rem; font-size: 0.72rem; }

/* —— Overlay (mind map / chain / company) —— */
body.overlay-open { overflow: hidden; }
.ledger-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 10, 12, 0.78);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 1rem;
  overflow: auto;
}
.ledger-overlay[hidden] { display: none !important; }
.overlay-panel {
  width: min(1100px, 100%);
  margin: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  max-height: calc(100vh - 2rem);
  overflow: auto;
}
.overlay-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg-elev);
  z-index: 2;
}
.overlay-kicker {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 0.25rem;
}
.overlay-head h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.overlay-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-dim);
  max-width: 48rem;
}
.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Mind map SVG */
.mindmap-wrap {
  padding: 0.5rem 0.75rem 1.25rem;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
    var(--bg);
}
.mindmap-svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
}
.mm-edge {
  stroke: var(--ink-mute);
  stroke-width: 1.4;
  opacity: 0.55;
}
.mm-country circle {
  fill: #1d2429;
  stroke: var(--accent);
  stroke-width: 2;
}
.mm-country .mm-label {
  fill: var(--accent);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.mm-industry {
  cursor: pointer;
}
.mm-industry rect {
  fill: var(--bg-panel);
  stroke: var(--line);
  stroke-width: 1.2;
  transition: stroke 0.15s, fill 0.15s;
}
.mm-industry:hover rect,
.mm-industry:focus rect {
  stroke: var(--accent);
  fill: #20272d;
}
.mm-industry .mm-label {
  fill: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 560;
  pointer-events: none;
}
.mm-industry .mm-sub {
  fill: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Value chain */
.chain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  padding: 1rem 1.25rem 1.5rem;
}
.chain-col {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0.65rem;
  min-width: 0;
}
.chain-stage {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-soft);
}
.chain-cards { display: flex; flex-direction: column; gap: 0.45rem; }
.player-card {
  appearance: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 0.7rem;
  cursor: pointer;
  color: inherit;
}
.player-card:hover {
  border-color: var(--accent-dim);
  background: #20272d;
}
.player-name {
  font-size: 0.88rem;
  font-weight: 560;
  color: var(--ink);
}
.player-role {
  font-size: 0.75rem;
  color: var(--ink-mute);
  margin-top: 0.2rem;
}
.player-go {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-mute);
  margin-top: 0.4rem;
}

/* Company profile */
.company-body {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.25rem;
  padding: 1rem 1.25rem 1.5rem;
}
.company-section {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.pipeline-list { display: flex; flex-direction: column; gap: 0.5rem; }
.pipeline-item {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
}
.pipeline-title { font-size: 0.88rem; color: var(--ink); }
.pipeline-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  margin-top: 0.3rem;
}

@media (max-width: 900px) {
  .chain-grid { grid-template-columns: 1fr; }
  .company-body { grid-template-columns: 1fr; }
  .map-label { max-width: min(11rem, calc(100% - 4.2rem)); font-size: 0.58rem; }
  .overlay-head { flex-direction: column; }
}

/* Narrow phones: collapse Atlas legend to a small tip button so the map stays usable */
@media (max-width: 699px) {
  .map-label {
    max-width: none;
    gap: 0.35rem;
  }
  .map-label-toggle { display: inline-flex; }
  .map-label-body {
    display: none;
    max-width: min(12.5rem, calc(100vw - 5rem));
    font-size: 0.56rem;
    pointer-events: none;
  }
  .map-label.is-open .map-label-body { display: flex; }
  .map-label.is-open .map-label-toggle {
    border-color: var(--accent-dim);
    background: rgba(28, 34, 40, 0.95);
  }
}

@media (max-width: 520px) {
  .zoom-controls { top: auto; bottom: 0.5rem; right: 0.5rem; }
  .desk-hint { font-size: 0.65rem; }
}

/* —— Verification tiers (rail + desks) —— */
.vbadge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.12rem 0.34rem;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
  cursor: default;
}
button.vbadge { cursor: pointer; }
button.vbadge:focus-visible { outline: 1px solid var(--ink); outline-offset: 1px; }
.vb-unconfirmed { color: #d3b54c; background: rgba(211, 181, 76, 0.08); }
.vb-multiple { color: #86a7c8; background: rgba(134, 167, 200, 0.08); }
.vb-confirmed { color: #7db594; background: rgba(125, 181, 148, 0.08); }
.vb-analysis { color: #a8a0c4; background: rgba(168, 160, 196, 0.08); }
.vb-sample { color: var(--proto); border-style: dashed !important; background: transparent; }
.feed-badges { display: inline-flex; gap: 0.3rem; align-items: center; }
.vwrap { position: relative; display: inline-flex; }
.vpop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  width: 15rem;
  padding: 0.5rem 0.6rem;
  background: #151a1e;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  color: var(--ink-dim);
  cursor: default;
}
.vwrap:hover .vpop, .vwrap:focus-within .vpop, .vwrap.open .vpop { display: block; }
.vpop-hint { display: block; color: var(--ink-mute); margin-bottom: 0.3rem; }
.vpop-h { display: block; color: var(--ink); font-weight: 500; margin-bottom: 0.15rem; }
.vpop ul { margin: 0; padding-left: 1rem; }
.vpop li { margin: 0.1rem 0; }
.vpop a { color: #9fb4c6; }
.vpop-primary { font-size: 0.6rem; color: #7db594; text-transform: uppercase; letter-spacing: 0.06em; }
.vpop-note { margin: 0.3rem 0 0; color: #7db594; }
.vfilters { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.35rem; }
.vfilter {
  appearance: none;
  font: inherit;
  font-size: 0.64rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.vfilter .vf-n { font-family: var(--font-mono); color: var(--ink-mute); }
.vfilter.active { border-color: var(--accent); color: var(--ink); background: var(--accent-glow); }
.vfilter.vf-confirmed.active { border-color: #7db594; background: rgba(125, 181, 148, 0.1); }
.vfilter.vf-multiple.active { border-color: #86a7c8; background: rgba(134, 167, 200, 0.1); }
.vfilter.vf-unconfirmed.active { border-color: #d3b54c; background: rgba(211, 181, 76, 0.1); }
.vfilter.vf-analysis.active { border-color: #a8a0c4; background: rgba(168, 160, 196, 0.1); }
.rail-legend {
  margin: 0 0 0.45rem;
  font-size: 0.64rem;
  line-height: 1.7;
  color: var(--ink-mute);
}
.rail-legend .vbadge { font-size: 0.5rem; padding: 0.05rem 0.25rem; }
.feed-item a.title { display: block; text-decoration: none; }
.feed-item a.title:hover { text-decoration: underline; text-decoration-color: var(--line); }
.feed-item.is-live { cursor: default; }


/* —— News column: place header, topic chips, fallback groups —— */
.rail-path {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  min-height: 0.8rem;
}
.rail-title-row { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.rail-level {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
}
.ncats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.2rem; }
.ncat {
  appearance: none;
  font: inherit;
  font-size: 0.64rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.ncat .vf-n { font-family: var(--font-mono); color: var(--ink-mute); }
.ncat.active { border-color: var(--accent); color: var(--ink); background: var(--accent-glow); }
.feed-note { margin: 0.1rem 0; font-size: 0.74rem; color: var(--ink-dim); }
.feed-more-h {
  margin: 0.55rem 0 0.05rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px solid var(--line-soft);
  padding-top: 0.5rem;
}
.feed-more-btn {
  appearance: none;
  font: inherit;
  font-size: 0.7rem;
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.feed-more-btn:hover { border-color: var(--ink-mute); color: var(--ink); }
.rail-legend-wrap { margin-top: 0.4rem; }
.rail-legend-wrap summary { font-size: 0.64rem; color: var(--ink-mute); cursor: pointer; margin-bottom: 0.3rem; }

/* —— Home: world index + indicators strip —— */
.panel-home { padding: 0.9rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.1rem; }
.home-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.home-head h2 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.home-sub { font-size: 0.72rem; color: var(--ink-mute); }
.home-help { margin: 0; font-size: 0.82rem; color: var(--ink-dim); max-width: 48rem; }
.desk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.desk-tile {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent-dim);
  border-radius: var(--radius);
  padding: 0.55rem 0.65rem 0.6rem;
  min-width: 0;
}
.desk-tile.is-empty { border-top-color: var(--line); }
.desk-tile:hover { border-color: var(--ink-mute); }
.desk-tile:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.tile-top { display: flex; justify-content: space-between; align-items: baseline; }
.tile-name { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tile-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-mute); }
.tile-status { font-size: 0.7rem; color: var(--ink-mute); line-height: 1.35; }
.tile-lines { display: flex; flex-direction: column; gap: 0.15rem; }
.tile-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 0.35rem;
  align-items: baseline;
  font-size: 0.74rem;
}
.tl-name { color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-val { font-family: var(--font-mono); color: var(--ink); font-size: 0.82rem; text-align: right; }
.tl-unit { font-family: var(--font-mono); color: var(--ink-mute); font-size: 0.64rem; }
.tl-asof { grid-column: 1 / -1; font-family: var(--font-mono); color: var(--ink-mute); font-size: 0.62rem; margin-top: -0.1rem; }
.tl-asof::before { content: 'as of '; }

/* —— Indicators overlay —— */
.desks-panel { width: min(1180px, 100%); }
.desk-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 1rem;
  overflow-x: auto;
  position: sticky;
  top: 0;
}
.desk-tab {
  appearance: none;
  font: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-dim);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  gap: 0.45rem;
  align-items: baseline;
  white-space: nowrap;
}
.desk-tab:hover { color: var(--ink); }
.desk-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.desk-tab-n { font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent); }
.desk-tab-n.is-zero { color: var(--ink-mute); }
.desk-body { padding: 0.9rem 1.25rem 1.25rem; }
.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.ledger-table th, .ledger-table td {
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}
.ledger-table thead th {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.ledger-table .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.ledger-table thead th.num { text-align: right; }
.ledger-row th { font-weight: 600; color: var(--ink); }
.ledger-row .val { font-size: 1rem; color: var(--ink); }
.ledger-row .unit { font-family: var(--font-mono); color: var(--ink-dim); font-size: 0.74rem; }
.series-id { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.64rem; color: var(--ink-mute); margin-top: 0.1rem; }
.prior { color: var(--ink-dim); }
.prior-date { font-size: 0.66rem; color: var(--ink-mute); }
.delta { font-size: 0.7rem; color: var(--ink); margin-left: 0.2rem; }
.ledger-sub td { padding-top: 0.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.sub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1.25rem; font-size: 0.74rem; color: var(--ink-dim); }
.sub-grid .hist { grid-column: 1 / -1; }
.sub-grid .k {
  display: inline-block;
  min-width: 6.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hist-list { list-style: none; margin: 0.15rem 0 0; padding: 0; display: inline-flex; flex-direction: column; gap: 0.1rem; }
.hist-list s { color: var(--ink-mute); font-family: var(--font-mono); }
.hist-meta { font-size: 0.66rem; color: var(--ink-mute); margin-left: 0.4rem; }
.hist-empty { color: var(--ink-mute); }
.stale-flag {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: #d3b54c;
  border: 1px solid rgba(211, 181, 76, 0.5);
  border-radius: 3px;
  padding: 0 0.25rem;
  margin-left: 0.25rem;
}
.ledger-table-empty { margin-bottom: 0; }
.desk-empty-msg {
  margin: 0;
  padding: 1rem 0.55rem;
  font-size: 0.86rem;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-soft);
}
.desk-note { font-size: 0.72rem; color: var(--ink-mute); margin: 0.6rem 0 0; }
.desk-spec {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 1.1rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.desk-spec dt { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); padding-top: 0.15rem; }
.desk-spec dd { margin: 0; }
.desk-spec ul { margin: 0; padding-left: 1rem; }
.desk-spec li { margin: 0.05rem 0; }
.desk-foot { margin: 1rem 0 0; font-size: 0.7rem; color: var(--ink-mute); border-top: 1px solid var(--line-soft); padding-top: 0.6rem; }

/* —— Footer: method + disclaimers —— */
.about-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  position: relative; /* was sticky top: 0, which slid under the pinned header; the header Top button covers it now */
  z-index: 2;
  margin: -0.25rem 0 0.65rem;
  padding: 0.35rem 0 0.45rem;
  background: linear-gradient(#0f1317 70%, rgba(15, 19, 23, 0));
}
.about-top {
  appearance: none;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.32rem 0.65rem;
  cursor: pointer;
}
.about-top:hover { color: var(--ink); border-color: var(--ink-mute); }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; }
.about-strip .disclaimer { color: var(--ink-dim); }
.about-strip .disclaimer strong { color: var(--ink); font-weight: 600; }
.haul-note { color: var(--ink-mute); font-size: 0.78rem; border-left: 2px solid var(--line); padding-left: 0.55rem; }
.credits { margin-top: 0.85rem !important; font-size: 0.72rem; color: var(--ink-mute); }

@media (max-width: 900px) {
  .desk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: 1fr; gap: 0.5rem; }
}
@media (max-width: 700px) {
  .panel-home { padding: 0.8rem 0.9rem 1.2rem; }
  .desk-body { padding: 0.75rem 0.85rem 1rem; }
  .ledger-table thead { display: none; }
  .ledger-table, .ledger-table tbody, .ledger-table tr, .ledger-table th, .ledger-table td { display: block; width: 100%; }
  .ledger-rec { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.6rem; background: var(--bg-panel); }
  .ledger-row th, .ledger-row td {
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    text-align: right;
  }
  .ledger-row td .cell { min-width: 0; }
  .ledger-row th { display: block; text-align: left; }
  .ledger-row td::before {
    content: attr(data-label);
    font-family: var(--font);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: left;
    flex-shrink: 0;
  }
  .ledger-table .num { text-align: right; }
  .ledger-sub td { border-bottom: none; }
  .sub-grid { grid-template-columns: 1fr; }
  .desk-spec { grid-template-columns: 1fr; gap: 0.15rem; }
  .desk-spec dd { margin-bottom: 0.45rem; }
  .ledger-table-empty { display: none; }
  .desk-empty-msg { border: 1px dashed var(--line); border-radius: var(--radius); }
  .tile-line { font-size: 0.7rem; }
}
@media (max-width: 420px) {
  .hnav { padding: 0.32rem 0.5rem; font-size: 0.68rem; }
  .date-stamp { display: none; }
}

/* Leadership groups (legislatures / Congress) */
.lead-group { margin-top: 0.5rem; border: 1px solid var(--line, #2a2f36); border-radius: 6px; }
.lead-group > summary { cursor: pointer; padding: 0.5rem 0.7rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute, #9aa3ad); list-style: none; }
.lead-group > summary::before { content: '\25B8'; display: inline-block; width: 1em; transition: transform .15s; }
.lead-group[open] > summary::before { transform: rotate(90deg); }
.lead-group-body { padding: 0 0.6rem 0.6rem; }
.lead-party { color: var(--ink-mute, #9aa3ad); font-weight: 400; font-size: 0.85em; }
.lead-rows { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.lead-row { display: grid; grid-template-columns: 4.5rem 1fr 3.5rem; gap: 0.5rem; padding: 0.3rem 0.2rem; border-top: 1px solid var(--line, #2a2f36); }
.lead-row-head { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute, #9aa3ad); border-top: 0; }
.lead-row .lr-p { text-align: right; color: var(--ink-mute, #9aa3ad); }
.lead-row.is-vacant .lr-n { color: var(--ink-mute, #9aa3ad); font-style: italic; }
.lead-group-src { font-size: 0.75rem; color: var(--ink-mute, #9aa3ad); margin: 0.5rem 0 0; }
@media (max-width: 600px) { .lead-row { grid-template-columns: 3.6rem 1fr 3rem; font-size: 0.82rem; } }
.lead-group > summary::-webkit-details-marker { display: none; }
.lead-group > summary::marker { content: ''; }

/* Official stats pipeline */
.stats-head { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute, #9aa3ad); margin: 1rem 0 0.4rem; font-weight: 500; }
.stats-table .spark { color: var(--accent, #c9a227); vertical-align: middle; }
.stat-cad { font-size: 0.7rem; color: var(--ink-mute, #9aa3ad); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-yoy { display: block; font-size: 0.72rem; color: var(--ink-mute, #9aa3ad); }
.stat-caveat { display: block; font-size: 0.72rem; color: var(--ink-mute, #9aa3ad); font-weight: 400; }
.macro-strip { margin: 0.6rem 0 0.8rem; border: 1px solid var(--line, #2a2f36); border-radius: 6px; padding: 0.55rem 0.7rem; }
.macro-head { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute, #9aa3ad); margin-bottom: 0.4rem; }
.macro-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.macro-cell .label { font-size: 0.72rem; color: var(--ink-mute, #9aa3ad); }
.macro-cell .value { font-size: 1.05rem; font-variant-numeric: tabular-nums; margin: 0.1rem 0; }
.macro-cell .hint { font-size: 0.7rem; color: var(--ink-mute, #9aa3ad); }
@media (max-width: 760px) { .macro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  .stats-table .stat-row { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.6rem; background: var(--bg-panel); }
  .stats-table .stat-row th, .stats-table .stat-row td { padding: 0.35rem 0.6rem; }
}

/* Narrow example-data labelling */
.example-tag { display: inline-block; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute, #9aa3ad); border: 1px dashed var(--line, #2a2f36); border-radius: 3px; padding: 0.05rem 0.35rem; vertical-align: middle; font-weight: 500; }
.block-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute, #9aa3ad); margin: 0.7rem 0 0.35rem; }
.block-label-note { text-transform: none; letter-spacing: 0; margin-left: 0.35rem; }

/* Emerald $ placement: desktop = one $ in the left empty space under the
   details (panel must not be its own scroller, so sticky follows the page);
   mobile = the original rail watermark only. */
@media (min-width: 901px) {
  .panel { overflow: visible; }
  .rail-dollar { display: none; }
}
@media (max-width: 900px) { .panel-dollar { display: none; } }

/* —— Sector tab (Energy first; reusable for the five economic-type tabs) —— */
.hnav-sector { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ink); border-color: var(--ink-mute); }
.hnav-sector:hover, .hnav-sector[aria-current="true"] { border-color: var(--accent); color: var(--accent); }
.hnav-emoji { font-size: 0.9rem; line-height: 1; letter-spacing: 0; }
.sector-panel { width: min(1180px, 100%); display: flex; flex-direction: column; }
.sector-head { align-items: flex-start; position: sticky; }
.sector-head-main { min-width: 0; }
.sector-head h2 { margin: 0.05rem 0 0.25rem; font-size: 1.35rem; outline: none; }
.sector-head .overlay-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.sector-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-height: 1rem; font-size: 0.72rem; }
.sector-path:empty { display: none; }
.sector-crumb { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--ink-dim); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.sector-crumb:hover, .sector-crumb:focus-visible { color: var(--accent); }
.sector-body { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); min-height: 0; }
.sector-list { list-style: none; margin: 0; padding: 0.6rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.35rem; align-self: start; position: sticky; top: 0; }
.sector-slot { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--bg-panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 0.5rem 0.6rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; transition: border-color 120ms ease, background 120ms ease; }
.sector-slot:hover { border-color: var(--ink-mute); }
.sector-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sector-slot.active { border-color: var(--accent); background: linear-gradient(90deg, var(--accent-glow), transparent 70%), var(--bg-panel); box-shadow: inset 3px 0 0 var(--accent); }
.slot-top { display: flex; align-items: center; gap: 0.45rem; }
.slot-n { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-dim); min-width: 1.1rem; }
.slot-name { font-weight: 600; font-size: 0.86rem; flex: 1 1 auto; }
.slot-count { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 999px; padding: 0.02rem 0.42rem; }
.slot-count.is-zero { color: var(--ink-mute); border-style: dashed; }
.slot-brief { font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7db594; border: 1px solid #3f6a52; border-radius: 3px; padding: 0.05rem 0.3rem; }
.slot-copy { font-size: 0.72rem; color: var(--ink-dim); line-height: 1.4; padding-left: 1.55rem; }
.sector-slot:not(.active) .slot-copy { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sector-detail { padding: 0.9rem 1.15rem 1.2rem; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sector-detail-h { margin: 0; font-size: 1.05rem; font-weight: 600; display: flex; align-items: baseline; gap: 0.4rem; outline: none; }
.sector-sub { display: flex; flex-direction: column; gap: 0.65rem; }
.sector-sub-head { display: flex; flex-direction: column; gap: 0.3rem; }
.slot-copy-lg { margin: 0; font-size: 0.86rem; color: var(--ink); max-width: 46rem; line-height: 1.5; }
.sector-sub-nav { display: none; gap: 0.6rem; flex-wrap: wrap; }
.sector-sub-nav:has([data-sbrief-close]) { display: flex; }
.sector-back { appearance: none; background: none; border: 0; padding: 0.2rem 0; font: inherit; font-size: 0.76rem; color: var(--ink-dim); cursor: pointer; }
.sector-back:hover, .sector-back:focus-visible { color: var(--accent); }
.brief-cta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; padding: 0.55rem 0.65rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg); }
.brief-btn { font-weight: 600; }
.brief-status { font-size: 0.74rem; color: var(--ink-dim); }
.brief-status.is-ready::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #7db594; margin-right: 0.35rem; vertical-align: 0.05rem; }
.brief-status.is-wait::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; border: 1px solid var(--ink-mute); margin-right: 0.35rem; vertical-align: 0.05rem; }
.stage-chips { gap: 0.35rem; align-items: center; }
.stage-chip { position: relative; display: inline-flex; align-items: center; }
.stage-chip .ncat { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.stage-info { appearance: none; font: inherit; font-family: var(--font-mono); font-size: 0.6rem; width: 1.35rem; align-self: stretch; border: 1px solid var(--line-soft); border-left: 0; border-radius: 0 999px 999px 0; background: transparent; color: var(--ink-mute); cursor: pointer; }
.stage-info:hover, .stage-info:focus-visible, .stage-chip.open .stage-info { color: var(--accent); border-color: var(--accent-dim); }
.stage-pop { display: none; position: absolute; left: 0; top: calc(100% + 5px); z-index: 30; width: min(20rem, 80vw); padding: 0.55rem 0.65rem; background: #151a1e; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); font-size: 0.72rem; color: var(--ink-dim); line-height: 1.4; }
.stage-chip:hover .stage-pop, .stage-chip:focus-within .stage-pop, .stage-chip.open .stage-pop { display: block; }
.stage-pop-h { display: block; color: var(--ink); font-weight: 600; }
.stage-pop-plain { display: block; color: var(--ink-mute); margin-bottom: 0.3rem; }
.stage-pop ul { margin: 0 0 0.35rem; padding-left: 1rem; }
.stage-pop li { margin: 0.12rem 0; }
.stage-pop a, .method-sectors a { color: #9fb4c6; }
.stage-pop-src { display: block; font-size: 0.66rem; color: var(--ink-mute); }
.stage-tag { font-family: var(--font); font-size: 0.6rem; letter-spacing: 0.04em; color: #b9a585; border: 1px solid #4e4536; border-radius: 3px; padding: 0.04rem 0.32rem; }
.feed-item .meta .stage-tag { margin-left: auto; }
.feed-item .meta .stage-tag + .stage-tag { margin-left: 0; }
.sector-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; align-items: start; }
.sector-feed > .feed-note, .sector-feed > .feed-more-h { grid-column: 1 / -1; }
.sector-empty { padding: 0.45rem 0.6rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.sector-kids { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.72rem; }
.sector-kids .k { color: var(--ink-mute); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.2rem; }
.sector-kids .chip { font-size: 0.7rem; padding: 0.22rem 0.55rem; }
.sector-kids .vf-n { font-family: var(--font-mono); color: var(--ink-mute); margin-left: 0.2rem; }
.sector-foot { margin: 0.2rem 0 0; font-size: 0.7rem; color: var(--ink-mute); }
.sector-foot a { color: var(--ink-dim); }
.sector-overview { display: flex; flex-direction: column; gap: 0.5rem; }
/* Brief */
.brief { display: flex; flex-direction: column; gap: 0.5rem; max-width: 50rem; }
.brief-h { margin: 0; font-size: 1.12rem; font-weight: 600; line-height: 1.3; outline: none; }
.brief-place { color: var(--ink-dim); font-weight: 500; }
.brief-meta { margin: 0; font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-mute); }
.brief-list { margin: 0.2rem 0 0; padding: 0; list-style: none; counter-reset: brief; display: flex; flex-direction: column; gap: 0.75rem; }
.brief-item { counter-increment: brief; position: relative; padding: 0.7rem 0.85rem 0.65rem 2.6rem; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-panel); }
.brief-item::before { content: counter(brief); position: absolute; left: 0.8rem; top: 0.65rem; font-family: var(--font-mono); font-size: 0.95rem; color: var(--accent); }
.brief-item p { margin: 0; font-size: 0.9rem; line-height: 1.58; color: var(--ink); }
.brief-item .handle { font-family: var(--font-mono); font-size: 0.8em; color: var(--ink-dim); }
.brief-item .brief-src { margin-top: 0.5rem; font-size: 0.7rem; line-height: 1.5; color: var(--ink-mute); }
.brief-src .k { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.3rem; }
.brief-src a { color: #9fb4c6; }
.brief-date { font-family: var(--font-mono); color: var(--ink-mute); white-space: nowrap; }
.brief-sep { color: var(--line); }
.brief-foot { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--ink-mute); }
.brief-missing { gap: 0.6rem; max-width: none; }
.brief-wait { margin: 0; font-size: 0.84rem; color: var(--ink-dim); padding: 0.6rem 0.7rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.brief-wait strong { color: var(--ink); }
.brief-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Method */
.method-sectors { grid-column: 1 / -1; order: 3; }
.method-list { margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; font-size: 0.8rem; color: var(--ink-dim); }
.method-list li { margin: 0.2rem 0; }
.method-src { font-size: 0.72rem; color: var(--ink-mute); }
@media (prefers-reduced-motion: reduce) { .sector-slot { transition: none; } }
@media (max-width: 1000px) { .sector-feed { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .ledger-overlay:has(.sector-panel) { padding: 0; }
  .sector-panel { max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .sector-head { padding: 0.75rem 0.85rem 0.6rem; flex-direction: column; gap: 0.45rem; }
  .sector-head .overlay-actions { position: absolute; top: 0.6rem; right: 0.7rem; }
  .sector-head .overlay-actions .btn-ghost { display: none; }
  .sector-head h2 { font-size: 1.15rem; padding-right: 4.5rem; }
  .sector-head .overlay-kicker { padding-right: 4.5rem; }
  .sector-body { grid-template-columns: 1fr; }
  .sector-list { position: static; border-right: 0; padding: 0.55rem 0.7rem 1rem; }
  .sector-body.has-sub .sector-list { display: none; }
  .sector-body:not(.has-sub) .sector-detail { display: none; }
  .sector-detail { padding: 0.7rem 0.8rem 1.4rem; }
  .sector-sub-nav { display: flex; }
  .sector-slot:not(.active) .slot-copy { -webkit-line-clamp: unset; display: block; }
  .brief-item { padding: 0.65rem 0.7rem 0.6rem 2.1rem; }
  .brief-item::before { left: 0.65rem; }
  .brief-item p { font-size: 0.88rem; }
  .stage-pop { position: fixed; left: 0.75rem; right: 0.75rem; top: auto; bottom: 0.75rem; width: auto; }
}

/* —— Sector tabs row (Energy featured + the five economic types) —— */
.site-header { flex-wrap: wrap; row-gap: 0.35rem; }
.sector-nav { order: 5; flex: 1 0 100%; display: flex; align-items: center; gap: 0.15rem; margin: 0 0 -0.6rem -0.6rem; overflow-x: auto; scrollbar-width: none; }
.sector-nav::-webkit-scrollbar { display: none; }
.snav { font-size: 0.76rem; letter-spacing: 0.02em; color: var(--ink-dim); padding: 0.45rem 0.6rem 0.5rem; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; }
.snav:hover { color: var(--ink); text-decoration: none; }
.snav:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.snav[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.snav-featured { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.snav-sep { flex: 0 0 1px; height: 1rem; background: var(--line); margin: 0 0.35rem; }
/* Phones and narrow tablets: one sideways-swiping row, full bleed, snap, edge fade where more tabs wait. */
.site-header { --hpad: 1.25rem; }
@media (max-width: 520px) { .site-header { --hpad: 0.85rem; } }
@media (max-width: 900px) {
  .sector-nav {
    order: 4; flex: 0 0 calc(100% + 2 * var(--hpad)); max-width: none; min-width: 0;
    margin: 0 calc(-1 * var(--hpad)) -0.65rem; padding: 0 var(--hpad);
    display: flex; flex-wrap: nowrap; gap: 0.1rem; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--hpad); scrollbar-width: none;
  }
  .sector-nav.fade-start, .sector-nav.fade-end { -webkit-mask-image: var(--snav-mask); mask-image: var(--snav-mask); }
  .sector-nav.fade-end { --snav-mask: linear-gradient(to right, #000 0, #000 calc(100% - 2.25rem), transparent 100%); }
  .sector-nav.fade-start { --snav-mask: linear-gradient(to right, transparent 0, #000 2.25rem, #000 100%); }
  .sector-nav.fade-start.fade-end { --snav-mask: linear-gradient(to right, transparent 0, #000 2.25rem, #000 calc(100% - 2.25rem), transparent 100%); }
  .snav-sep { display: none; }
  .snav { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 0.7rem; font-size: 0.78rem; scroll-snap-align: start; }
  .header-nav { order: 2; }
}

/* Official-reference "i" for tabs and segments (same popover as stage chips) */
.info-chip .stage-info { border: 1px solid var(--line-soft); border-radius: 999px; width: 1.3rem; height: 1.3rem; align-self: center; padding: 0; line-height: 1; }
.overlay-kicker .info-chip { margin-left: 0.35rem; vertical-align: middle; }
.overlay-kicker .stage-pop { text-transform: none; letter-spacing: normal; font-weight: 400; }
.kicker-official { color: var(--ink-mute); margin-left: 0.35rem; }
.sector-sub-title { display: flex; align-items: center; gap: 0.5rem; }
.sector-sub-title .sector-detail-h { margin: 0; }
.stage-pop-conv { display: block; margin: 0 0 0.35rem; color: var(--ink-dim); }
.cross-tag { border-style: dashed; color: var(--ink-dim); }
.method-tab-map { margin: 0.4rem 0 0.9rem; }
.method-tab { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.45rem 0.7rem; margin: 0 0 0.45rem; }
.method-tab summary { cursor: pointer; }
.method-tab[open] summary { margin-bottom: 0.35rem; }
.method-cross, .method-conv { font-size: 0.8rem; color: var(--ink-dim); margin: 0.35rem 0; }

/* —— Monday Haul sign-up (free, email only) —— */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.signup-slot[hidden] { display: none; }
.signup-slot-rail { padding: 0.25rem 0.75rem 1rem; position: relative; z-index: 1; }
.signup-slot-footer { margin: 0.4rem 0 0.6rem; }
.signup { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.45rem; }
.signup-title { margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.signup-promise { margin: 0; font-size: 0.78rem; color: var(--ink-dim); line-height: 1.45; }
.signup-row { display: flex; gap: 0.4rem; }
.signup-row[hidden] { display: none; }
.signup-email { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 0.7rem; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); }
.signup-email::placeholder { color: var(--ink-mute); }
.signup-email:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.signup.is-invalid .signup-email { border-color: var(--accent); }
.signup-btn { flex: 0 0 auto; min-height: 44px; padding: 0 0.9rem; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--bg); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); cursor: pointer; }
.signup-btn:hover { filter: brightness(1.08); }
.signup-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.signup-btn:disabled { opacity: 0.6; cursor: default; }
.signup-msg { margin: 0; font-size: 0.72rem; color: var(--ink-mute); }
.signup.is-invalid .signup-msg { color: var(--accent); }
.signup.is-done .signup-msg { font-size: 0.8rem; color: var(--ink); }
.signup-compact { padding: 0.6rem 0.7rem; }
.signup-compact .signup-title { font-size: 0.8rem; }
@media (max-width: 420px) { .signup-btn { padding: 0 0.7rem; } }

/* Reorient: compact Top button in the pinned header, shown once the map scrolls away */
.reorient-top {
  appearance: none;
  font-family: inherit;
  background: var(--bg-elev);
  cursor: pointer;
  white-space: nowrap;
}
.reorient-top[hidden] { display: none; }
.reorient-top:hover { color: var(--ink); border-color: var(--ink-mute); }
.reorient-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reorient-top { position: relative; }
/* 44px tap target on touch without making the header taller */
.reorient-top::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
@media (max-width: 520px) {
  /* Room for Top on small phones: the date stamp steps aside while the map is scrolled away */
  .site-header.is-away .date-stamp { display: none; }
}

/* Edge of the country: the World breadcrumb pulses a few times, then stops */
.bc-link.is-nudge {
  color: var(--accent);
  border-radius: 3px;
  animation: bc-nudge 0.9s ease-in-out 3;
}
@keyframes bc-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208, 138, 69, 0); }
  50% { box-shadow: 0 0 0 4px rgba(208, 138, 69, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .bc-link.is-nudge { animation: none; outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* Sectors of the Economy window: title plus an emoji switcher (the five sectors, not Energy) */
.sector-window-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.sector-window-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sector-switch { display: flex; gap: 0.35rem; margin-left: auto; }
.sswitch {
  appearance: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.sswitch:hover { border-color: var(--ink-mute); }
.sswitch.is-current { border-color: var(--accent); background: var(--accent-glow); box-shadow: inset 0 -2px 0 var(--accent); cursor: default; }
.sswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kicker-name { color: var(--accent); }
.sector-panel .kicker-official { color: var(--ink-dim); margin-left: 0; }
@media (max-width: 520px) {
  .sector-window-bar { padding: 0.5rem 0.85rem; }
  .sector-switch { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Home tab row (wide screens): "Sectors of the Economy" group label and each sector's type */
.snav-group-label, .snav-type { display: none; }
@media (min-width: 1200px) {
  .snav-group-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
    margin-right: 0.15rem;
  }
  .snav-type { display: inline; color: var(--ink-mute); }
}

/* ---------- What changed (Indicators: Activity, Prices, Capital) ---------- */
.what-changed { margin: 0.6rem 0 0.9rem; }
.wc-head { margin-bottom: 0.35rem; }
.wc-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem 0.9rem; align-items: start; }
.wc-group { border-top: 2px solid var(--accent-dim); padding-top: 0.3rem; min-width: 0; }
.wc-group-h { margin: 0 0 0.15rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.wc-open { background: none; border: 0; color: var(--ink); font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0.15rem 0; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; gap: 0.4rem; }
.wc-open:hover { color: var(--accent); }
.wc-open:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.wc-n { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-mute); font-weight: 400; }
.wc-lines { display: flex; flex-direction: column; }
.wc-line { border-bottom: 1px solid var(--line-soft); }
.wc-line:last-child { border-bottom: 0; }
.wc-sum {
  list-style: none; cursor: pointer; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "asof delta";
  column-gap: 0.6rem; row-gap: 0.05rem; padding: 0.35rem 0.1rem; min-height: 44px; align-items: baseline;
}
.wc-sum::-webkit-details-marker { display: none; }
.wc-sum:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.wc-sum:hover .wc-label { color: var(--ink); }
.wc-label { grid-area: label; font-size: 0.8rem; color: var(--ink-dim); line-height: 1.3; overflow-wrap: anywhere; }
.wc-val { grid-area: val; text-align: right; white-space: nowrap; }
.wc-num { font-family: var(--font-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.wc-unit { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-mute); }
.wc-delta { grid-area: delta; text-align: right; font-family: var(--font-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-delta.is-up { color: #9fbf9a; }
.wc-delta.is-down { color: #d49a8a; }
.wc-delta.is-flat, .wc-delta.is-none { color: var(--ink-mute); }
.wc-asof { grid-area: asof; font-size: 0.68rem; color: var(--ink-mute); }
.wc-more { padding: 0.1rem 0.1rem 0.5rem; font-size: 0.74rem; color: var(--ink-dim); }
.wc-more p { margin: 0.15rem 0; line-height: 1.4; }
.wc-more .k, .energy-prices > .k { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-right: 0.35rem; }
.wc-detail { color: var(--ink-mute); }
.wc-spark { display: flex; align-items: center; gap: 0.4rem; color: var(--ink-dim); }
.wc-morelines > summary { list-style: none; cursor: pointer; font-size: 0.72rem; color: var(--ink-mute); min-height: 36px; display: flex; align-items: center; }
.wc-morelines > summary::-webkit-details-marker { display: none; }
.wc-morelines > summary::before { content: '+ '; }
.wc-morelines[open] > summary::before { content: '− '; }
.wc-morelines > summary:hover { color: var(--ink); }
.wc-hidden { margin: 0.4rem 0 0; font-size: 0.68rem; color: var(--ink-mute); }
.wc-lines-full .wc-line { border-bottom: 1px solid var(--line); }
.wc-lines-full .wc-sum { grid-template-columns: minmax(0, 1fr) 14rem 8rem 8.5rem; grid-template-areas: "label val delta asof"; align-items: center; }
.wc-lines-full .wc-asof { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .wc-lines-full .wc-sum { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "asof delta"; }
}

/* Not yet covered: one quiet line with the planned source and the checked date */
.not-covered { margin: 0.3rem 0; font-size: 0.76rem; color: var(--ink-mute); line-height: 1.45; }
.not-covered .nc-field { color: var(--ink-dim); font-weight: 500; }
.not-covered .nc-text { color: var(--ink-dim); }
.nc-parent { background: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-dim); font: inherit; font-size: 0.72rem; padding: 0.2rem 0.55rem; margin-left: 0.25rem; cursor: pointer; min-height: 32px; }
.nc-parent:hover { color: var(--ink); border-color: var(--ink-mute); }
@media (max-width: 900px) { .nc-parent { min-height: 44px; } }

/* Who's in the seat */
.seat-list, .seat-changes { list-style: none; margin: 0.3rem 0 0.4rem; padding: 0; }
.seat { padding: 0.4rem 0; border-bottom: 1px solid var(--line-soft); }
.seat:last-child { border-bottom: 0; }
.seat-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem 0.75rem; }
.seat-name { font-size: 0.74rem; color: var(--ink-mute); }
.seat-holder { font-size: 0.86rem; color: var(--ink); font-weight: 500; }
.seat-meta { font-size: 0.68rem; color: var(--ink-mute); margin-top: 0.1rem; line-height: 1.45; }
.seat-meta a { color: var(--ink-dim); }
.seat-h { margin: 0.6rem 0 0.15rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.seat-change { font-size: 0.74rem; color: var(--ink-dim); padding: 0.25rem 0; line-height: 1.45; }
.seat-date { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-mute); margin-right: 0.3rem; }
.badge-sm.seat-tag { color: var(--accent); border-color: var(--accent-dim); }

/* "See what people are saying on X": quiet secondary link, never competing with the source link */
.x-link { font-size: 0.68rem; color: var(--ink-mute); text-decoration: none; border-bottom: 1px dotted var(--line); white-space: nowrap; }
.x-link:hover { color: var(--ink-dim); border-bottom-color: var(--ink-mute); }
.x-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.feed-item .meta .x-link { margin-left: auto; }
.feed-item .meta .stage-tag ~ .x-link { margin-left: 0.4rem; }
.x-row { margin: 0.35rem 0 0; }
@media (max-width: 900px) {
  .x-link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline dotted; text-underline-offset: 3px; }
  .feed-item .meta { flex-wrap: wrap; align-items: center; justify-content: flex-start; row-gap: 0; }
  .feed-item .meta .x-link { margin-left: auto; }
  .feed-item .meta .stage-tag { margin-left: 0; }
}

/* Energy tab: diesel moved here from Prices */
.energy-prices { margin: 0.4rem 0 0.6rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); }
.energy-prices > .k { display: block; padding-top: 0.25rem; }

.method-coverage { font-size: 0.78rem; color: var(--ink-dim); border-left: 2px solid var(--accent-dim); padding-left: 0.6rem; }

/* Phase 1: which seat a leadership role is (head of state / government) */
.lead-kind { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line, #2a3038); border-radius: 999px; font-size: 11px; letter-spacing: 0.02em; color: var(--ink-mute, #9aa4ae); vertical-align: 1px; white-space: nowrap; }

/* Phase 1: Sectors of the Economy share strip and Energy electricity mix */
.sector-strip, .energy-mix { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--line, #2a3038); border-radius: 8px; background: rgba(255,255,255,0.02); }
.ss-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
.ss-title { margin: 0; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute, #9aa4ae); font-weight: 600; }
.ss-sub { font-size: 12px; color: var(--ink-mute, #9aa4ae); }
.ss-lines { list-style: none; margin: 0; padding: 0; }
.ss-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-top: 1px solid var(--line, #2a3038); }
.ss-line:first-child { border-top: 0; }
.ss-label { min-width: 0; }
.ss-val strong { font-variant-numeric: tabular-nums; }
.ss-unit { font-size: 12px; color: var(--ink-mute, #9aa4ae); }
.ss-delta { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-delta.is-up { color: #8fc49a; } .ss-delta.is-down { color: #e08b7a; } .ss-delta.is-flat { color: var(--ink-mute, #9aa4ae); }
.ss-asof { font-size: 12px; color: var(--ink-mute, #9aa4ae); white-space: nowrap; }
.ss-hidden, .ss-src { margin: 6px 0 0; font-size: 12px; color: var(--ink-mute, #9aa4ae); }
.mix-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--line, #2a3038); }
.mix-seg { display: block; height: 100%; }
.mix-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.mix-legend li { display: inline-flex; align-items: center; gap: 6px; }
.mix-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mix-coal { background: #6b6f76; } .mix-gas { background: #c9a36b; } .mix-oil { background: #8a6a52; } .mix-nuclear { background: #9b8fd1; }
.mix-hydro { background: #4f8fc0; } .mix-wind { background: #6cc0b4; } .mix-solar { background: #e2c25a; } .mix-bio { background: #7fae6a; } .mix-other { background: #a7b3bd; }
@media (max-width: 900px) {
  .ss-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "delta asof"; }
  .ss-label { grid-area: label; } .ss-val { grid-area: val; text-align: right; } .ss-delta { grid-area: delta; } .ss-asof { grid-area: asof; text-align: right; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }
}
.sector-phone-strip { display: none; }
@media (max-width: 760px) {
  .sector-phone-strip { display: block; padding: 0 0.8rem; }
  .sector-phone-strip .sector-strip, .sector-phone-strip .energy-mix { margin: 8px 0; }
}