/* @moonlight/ui v0.3.2 — tokens/tokens.css */
:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --border: #2a2d3a;
  --text: #e1e4ed;
  --text-muted: #8b8fa3;
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --active: #22c55e;
  --pending: #f59e0b;
  --inactive: #ef4444;
  --font-mono: "SF Mono", "Fira Code", monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* @moonlight/ui v0.3.2 — base-styles/base-styles.css */
/* Base reset + body */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

h2 {
  margin: 1rem 0 0.5rem;
}

h3 {
  margin: 1.5rem 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Layout */
.container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* Stat cards */
.stats-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-card.active {
  border-color: var(--active);
}

.stat-card.pending {
  border-color: var(--pending);
}

.stat-card.inactive {
  border-color: var(--inactive);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Utilities */
.mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  word-break: break-all;
}

.error-text {
  color: var(--inactive);
  font-size: 0.875rem;
}

.hint-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  margin-top: 1rem;
}

.empty-state p {
  margin-bottom: 0.75rem;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-active {
  background: rgba(34, 197, 94, 0.15);
  color: var(--active);
}

.badge-pending {
  background: rgba(245, 158, 11, 0.15);
  color: var(--pending);
}

.badge-inactive {
  background: rgba(239, 68, 68, 0.15);
  color: var(--inactive);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
  position: relative;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: var(--font-mono);
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}

.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.form-row .form-group {
  flex: 1;
  min-width: 150px;
}

/* Buttons */
.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-wide {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
}

.btn-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
}

.btn-link:hover {
  color: var(--text);
}

/* Cards (login / generic card layout) */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
}

.login-card h1 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.login-card p {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

/* Misc banner */
.version-mismatch-banner {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 1.5rem;
  font-size: 0.75rem;
  text-align: center;
}

/* @moonlight/ui v0.3.2 — nav/nav.css */
nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.5rem;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-address {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.version-badge {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.35rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.icon-btn:hover {
  color: var(--text);
  background: var(--surface);
}

/* @moonlight/ui v0.3.2 — world-map/world-map.css */
/*
 * Styles for the @moonlight/ui world-map component.
 *
 * Consumers should fetch this file at build time alongside tokens.css /
 * base-styles.css. The component itself ships unstyled — every visual
 * rule lives here so dark / light themes can be swapped by overriding
 * the tokens upstream.
 */

.world-map-host {
  width: 100%;
  height: 100%;
  position: relative;
  background: transparent;
}

.world-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Baseline land fill for every country / region path in the SVG —
   simple-world-map.svg ships paths with no fill attribute (default
   black), and not every ISO code is in our COUNTRIES table, so any
   untagged path would render as black against the dark page bg. */
.world-map-svg path,
.world-map-svg g[id] {
  fill: var(--border);
  stroke: var(--bg);
  stroke-width: 0.4;
}

.world-map-country {
  fill: var(--border);
  stroke: var(--bg);
  stroke-width: 0.4;
  cursor: pointer;
  transition: fill 120ms ease-out;
}

.world-map-country path {
  /* Inner paths inside a tagged <g> should inherit the same fill so the
     whole country lights up on selection. */
  fill: inherit;
  stroke: inherit;
  stroke-width: inherit;
}

.world-map-country:hover {
  fill: var(--primary-hover);
}

.world-map-country:hover path {
  fill: var(--primary-hover);
}

.world-map-country.selected {
  fill: var(--primary);
}

.world-map-country.selected path {
  fill: var(--primary);
}

.world-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
}

/* network-dashboard app-styles */
/*
 * App-specific styles for network-dashboard.
 *
 * Tokens + base-styles + nav come from @moonlight/ui at build time
 * (concatenated by build.ts). This file only defines the 5-section
 * layout + the SVG-driven topology / sparkline / world-map visual
 * vocabulary on top of the upstream dark theme.
 *
 * All colours are sourced from the @moonlight/ui tokens.css palette
 * (--bg / --surface / --border / --text / --text-muted / --primary /
 * --active / --pending / --inactive). Event-kind accents below live in
 * a small palette here because the sketch maps each kind to a specific
 * hue that doesn't have a single token equivalent.
 */

:root {
  /* Per-event-kind accents — dark-mode tuned (saturated, mid-lightness). */
  --kind-council: #a78bfa; /* purple */
  --kind-pp-add: #4ade80; /* green */
  --kind-pp-remove: #6b7280; /* gray */
  --kind-asset: #fbbf24; /* yellow */
  --kind-deposit: #fb923c; /* orange */
  --kind-settlement: #60a5fa; /* blue */
  --kind-bundle: #22d3ee; /* teal */
  --kind-default: #f87171; /* red, fallback pulses */

  /* Topology + center node. */
  --moonlight-yellow: #fde68a;
  --moonlight-yellow-stroke: #f59e0b;
  --council-fill: rgba(74, 222, 128, 0.12);
  --council-stroke: #4ade80;
  --pp-fill: rgba(251, 146, 60, 0.18);
  --pp-stroke: #fb923c;

  /* Sparkline lines. */
  --sparkline-throughput: #60a5fa;
  --sparkline-latency: #a78bfa;
  --sparkline-volume: #4ade80;
}

/* Override @moonlight/ui's .container width — the dashboard sprawls. */
main.container {
  max-width: 1440px;
  margin: 1.25rem auto 2rem;
  padding: 0 1.5rem;
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.row {
  display: grid;
  gap: 1rem;
}

.row.detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(200px, 240px));
  grid-template-areas:
    "map  map  countries"
    "map  map  councils"
    "events events providers";
}

/* `min-height: 0` lets the grid cell win over each section's intrinsic
   content height, and `overflow: hidden` clips children so the inner
   scroll regions can take over (set on the content lists below). */
.row.detail-grid > .section {
  min-height: 0;
  overflow: hidden;
}
.row.detail-grid > .world-map {
  grid-area: map;
}
.row.detail-grid > .country-details {
  grid-area: countries;
}
.row.detail-grid > .council-details {
  grid-area: councils;
}
.row.detail-grid > .provider-details {
  grid-area: providers;
}
.row.detail-grid > .activity-feed {
  grid-area: events;
}

/* Each panel's content area scrolls vertically; the header stays put. */
.country-details-panel,
.council-details-panel,
.provider-details-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.row.trends {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
}

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  box-sizing: border-box;
}

