:root {
  /* ── Core Group brand palette (beirutcore.com) ──────────
     Gold #8B6914 accent · Slate #2B3038 primary surface ·
     Stone #D4C5B0 secondary text · Olive #5C6B4F hover/subtle.
     Slate ramp re-centered on the brand slate as the dominant
     card surface; bg recedes darker, borders sit lighter. */
  --gold: #8B6914;        /* brand gold — fills, CTAs, active accent */
  --gold-soft: #B8862A;   /* lifted gold — legacy accent (kept for back-compat) */
  --gold-light: #C9A961;  /* brand gold-on-dark — eyebrows, titles, section heads, links */
  --gold-muted: #8C7A3F;  /* desaturated gold — hairlines / low-emphasis rules */
  --gold-dark: #8A5F12;   /* brand gold-dark — pressed/active button state */
  --parchment: #F5F0E8;   /* warm light surface (latent — login/print) */
  --brand-black: #2C2A26; /* brand near-black — deepest insets / tooltip scrim */
  --olive: #5C6B4F;       /* brand olive — interactive hover, subtle accent */
  --olive-soft: #74855E;
  --olive-dim: rgba(92,107,79,0.15);
  --slate-900: #1B1F25;   /* app background (recedes behind cards) */
  --slate-800: #2B3038;   /* brand slate — primary card / panel surface */
  --slate-700: #363D47;   /* borders, fills, hover base (lighter than card) */
  --slate-600: #464E59;   /* stronger strokes */
  --bone: #F7F5F0;        /* brand background tone — primary text on dark */
  --bone-dim: #C9C4B6;
  --stone: #D4C5B0;       /* brand stone — secondary text on dark */
  --stone-dim: #8A8270;
  --status-ok: #3F7E4C;
  --status-warn: #B8862A;
  --status-err: #9B3D3D;
  --status-info: #4A6B8A;
  --severe: #b30000;
  --moderate: #fc8d59;
  --low: #fee090;
  --none: #5a6068;
  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --radius: 3px;          /* brand radius */
  --pad: 14px;
  --pad-sm: 10px;

  /* ── Layout & density knobs ───────────────────────────────────
     Each default IS the current hard-coded value, so introducing
     these changed nothing on its own; they exist so overall spacing,
     card height, scroll length, and base type can be tuned in one
     place (and live via the token editor at ?edit=1). */
  --font-size-base: 13px;  /* body base font size */
  --grid-gap: 10px;        /* gap between cards in .g grids */
  --pane-pad-y: 14px;      /* pane padding — top */
  --pane-pad-x: 18px;      /* pane padding — sides */
  --pane-pad-b: 32px;      /* pane padding — bottom */
  --card-h-tall: 320px;    /* .card.tall body min-height */
  --card-h-taller: 440px;  /* .card.taller body min-height */
  --card-h-tallest: 560px; /* .card.tallest body min-height */
  --scroll-max: 280px;     /* .scroll max-height */
  --scroll-max-lg: 440px;  /* .scroll-lg max-height */
  --scroll-max-xl: 560px;  /* .scroll-xl max-height */
  --drawer-w: 460px;       /* AOI damage-detail drawer width */
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--slate-900);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { color: var(--gold-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── TOPBAR ─────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--slate-700);
  background: linear-gradient(180deg, var(--slate-800) 0%, var(--slate-900) 100%);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand-mark {
  width: 32px; height: 34px; align-self: center;
  background: url('img/logo-coregroup.png') center/contain no-repeat;
  border: none; border-radius: 0; font-size: 0;
}
.brand-name {
  color: var(--bone); font-family: var(--font-display);
  font-size: 23px; font-weight: 600; letter-spacing: 0.3px; line-height: 1;
}
.brand-name .core { color: var(--gold-light); }
.brand-sub { color: var(--stone-dim); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; margin-left: 4px; font-family: var(--font-sans); align-self: center; }
.idx-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px; background: var(--slate-900);
  border: 1px solid var(--slate-700); border-radius: 4px;
}
.idx-label { font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--stone-dim); font-family: var(--font-sans); font-weight: 600; }
.idx-value { font-family: var(--font-mono); font-weight: 600; font-size: 20px; color: #ff7a4a; letter-spacing: 0.5px; }
.idx-delta { font-size: 11px; color: #ff7a8a; font-weight: 600; font-family: var(--font-mono); }
.idx-meter { position: relative; width: 180px; height: 5px; background: var(--slate-700); border-radius: 3px; overflow: hidden; }
.idx-meter::before { content: ''; position: absolute; inset: 0; width: 87%; background: linear-gradient(90deg, #62d899 0%, #d4af37 50%, #ff4a4a 100%); }
.idx-meter::after { content: ''; position: absolute; left: 87%; top: -3px; width: 2px; height: 11px; background: #fff; box-shadow: 0 0 6px #fff; }
.presence {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; background: var(--slate-900); border: 1px solid var(--slate-700); border-radius: 4px;
}
.presence .pl { font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--stone-dim); margin-right: 4px; font-family: var(--font-sans); font-weight: 600; }
.presence .av {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: var(--slate-900);
  border: 1.5px solid var(--slate-800);
  margin-left: -6px; font-family: var(--font-mono);
}
.presence .av:first-of-type { margin-left: 0; }
.presence .av.on { box-shadow: 0 0 0 1.5px var(--status-ok); }
.presence .av.off { opacity: 0.45; }
.hdr-meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; }
.hdr-meta .row-1 { color: var(--bone-dim); }
.hdr-meta .row-2 { color: var(--stone-dim); font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.4px; font-variant-numeric: tabular-nums; }
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--status-ok); margin-right: 6px;
  box-shadow: 0 0 6px var(--status-ok); animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── DOM STRIP ──────────────────────────────────────── */
.dom-strip { display: flex; gap: 6px; padding: 8px 18px; background: var(--slate-900); border-bottom: 1px solid var(--slate-700); }
.dom-pill {
  flex: 1; background: var(--slate-800); border: 1px solid var(--slate-700); border-radius: 3px;
  padding: 7px 10px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; transition: background 0.15s, border-color 0.15s; cursor: pointer; position: relative;
}
.dom-pill:hover { background: var(--olive-dim); border-color: rgba(116,133,94,0.5); }
.dom-pill .name { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bone-dim); font-weight: 600; font-family: var(--font-sans); }
.dom-pill .val { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--bone); }
.dom-pill.active { background: var(--slate-900); border-color: var(--gold-muted); }
.dom-pill.active .name { color: var(--gold-light); }
.dom-pill.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--gold); border-radius: 1px;
}
.dom-pill.crit { border-color: rgba(255,74,74,0.33); box-shadow: inset 0 0 12px rgba(255,74,74,0.09); }
.dom-pill.crit .val { color: #ff7a4a; }
.dom-pill.warn { border-color: rgba(212,175,55,0.33); }
.dom-pill.warn .val { color: #d4af37; }
.dom-pill.ok .val { color: #62d899; }

/* ── TAB BAR ────────────────────────────────────────── */
.tabbar {
  display: flex; flex-wrap: wrap;
  background: var(--slate-800);
  border-bottom: 1px solid var(--slate-700);
}
.tab {
  padding: 10px 18px;
  cursor: pointer;
  color: var(--bone-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-right: 1px solid var(--slate-700);
  border-bottom: 2px solid transparent;
  user-select: none;
  transition: color 120ms, border-color 120ms, background 120ms;
  display: flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--bone); background: var(--slate-700); }
.tab.active { color: var(--gold-soft); border-bottom-color: var(--gold); background: var(--slate-900); }
.tab .badge {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  background: var(--slate-700); color: var(--stone); letter-spacing: 0.4px;
  font-family: var(--font-sans); font-weight: 600; font-variant-numeric: tabular-nums;
}
.tab.active .badge { background: rgba(184,134,42,0.18); color: var(--gold-light); }

/* ── PANES ──────────────────────────────────────────── */
.pane { display: none; padding: var(--pane-pad-y) var(--pane-pad-x) var(--pane-pad-b); }
.pane.active { display: block; animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── GRID ───────────────────────────────────────────── */
.g { display: grid; gap: var(--grid-gap); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 1300px) { .g-3, .g-4 { grid-template-columns: repeat(2,1fr); } .g-12 { grid-template-columns: repeat(6,1fr); } }
@media (max-width: 800px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } .g-12 { grid-template-columns: repeat(2,1fr); } }

/* ── CARDS ──────────────────────────────────────────── */
.card {
  background: var(--slate-800);
  border: 1px solid var(--slate-700);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  min-height: 80px;
  overflow: hidden;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { border-color: var(--slate-600); box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.card.span-2 { grid-column: span 2; }
.card.span-3 { grid-column: span 3; }
.card.span-4 { grid-column: span 4; }
.card.span-5 { grid-column: span 5; }
.card.span-6 { grid-column: span 6; }
.card.span-7 { grid-column: span 7; }
.card.span-8 { grid-column: span 8; }
.card.span-9 { grid-column: span 9; }
.card.span-12 { grid-column: span 12; }
.card.tall .card-body { min-height: var(--card-h-tall); }
.card.taller .card-body { min-height: var(--card-h-taller); }
.card.tallest .card-body { min-height: var(--card-h-tallest); }
.card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--pad-sm) 50px var(--pad-sm) var(--pad);
  border-bottom: 1px solid var(--slate-700);
  background: linear-gradient(180deg, rgba(201,169,97,0.045) 0%, transparent 100%);
  gap: 10px; flex-wrap: wrap; position: relative;
}
.card-head::after {
  content: ''; position: absolute; left: var(--pad); bottom: -1px;
  width: 38px; height: 2px; background: var(--gold);
}
.card-title {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card-meta {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
  color: var(--stone-dim);
}
.card-body { padding: var(--pad); flex: 1; }
.card-body.flush { padding: 0; position: relative; }

/* ── CARD ID BADGE ──────────────────────────────────── */
.card-id {
  position: absolute; top: 6px; right: 6px; z-index: 1200;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.5px; line-height: 1;
  padding: 3px 6px; border-radius: 3px;
  background: rgba(8,10,13,0.86); color: var(--gold-soft);
  border: 1px solid var(--gold); pointer-events: none;
  text-transform: none; user-select: all;
}
body.hide-ids .card-id { display: none; }

/* ── PANEL TAGS ─────────────────────────────────────── */
.panel-tag {
  font-size: 9px; font-family: var(--font-sans); letter-spacing: 1.2px;
  padding: 2px 6px; border-radius: 2px; text-transform: uppercase; font-weight: 600;
}
.tag-live { color: #62d899; background: rgba(28,74,50,0.45); border: 1px solid #1c4a32; }
.tag-derived { color: #d4af37; background: rgba(74,58,20,0.5); border: 1px solid #4a3a14; }
.tag-synth { color: #b58eff; background: rgba(58,42,92,0.4); border: 1px solid #3a2a5c; }
.tag-crit { color: #ff7a8a; background: rgba(74,28,28,0.5); border: 1px solid #4a1c1c; }
.tag-static { color: var(--bone-dim); background: var(--slate-700); border: 1px solid var(--slate-700); }

/* ── KPI ────────────────────────────────────────────── */
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi-value {
  font-size: 28px; font-weight: 700; color: var(--bone);
  font-feature-settings: "tnum" 1; letter-spacing: -0.5px; font-family: var(--font-mono);
  line-height: 1.1;
}
.kpi-value.small { font-size: 18px; }
.kpi-value.large { font-size: 34px; }
.kpi-value.crit { color: #ff7a4a; }
.kpi-value.warn { color: var(--gold-soft); }
.kpi-value.ok { color: #62d899; }
.kpi-label { font-size: 9.5px; color: var(--bone-dim); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-family: var(--font-sans); }
.kpi-sub { font-size: 11px; color: var(--stone-dim); font-family: var(--font-mono); }
.kpi-delta {
  display: inline-block; padding: 2px 6px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px; margin-left: 6px; font-weight: 600;
}
.kpi-delta.pos { color: #84d49a; background: rgba(63,126,76,0.15); }
.kpi-delta.neg { color: #e29292; background: rgba(155,61,61,0.18); }
.kpi-delta.warn { color: var(--gold-soft); background: rgba(184,134,42,0.12); }

/* ── HEALTH PILLS ───────────────────────────────────── */
.health-strip { display: flex; flex-wrap: wrap; gap: 5px; }
.health-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 3px;
  background: var(--slate-700);
  font-family: var(--font-mono); font-size: 10px;
  border: 1px solid transparent;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-ok); }
.health-pill.warn .dot { background: var(--status-warn); }
.health-pill.err .dot { background: var(--status-err); border: 1px solid rgba(155,61,61,0.5); }
.health-pill.err { border-color: rgba(155,61,61,0.35); }
.health-pill .pill-name { color: var(--bone); font-weight: 500; }
.health-pill .pill-mtime { color: var(--stone-dim); }
.health-cat {
  font-size: 9px; color: var(--stone-dim); letter-spacing: 1px;
  text-transform: uppercase; margin: 6px 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.health-cat::after { content: ''; flex: 1; height: 1px; background: var(--slate-700); }

/* ── TABLE ──────────────────────────────────────────── */
table.real { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.real th, table.real td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--slate-700); }
table.real th {
  font-size: 9.5px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--stone);
  font-weight: 600; position: sticky; top: 0; background: var(--slate-800); z-index: 2;
  font-family: var(--font-sans);
}
table.real td { color: var(--bone); font-variant-numeric: tabular-nums; }
table.real td.num, table.real th.num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
table.real td.mono { font-family: var(--font-mono); font-size: 10.5px; color: var(--bone-dim); }
table.real td.dim { color: var(--stone-dim); }
table.real tr:hover td { background: var(--slate-700); }
.scroll { max-height: var(--scroll-max); overflow-y: auto; }
.scroll-lg { max-height: var(--scroll-max-lg); overflow-y: auto; overflow-x: auto; }
.scroll-xl { max-height: var(--scroll-max-xl); overflow-y: auto; }

/* ── BAR ROW ────────────────────────────────────────── */
.bar-row { display: grid; grid-template-columns: 140px 1fr 60px; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; }
.bar-row.compact { grid-template-columns: 90px 1fr 50px; margin-bottom: 3px; font-size: 10px; }
.bar-row .name { color: var(--bone-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bar-wrap { background: var(--slate-700); height: 6px; border-radius: 2px; overflow: hidden; }
.bar-row .bar { height: 100%; background: var(--gold-soft); transition: width 0.3s; }
.bar-row .bar.severe { background: var(--severe); }
.bar-row .bar.moderate { background: var(--moderate); }
.bar-row .bar.low { background: var(--low); }
.bar-row .bar.ok { background: var(--status-ok); }
.bar-row .bar.info { background: var(--status-info); }
.bar-row .val { font-family: var(--font-mono); color: var(--bone); text-align: right; font-size: 10px; }

/* ── STACKED BAR ────────────────────────────────────── */
.sbar-row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 11px; }
.sbar-track { display: flex; height: 12px; background: var(--slate-700); border-radius: 2px; overflow: hidden; }
.sbar-track > span { height: 100%; }

/* ── SVG CHARTS ─────────────────────────────────────── */
svg.line, svg.col, svg.area, svg.donut, svg.graph { width: 100%; height: 100%; display: block; }
.axis text { font-family: var(--font-mono); font-size: 9px; fill: var(--stone-dim); }
.axis line, .axis path { stroke: var(--slate-700); fill: none; }
.line-path { fill: none; stroke: var(--gold-soft); stroke-width: 1.5; }
.line-path.alt { stroke: #62d899; }
.line-path.warn { stroke: var(--gold-soft); }
.line-path.err { stroke: var(--status-err); }
.line-path.info { stroke: var(--status-info); }
.line-fill { fill: rgba(184,134,42,0.15); stroke: none; }
.line-fill.alt { fill: rgba(63,126,76,0.13); }
.line-fill.err { fill: rgba(155,61,61,0.15); }
.col-rect { fill: var(--gold-soft); }
.col-rect.alt { fill: var(--status-info); }
.col-rect.err { fill: var(--status-err); }
.col-rect:hover { fill: var(--gold); }
.donut-slice { transition: opacity 0.15s; }
.donut-slice:hover { opacity: 0.8; }

/* ── MAP ────────────────────────────────────────────── */
.map { width: 100%; height: 100%; min-height: 320px; border-radius: 3px; overflow: hidden; }
.leaflet-container { background: var(--slate-900); font-family: var(--font-sans); }
.leaflet-tooltip, .leaflet-popup-content-wrapper {
  background: var(--slate-800) !important; color: var(--bone) !important;
  border: 1px solid var(--slate-700) !important; border-radius: 3px !important;
  font-size: 11px !important; font-family: var(--font-sans) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
}
.leaflet-popup-content { margin: 0; width: 360px !important; }
.leaflet-popup-content-wrapper { padding: 4px 0; }
.leaflet-popup-close-button { color: var(--stone-dim) !important; padding: 6px 8px 0 0 !important; }
.leaflet-popup-close-button:hover { color: var(--bone) !important; }
.leaflet-popup-tip { background: var(--slate-800) !important; }
.leaflet-control-zoom a { background: var(--slate-800) !important; color: var(--bone) !important; border-color: var(--slate-700) !important; }
.leaflet-control-zoom a:hover { background: var(--slate-700) !important; }
.leaflet-control-attribution { background: rgba(23,27,32,0.7) !important; color: var(--stone-dim) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--bone-dim) !important; }
.map-legend {
  position: absolute; bottom: 10px; left: 10px; z-index: 1000;
  background: rgba(23,27,32,0.93); padding: 8px 10px;
  border: 1px solid var(--slate-700); border-radius: 3px;
  font-family: var(--font-mono); font-size: 10px; color: var(--bone-dim);
  max-width: 260px;
}
.map-legend .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.map-legend .row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.map-controls {
  position: absolute; top: 10px; right: 10px; z-index: 1000;
  background: rgba(23,27,32,0.93); padding: 6px 8px;
  border: 1px solid var(--slate-700); border-radius: 3px;
  display: flex; flex-direction: column; gap: 4px;
}
.map-controls label { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--bone-dim); cursor: pointer; font-family: var(--font-mono); }
.map-controls input[type=checkbox] { accent-color: var(--gold-soft); }
.basemap-toggle { display: flex; gap: 2px; margin-bottom: 4px; }
.basemap-toggle button {
  background: transparent; color: var(--bone-dim);
  border: 1px solid var(--slate-600); padding: 3px 7px; font-family: var(--font-sans); font-size: 9px; font-weight: 600;
  cursor: pointer; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.8px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.basemap-toggle button:not(.active):hover { background: var(--olive); color: var(--bone); border-color: var(--olive); }
.basemap-toggle button.active { background: var(--gold); color: var(--bone); border-color: var(--gold); font-weight: 600; }

/* MarkerCluster dark */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
  background-color: rgba(184, 134, 42, 0.18) !important;
}
.marker-cluster-small div { background-color: rgba(58,42,20,0.85) !important; color: #d4af37 !important; border: 1.5px solid #d4af37; }
.marker-cluster-medium div { background-color: rgba(74,58,20,0.85) !important; color: #d4af37 !important; border: 1.5px solid #d4af37; }
.marker-cluster-large div { background-color: rgba(122,90,20,0.9) !important; color: #fff !important; border: 1.5px solid #d4af37; }
.marker-cluster div { font-family: var(--font-mono); font-weight: 600; font-size: 11px; }

/* ── STRIKE POPUP (verbatim from mockup.html) ───────── */
.strike-pop { font-size: 11.5px; color: var(--bone); padding: 10px 12px; max-width: 360px; }
.strike-pop .sp-loc { font-size: 14px; font-weight: 700; color: var(--bone); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.strike-pop .sp-time { font-family: var(--font-mono); font-size: 10.5px; color: var(--bone-dim); padding-bottom: 6px; border-bottom: 1px solid var(--slate-700); }
.strike-pop .sp-time .utc { color: var(--stone-dim); margin-left: 8px; opacity: 0.7; }
.strike-pop .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 11px; margin: 6px 0; }
.strike-pop .sp-grid .k { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--stone-dim); font-weight: 600; }
.strike-pop .sp-grid .v { font-family: var(--font-mono); color: var(--bone); font-weight: 500; display: flex; align-items: center; }
.strike-pop .sp-narrative { background: var(--slate-900); border-left: 2px solid var(--gold-soft); padding: 8px 10px; margin: 8px 0 6px 0; font-size: 11.5px; line-height: 1.5; max-height: 140px; overflow-y: auto; color: var(--bone); }
/* P1 — KE-density chip in YLT popup (spec: docs/research/ylt-ke-interaction-primitives-2026-06-02.md) */
.strike-pop .sp-ke-chip { display: flex; align-items: center; gap: 7px; margin: 6px 0 2px 0; padding: 4px 8px; background: rgba(184,134,42,0.10); border-left: 2px solid var(--gold-soft); border-radius: 1px; font-size: 10.5px; font-family: var(--font-mono); color: var(--bone-dim); }
.strike-pop .sp-ke-chip-count { color: #ff7a8a; font-weight: 700; font-size: 12px; }
.strike-pop .sp-ke-chip-label { color: var(--stone-dim); letter-spacing: 0.3px; }
.strike-pop .ylt-ke-spark { display: inline-flex; align-items: flex-end; gap: 1px; height: 14px; margin-left: auto; }
.strike-pop .ylt-ke-spark-bar { width: 3px; background: var(--gold-soft); opacity: 0.55; border-radius: 0.5px; }
.strike-pop .ylt-ke-spark-bar.day0 { background: #ff7a8a; opacity: 0.9; }
.strike-pop .sp-sources { font-family: var(--font-mono); font-size: 10px; color: var(--stone-dim); padding-top: 6px; border-top: 1px solid var(--slate-700); }
.strike-pop .sp-sources .ss-item { display: block; color: var(--bone-dim); padding: 1px 0; }
.strike-pop .sp-badge { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 9px; letter-spacing: 1px; font-weight: 700; font-family: var(--font-mono); }
.sp-badge.verified { background: rgba(28,74,50,0.5); color: #62d899; border: 1px solid #1c4a32; }
.sp-badge.tier-a { background: rgba(28,74,50,0.5); color: #62d899; border: 1px solid #1c4a32; }
.sp-badge.tier-bp { background: rgba(74,58,20,0.5); color: #d4af37; border: 1px solid #4a3a14; }
.sp-badge.tier-c { background: var(--slate-700); color: var(--bone-dim); border: 1px solid var(--slate-600); }
.sp-badge.evac { background: rgba(28,46,74,0.5); color: #4a9eff; border: 1px solid #1c2e4a; }
.sp-badge.actor-il { background: rgba(74,28,28,0.55); color: #ff7a8a; border: 1px solid #4a1c1c; }
.sp-badge.actor-hz { background: rgba(74,58,20,0.55); color: #ff7a4a; border: 1px solid #4a3a14; }
.sp-badge.actor-un { background: var(--slate-700); color: var(--bone-dim); border: 1px solid var(--slate-600); }
.sp-badge.weapon { background: rgba(58,42,92,0.5); color: #b58eff; border: 1px solid #3a2a5c; }
.sp-conf-bar { display: inline-block; vertical-align: middle; width: 60px; height: 5px; background: var(--slate-700); border-radius: 2px; margin-left: 0; overflow: hidden; }
.sp-conf-bar > div { height: 100%; background: linear-gradient(90deg, #ff4a4a, #d4af37, #62d899); }

/* ── DAMAGE RAMP / PW STRIKES (lebanon-damage-mapping) ─ */
.ramp-bar {
  height: 14px; border-radius: 2px;
  background: linear-gradient(to right,
    rgba(120,120,120,0.10) 0%,
    rgba(120,120,120,0.10) 28%,
    rgba(255,220,0,0.4) 28%,
    rgba(252,141,89,0.7) 51%,
    rgba(179,0,0,0.88) 71%,
    rgba(107,0,140,0.97) 100%
  );
  border: 1px solid var(--slate-700);
}
.ramp-axis { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; font-family: var(--font-mono); font-size: 9px; color: var(--stone-dim); margin-top: 4px; }
.ramp-axis span { text-align: center; }
.ramp-axis span:first-child { text-align: left; }
.ramp-axis span:last-child { text-align: right; }

.pw-strikes {
  font-size: 11px; padding: 6px 8px; margin: 4px 0 8px;
  background: rgba(255, 165, 0, 0.07);
  border-left: 2px solid rgba(255, 165, 0, 0.6);
  display: flex; gap: 10px; align-items: center;
}
.pw-count { color: #ffc060; font-weight: 600; font-family: var(--font-mono); }
.pw-zero { color: #6fbf73; font-family: var(--font-mono); }
.consensus-badge {
  display: inline-block; padding: 2px 6px; font-size: 9.5px; font-weight: 600;
  border-radius: 2px; font-family: var(--font-mono); letter-spacing: 0.5px;
}
.consensus-badge.modplus { color: #6fbf73; background: rgba(111,191,115,0.13); border: 1px solid rgba(111,191,115,0.4); }
.consensus-badge.severe { color: #ff7b6b; background: rgba(255,123,107,0.15); border: 1px solid rgba(255,123,107,0.4); }
.consensus-badge.verified { color: #fff; background: rgba(40,175,90,0.85); border: 1px solid rgba(40,175,90,1); }
.consensus-badge.flat { color: var(--stone-dim); background: var(--slate-800); border: 1px solid var(--slate-700); }

/* ── DAMAGE CHOROPLETH CONTROL BAR + METHOD NOTES ───── */
.dmg-controls { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 10px 13px; border-bottom: 1px solid var(--slate-700); }
.dmg-ctl-l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--stone-dim); margin-bottom: 5px; }
.dmg-hint { padding: 8px 13px; border-bottom: 1px solid var(--slate-700); font-size: 11px; line-height: 1.55; color: var(--bone-dim); background: rgba(184,134,42,0.05); }
.dmg-hint b { color: var(--bone); font-weight: 600; }
.dmg-hint .cloud-warn { display: block; color: var(--gold-soft); margin-bottom: 5px; }
.dmg-hint .method-warn { color: #ff7a8a; }
.method-note { background: var(--slate-900); border: 1px solid var(--slate-700); border-left: 2px solid var(--gold-soft); border-radius: 3px; padding: 9px 11px; }
.method-note.mn-warn { border-left-color: var(--status-err); }
.method-note .mn-h { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--bone); margin-bottom: 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.method-note .mn-k { font-size: 8.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold-soft); }
.method-note.mn-warn .mn-k { color: #ff7a8a; }
.method-note .mn-b { font-size: 11px; line-height: 1.5; color: var(--bone-dim); }

/* ── CHIPS ──────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-family: var(--font-mono);
  padding: 2px 7px; border-radius: 10px;
  background: var(--slate-700); color: var(--bone); border: 1px solid var(--slate-600);
}
.chip-red { background: rgba(74,28,28,0.45); color: #ff7a8a; border-color: #4a1c1c; }
.chip-gold { background: rgba(74,58,20,0.45); color: #d4af37; border-color: #4a3a14; }
.chip-green { background: rgba(28,74,50,0.45); color: #62d899; border-color: #1c4a32; }
.chip-blue { background: rgba(28,46,74,0.45); color: #4a9eff; border-color: #1c2e4a; }
.chip-purple { background: rgba(58,42,92,0.45); color: #b58eff; border-color: #3a2a5c; }
.chip-count { font-size: 9px; color: var(--stone-dim); margin-left: 4px; opacity: 0.8; }
.chip-cloud { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── LISTS ──────────────────────────────────────────── */
.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li {
  padding: 6px 0; border-bottom: 1px solid var(--slate-700);
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.list-clean li:last-child { border-bottom: 0; }
.list-clean .li-title { color: var(--bone); font-size: 12px; flex: 1; }
.list-clean .li-meta { color: var(--stone-dim); font-family: var(--font-mono); font-size: 10px; white-space: nowrap; }

/* ── TICKER ─────────────────────────────────────────── */
.ticker { display: flex; flex-direction: column; gap: 0; }
.ticker .ev {
  display: grid; grid-template-columns: 56px 50px 1fr;
  gap: 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--slate-700);
  font-size: 11px;
}
.ticker .ev:last-child { border-bottom: 0; }
.ticker .ev .t { font-family: var(--font-mono); font-size: 10px; color: var(--stone-dim); }
.ticker .ev .src { font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 2px; text-align: center; letter-spacing: 0.5px; font-weight: 600; }
.ticker .src.milt { background: rgba(74,28,28,0.55); color: #ff7a8a; }
.ticker .src.human { background: rgba(28,74,50,0.5); color: #62d899; }
.ticker .src.econ { background: rgba(28,46,74,0.5); color: #4a9eff; }
.ticker .src.infra { background: rgba(58,42,92,0.5); color: #b58eff; }
.ticker .src.diplo { background: rgba(74,58,20,0.55); color: #d4af37; }
.ticker .src.ops { background: var(--slate-700); color: var(--bone-dim); }
.ticker .ev .msg { color: var(--bone); }

/* ── HEATMAP ────────────────────────────────────────── */
.heatmap-wrap { overflow-x: auto; }
.heatmap { display: grid; grid-template-columns: 30px repeat(24, 1fr); gap: 1px; font-family: var(--font-mono); font-size: 9px; min-width: 580px; }
.heatmap .hm-label { color: var(--stone-dim); text-align: right; padding-right: 4px; line-height: 14px; }
.heatmap .hm-cell { height: 14px; background: var(--slate-700); border-radius: 1px; }
.heatmap .hm-cell.l1 { background: rgba(184,134,42,0.18); }
.heatmap .hm-cell.l2 { background: rgba(184,134,42,0.35); }
.heatmap .hm-cell.l3 { background: rgba(184,134,42,0.55); }
.heatmap .hm-cell.l4 { background: rgba(184,134,42,0.78); }
.heatmap .hm-cell.l5 { background: rgba(184,134,42,1); }
.heatmap .hm-head { color: var(--stone-dim); text-align: center; padding-bottom: 2px; font-size: 8px; }

/* ── DONOR HEATMAP (rows × cols, like cadence but reused) */
.dh-grid { display: grid; gap: 1px; font-family: var(--font-mono); font-size: 9px; }
.dh-cell { background: var(--slate-700); padding: 4px 6px; color: var(--bone); text-align: right; min-width: 0; }
.dh-row-label { background: transparent; text-align: left; padding: 4px 6px; color: var(--stone); font-weight: 500; font-size: 10px; }
.dh-col-label { background: transparent; text-align: center; color: var(--stone-dim); padding: 2px; font-size: 8px; }

/* ── MISC ───────────────────────────────────────────── */
.muted { color: var(--stone-dim); }
.dim { color: var(--bone-dim); }
.hr { height: 1px; background: var(--slate-700); margin: 10px 0; }
.up { color: #62d899; }
.down { color: #ff7a8a; }
.warn-c { color: var(--gold-soft); }
.gold-c { color: var(--gold-soft); }
.err-c { color: #ff7a8a; }
.center { text-align: center; }
.right { text-align: right; }
.flex { display: flex; gap: 8px; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; align-items: stretch; }
.metric-switch { display: inline-flex; gap: 2px; margin-bottom: 8px; flex-wrap: wrap; }
.metric-switch button {
  background: transparent; color: var(--bone-dim);
  border: 1px solid var(--slate-600); padding: 4px 8px; font-family: var(--font-sans); font-size: 10px; font-weight: 600;
  cursor: pointer; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.8px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.metric-switch button:not(.active):hover { background: var(--olive); color: var(--bone); border-color: var(--olive); }
.metric-switch button.active { background: var(--gold); color: var(--bone); border-color: var(--gold); font-weight: 600; }

/* ── BRAND BUTTONS (Core Group: gold fill→olive hover · gold outline→fill) ── */
.btn {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-gold { background: var(--gold); color: var(--bone); border-color: var(--gold); }
.btn-gold:hover { background: var(--olive); border-color: var(--olive); }
.btn-gold:active { background: var(--gold-dark); border-color: var(--gold-dark); }
.btn-outline { background: transparent; color: var(--gold-light); border-color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--bone); }
.btn-sm { padding: 4px 9px; font-size: 10px; letter-spacing: 0.8px; }
.stats-grid { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.stats-grid .k { color: var(--stone-dim); font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; font-family: var(--font-sans); }
.stats-grid .v { color: var(--bone); font-family: var(--font-mono); }
.gauge { position: relative; width: 100%; height: 14px; background: var(--slate-700); border-radius: 3px; overflow: hidden; }
.gauge .fill { height: 100%; background: linear-gradient(90deg, var(--status-err) 0%, var(--gold-soft) 50%, var(--status-ok) 100%); }
.gauge-label { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--stone-dim); margin-top: 4px; }
.divider {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600; font-style: normal;
  letter-spacing: 0.2px; text-transform: none;
  color: var(--bone);
  margin: 18px 0 8px; padding-top: 12px;
  border-top: 0; position: relative;
}
.divider::before {
  content: ''; display: block;
  width: 54px; height: 2px; background: var(--gold);
  margin-bottom: 9px; border-radius: 1px;
}
.divider em, .divider i { font-style: italic; color: var(--stone); }
.callout {
  padding: 9px 12px; border-radius: 3px; font-size: 12px; line-height: 1.55;
  background: rgba(184,134,42,0.06); border-left: 2px solid var(--gold); color: var(--bone-dim);
}
.callout.warn { background: rgba(184,134,42,0.10); }
.callout.err { background: rgba(155,61,61,0.10); border-left-color: var(--status-err); }
.callout.info { background: rgba(74,107,138,0.10); border-left-color: var(--status-info); }
.callout strong { color: var(--bone); font-weight: 600; }
/* opt-in editorial pull-quote — Cormorant italic, for narrative "Reading." analyses */
.callout.quote {
  font-family: var(--font-display); font-style: italic;
  font-size: 16px; line-height: 1.5; color: var(--stone);
  background: transparent; padding: 6px 0 6px 14px;
}
.callout.quote strong { font-style: normal; color: var(--bone); font-family: var(--font-sans); font-size: 12.5px; }
.callout code { font-family: var(--font-mono); font-size: 10.5px; color: var(--stone); background: var(--slate-900); padding: 1px 5px; border-radius: 2px; }

/* SVG flow diagram (overview system arch) */
.flow-node {
  fill: var(--slate-800); stroke: var(--slate-600); stroke-width: 1;
}
.flow-node.active { stroke: var(--gold-soft); stroke-width: 1.5; }
.flow-node-label { fill: var(--bone); font-family: var(--font-sans); font-size: 11px; font-weight: 600; }
.flow-node-sub { fill: var(--stone-dim); font-family: var(--font-mono); font-size: 9px; }
.flow-edge { stroke: var(--slate-600); stroke-width: 1.5; fill: none; }
.flow-edge.active { stroke: var(--gold-soft); stroke-dasharray: 2 3; animation: flow-pulse 2s linear infinite; }
@keyframes flow-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } }
.flow-edge-label { fill: var(--stone-dim); font-family: var(--font-mono); font-size: 9px; }

/* Blue Line contested zones (YLT pillar overlay) — amber/saffron pulsing
   to read as long-running dispute, visually distinct from the held-zone
   crimson. Per docs/projects/demo-jun1/research/blue-line-contested-
   zones-proposal-2026-05-29.md §4b. */
@keyframes bl-contested-breath {
  0%   { stroke-opacity: 0.35; fill-opacity: 0.07; }
  50%  { stroke-opacity: 0.85; fill-opacity: 0.16; }
  100% { stroke-opacity: 0.35; fill-opacity: 0.07; }
}
.bl-contested-zone-shape { animation: bl-contested-breath 3.4s ease-in-out infinite; }
.bl-contested-zone-shape.zone-shebaa     { animation-delay: 0s;   }
.bl-contested-zone-shape.zone-ghajar     { animation-delay: 0.8s; }
.bl-contested-zone-shape.zone-kfarchouba { animation-delay: 1.6s; }
.bl-contested-zone-shape.zone-hermon     { animation-delay: 2.0s; }
.bl-contested-zone-shape.zone-wazani     { animation-delay: 1.2s; }
@keyframes bl-rp-ping {
  0%   { r: 6;  stroke-opacity: 1.0; }
  100% { r: 14; stroke-opacity: 0.0; }
}
.bl-rp-marker-pulse { animation: bl-rp-ping 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bl-contested-zone-shape, .bl-rp-marker-pulse { animation: none; }
}

/* K8 fused_consensus held-zone polygons (P2) — crimson breath whose
   cadence + intensity scale with --pulse-norm (0..1 = 30-d KE pressure
   normalised across zones). Slowest 5.2s when quiet, ~1.4s when hot.
   Spec: docs/research/ylt-ke-interaction-primitives-2026-06-02.md §3.P2 */
@keyframes held-zone-breath {
  0%   { stroke-opacity: var(--stroke-lo, 0.35); fill-opacity: var(--fill-lo, 0.05); }
  50%  { stroke-opacity: var(--stroke-hi, 0.55); fill-opacity: var(--fill-hi, 0.10); }
  100% { stroke-opacity: var(--stroke-lo, 0.35); fill-opacity: var(--fill-lo, 0.05); }
}
.held-zone-shape {
  animation: held-zone-breath var(--breath-rate, 5.2s) ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .held-zone-shape { animation: none; }
}

/* Graph for partners network */
.graph-edge { stroke: var(--slate-600); stroke-opacity: 0.5; }
.graph-edge.strong { stroke: var(--gold-soft); stroke-opacity: 0.6; }
.graph-edge.tense { stroke: var(--status-err); stroke-opacity: 0.55; stroke-dasharray: 3 3; }
.graph-node { stroke: var(--slate-900); stroke-width: 1.5; }
.graph-node-label { fill: var(--bone); font-family: var(--font-sans); font-size: 10px; text-anchor: middle; }

.book-cover {
  background: linear-gradient(155deg, var(--slate-900) 0%, var(--slate-800) 100%);
  border: 1px solid var(--slate-700); border-radius: 3px;
  padding: 14px 12px; height: 145px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.book-cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold-soft);
}
.book-cover .bc-meta { font-family: var(--font-mono); font-size: 8px; color: var(--stone-dim); letter-spacing: 1px; text-transform: uppercase; }
.book-cover .bc-title { font-size: 13px; font-weight: 700; color: var(--bone); line-height: 1.25; margin: 6px 0; }
.book-cover .bc-foot { font-family: var(--font-mono); font-size: 9px; color: var(--gold-soft); display: flex; justify-content: space-between; }

/* ── CHART SLOT (responsive · 1:1 viewBox · no stretch) ─ */
.chart-slot { width: 100%; display: block; }
.chart-slot svg { display: block; }

/* ── CONVERGENCE GRID (overview) ────────────────────── */
.conv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.conv-cell { background: var(--slate-900); border: 1px solid var(--slate-700); border-radius: 3px; padding: 9px 10px; }
.conv-cell .cc-nm { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--stone-dim); font-weight: 600; font-family: var(--font-sans); }
.conv-cell .cc-vl { font-family: var(--font-mono); font-size: 19px; font-weight: 700; margin-top: 3px; color: var(--bone); }
.conv-cell .cc-sb { font-size: 10px; color: var(--stone-dim); margin-top: 2px; line-height: 1.35; }
.conv-cell.c-crit { border-left: 2px solid var(--status-err); }
.conv-cell.c-crit .cc-vl { color: #ff7a4a; }
.conv-cell.c-warn { border-left: 2px solid var(--gold-soft); }
.conv-cell.c-warn .cc-vl { color: var(--gold-soft); }
.conv-cell.c-ok { border-left: 2px solid #62d899; }
.conv-cell.c-ok .cc-vl { color: #62d899; }

/* ── CONVERGENCE EVENT (overview) ───────────────────── */
.conv-event { border: 1px solid var(--slate-700); border-left: 2px solid var(--gold-soft); background: var(--slate-900); border-radius: 3px; padding: 9px 11px; margin-bottom: 8px; }
.conv-event.urgent { border-left-color: var(--status-err); }
.conv-event.med { border-left-color: #4a9eff; }
.conv-event .ce-hdr { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.conv-event .ce-title { color: var(--bone); font-weight: 600; font-size: 12px; line-height: 1.35; }
.conv-event .ce-score { font-family: var(--font-mono); font-weight: 700; color: var(--gold-soft); padding: 2px 7px; background: rgba(184,134,42,0.14); border-radius: 2px; font-size: 11px; flex-shrink: 0; }
.conv-event.urgent .ce-score { color: #ff7a4a; background: rgba(155,61,61,0.22); }
.conv-event .ce-doms { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.conv-event .ce-foot { display: flex; gap: 14px; font-size: 10px; color: var(--stone-dim); font-family: var(--font-mono); flex-wrap: wrap; }

/* ── DOMAIN SUMMARY (overview cross-tab panels) ─────── */
.dom-summary { background: var(--slate-900); border: 1px solid var(--slate-700); border-radius: 3px; padding: 11px 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s; display: flex; flex-direction: column; gap: 7px; }
.dom-summary:hover { background: var(--slate-700); border-color: var(--slate-600); }
.dom-summary .ds-name { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bone-dim); font-weight: 600; font-family: var(--font-sans); display: flex; align-items: center; gap: 6px; }
.dom-summary .ds-hero { font-family: var(--font-mono); font-size: 23px; font-weight: 700; color: var(--bone); line-height: 1.05; }
.dom-summary .ds-sub { font-size: 10px; color: var(--stone-dim); font-family: var(--font-mono); }
.dom-summary .ds-open { font-family: var(--font-mono); font-size: 9px; color: var(--gold-soft); letter-spacing: 0.5px; margin-top: auto; }

/* ── MAP OVERLAYS (meta + method toggle) ────────────── */
.map-meta { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; gap: 14px; background: rgba(23,27,32,0.93); padding: 7px 11px; border: 1px solid var(--slate-700); border-radius: 3px; }
.map-meta .mm { display: flex; flex-direction: column; gap: 1px; }
.map-meta .ml { font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--stone-dim); }
.map-meta .mv { font-family: var(--font-mono); font-weight: 600; color: var(--bone); font-size: 13px; }
.map-method-toggle { display: flex; gap: 2px; }
.map-method-toggle button { background: transparent; color: var(--bone-dim); border: 1px solid var(--slate-600); padding: 4px 8px; font-family: var(--font-sans); font-size: 9px; font-weight: 600; cursor: pointer; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.8px; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.map-method-toggle button:not(.on):hover { background: var(--olive); color: var(--bone); border-color: var(--olive); }
.map-method-toggle button.on { background: var(--gold); color: var(--bone); border-color: var(--gold); font-weight: 600; }

/* ── YLT SIDEBAR + EVENTS ───────────────────────────── */
.ylt-sidebar { background: var(--slate-900); border-left: 1px solid var(--slate-700); display: flex; flex-direction: column; }
.ylt-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--slate-700); }
.ylt-chip { background: var(--slate-700); border: 1px solid var(--slate-600); color: var(--stone-dim); font-size: 8.5px; letter-spacing: 0.5px; font-weight: 600; padding: 3px 7px; border-radius: 2px; cursor: pointer; font-family: var(--font-mono); }
.ylt-chip:hover { color: var(--bone); }
.ylt-chip.on { background: rgba(184,134,42,0.18); color: var(--gold-soft); border-color: var(--gold-soft); }
.ylt-events { overflow-y: auto; flex: 1; }
.ylt-event { padding: 8px 11px; border-bottom: 1px solid var(--slate-700); cursor: pointer; transition: background 0.12s; }
.ylt-event:hover { background: var(--slate-800); }
.ylt-event .ye-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 3px; }
.ylt-event .ye-type { font-size: 8.5px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; font-family: var(--font-mono); padding: 2px 6px; border-radius: 2px; }
.ylt-event .ye-date { font-family: var(--font-mono); color: var(--stone-dim); font-size: 9.5px; }
.ylt-event .ye-title { color: var(--bone-dim); font-size: 11px; line-height: 1.4; }
.ye-incursion { background: rgba(155,61,61,0.32); color: #ff7a8a; }
.ye-demolition { background: rgba(184,77,42,0.32); color: #ff7a4a; }
.ye-hilltop { background: rgba(184,134,42,0.28); color: var(--gold-soft); }
.ye-evac { background: rgba(74,107,138,0.32); color: #4a9eff; }
.ye-troop { background: rgba(122,90,140,0.32); color: #b58eff; }
.ye-other { background: var(--slate-700); color: var(--bone-dim); }

/* ── STRIKE TEMPO STRIP ─────────────────────────────── */
.tempo { display: grid; grid-template-columns: repeat(72, 1fr); gap: 2px; height: 56px; }
.tempo .cell { border-radius: 1px; background: var(--slate-700); }

/* ── KINETIC TRAJECTORY ROW ─────────────────────────── */
.kt-row { display: grid; grid-template-columns: 142px 1fr 72px 100px; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--slate-700); }
.kt-row:last-child { border-bottom: 0; }
.kt-row .kt-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--bone-dim); }
.kt-row .kt-value { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--bone); text-align: right; }
.kt-row .kt-delta { font-family: var(--font-mono); font-size: 10px; text-align: right; line-height: 1.3; }

/* ── LIFELINES BOARD ────────────────────────────────── */
.sys-row { display: grid; grid-template-columns: 170px 86px 1fr 104px 66px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--slate-700); font-size: 11.5px; }
.sys-row:last-child { border-bottom: 0; }
.sys-row .sys-name { color: var(--bone); font-weight: 500; }
.sys-stat { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-align: center; padding: 3px 6px; border-radius: 2px; }
.sys-stat.ok { color: #62d899; background: rgba(28,74,50,0.45); }
.sys-stat.warn { color: var(--gold-soft); background: rgba(184,134,42,0.16); }
.sys-stat.crit { color: #ff7a8a; background: rgba(155,61,61,0.3); }
.sys-row .sys-val { font-family: var(--font-mono); color: var(--bone); text-align: right; }
.sys-row .sys-delta { font-family: var(--font-mono); font-size: 10px; text-align: right; }

/* ── AOI DAMAGE-DETAIL DRAWER (ported from mockup.html) ─ */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-w); max-width: 94vw;
  background: var(--slate-900); border-left: 1px solid var(--slate-600);
  transform: translateX(100%); transition: transform 0.25s ease-out;
  z-index: 1300; box-shadow: -10px 0 36px rgba(0,0,0,0.62);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-hdr {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--slate-700);
  background: linear-gradient(180deg, var(--slate-800), var(--slate-900));
}
.drawer-hdr .dh-name { font-size: 15px; font-weight: 600; color: var(--bone); }
.drawer-hdr .dh-class { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; font-family: var(--font-mono); margin-top: 3px; color: var(--stone-dim); }
.drawer-hdr .dh-close {
  background: transparent; border: 1px solid var(--slate-600); color: var(--stone-dim);
  font-size: 12px; width: 28px; height: 28px; border-radius: 3px; flex-shrink: 0; line-height: 1;
}
.drawer-hdr .dh-close:hover { color: var(--bone); border-color: var(--stone-dim); }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.drawer-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.drawer-stat { background: var(--slate-800); border: 1px solid var(--slate-700); border-radius: 3px; padding: 9px 10px; }
.drawer-stat .ds-l { font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--stone-dim); font-weight: 600; font-family: var(--font-sans); }
.drawer-stat .ds-v { font-family: var(--font-mono); font-size: 21px; color: var(--bone); font-weight: 600; margin-top: 4px; }
.drawer-stat.crit .ds-v { color: #ff7a4a; }
.drawer-stat.warn .ds-v { color: var(--gold-soft); }
.drawer-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--slate-700); }
.drawer-section .dh { font-size: 9px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; margin-bottom: 8px; font-family: var(--font-mono); }
.drawer-mini-map { height: 230px; background: #050709; border-radius: 3px; overflow: hidden; border: 1px solid var(--slate-700); }
.drawer-meta { font-size: 11.5px; line-height: 1.6; color: var(--bone-dim); }
.drawer-raster { width: 100%; max-height: 320px; object-fit: contain; display: block; border-radius: 3px; border: 1px solid var(--slate-700); background: #0d1117; }
.leaflet-tooltip.aoi-tip { background: var(--slate-800); border: 1px solid var(--slate-600); color: var(--bone); font-family: var(--font-sans); font-size: 11px; padding: 5px 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.55); }
.leaflet-tooltip.aoi-tip::before { display: none; }
/* DMG-AOI hover tooltip — translucent, gold-bordered, hover-driven */
.leaflet-tooltip.dmg-aoi-tip {
  min-width: 180px;
  max-width: 300px;
  /* Override Leaflet's default white-space:nowrap so actor/weapon lines wrap. */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: rgba(8, 10, 13, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(184, 134, 42, 0.42);
  border-radius: 5px;
  color: var(--bone);
  padding: 9px 11px;
  font-family: var(--font-sans);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  pointer-events: none;
}
.leaflet-tooltip.dmg-aoi-tip .mono { white-space: normal; }
.leaflet-tooltip.dmg-aoi-tip::before { display: none !important; }
.dmg-tip-name {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-bottom: 7px;
}
.dmg-tip-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: rgba(255,255,255,0.7);
  margin: 3px 0;
}
.dmg-tip-row .label { font-weight: 600; letter-spacing: 0.5px; }
.dmg-tip-row .num   { font-family: var(--font-mono); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.dmg-tip-row.severe   .num { color: #ff4a4a; }
.dmg-tip-row.moderate .num { color: #ff8c42; }

/* Click-pinned caza popup uses L.popup, not L.tooltip — Leaflet renders
   it via .leaflet-popup-content-wrapper with its own white-ish skin and
   a wider default. Reset that skin and re-apply the dmg-aoi-tip look so
   a pinned popup looks identical to the hover tooltip (just stationary
   + with a close button), per operator spec. */
.leaflet-popup.dmg-aoi-tip .leaflet-popup-content-wrapper {
  min-width: 180px;
  max-width: 300px;
  background: rgba(8, 10, 13, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(184, 134, 42, 0.42);
  border-radius: 5px;
  color: var(--bone);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  padding: 0;
}
.leaflet-popup.dmg-aoi-tip .leaflet-popup-content {
  margin: 9px 11px;
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.4;
  color: var(--bone);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  width: auto !important;
}
.leaflet-popup.dmg-aoi-tip .leaflet-popup-content .mono { white-space: normal; }
/* Match the tooltip — no pointer arrow under the popup. */
.leaflet-popup.dmg-aoi-tip .leaflet-popup-tip-container { display: none; }
.leaflet-popup.dmg-aoi-tip .leaflet-popup-close-button {
  color: var(--stone-dim);
  padding: 4px 6px 0 0;
}
.leaflet-popup.dmg-aoi-tip .leaflet-popup-close-button:hover { color: var(--bone); }

/* ── MILITARY UNIFIED MAP — PILLAR TABS ─────────────── */
/* Per PR #9 vision: KE / YLT / DMG pillar tabs above the Military operational
   map. Clicks toggle layer visibility. Active state = layer rendered. Adapted
   from jw/milit-unified-map-2026-05-27 commit ac6085c to plug into the
   4-layer split's MilitMap layer-group registry. */
.milit-pillars {
  display: flex; gap: 1px;
  background: var(--slate-900);
  border-bottom: 1px solid var(--slate-700);
  padding: 4px 4px 0 4px;
}
.milit-pillar {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--slate-800);
  border: 1px solid var(--slate-700);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  color: var(--stone-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.milit-pillar:hover { color: var(--bone); background: var(--slate-700); }
.milit-pillar.active {
  color: var(--gold-soft);
  background: rgba(184, 134, 42, 0.12);
  border-color: var(--gold-soft);
  border-bottom-color: rgba(184, 134, 42, 0.12);
}
.milit-pillar .pillar-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--slate-600);
  transition: background 120ms ease;
}
.milit-pillar.active .pillar-dot { background: var(--gold-soft); }
.milit-pillar[data-pillar="ke"].active .pillar-dot { background: #d62728; }
.milit-pillar[data-pillar="ylt"].active .pillar-dot { background: #d4af37; }
.milit-pillar[data-pillar="dmg"].active .pillar-dot { background: #7a1717; }

/* ── AUTO-HIDE TOP RAIL ─────────────────────────────── */
/* The topbar + dom-strip + tabbar are wrapped in .topnav-rail and slide
   off-screen by default. A 10px .topnav-hot strip at the very top reveals
   the rail on hover. The rail also stays open while the cursor is inside
   it. Pressing 'n' toggles. Reduced-motion disables the slide.
   Hand-ported from PR #9 (jw/milit-unified-map-2026-05-27, commit ac6085c)
   minus the unified-map redesign which conflicts with the 4-layer split. */
.topnav-rail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transform: translateY(-100%);
  transition: transform 220ms ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.topnav-rail.show { transform: translateY(0); }
.topnav-hot {
  position: fixed; top: 0; left: 0; right: 0;
  height: 10px; z-index: 999;
}
.topnav-peek {
  position: fixed; top: 4px; right: 14px; z-index: 998;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--stone-dim);
  padding: 2px 6px; border-radius: 2px;
  background: rgba(23,27,32,0.65); border: 1px solid var(--slate-700);
  pointer-events: none; opacity: 0; transition: opacity 220ms ease;
}
body:not(.nav-shown) .topnav-peek { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) {
  .topnav-rail { transition: none; }
}