/* §1 — Counter strip ──────────────────────────────────────────────── */

.counter-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.75rem;
}

.counter-tile {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 8px;
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.counter-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.counter-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* §3 — Activity feed ──────────────────────────────────────────────── */

.activity-feed,
.council-details,
.provider-details {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 0.75rem;
}

.activity-feed {
  padding: 0.75rem;
}

.activity-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.activity-feed-title {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.activity-feed-status {
  font-size: 0.7rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: rgba(139, 143, 163, 0.18);
  color: var(--text-muted);
}

.activity-feed-status[data-state="open"] {
  background: rgba(74, 222, 128, 0.18);
  color: var(--active);
}

.activity-feed-status[data-state="connecting"] {
  background: rgba(245, 158, 11, 0.18);
  color: var(--pending);
}

.activity-feed-status[data-state="closed"] {
  background: rgba(239, 68, 68, 0.2);
  color: var(--inactive);
}

.activity-feed-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

.activity-card {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  border-radius: 8px;
  border-left: 3px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.5rem 0.625rem;
  animation: card-in 220ms ease-out;
  opacity: 1;
  transition: opacity 600ms ease-in, transform 600ms ease-in;
}

.activity-card.fading {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes card-in {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.activity-card.kind-council_formed {
  border-left-color: var(--kind-council);
}
.activity-card.kind-provider_added {
  border-left-color: var(--kind-pp-add);
}
.activity-card.kind-provider_removed {
  border-left-color: var(--kind-pp-remove);
}
.activity-card.kind-asset_registered {
  border-left-color: var(--kind-asset);
}
.activity-card.kind-channel_settlement {
  border-left-color: var(--kind-settlement);
}
.activity-card.kind-channel_deposit {
  border-left-color: var(--kind-deposit);
}
.activity-card.kind-channel_bundle {
  border-left-color: var(--kind-bundle);
}

.activity-glyph {
  font-size: 1.125rem;
  line-height: 1.1;
  font-weight: 700;
  margin-top: 0.125rem;
  color: var(--text);
}

.activity-card.kind-council_formed .activity-glyph {
  color: var(--kind-council);
}
.activity-card.kind-provider_added .activity-glyph {
  color: var(--kind-pp-add);
}
.activity-card.kind-provider_removed .activity-glyph {
  color: var(--kind-pp-remove);
}
.activity-card.kind-asset_registered .activity-glyph {
  color: var(--kind-asset);
}
.activity-card.kind-channel_settlement .activity-glyph {
  color: var(--kind-settlement);
}
.activity-card.kind-channel_deposit .activity-glyph {
  color: var(--kind-deposit);
}
.activity-card.kind-channel_bundle .activity-glyph {
  color: var(--kind-bundle);
}

.activity-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.activity-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
}

.activity-council {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-detail {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* §3 — Council details ────────────────────────────────────────────── */

.council-details {
  padding: 0.875rem 1.125rem;
}

.council-details-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
}

.council-details-hint.hidden,
.council-details-panel.hidden {
  display: none;
}

.council-details-header {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  margin-bottom: 0.625rem;
}

.council-details-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.council-details-jurisdiction {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(139, 143, 163, 0.18);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
}

.council-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.kv-block {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
}

.kv-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.kv-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.kv-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.council-details-subheader {
  margin: 0.75rem 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.council-details-pp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.council-details-pp-button {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.council-details-pp-button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}

/* §4 — Sparklines ─────────────────────────────────────────────────── */

.sparklines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.sparkline-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.sparkline-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sparkline-title {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.sparkline-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sparkline-svg {
  width: 100%;
  height: 80px;
}

.sparkline-unit {
  font-size: 0.625rem;
  color: var(--text-muted);
  align-self: flex-end;
}

/* §4 — Asset breakdown ────────────────────────────────────────────── */

.asset-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.asset-breakdown-header {
  margin-bottom: 0.25rem;
}

.asset-breakdown-title {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.asset-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.asset-breakdown-empty {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.asset-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 56px 90px;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
}

.asset-code {
  font-weight: 700;
  color: var(--text);
}

.asset-bar-box {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  height: 12px;
  overflow: hidden;
}

.asset-bar {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--primary-hover) 100%
  );
  border-radius: 4px;
  transition: width 220ms ease-out;
}

.asset-percent {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
}

.asset-amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--text);
}

/* §5 — World map ──────────────────────────────────────────────────── */

.world-map {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.world-map-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.world-map-title {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.world-map-status {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Section-level wrapper that sizes the shared @moonlight/ui world-map
   to the dashboard's §5 slot. The internal .world-map-host / .world-map-svg
   styling comes from @moonlight/ui/world-map/world-map.css. */
.world-map-section-host {
  width: 100%;
  height: 320px;
  position: relative;
}

/* Hover-driven slot classes. The ui/world-map module applies these via
   setSlot(); the colors / opacities below are this dashboard's choice. */
.world-map-svg .world-map-country.hovered,
.world-map-svg .world-map-country.hovered path {
  fill: var(--primary-hover);
}

.world-map-svg .world-map-country.reachable,
.world-map-svg .world-map-country.reachable path {
  fill: #86efac;
}

/* Dim by replacing the fill instead of dropping opacity — the base land
   color is already dark (#2a2d3a), so opacity 0.25 over the page bg made
   un-focused countries read as black. A flat muted fill keeps every
   dimmed country to the same quiet tone regardless of whether it was
   `selected` before. */
.world-map-svg .world-map-country.dimmed,
.world-map-svg .world-map-country.dimmed path {
  fill: rgba(139, 143, 163, 0.18);
}

/* Persistent "you clicked this" highlight — kept after the pointer leaves
   so the country-details side panel has a visible anchor. */
.world-map-svg .world-map-country.active-country,
.world-map-svg .world-map-country.active-country path {
  fill: var(--primary);
  stroke: var(--primary-hover);
  stroke-width: 1;
}

/* §5 — Country details side panel ────────────────────────────────── */

.country-details {
  padding: 0.875rem 1.125rem;
  display: flex;
  flex-direction: column;
}

.country-details-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
}

.country-details-hint.hidden,
.country-details-panel.hidden {
  display: none;
}

.country-details-header {
  display: flex;
  gap: 0.625rem;
  align-items: baseline;
  margin-bottom: 0.625rem;
}

.country-details-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
}

.country-details-code {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: rgba(139, 143, 163, 0.18);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
}

.country-details-empty {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
}

.country-details-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

.country-details-council {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.country-details-council:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--primary);
}

.country-details-council-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-details-council-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.country-details-council-juris {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* §3 — Provider details column ────────────────────────────────────── */

.provider-details-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-style: italic;
}

.provider-details-hint.hidden,
.provider-details-panel.hidden {
  display: none;
}

.provider-details-header {
  margin-bottom: 0.625rem;
}

.provider-details-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  word-break: break-all;
}

.provider-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.provider-details-kv {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
}

.provider-details-kv-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.provider-details-kv-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.provider-details-subheader {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.provider-details-pubkey {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text);
  word-break: break-all;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 0.375rem 0.5rem;
}

.provider-details-council-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.provider-details-council-list li {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 0.375rem 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  overflow: hidden;
}

.provider-details-council-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-details-council-juris {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* Popover anchored to the cursor inside the §5 host. */
.world-map-popover {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  min-width: 180px;
  max-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  font-size: 0.75rem;
  color: var(--text);
}

.world-map-popover-header {
  font-weight: 700;
  margin-bottom: 0.375rem;
  color: var(--primary);
}

.world-map-popover-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.world-map-popover-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.world-map-popover-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-map-popover-meta {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.world-map-popover-empty {
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 960px) {
  .row.detail-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "map"
      "countries"
      "councils"
      "events"
      "providers";
  }
  .row.trends {
    grid-template-columns: 1fr;
  }
  .counter-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sparklines {
    grid-template-columns: 1fr;
  }
  .activity-feed,
  .council-details,
  .provider-details {
    min-height: 320px;
  }
}