/* Congo Signal — design tokens first; components consume roles, never raw hex. */
:root {
  color-scheme: dark;
  --bg: #0b0e0d;
  --panel: #121716;
  --panel-2: #171d1c;
  --raised: #1d2423;
  --hover: #222b2a;
  --line: #242d2c;
  --line-strong: #33403e;
  --text: #e9eeec;
  --text-2: #b0bab7;
  --muted: #76827f;
  --accent: #c8dd91;
  --accent-strong: #d9ecaa;
  --accent-ink: #0f1a12;
  --accent-soft: rgba(200, 221, 145, .12);
  --brand: #2f7a5b;
  --critical: #e66767;
  --critical-soft: rgba(230, 103, 103, .14);
  --warning: #fab219;
  --warning-soft: rgba(250, 178, 25, .13);
  --good: #3fbf6f;
  --good-soft: rgba(63, 191, 111, .13);
  --mark: rgba(250, 178, 25, .24);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --radius: 10px;
  --radius-sm: 6px;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --rail: 232px;
  --top: 60px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f1;
  --panel: #ffffff;
  --panel-2: #f8f9f6;
  --raised: #ffffff;
  --hover: #eef0eb;
  --line: #e1e5de;
  --line-strong: #cdd3ca;
  --text: #121a18;
  --text-2: #46524e;
  --muted: #727d79;
  --accent: #285d49;
  --accent-strong: #1f4a3a;
  --accent-ink: #ffffff;
  --accent-soft: rgba(40, 93, 73, .1);
  --critical: #c23a3a;
  --critical-soft: rgba(208, 59, 59, .1);
  --warning: #a86d00;
  --warning-soft: rgba(250, 178, 25, .16);
  --good: #13873a;
  --good-soft: rgba(12, 163, 12, .1);
  --mark: rgba(250, 178, 25, .35);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --shadow: 0 18px 50px rgba(20, 30, 25, .16);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: progress; opacity: .55; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }
svg.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mono, code { font-family: var(--mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }

/* Boot */
.boot { height: 100vh; display: grid; place-content: center; gap: 10px; text-align: center; letter-spacing: 4px; font-weight: 600; color: var(--text); }
.boot small { letter-spacing: 0; font-weight: 400; color: var(--muted); }
.boot-mark { width: 34px; height: 34px; margin: 0 auto 8px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Shell */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); padding: 16px 12px; gap: 4px; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--text); text-decoration: none !important; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(140deg, var(--brand), #173d2e); color: #e3f2c4; position: relative; }
.brand-mark::after { content: ''; position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
.brand strong { display: block; font-size: 13px; letter-spacing: 2.4px; }
.brand small { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .4px; }
.nav-label { font-size: 10.5px; letter-spacing: 1.4px; color: var(--muted); padding: 12px 10px 6px; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; background: none; color: var(--text-2); border-radius: var(--radius-sm); font-size: 13.5px; text-align: left; position: relative; }
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--text); }
.nav-item.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-item .count { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-item .count.hot { color: var(--critical); }
.rail-bottom { margin-top: auto; display: grid; gap: 6px; padding: 12px 6px 0; border-top: 1px solid var(--line); }
.feed-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); padding: 3px 4px; }
.feed-status small { margin-left: auto; color: var(--muted); font-size: 11px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dot.ok { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.dot.warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.dot.bad { background: var(--critical); box-shadow: 0 0 0 3px var(--critical-soft); }
.dot.live { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }

.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 15; height: var(--top); display: flex; align-items: center; gap: 12px; padding: 0 24px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.crumb strong { color: var(--text); font-weight: 600; }
.omni { margin-left: auto; display: flex; align-items: center; gap: 10px; width: min(420px, 40vw); padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 13px; text-align: left; }
.omni:hover { border-color: var(--line-strong); color: var(--text-2); }
.omni kbd, .kbd { margin-left: auto; font: 11px var(--mono); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); }
.seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 4px 9px; border-radius: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
.seg button.active { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.iconbtn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); flex-shrink: 0; }
.iconbtn:hover { color: var(--text); border-color: var(--line-strong); }
.view { padding: 24px; min-width: 0; }

/* Buttons and inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none !important; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-strong); }
.btn.ghost { border-color: transparent; background: none; color: var(--text-2); }
.btn.ghost:hover { background: var(--hover); color: var(--text); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font-size: 12px; }
.linkbtn:hover { text-decoration: underline; }
.input, .select { height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); padding: 0 10px; font-size: 13px; min-width: 0; }
.input:focus, .select:focus, textarea:focus { border-color: var(--accent); outline: none; }
.search { position: relative; display: flex; align-items: center; flex: 1; min-width: 180px; }
.search svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.search .input { width: 100%; padding-left: 32px; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.check input { accent-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.chip .swatch { width: 8px; height: 8px; border-radius: 2px; }
.chip b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Page head */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.eyebrow { font: 500 11px var(--mono); letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.page-head h1 { margin: 6px 0 4px; font-size: 26px; line-height: 1.15; letter-spacing: -.4px; font-weight: 650; }
.page-head p { margin: 0; color: var(--text-2); max-width: 680px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.panel-head h2 { margin: 0; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.panel-head small, .panel-sub { color: var(--muted); font-size: 12px; }
.panel-body { padding: 0 16px 16px; }
.grid { display: grid; gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.stack { display: grid; gap: 16px; align-content: start; }
.notice { font-size: 12px; color: var(--muted); border-left: 2px solid var(--line-strong); padding: 6px 10px; margin: 12px 0; line-height: 1.5; }
.errorbar { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 8px; background: var(--critical-soft); color: var(--critical); font-size: 13px; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent); }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty h3 { color: var(--text); margin: 8px 0 4px; font-size: 14px; }
.empty .icon { width: 22px; height: 22px; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; display: grid; gap: 2px; position: relative; overflow: hidden; }
.kpi-label { font-size: 12px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.kpi-label .icon { color: var(--muted); width: 14px; height: 14px; }
.kpi-value { font-size: 26px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.kpi-foot { font-size: 11.5px; color: var(--muted); }
.kpi .spark { position: absolute; right: 14px; top: 14px; width: 72px; height: 26px; opacity: .9; }
.kpi.alert .kpi-value { color: var(--critical); }

/* Score + badges */
.score { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); flex-shrink: 0; position: relative; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--line) 0); }
.score::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--panel); }
.score span { position: relative; }
.score.high { --c: var(--critical); }
.score.medium { --c: var(--warning); }
.score.low { --c: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 5px; font: 500 10.5px var(--mono); letter-spacing: .4px; text-transform: uppercase; background: var(--hover); color: var(--text-2); white-space: nowrap; }
.badge.high { background: var(--critical-soft); color: var(--critical); }
.badge.medium { background: var(--warning-soft); color: var(--warning); }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.accent { background: var(--accent-soft); color: var(--accent); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.tag .swatch, .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* Report rows */
.report-list { display: grid; }
.report { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line); cursor: pointer; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; color: inherit; }
.report:hover { background: var(--panel-2); }
.report:first-child { border-top: 0; }
.report-kicker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.report-kicker .sep { opacity: .5; }
.report h3 { margin: 4px 0 4px; font-size: 14.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.1px; }
.report p { margin: 0; font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.report-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.save { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; border: 1px solid transparent; background: none; color: var(--muted); }
.save:hover { border-color: var(--line); color: var(--text); }
.save.saved { color: var(--accent); }
.save.saved svg { fill: currentColor; }
.compact .report { grid-template-columns: auto minmax(0, 1fr); padding: 10px 16px; gap: 12px; }
.compact .report h3 { font-size: 13.5px; margin: 2px 0 0; }
.compact .score { width: 34px; height: 34px; font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.list-meta { display: flex; justify-content: space-between; gap: 10px; padding: 8px 16px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.loadmore { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--line); }

/* Bars, sparklines, charts */
.bars { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.bars > i { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--c, var(--series-1)); min-height: 2px; display: block; transition: opacity .12s; }
.bars > i.zero { background: var(--line); }
.bars:hover > i { opacity: .55; }
.bars > i:hover { opacity: 1; }
.axis { display: flex; justify-content: space-between; font: 10.5px var(--mono); color: var(--muted); margin-top: 6px; }
.meter { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; display: block; }
.meter i { display: block; height: 100%; border-radius: 6px; background: var(--c, var(--accent)); }
.mix { display: flex; gap: 2px; height: 6px; border-radius: 6px; overflow: hidden; }
.mix i { display: block; height: 100%; min-width: 3px; }
.rank-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 34px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; width: 100%; border: 0; background: none; text-align: left; }
.rank-row:hover span:first-child { color: var(--accent); }
.rank-row b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
svg.chart { display: block; width: 100%; overflow: visible; }
svg.chart .area { opacity: .16; }
svg.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .grid { stroke: var(--line); stroke-width: 1; }
svg.chart .hit { fill: transparent; }
svg.chart .hit:hover { fill: var(--text); fill-opacity: .06; }
#tip { position: fixed; z-index: 100; pointer-events: none; padding: 7px 10px; border-radius: 7px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 12px; color: var(--text); max-width: 280px; line-height: 1.4; }
#tip b { font-variant-numeric: tabular-nums; }

/* Briefing */
.brief-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr); gap: 16px; align-items: start; }
.pulse-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 6px 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.pulse-row:hover { background: var(--panel-2); }
.pulse-row strong { font-size: 13px; font-weight: 550; display: flex; align-items: center; gap: 8px; }
.pulse-row .big { font: 600 18px var(--sans); font-variant-numeric: tabular-nums; }
.pulse-row small { color: var(--muted); font-size: 11.5px; }
.pulse-row .bars { height: 34px; grid-row: span 2; }
.health-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.health-row:first-child { border-top: 0; }
.health-row .dot { margin-top: 6px; }
.health-row div { min-width: 0; flex: 1; }
.health-row strong { display: block; font-weight: 550; }
.health-row small { color: var(--muted); display: block; }

/* Account rows */
.avatar { --h: 160; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--sans); color: hsl(var(--h) 45% 88%); background: hsl(var(--h) 22% 26%); flex-shrink: 0; letter-spacing: .3px; text-transform: uppercase; }
:root[data-theme="light"] .avatar { color: hsl(var(--h) 40% 24%); background: hsl(var(--h) 30% 88%); }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.account-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; color: inherit; }
.account-row:hover { background: var(--panel-2); }
.account-row strong { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-row small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-row .mix { margin-top: 5px; }
.account-row .n { font: 600 14px var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.account-row .n small { font-weight: 400; text-align: right; }
.scroll { max-height: 460px; overflow: auto; }

/* Social */
.status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 12px 16px; margin-bottom: 16px; font-size: 12.5px; color: var(--text-2); }
.status-strip strong { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.budget { display: inline-flex; align-items: center; gap: 8px; }
.budget .meter { width: 54px; }
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.topic-card { padding: 14px 16px 12px; display: grid; gap: 8px; cursor: pointer; text-align: left; color: inherit; transition: border-color .15s; position: relative; }
.topic-card:hover { border-color: var(--line-strong); }
.topic-card.active { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.topic-card h3 { margin: 0; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; line-height: 1.3; }
.topic-card .swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.topic-stats { display: flex; align-items: baseline; gap: 8px; }
.topic-stats .big { font-size: 24px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.topic-stats small { color: var(--muted); font-size: 11.5px; }
.topic-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--muted); }
.topic-card .bars { height: 46px; }
.topic-card details { font-size: 12px; color: var(--muted); }
.topic-card summary { cursor: pointer; }
.query { font: 11px/1.5 var(--mono); color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px; margin: 6px 0 0; word-break: break-word; }
.rising { position: absolute; top: 12px; right: 12px; }

.post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.post:first-child { border-top: 0; }
.post-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.post-head .who { border: 0; background: none; padding: 0; color: var(--text); font-weight: 600; }
.post-head .who:hover { text-decoration: underline; }
.post-head .handle { color: var(--muted); }
.post-head time { color: var(--muted); font-size: 12px; }
.post-head .kind { margin-left: auto; }
.post-text { margin: 4px 0 8px; white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.55; }
.post-text.clamp { max-height: 9.3em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.post-text mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }
.post-text .ent { color: var(--accent); border: 0; background: none; padding: 0; font: inherit; }
.post-text .ent:hover { text-decoration: underline; }
.post-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.post-foot .metric { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.post-foot .metric .icon { width: 13px; height: 13px; }
.post-foot .grow { flex: 1; }
.post-topics { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.post-topics .tag em { font-style: normal; color: var(--muted); }
.cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.cloud button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--text-2); }
.cloud button:hover { color: var(--text); border-color: var(--line-strong); }
.cloud button b { font-weight: 500; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.lookup { display: flex; gap: 8px; }
.lookup .input { width: 180px; }

/* Drawer, dialogs */
.shade { position: fixed; inset: 0; background: rgba(4, 7, 6, .58); backdrop-filter: blur(2px); z-index: 50; display: flex; justify-content: flex-end; animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } }
.drawer { width: min(780px, 100vw); height: 100%; overflow-y: auto; background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow); animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateX(30px); opacity: .4; } }
.drawer-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.drawer-body { padding: 20px 24px 40px; }
.drawer h1 { font-size: 22px; line-height: 1.25; margin: 10px 0 8px; letter-spacing: -.3px; }
.drawer-meta { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 18px 0 16px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 9px 12px; font-size: 13px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.analysis { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.analysis h3 { font-size: 12.5px; margin: 0 0 6px; display: flex; gap: 6px; align-items: center; color: var(--text-2); font-weight: 600; }
.analysis p { margin: 0 0 10px; }
.reason { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.reason b { font-family: var(--mono); color: var(--accent); }
.actor-list { display: flex; gap: 6px; flex-wrap: wrap; }
.actor-list span { padding: 3px 8px; border-radius: 5px; background: var(--hover); font-size: 12px; }
.article-text { font-size: 15px; line-height: 1.7; max-width: 680px; }
.article-text p { margin: 0 0 14px; }
.loading-line { height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%; animation: load 1.2s linear infinite; margin-bottom: 10px; border-radius: 2px; }
@keyframes load { from { background-position: 200% 0; } to { background-position: -200% 0; } }
dl.props { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 16px; font-size: 13px; margin: 0; }
dl.props dt { color: var(--muted); }
dl.props dd { margin: 0; word-break: break-word; }
.fields { display: grid; gap: 14px; }
.fields label { display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.fields input, .fields select, .fields textarea { border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); padding: 9px 11px; font-size: 13.5px; color: var(--text); }
.fields textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
.dialog-shade { align-items: flex-start; justify-content: center; padding-top: 12vh; }
.dialog { width: min(480px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; animation: pop .15s ease-out; }
@keyframes pop { from { transform: scale(.98); opacity: 0; } }
.dialog h2 { margin: 0 0 14px; font-size: 16px; }
.dialog p { color: var(--muted); font-size: 12.5px; }
.pdf-frame { width: 100%; height: 72vh; border: 1px solid var(--line); border-radius: 8px; background: white; margin: 10px 0; }
details > summary { cursor: pointer; color: var(--text-2); }

/* Command palette */
.palette { width: min(640px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; animation: pop .12s ease-out; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palette-input input { flex: 1; border: 0; background: none; font-size: 15px; outline: none; }
.palette-results { max-height: 52vh; overflow: auto; padding: 6px; }
.palette-group { font: 500 10.5px var(--mono); letter-spacing: 1px; color: var(--muted); padding: 10px 10px 4px; text-transform: uppercase; }
.palette-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 7px; text-align: left; font-size: 13.5px; }
.palette-item small { margin-left: auto; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.palette-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item.active { background: var(--accent-soft); }
.palette-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }

/* Dossier */
.dossier-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.dossier-head h1 { margin: 0; font-size: 21px; }
.dossier-head .handle { color: var(--muted); font-size: 14px; }
.dossier-bio { margin: 8px 0 6px; color: var(--text-2); font-size: 13.5px; white-space: pre-wrap; }
.dossier-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.dossier-facts span { display: inline-flex; align-items: center; gap: 5px; }
.dossier-facts b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.stat { padding: 12px 14px; }
.stat small { display: block; color: var(--muted); font-size: 11.5px; }
.stat b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.history-box { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; margin: 16px 0; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.history-box p { margin: 2px 0 0; font-size: 12px; color: var(--muted); max-width: 460px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.topic-bar { display: grid; grid-template-columns: minmax(0, 1fr) 110px 30px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.topic-bar .tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
.topic-bar .tag .swatch { margin-right: 6px; }
.topic-bar b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Situation room */
.view-situation { padding: 0; height: calc(100vh - var(--top)); }
.situation { display: grid; grid-template-columns: 280px minmax(0, 1fr) 380px; height: 100%; }
.filters-pane, .rail-pane { overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); }
.rail-pane { border-right: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.pane-section { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.pane-section h2 { margin: 0; font: 500 10.5px var(--mono); letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.layer-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 9px; align-items: center; font-size: 13px; cursor: pointer; }
.layer-row input { accent-color: var(--accent); margin: 0; }
.layer-row b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; background: var(--bg); }
.map-area { position: relative; min-height: 0; }
#map-slot, .interactive-map { position: absolute; inset: 0; }
.map-float { position: absolute; z-index: 2; display: flex; gap: 8px; align-items: center; }
.map-float.tl { top: 14px; left: 14px; max-width: calc(100% - 400px); }
.map-float.tr { top: 14px; right: 54px; }
.map-float.bl { bottom: 34px; left: 14px; max-width: 420px; }
.glass { background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; font-size: 12px; color: var(--text-2); box-shadow: var(--shadow); }
.glass strong { color: var(--text); display: block; font-size: 13px; }
.timeline { border-top: 1px solid var(--line); background: var(--panel); padding: 12px 16px; }
.timeline-head { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.timeline-head strong { color: var(--text); font-size: 12.5px; }
.day-bars { display: flex; align-items: flex-end; gap: 2px; height: 62px; overflow-x: auto; }
.day-bar { flex: 1 0 14px; max-width: 34px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; border: 0; background: none; padding: 0; }
.day-bar i { display: block; border-radius: 3px 3px 0 0; background: var(--series-1); opacity: .65; }
.day-bar:hover i, .day-bar.active i { opacity: 1; }
.day-bar.active i { background: var(--accent); }
.rail-pane .rail-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.rail-pane .rail-head h2 { margin: 0; font-size: 15px; }
.rail-list { overflow-y: auto; flex: 1; }
.rail-foot { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; color: var(--muted); }
.geo-marker { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; border: 2px solid rgba(255,255,255,.85); color: white; font: 600 11px var(--sans); box-shadow: 0 3px 12px rgba(0,0,0,.4); display: grid; place-items: center; transition: transform .12s; }
.geo-marker:hover, .geo-marker.selected { transform: scale(1.18); }
.geo-marker.selected { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 3px 12px rgba(0,0,0,.4); }
.static-map { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; }
.static-map svg { width: 100%; height: 100%; max-height: 100%; }
.map-country { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 1.4; }
.map-place circle { fill: var(--series-1); stroke: var(--bg); stroke-width: 1.5; cursor: pointer; }
.map-place.active circle { fill: var(--accent); }
.map-place text, .map-label { fill: var(--text-2); font-size: 9px; font-family: var(--sans); }
.mapboxgl-ctrl-group { background: var(--panel) !important; border: 1px solid var(--line); }
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon { filter: var(--ctrl-filter, invert(.85)); }
:root[data-theme="light"] .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon { filter: none; }

/* Sources */
.doc { padding: 16px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.doc:first-child { border-top: 0; }
.doc h3 { margin: 0; font-size: 14.5px; line-height: 1.35; }
.doc p { margin: 0; font-size: 13px; color: var(--text-2); }
.source-row { padding: 10px 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 12.5px; }
.source-row a { color: var(--text); font-weight: 500; }
.source-row .actions { margin-top: 4px; }
.ev-error { color: var(--critical); font-size: 12px; }
.publisher { padding: 10px 16px 4px; font: 500 10.5px var(--mono); letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }

/* Method */
.method { max-width: 820px; padding: 28px 32px; }
.method h2 { font-size: 22px; margin: 0 0 10px; letter-spacing: -.3px; }
.method h3 { font-size: 15px; margin: 26px 0 6px; }
.method p { color: var(--text-2); margin: 0 0 10px; line-height: 1.65; }

/* Key figures & sanctions */
.actor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; padding: 16px; }
.actor-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 14px; cursor: pointer; background: var(--panel-2); transition: border-color .15s; }
.actor-card:hover { border-color: var(--line-strong); }
.actor-card h3 { margin: 4px 0 2px; font-size: 14px; line-height: 1.3; }
.actor-card p { margin: 0; font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.actor-body { min-width: 0; display: flex; flex-direction: column; }
.actor-badges { display: flex; gap: 4px; flex-wrap: wrap; min-height: 20px; }
.actor-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.actor-foot .grow { flex: 1; }
.actor-foot .icon { width: 13px; height: 13px; vertical-align: -2px; }
.hot { color: var(--critical); font-weight: 600; }
.portrait { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; object-position: center 20%; background: var(--hover); flex-shrink: 0; }
.portrait.sm { width: 30px; height: 30px; border-radius: 50%; }
.portrait.xl { width: 132px; height: 160px; border-radius: 12px; }
.avatar.xl { width: 132px; height: 160px; border-radius: 12px; font-size: 40px; }
.profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.credit { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.credit a { color: var(--muted); text-decoration: underline; }
.section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 22px 0 10px; }
.sanction { padding: 12px 16px; margin-bottom: 10px; border-left: 3px solid var(--critical); }
.sanction p { margin: 8px 0; font-size: 13px; color: var(--text-2); line-height: 1.55; }
.mention { padding: 12px 16px; border-top: 1px solid var(--line); }
.mention:first-child { border-top: 0; }
.mention h4 { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.mention .post-text { font-size: 13px; color: var(--text-2); }
.actor-chip { height: 24px; font-size: 11.5px; padding: 0 9px; }
.actor-chip .icon { width: 12px; height: 12px; }
.actor-chip.sanctioned { border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); color: var(--text); }
.actor-chip.sanctioned .icon { color: var(--critical); }

/* Arms & equipment */
.equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px; }
.equip-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel-2); cursor: pointer; transition: border-color .15s, transform .15s; }
.equip-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.equip-img { width: 100%; height: 150px; object-fit: cover; background: #e9ece6; display: block; }
.equip-img.placeholder { display: grid; place-items: center; color: var(--muted); background: var(--hover); }
.equip-img.placeholder .icon { width: 34px; height: 34px; }
.equip-body { padding: 12px 14px; display: flex; flex-direction: column; flex: 1; }
.equip-body h3 { margin: 6px 0 4px; font-size: 14px; }
.equip-body p { margin: 0; font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.weapon-hero { border-radius: 12px; overflow: hidden; background: #e9ece6; max-height: 320px; display: grid; place-items: center; }
.weapon-hero img { width: 100%; max-height: 320px; object-fit: contain; display: block; }
.model-panel { margin-bottom: 12px; overflow: hidden; }
.model-frame { width: 100%; height: 420px; border: 0; display: block; background: #111; }
.model-cover { position: relative; width: 100%; height: 300px; border: 0; padding: 0; display: grid; place-items: center; background: #111; overflow: hidden; }
.model-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.model-cover .btn { position: relative; }
.model-cover small { position: absolute; bottom: 12px; color: #ddd; font-size: 11.5px; }
.matrix-wrap { overflow-x: auto; padding: 0 16px; }
table.matrix { border-collapse: separate; border-spacing: 2px; font-size: 12px; width: 100%; }
table.matrix th { font-weight: 500; color: var(--text-2); text-align: left; white-space: nowrap; }
table.matrix thead th { vertical-align: bottom; height: 110px; padding: 0 0 6px; }
table.matrix thead th span { display: inline-block; transform: rotate(-40deg); transform-origin: left bottom; translate: 14px 0; width: 22px; white-space: nowrap; font-size: 11.5px; }
table.matrix tbody th { padding-right: 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.matrix td { width: 44px; height: 30px; text-align: center; border-radius: 4px; background: var(--panel-2); font-variant-numeric: tabular-nums; color: var(--text); }
table.table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.table th, table.table td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; }
table.table th { color: var(--muted); font-weight: 500; border-top: 0; }
ol.steps { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-2); display: grid; gap: 6px; }
@media (max-width: 720px) {
  .profile-head { grid-template-columns: minmax(0, 1fr); }
  .actor-grid, .equip-grid { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .model-frame { height: 300px; }
}

/* Toast */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 120; padding: 10px 16px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 13px; display: none; max-width: calc(100vw - 32px); }

/* Responsive */
@media (max-width: 1380px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brief-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .brief-grid > :first-child { grid-row: span 2; }
  .situation { grid-template-columns: 250px minmax(0, 1fr) 330px; }
}
@media (max-width: 1100px) {
  :root { --rail: 64px; }
  .rail .brand div, .nav-label, .nav-item span, .nav-item .count, .rail-bottom { display: none; }
  .nav-item { justify-content: center; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .brief-grid { grid-template-columns: minmax(0, 1fr); }
  .brief-grid > :first-child { grid-row: auto; }
  .situation { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 60vh auto; height: auto; }
  .view-situation { height: auto; }
  .filters-pane, .rail-pane { border: 0; border-bottom: 1px solid var(--line); }
  .rail-pane { max-height: 80vh; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: 58px; flex-direction: row; padding: 6px 8px; border-right: 0; border-top: 1px solid var(--line); justify-content: space-around; }
  .rail .brand { display: none; }
  .rail nav { display: contents; }
  .nav-item.active::before { display: none; }
  .workspace { padding-bottom: 58px; }
  .view { padding: 16px; }
  .topbar { padding: 0 16px; }
  .crumb, .omni span, .omni kbd { display: none; }
  .topbar { gap: 8px; }
  .map-float.tl { max-width: calc(100% - 28px); }
  .map-float.tr { top: auto; bottom: 14px; right: 14px; }
  .map-float.bl { display: none; }
  .omni { width: auto; flex: 1; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-grid, .two { grid-template-columns: minmax(0, 1fr); }
  .report { grid-template-columns: auto minmax(0, 1fr); }
  .report .save { display: none; }
  .drawer-body { padding: 16px; }
  dl.props { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =============================================================================================
   Operations console theme — instrument palette, coordinate grid, bracketed panels, mono
   readouts. Overrides tokens and finish only; layout rules above stay authoritative.
   ============================================================================================= */
:root {
  --bg: #06090b;
  --panel: #0c1114;
  --panel-2: #0f161a;
  --raised: #131c21;
  --hover: #16222a;
  --line: #19242a;
  --line-strong: #263339;
  --text: #e4ecef;
  --text-2: #98aab2;
  --muted: #5f7179;
  --accent: #c6f36b;
  --accent-strong: #d9ff8f;
  --accent-ink: #0b1204;
  --accent-soft: rgba(198, 243, 107, .09);
  --signal: #5fd0ff;
  --critical: #ff5c5c;
  --critical-soft: rgba(255, 92, 92, .12);
  --warning: #ffb020;
  --warning-soft: rgba(255, 176, 32, .12);
  --good: #3ddc84;
  --good-soft: rgba(61, 220, 132, .12);
  --grid: rgba(152, 190, 205, .035);
  --bracket: rgba(152, 190, 205, .32);
  --glow: 0 0 0 1px rgba(198, 243, 107, .45), 0 0 22px -6px rgba(198, 243, 107, .55);
  --radius: 6px;
  --radius-sm: 4px;
  --sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --chrome: 112px;
  --shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
:root[data-theme="light"] {
  --bg: #eef1ee;
  --panel: #fbfcfa;
  --panel-2: #f4f6f2;
  --raised: #ffffff;
  --hover: #e9ede7;
  --line: #dde3db;
  --line-strong: #c7d0c4;
  --signal: #0b78a8;
  --grid: rgba(30, 60, 50, .045);
  --bracket: rgba(30, 60, 50, .35);
  --glow: 0 0 0 1px rgba(40, 93, 73, .5), 0 0 18px -8px rgba(40, 93, 73, .6);
}
body {
  font-family: var(--sans);
  letter-spacing: -.005em;
  background:
    radial-gradient(1100px 520px at 78% -12%, rgba(95, 208, 255, .055), transparent 62%),
    radial-gradient(900px 520px at -8% 108%, rgba(198, 243, 107, .045), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--bg);
  background-attachment: fixed;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { border-width: 2px; }
.num, .kpi-value, .count, .score span, .big, .topic-stats .big, .stat b, .account-row .n, .rank-row b, .badge, .eyebrow, kbd, .kbd, code, .mono { font-family: var(--mono); font-feature-settings: "tnum" 1, "zero" 1; }

/* Chrome: classification bar, top bar, priority wire */
.chrome { position: sticky; top: 0; z-index: 15; backdrop-filter: blur(14px) saturate(1.2); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line); }
.chrome::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 30%, color-mix(in srgb, var(--signal) 45%, transparent) 70%, transparent); opacity: .55; }
.classbar { height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; font: 500 10px/1 var(--mono); letter-spacing: 1.6px; color: #0d1a05; background: linear-gradient(90deg, #8fcf3a, #b7e86a 50%, #8fcf3a); }
:root[data-theme="light"] .classbar { color: #f1ffe0; background: linear-gradient(90deg, #2f6a1a, #3f8424 50%, #2f6a1a); }
.classbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar { position: static; background: none; border-bottom: 0; height: 56px; backdrop-filter: none; }
.crumb { gap: 10px; }
.crumb-code { font: 600 11px var(--mono); letter-spacing: 1.4px; color: var(--accent-ink); background: var(--accent); padding: 3px 7px; border-radius: 3px; }
.crumb strong { font-size: 14px; letter-spacing: -.01em; }
.omni { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel) 80%, transparent); }
.omni:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.clocks { display: flex; gap: 14px; font-family: var(--mono); }
.clocks span { display: flex; flex-direction: column; line-height: 1.15; }
.clocks small { font-size: 9px; letter-spacing: 1.4px; color: var(--muted); }
.clocks b { font-size: 13px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--good) 40%, var(--line)); border-radius: 13px; font: 600 10.5px var(--mono); letter-spacing: 1.4px; color: var(--good); }
.live-pill.down { color: var(--critical); border-color: color-mix(in srgb, var(--critical) 40%, var(--line)); }
.iconbtn, .seg, .btn { border-radius: var(--radius-sm); }
.seg button { border-radius: 3px; font-family: var(--mono); letter-spacing: .8px; }
.wire { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; height: 34px; border-top: 1px solid var(--line); font-size: 12.5px; }
.wire-label { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px 0 24px; font: 600 10px var(--mono); letter-spacing: 1.6px; color: var(--critical); border-right: 1px solid var(--line); background: color-mix(in srgb, var(--critical) 6%, transparent); white-space: nowrap; }
.wire-track { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.wire-run { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; padding-left: 18px; animation: wire 120s linear infinite; }
.wire:hover .wire-run { animation-play-state: paused; }
@keyframes wire { to { transform: translateX(-50%); } }
.wire-item { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; padding: 0; color: var(--text-2); max-width: 520px; }
.wire-item span { overflow: hidden; text-overflow: ellipsis; }
.wire-item:hover { color: var(--text); }
.wire-item time { font: 11px var(--mono); color: var(--muted); }
.wire-score { font: 600 11px var(--mono); padding: 1px 5px; border-radius: 3px; background: var(--hover); color: var(--text-2); }
.wire-score.high { background: var(--critical-soft); color: var(--critical); }
.wire-score.medium { background: var(--warning-soft); color: var(--warning); }
.wire-sep { font-style: normal; font-size: 7px; color: var(--line-strong); }

/* Rail */
.rail { background: color-mix(in srgb, var(--panel) 92%, transparent); border-right-color: var(--line); }
.brand-mark { border-radius: 6px; background: radial-gradient(circle at 30% 30%, #3c8a5f, #0f2b1f 70%); box-shadow: 0 0 0 1px rgba(198, 243, 107, .25), 0 0 18px -6px rgba(198, 243, 107, .6); }
.brand strong { font-family: var(--mono); font-weight: 600; letter-spacing: 3px; font-size: 12.5px; }
.nav-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 2px; }
.nav-item { border-radius: var(--radius-sm); font-size: 13px; }
.nav-item.active { background: linear-gradient(90deg, var(--accent-soft), transparent 85%); }
.nav-item.active::before { box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 70%, transparent); }
.nav-item .nav-key { margin-left: auto; font-size: 10px; border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; color: var(--muted); opacity: 0; transition: opacity .15s; }
.nav-item:hover .nav-key { opacity: 1; }
.feed-status { font-size: 11.5px; }

/* Panels: hairline frame with corner brackets, numbered headers */
.panel {
  border-radius: var(--radius);
  border-color: var(--line);
  background:
    linear-gradient(var(--bracket), var(--bracket)) top left / 10px 1px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) top left / 1px 10px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) top right / 10px 1px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) top right / 1px 10px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) bottom left / 10px 1px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) bottom left / 1px 10px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) bottom right / 10px 1px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) bottom right / 1px 10px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 100%, transparent), color-mix(in srgb, var(--panel) 88%, transparent));
}
.view { counter-reset: panel; }
.panel-head { border-bottom: 1px solid var(--line); padding: 12px 16px; margin-bottom: 4px; }
.panel-head h2 { font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.panel-head h2::before { counter-increment: panel; content: counter(panel, decimal-leading-zero); font: 500 10.5px var(--mono); color: var(--accent); letter-spacing: 1px; padding-right: 4px; border-right: 1px solid var(--line-strong); margin-right: 2px; }
.panel-head h2 .icon { color: var(--muted); width: 14px; height: 14px; }
.panel-head small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; }
.page-head .eyebrow::before { content: '//'; color: var(--accent); margin-right: 2px; }
.page-head h1 { font-size: 30px; font-weight: 600; letter-spacing: -.8px; }
.eyebrow { font-size: 10.5px; letter-spacing: 1.8px; }

/* KPIs as instrument readouts */
.kpi { padding: 16px 18px 14px; }
.kpi-label { font: 500 10.5px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.kpi-value { font-size: 30px; font-weight: 500; letter-spacing: -1px; margin-top: 4px; }
.kpi.alert .kpi-value { text-shadow: 0 0 18px color-mix(in srgb, var(--critical) 55%, transparent); }
.kpi-foot { font-size: 11px; }
.kpi::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .35; }
.kpi.alert::after { background: linear-gradient(90deg, var(--critical), transparent); opacity: .7; }

/* Buttons */
.btn { font-weight: 500; letter-spacing: .1px; }
.btn.primary { box-shadow: var(--glow); }
.btn.primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 0 28px -4px var(--accent); }
.chip { border-radius: 4px; font-family: var(--sans); }
.chip.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.badge { border-radius: 3px; letter-spacing: .8px; }
.input, .select { border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-2) 85%, transparent); }

/* Rows */
.report, .account-row, .post, .mention, .doc { transition: background .12s, box-shadow .12s; }
.report:hover, .account-row:hover { background: color-mix(in srgb, var(--hover) 70%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.score.high { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--critical) 55%, transparent)); }
.report h3 { letter-spacing: -.15px; }
.post-text mark, .mention .post-text mark { background: color-mix(in srgb, var(--warning) 22%, transparent); box-shadow: inset 0 -1px 0 var(--warning); }

/* Topic cards & actor/equipment cards */
.topic-card.active { box-shadow: inset 0 0 0 1px var(--c), 0 0 26px -10px var(--c); }
.actor-card, .equip-card { border-radius: var(--radius); }
.actor-card:hover, .equip-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); }
.portrait { border-radius: 6px; box-shadow: 0 0 0 1px var(--line-strong); filter: saturate(.85) contrast(1.05); }
.equip-img { filter: saturate(.8) contrast(1.05); }
.equip-card:hover .equip-img { filter: none; }
.sanction { background: linear-gradient(90deg, var(--critical-soft), transparent 40%), var(--panel); }

/* Drawers and dialogs */
.shade { background: rgba(2, 5, 6, .62); backdrop-filter: blur(4px) saturate(.9); }
.drawer { background: color-mix(in srgb, var(--bg) 96%, transparent); border-left: 1px solid var(--line-strong); box-shadow: -30px 0 80px rgba(0, 0, 0, .55); }
.drawer::before { content: 'UNCLASSIFIED // OPEN SOURCE'; display: block; position: sticky; top: 0; z-index: 4; height: 18px; font: 500 9.5px/18px var(--mono); letter-spacing: 1.6px; text-align: center; color: #0d1a05; background: #a6dc54; }
.drawer-top { top: 18px; }
.tabs button { font-family: var(--mono); font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; }
.palette { border-radius: 8px; box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.palette-input input { font-family: var(--mono); font-size: 14px; }
.palette-item.active { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 2px 0 0 var(--accent); }
#tip { font-family: var(--mono); font-size: 11.5px; border-radius: 4px; border-color: color-mix(in srgb, var(--accent) 30%, var(--line-strong)); }
#toast { font-family: var(--mono); font-size: 12px; border-radius: 4px; box-shadow: var(--shadow), inset 2px 0 0 var(--accent); }

/* Situation room HUD */
.view-situation { height: calc(100vh - var(--chrome) + 34px); }
.filters-pane, .rail-pane { background: color-mix(in srgb, var(--panel) 94%, transparent); }
.pane-section h2 { letter-spacing: 1.8px; }
.hud { position: absolute; inset: 14px; pointer-events: none; z-index: 1; }
.hud-c { position: absolute; width: 22px; height: 22px; border-color: color-mix(in srgb, var(--accent) 70%, transparent); border-style: solid; border-width: 0; }
.hud-c.tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.hud-c.tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.hud-c.bl { bottom: 20px; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hud-c.br { bottom: 20px; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.hud-reticle { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; translate: -50% -50%; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; }
.hud-reticle::before, .hud-reticle::after { content: ''; position: absolute; background: color-mix(in srgb, var(--accent) 45%, transparent); }
.hud-reticle::before { left: 50%; top: -10px; bottom: -10px; width: 1px; }
.hud-reticle::after { top: 50%; left: -10px; right: -10px; height: 1px; }
.map-float.hud-pos { top: 62px; right: 54px; }
.hud-readout { font: 500 11px var(--mono); letter-spacing: .4px; color: var(--text-2); white-space: pre; padding: 6px 10px; }
.glass { border-radius: 4px; background: color-mix(in srgb, var(--panel) 78%, transparent); border-color: var(--line-strong); }
.geo-marker { border-width: 1.5px; font-family: var(--mono); font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.geo-marker.hot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--critical); animation: ping 2.2s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes ping { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.day-bar i { background: linear-gradient(180deg, var(--signal), color-mix(in srgb, var(--signal) 40%, transparent)); }
.day-bar.active i { background: var(--accent); box-shadow: 0 0 12px -2px var(--accent); }
.timeline { background: color-mix(in srgb, var(--panel) 92%, transparent); }

/* Boot sequence */
.boot { height: 100vh; display: grid; place-items: center; letter-spacing: 0; text-align: left; background: inherit; }
.boot-box { width: min(440px, calc(100vw - 48px)); font-family: var(--mono); }
.boot-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.boot-head strong { display: block; letter-spacing: 4px; font-size: 15px; color: var(--text); }
.boot-head small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .6px; margin-top: 4px; }
.boot-mark { width: 30px; height: 30px; margin: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); border-top-color: var(--accent); }
.boot-log { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; font-size: 12px; color: var(--text-2); }
.boot-log li { display: flex; justify-content: space-between; gap: 12px; opacity: 0; animation: bootline .3s ease-out forwards; }
.boot-log li b { color: var(--good); font-weight: 500; }
.boot-log li:last-child b { color: var(--accent); }
.boot-log li:nth-child(1) { animation-delay: .05s; } .boot-log li:nth-child(2) { animation-delay: .25s; } .boot-log li:nth-child(3) { animation-delay: .45s; } .boot-log li:nth-child(4) { animation-delay: .65s; } .boot-log li:nth-child(5) { animation-delay: .85s; }
@keyframes bootline { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.boot-bar { height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.boot-bar i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: bootbar 1.1s ease-in-out infinite; }
@keyframes bootbar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* View entry */
.view.enter > * { animation: enter .42s cubic-bezier(.2, .7, .2, 1) both; }
.view.enter > :nth-child(2) { animation-delay: .04s; } .view.enter > :nth-child(3) { animation-delay: .08s; } .view.enter > :nth-child(4) { animation-delay: .12s; } .view.enter > :nth-child(5) { animation-delay: .16s; }
.view.enter .kpi { animation: enter .5s cubic-bezier(.2, .7, .2, 1) both; }
.view.enter .kpi:nth-child(2) { animation-delay: .05s; } .view.enter .kpi:nth-child(3) { animation-delay: .1s; } .view.enter .kpi:nth-child(4) { animation-delay: .15s; } .view.enter .kpi:nth-child(5) { animation-delay: .2s; } .view.enter .kpi:nth-child(6) { animation-delay: .25s; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .clocks { display: none; }
  .classbar-mid { display: none; }
}
@media (max-width: 720px) {
  .classbar { padding: 0 12px; }
  .classbar span:last-child { display: none; }
  .live-pill { display: none; }
  .wire-label { padding: 0 10px 0 12px; }
  .view-situation { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wire-run { animation: none; }
  .geo-marker.hot::after { animation: none; opacity: .6; }
}

/* Mineral exploration: usable with the map or keyboard-driven directory. */
.mineral-results { max-height: 260px; overflow-y: auto; margin-top: 8px; }
.mineral-result { display: grid; gap: 5px; width: 100%; text-align: left; padding: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.mineral-result strong { font-size: 12px; line-height: 1.5; }
.mineral-result small { color: var(--muted); line-height: 1.5; }
.mineral-result:hover, .mineral-result.selected { background: var(--accent-dim, #8c9d5522); }
.mineral-result:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mineral-directory summary { cursor: pointer; font-size: 12px; padding: 8px 0; }
.mineral-inspector { padding: 16px; border-bottom: 2px solid var(--accent); max-height: 58%; overflow-y: auto; flex-shrink: 0; background: var(--panel); }
.mineral-inspector h2 { font-size: 20px; margin: 12px 0 6px; }
.mineral-inspector p, .mineral-inspector small { font-size: 12px; line-height: 1.6; }
.mineral-inspector dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.mineral-inspector dd { margin: 0; }
.nearby-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; margin-top: 18px; }
.nearby-label select { width: 100px; }
.nearby-reports { max-height: 210px; overflow-y: auto; }
.situation.map-focus { grid-template-columns: minmax(0, 1fr); }
.situation.map-focus > .filters-pane, .situation.map-focus > .rail-pane { display: none; }
.map-float.tr { max-width: calc(100% - 68px); flex-wrap: wrap; justify-content: flex-end; }
.map-float.tl { top: 65px; max-width: calc(100% - 80px); pointer-events: none; }
@media (max-width: 900px) {
  .mineral-inspector { max-height: 500px; }
  .situation.map-focus .stage { height: 80vh; min-height: 450px; }
}
.agreement-layout { display:grid; grid-template-columns:minmax(250px,32%) minmax(0,1fr); gap:20px; margin:20px 0; align-items:start; }
.agreement-list { max-height:80vh; overflow:auto; }
.agreement-detail, .agreement-charts { padding:20px; }
.agreement-detail h2 { font-size:21px; }
.agreement-detail p, .agreement-detail li { line-height:1.7; }
.agreement-detail .actions { flex-wrap:wrap; margin:16px 0; }
.table-scroll { overflow:auto; }
.agreement-table { width:100%; border-collapse:collapse; text-align:left; }
.agreement-table th, .agreement-table td { padding:12px; border-bottom:1px solid var(--line); font-size:12px; }
.score-cell { display:inline-block; min-width:38px; padding:5px; border-radius:4px; text-align:center; }
.score-cell.positive { background:#218c6240; color:var(--text); }
.score-cell.negative { background:#c04d4540; color:var(--text); }
.score-cell.neutral { background:#ac8c3240; color:var(--text); }
.score-cell.unknown { background:var(--line); color:var(--muted); }
.agreement-scores details, .agreement-document { padding:10px 0; border-bottom:1px solid var(--line); }
.agreement-scores summary { display:flex; justify-content:space-between; cursor:pointer; }
.agreement-text { white-space:pre-wrap; overflow:auto; max-height:450px; font:13px/1.7 var(--mono); padding:14px; background:var(--bg); }
.agreement-detail blockquote { border-left:3px solid var(--accent); padding-left:12px; margin-left:0; font-size:13px; }
@media(max-width:900px){.agreement-layout{grid-template-columns:1fr}.agreement-list{max-height:350px}}

/* =============================================================================================
   Minerals mode — geological base map, mine dossier, market board
   ============================================================================================= */
.mode-switch button { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.mode-switch button.active { background: var(--accent); color: var(--accent-ink); }
.minerals-mode .filters-pane .pane-section h2 { color: var(--warning); }
.market-board { padding: 10px 16px 12px; }
.tickers { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ticker { flex: 0 0 auto; display: grid; grid-template-rows: auto auto auto; gap: 2px; min-width: 150px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--panel-2) 85%, transparent); text-align: left; color: inherit; }
.ticker:hover { border-color: var(--line-strong); }
.ticker.active { border-color: var(--accent); box-shadow: var(--glow); }
.t-name { font: 500 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.t-val { display: flex; align-items: baseline; gap: 4px; font-family: var(--mono); }
.t-val b { font-size: 16px; font-weight: 500; color: var(--text); }
.t-val small { color: var(--muted); font-size: 11px; }
.t-note { font-size: 10px; color: var(--muted); max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker .spark { width: 96px; height: 22px; }
.chg { font: 500 11px var(--mono); font-style: normal; margin-left: 4px; }
.chg.up { color: var(--good); }
.chg.down { color: var(--critical); }
.mine-dossier { padding: 16px; overflow-y: auto; height: 100%; }
.dossier-top { display: flex; justify-content: space-between; align-items: center; }
.mine-name { margin: 6px 0 2px; font-size: 20px; letter-spacing: -.3px; }
.mine-place { color: var(--text-2); font-size: 12.5px; }
.mineral-chip { height: 24px; border-color: color-mix(in srgb, var(--warning) 45%, var(--line)); color: var(--warning); font-family: var(--mono); font-size: 11px; }
.route { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 7%, transparent), transparent 70%); }
.route-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; padding: 3px 0; }
.route-row i { font-style: normal; color: var(--muted); font-family: var(--mono); }
.route-node { padding: 2px 8px; border-radius: 3px; background: var(--hover); }
.route-node.mine { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); font-family: var(--mono); font-size: 11.5px; }
.route-node.dest { background: color-mix(in srgb, var(--signal) 15%, transparent); color: var(--signal); }
.market-card { margin: 12px 0; }
.price-line { display: flex; align-items: baseline; gap: 6px; font-family: var(--mono); }
.price-line b { font-size: 22px; font-weight: 500; }
.price-line.big b { font-size: 30px; letter-spacing: -1px; }
.price-line small { color: var(--muted); }
.price-line .grow { flex: 1; }
.price-line .spark { width: 120px; height: 28px; align-self: center; }
.value-line { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--text-2); }
.value-line b { color: var(--accent); font-size: 14px; }
.buyers { display: grid; gap: 4px; }
.buyer { display: grid; grid-template-columns: minmax(0, 1fr) 90px 74px 34px; gap: 8px; align-items: center; font-size: 12.5px; }
.buyer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buyer b { text-align: right; font-weight: 500; }
.buyer small { text-align: right; color: var(--muted); }
.trade-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.trade-foot b { color: var(--text-2); }
.era-legend { display: grid; gap: 4px; margin: 4px 0; }
.era-legend div { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.era-legend i { width: 14px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.era-legend small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.range-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: 12px; color: var(--text-2); }
.range-row input { accent-color: var(--accent); }
.geo-card { max-width: 380px; display: grid; gap: 6px; pointer-events: auto; }
.geo-card strong { font-size: 14px; }
.geo-card p { margin: 0; font-size: 12px; color: var(--text-2); }
.geo-facts { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-2); }
.geo-facts b { color: var(--text); font-weight: 500; }
.minerals-mode .rail-pane { overflow: hidden; }
@media (max-width: 1100px) {
  .buyer { grid-template-columns: minmax(0, 1fr) 70px 70px 30px; }
}
.gap-note { margin: 6px 0 0; font-size: 11.5px; color: var(--warning); line-height: 1.45; }
/* The stage must not grow past its column (wide market board / ticker rows). */
.stage { grid-template-columns: minmax(0, 1fr); }
.market-board { min-width: 0; overflow: hidden; }

/* Mineral focus */
.focus-panel .swatch { width: 10px; height: 10px; }
.focus-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.focus-stats div { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--focus) 7%, var(--panel-2)); }
.focus-stats b { display: block; font-size: 20px; font-weight: 500; color: var(--text); }
.focus-stats small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; font-family: var(--mono); }
.area-list { display: grid; gap: 4px; margin-bottom: 12px; }
.area-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); text-align: left; color: inherit; transition: border-color .15s, background .15s, box-shadow .15s; }
.area-row:hover { border-color: var(--line-strong); }
.area-row.active { border-color: var(--focus); background: color-mix(in srgb, var(--focus) 10%, var(--panel-2)); box-shadow: 0 0 22px -10px var(--focus); }
.area-rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 11px var(--mono); color: #02060a; background: var(--focus); }
.area-row strong { display: block; font-size: 13px; }
.area-row small { display: block; font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-n { text-align: right; }
.area-n b { display: block; font-size: 14px; font-weight: 500; }
.area-n small { font-size: 10.5px; color: var(--muted); }
.focus-tag { border-color: color-mix(in srgb, var(--focus) 60%, var(--line-strong)); box-shadow: 0 0 26px -10px var(--focus); }
.focus-tag strong { display: flex; align-items: center; gap: 8px; }

/* Live radio: equalizer, on-air chip, station list, now-playing card, map markers, dial. */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex-shrink: 0; }
.eq i { width: 3px; height: 3px; border-radius: 1px; background: var(--muted); }
.eq.on i { background: var(--accent); animation: eq 0.9s ease-in-out infinite alternate; }
.eq.on i:nth-child(3n+2) { animation-duration: .7s; animation-delay: -.3s; }
.eq.on i:nth-child(3n) { animation-duration: 1.1s; animation-delay: -.6s; }
.eq.on i:nth-child(4n) { animation-duration: .55s; }
@keyframes eq { from { height: 3px; } to { height: 100%; } }
.onair { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 3px 0 0; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--panel); max-width: 320px; min-width: 0; }
.onair.playing { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--glow); }
.onair.error { border-color: color-mix(in srgb, var(--critical) 50%, var(--line)); }
.onair-main { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 28px; padding: 0 8px 0 12px; border: 0; background: none; color: var(--text); font-size: 12px; }
.onair-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.onair-main small { color: var(--muted); white-space: nowrap; }
.onair-label { font: 600 10px var(--mono); letter-spacing: 1.2px; color: var(--accent); }
.onair.error .onair-label { color: var(--critical); }
.onair-btn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); font-size: 9px; display: grid; place-items: center; }
.onair-btn:hover { color: var(--text); border-color: var(--line-strong); }
.station-group h2 span { margin-left: auto; font: 500 11px var(--mono); color: var(--muted); }
.station { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin: 0 0 2px; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); background: none; color: var(--text); text-align: left; }
.station strong { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station:hover { background: var(--hover); }
.station.selected { border-color: var(--line-strong); background: var(--panel-2); }
.station.playing strong { color: var(--accent); }
.station.tuning .eq i { animation: eq .4s steps(2) infinite alternate; background: var(--text-2); }
.now-playing { padding-bottom: 6px; }
.np-head { display: flex; gap: 12px; align-items: center; }
.np-logo { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex-shrink: 0; }
.np-logo.ph { display: grid; place-items: center; background: var(--panel-2); color: var(--accent); }
.np-logo.ph .icon { width: 24px; height: 24px; }
.np-visual { margin: 16px 0 12px; height: 54px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px); background: color-mix(in srgb, var(--panel-2) 80%, transparent); display: flex; }
.np-visual .eq { width: 100%; height: 100%; justify-content: space-between; gap: 3px; }
.np-visual .eq i { flex: 1; height: 8%; }
.np-visual .eq.on i { box-shadow: 0 0 8px -2px var(--accent); }
.np-controls { display: flex; align-items: center; gap: 12px; }
.np-play { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--accent); background: var(--accent); color: var(--bg); font-size: 15px; box-shadow: var(--glow); flex-shrink: 0; }
.np-play.on { background: transparent; color: var(--accent); }
.np-play:disabled { opacity: .4; box-shadow: none; cursor: not-allowed; }
.np-volume { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--muted); min-width: 0; }
.np-volume input { flex: 1; accent-color: var(--accent); min-width: 0; }
.np-props dd { overflow-wrap: anywhere; }
.radio-marker { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--text); }
.rm-dot { position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1.5px solid var(--accent); color: var(--accent); box-shadow: 0 3px 12px rgba(0,0,0,.4); }
.rm-dot .icon { width: 14px; height: 14px; }
.rm-label { display: grid; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 78%, transparent); border: 1px solid var(--line); backdrop-filter: blur(6px); text-align: left; line-height: 1.25; }
.rm-label b { font-size: 11.5px; } .rm-label small { font: 10px var(--mono); color: var(--muted); }
.radio-marker.off .rm-dot { border-color: var(--muted); color: var(--muted); }
.radio-marker.selected .rm-label, .radio-marker:hover .rm-label { border-color: var(--accent); }
.radio-marker.playing .rm-dot { background: var(--accent); color: var(--bg); }
.radio-marker.playing .rm-dot::before, .radio-marker.playing .rm-dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--accent); animation: ping 2s cubic-bezier(.2, .6, .3, 1) infinite; }
.radio-marker.playing .rm-dot::after { animation-delay: 1s; }
.dial .tickers { padding-bottom: 4px; }
.dial-station { min-width: 170px; position: relative; }
.dial-station .t-name { font: 500 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.dial-station .eq { height: 10px; width: 100%; justify-content: space-between; }
.dial-station .eq i { flex: 1; }
@media (prefers-reduced-motion: reduce) { .eq.on i { animation: none; height: 60%; } .radio-marker.playing .rm-dot::before, .radio-marker.playing .rm-dot::after { animation: none; opacity: .5; } }
@media (max-width: 900px) { .onair-main small, .onair-main strong { display: none; } }
.eq:not(.on) i { opacity: .55; }
.eq:not(.on) i:nth-child(3n+1) { height: 45%; } .eq:not(.on) i:nth-child(3n+2) { height: 80%; } .eq:not(.on) i:nth-child(3n) { height: 30%; }
.mode-switch button { display: inline-flex; align-items: center; gap: 5px; } .mode-switch button .icon { width: 13px; height: 13px; }

.mode-switch {flex-wrap:wrap}

.flights-view .map-float.tr{max-width:calc(100% - 66px)}

/* Persistent voice panel, independent of dashboard polling/renders. */
.voice-center{position:fixed;z-index:10000;right:20px;top:90px;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 110px);overflow:auto;padding:24px;background:var(--panel,#101718);color:var(--text,#e6eeee);border:1px solid #718b59;border-radius:14px;box-shadow:0 20px 70px #0008}
.voice-center header{display:flex;justify-content:space-between;align-items:center;gap:16px}.voice-center h2{margin:4px 0}.voice-center p,.voice-center li{line-height:1.6}.voice-center textarea{width:100%;margin:12px 0;resize:vertical}.voice-center .actions{display:flex;flex-wrap:wrap;gap:8px}.voice-center details{margin:16px 0}.voice-center .voice-status{padding:10px;border-left:3px solid #adce62;white-space:pre-wrap}.voice-center [data-history]{font-size:12px}.voice-center .muted{font-size:12px}

.voice-options{display:grid;gap:8px;margin:14px 0;font-size:13px}.voice-center [data-citations]{font-size:12px}.voice-center [hidden]{display:none!important}

.ai-settings-panel{padding:24px;margin-bottom:20px;gap:16px}.ai-provider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:20px}.ai-settings-panel input:not([type=checkbox]),.ai-settings-panel select{width:100%;max-width:100%;}.ai-settings-panel .actions{flex-wrap:wrap}

/* Okapi cinematic mode. Motion is decorative; metrics remain source-backed. */
:root[data-ai-mode="on"]{color-scheme:dark;--bg:#030a09;--panel:#071310;--panel-2:#0b1b17;--raised:#10221d;--hover:#13352b;--line:#163a30;--line-strong:#28614f;--text:#e4fff4;--text-2:#a5c5b9;--muted:#7b9b8e;--accent:#6affb9;--accent-strong:#b5ffdd;--accent-ink:#042015;--accent-soft:#6affb914;--grid:#36b78e09;--signal:#82e3f5;--glow:0 0 25px #45ffac26}
[data-ai-mode="on"] .rail{background:linear-gradient(180deg,#06130f,#030a09);border-right-color:#285a434d}
[data-ai-mode="on"] .chrome{background:#030e0bf5}
[data-ai-mode="on"] .classbar{background:linear-gradient(90deg,#173d2e,#80efb4,#173d2e);color:#021a10}
[data-ai-mode="on"] .panel{border-color:#2a5d4b77;box-shadow:0 0 24px #27df8e07}
.ai-mode-switch{white-space:nowrap}
[data-ai-mode="on"] .ai-mode-switch{border-color:#62ffb5;color:#8dffc9;box-shadow:0 0 20px #36ffa21a}
.view-ai-command{padding:0!important}
[data-ai-mode="on"] .voice-center{border:1px solid #5af8ad80;background:linear-gradient(145deg,#091d15f5,#03110ff8);backdrop-filter:blur(25px);box-shadow:0 0 70px #47ffa523,0 25px 90px #000b;border-radius:10px}
[data-ai-mode="on"] .voice-center header small{color:#71f3ab;letter-spacing:3px}[data-ai-mode="on"] .voice-center header{border-bottom:1px solid #3c8c6355;padding-bottom:16px}
[data-ai-mode="on"] .voice-center::before{content:"";display:block;height:3px;background:linear-gradient(90deg,transparent,#6cffb5,transparent);margin:-24px -24px 20px;animation:ai-breathe 4s ease-in-out infinite}
@keyframes ai-breathe{50%{opacity:.45;scale:.97}}
:root[data-ai-motion="off"] .holo-stage *,:root[data-ai-motion="off"] .voice-center::before{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.holo-stage *,.voice-center::before{animation:none!important;transition:none!important}}
@media(max-width:700px){.ai-mode-switch{padding:7px;font-size:10px}.ai-mode-switch .icon{display:none}}
[data-ai-mode="on"] .topbar .omni{min-width:40px;overflow:hidden}
[data-ai-mode="on"] .topbar .omni>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-ai-mode="on"] .topbar .crumb{flex-shrink:0}
[data-page-hidden="true"] .holo-stage *,[data-page-hidden="true"] .voice-center::before{animation-play-state:paused!important}
@media(max-width:900px){[data-ai-mode="on"] .topbar .omni{flex:0 0 34px;padding:7px}[data-ai-mode="on"] .topbar .omni>span,[data-ai-mode="on"] .topbar .omni kbd{display:none}[data-ai-mode="on"] .clocks{display:none}}

/* AI command center: holographic surface. Panels float over a full-bleed canvas. */
.holo-stage { position: relative; isolation: isolate; overflow: hidden; height: calc(100dvh - 82px); min-height: 680px; background: radial-gradient(ellipse 60% 55% at 52% 44%, #0b2a20 0%, #04100c 55%, #020806 100%); color: var(--text); }
.holo-stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(#6affb912 1px, transparent 1.2px); background-size: 22px 22px; mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 30%, transparent 80%); }
.holo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; }
.holo-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 55%, #000a 100%); }
.holo-scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.holo-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(transparent, #6affb90d, transparent); animation: holo-scanline 9s linear infinite; }
@keyframes holo-scanline { to { transform: translateY(calc(100dvh + 240px)); } }
.holo-title { position: absolute; z-index: 3; top: 22px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; width: min(720px, 60%); }
.holo-kicker { display: inline-flex; align-items: center; gap: 9px; font: 500 10px var(--mono); letter-spacing: 3px; color: #7ff0bd; padding: 5px 12px; border: 1px solid #6affb933; border-radius: 99px; background: #04120dcc; }
.holo-title h1 { margin: 14px 0 6px; font: 300 clamp(18px, 1.7vw, 26px) var(--sans); letter-spacing: -.3px; color: #d6fbe9; }
.holo-num { font: 500 1.15em var(--mono); color: #fff; text-shadow: 0 0 18px #6affb9aa; letter-spacing: -1px; }
.holo-num.hot { color: #ff8a95; text-shadow: 0 0 18px #ff5d6caa; }
.holo-sep { color: #6affb955; margin: 0 6px; }
.holo-title p { margin: 0; font-size: 12px; color: #7fa596; }
.holo-panel { position: absolute; z-index: 3; padding: 14px 16px; background: linear-gradient(180deg, #06150fe6, #030c09d9); border: 1px solid #6affb922; backdrop-filter: blur(10px); box-shadow: 0 0 40px #000c, inset 0 0 30px #6affb906; }
.hc { position: absolute; width: 9px; height: 9px; border-color: #8affc9; border-style: solid; border-width: 0; pointer-events: none; }
.hc.tl { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; } .hc.tr { top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; }
.hc.bl { bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; } .hc.br { bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.holo-panel-head { display: flex; justify-content: space-between; align-items: center; font: 500 9.5px var(--mono); letter-spacing: 2.2px; color: #8ff5c4; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid #6affb91f; }
.holo-panel-head b { font-weight: 500; color: #5f8f7b; letter-spacing: 1.5px; }
.holo-feed { left: 22px; top: 22px; width: 330px; bottom: 214px; overflow-y: auto; scrollbar-width: none; }
.holo-intercept { display: grid; grid-template-columns: 38px 6px minmax(0, 1fr); gap: 10px; align-items: start; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid #6affb912; background: none; color: inherit; text-align: left; cursor: pointer; opacity: 0; animation: holo-in .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--i) * 90ms); }
.holo-intercept time { font: 10px var(--mono); color: #6c9b86; padding-top: 2px; }
.holo-intercept > i { width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; box-shadow: 0 0 8px currentColor; }
.holo-intercept strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; font-weight: 450; line-height: 1.45; color: #d4f5e5; }
.holo-intercept small { display: block; margin-top: 3px; font: 9.5px var(--mono); color: #5f8f7b; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.holo-intercept:hover strong { color: #fff; } .holo-intercept:hover { background: linear-gradient(90deg, #6affb90d, transparent); }
.holo-intercept:first-of-type strong { color: #fff; }
@keyframes holo-in { from { opacity: 0; transform: translateX(-12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.holo-side { right: 22px; top: 22px; width: 290px; max-height: calc(100% - 236px); overflow-y: auto; scrollbar-width: none; }
.holo-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 26px; align-items: center; gap: 10px; width: 100%; padding: 6px 0; border: 0; background: none; color: #b9dccb; font-size: 11.5px; text-align: left; cursor: pointer; }
.holo-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .holo-bar b { font: 500 11px var(--mono); text-align: right; color: #e8fff4; }
.holo-bar > i { height: 4px; background: #6affb912; position: relative; }
.holo-bar em { position: absolute; inset: 0 auto 0 0; box-shadow: 0 0 10px currentColor; animation: holo-grow 1s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
@keyframes holo-grow { from { transform: scaleX(0); } }
.holo-bar:hover span { color: #fff; }
.holo-layer { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 11.5px; color: #b9dccb; cursor: pointer; }
.holo-layer input { accent-color: #6affb9; margin: 0; } .holo-layer i { width: 14px; height: 2px; }
.holo-legend { display: flex; gap: 12px; margin: 10px 0 12px; font: 9.5px var(--mono); color: #6c9b86; letter-spacing: .5px; }
.holo-legend span { display: inline-flex; align-items: center; gap: 5px; } .holo-legend i { width: 6px; height: 6px; border-radius: 50%; }
.holo-motion { width: 100%; padding: 7px; border: 1px solid #6affb92a; background: none; color: #8fbfa9; font: 500 9.5px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.holo-motion:hover { color: #fff; border-color: #6affb966; }
.holo-command { position: absolute; z-index: 4; left: 50%; bottom: 112px; transform: translateX(-50%); width: min(660px, calc(100% - 720px)); min-width: 420px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 9px 9px 14px; background: #04110ccc; border: 1px solid #6affb944; backdrop-filter: blur(14px); box-shadow: 0 0 60px #6affb914, 0 20px 50px #000a; }
.holo-command:focus-within { border-color: #8affc9; box-shadow: 0 0 0 1px #6affb955, 0 0 70px #6affb926, 0 20px 50px #000a; }
.holo-command input { height: 40px; border: 0; background: none; color: #f0fff8; font: 15px var(--sans); outline: none; min-width: 0; }
.holo-command input::placeholder { color: #6c9b86; }
.holo-orb { position: relative; width: 22px; height: 22px; display: grid; place-items: center; }
.holo-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #6affb9; animation: holo-orb 2.4s ease-out infinite; }
.holo-orb i:nth-child(2) { animation-delay: .8s; } .holo-orb i:nth-child(3) { animation-delay: 1.6s; }
.holo-orb::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #b5ffdd; box-shadow: 0 0 12px #6affb9; }
@keyframes holo-orb { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.holo-mic { position: relative; height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px 0 13px; border: 1px solid #8affc9; background: #6affb914; color: #b5ffdd; font: 600 12px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.holo-mic .icon { width: 17px; height: 17px; }
.holo-mic::after { content: ''; position: absolute; inset: -1px; border: 1px solid #6affb9; animation: holo-mic 2.6s ease-out infinite; pointer-events: none; }
@keyframes holo-mic { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.18, 1.45); } }
.holo-mic:hover { background: #6affb92a; color: #fff; }
.holo-send { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border: 0; background: #8affc9; color: #021a10; font: 600 12px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 24px #6affb966; }
.holo-send:hover { background: #c4ffe3; }
.holo-prompts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0 2px 32px; }
.holo-prompts button { border: 0; background: none; padding: 0; color: #6c9b86; font: 10.5px var(--mono); cursor: pointer; }
.holo-prompts button::before { content: '› '; color: #6affb9; }
.holo-prompts button:hover { color: #d4f5e5; }
.holo-metrics { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 20px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.holo-metrics > button { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: end; padding: 12px 14px; border: 1px solid #6affb91c; background: #04110cd9; backdrop-filter: blur(8px); color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.holo-metrics > button:hover { border-color: #6affb955; background: #072118e6; }
.holo-metrics small { grid-column: 1 / -1; font: 500 9.5px var(--mono); letter-spacing: 1.8px; text-transform: uppercase; color: #6c9b86; margin-bottom: 4px; }
.holo-metrics strong { font: 400 26px var(--mono); letter-spacing: -1px; color: #f0fff8; line-height: 1; }
.holo-metric-sub { grid-column: 1; font: 9.5px var(--mono); color: #4f7a68; margin-top: 4px; }
.holo-metrics .spark { grid-column: 2; grid-row: 2 / 4; width: 110px; height: 30px; }
.holo-metrics .spark .area { opacity: .14; } .holo-metrics .spark .line { stroke-width: 1.4; fill: none; filter: drop-shadow(0 0 4px currentColor); }
.holo-tip { position: absolute; z-index: 5; width: 260px; transform: translate(18px, -50%); padding: 12px 14px; background: #03100bf2; border: 1px solid #8affc9aa; box-shadow: 0 0 30px #6affb933; pointer-events: none; }
.holo-tip small { font: 9.5px var(--mono); letter-spacing: 2px; text-transform: uppercase; color: #6c9b86; }
.holo-tip strong { display: block; font-size: 16px; font-weight: 500; color: #fff; margin: 2px 0 4px; }
.holo-tip-n { font: 10.5px var(--mono); color: #9fd2bb; }
.holo-tip p { margin: 8px 0 3px; font-size: 12px; line-height: 1.45; color: #d4f5e5; }
.holo-tip em { font: normal 9.5px var(--mono); color: #6c9b86; }
.holo-tip i { display: block; margin-top: 8px; font: normal 9px var(--mono); letter-spacing: 1px; color: #6affb9; text-transform: uppercase; }
@media (max-width: 1100px) {
  .holo-stage { height: auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px; }
  .holo-canvas { position: relative; height: 62vh; min-height: 380px; order: 1; }
  .holo-title, .holo-panel, .holo-command, .holo-metrics { position: relative; inset: auto; transform: none; width: auto; min-width: 0; max-height: none; }
  .holo-title { order: 0; text-align: left; } .holo-command { order: 2; } .holo-metrics { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); } .holo-feed { order: 4; } .holo-side { order: 5; }
  .holo-tip { display: none; }
}

/* Voice mode banner inside the Okapi panel. */
.voice-mode { display: flex; align-items: center; gap: 14px; margin: 16px 0 4px; padding: 12px 14px; border: 1px solid #6affb966; background: linear-gradient(90deg, #6affb91a, transparent); }
.voice-mode small { display: block; font: 500 9.5px var(--mono); letter-spacing: 2.5px; color: #7ff0bd; }
.voice-mode b { font-size: 15px; font-weight: 500; }
.voice-mode .btn { margin-left: auto; }
.vm-orb { position: relative; width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; }
.vm-orb::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #6affb9; box-shadow: 0 0 16px #6affb9; }
.vm-orb i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #6affb9; opacity: 0; }
.voice-mode[data-state="listening"] .vm-orb i { animation: holo-orb 1.8s ease-out infinite; } .voice-mode[data-state="listening"] .vm-orb i:nth-child(2) { animation-delay: .6s; } .voice-mode[data-state="listening"] .vm-orb i:nth-child(3) { animation-delay: 1.2s; }
.voice-mode[data-state="thinking"] .vm-orb::after { background: #ffc65c; box-shadow: 0 0 16px #ffc65c; animation: ai-breathe 1s ease-in-out infinite; }
.voice-mode[data-state="speaking"] .vm-orb::after { background: #82e3f5; box-shadow: 0 0 18px #82e3f5; animation: ai-breathe .5s ease-in-out infinite; }
.voice-mode[data-state="connecting"] .vm-orb::after { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .holo-mic::after, .vm-orb i, .vm-orb::after { animation: none !important; } }

/* Flights: rotated plane markers, category chips, route card and list. */
.flight-marker { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--c); }
.fm-plane { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, #06100dcc); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 14px -2px var(--c); transition: transform .3s; }
.fm-plane svg, .fd-icon svg, .fr-plane svg, .fr-line em svg { width: 62%; height: 62%; fill: currentColor; }
.fm-label { padding: 2px 7px; border-radius: 4px; background: #04100cd9; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); color: #e8fff4; font: 500 10.5px var(--mono); white-space: nowrap; }
.fm-label small { color: var(--c); font-size: 10px; }
.flight-marker.approach { opacity: .55; } .flight-marker.approach .fm-label { display: none; }
.flight-marker:hover { opacity: 1; } .flight-marker:hover .fm-label { display: inline; }
.flight-marker.selected { opacity: 1; z-index: 3; } .flight-marker.selected .fm-plane { background: var(--c); color: #04100c; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 0 24px var(--c); } .flight-marker.selected .fm-label { display: inline; }
.flight-marker.military .fm-plane { border-width: 2px; }
.flight-marker.emergency .fm-plane { animation: fm-sos 1s ease-in-out infinite alternate; }
@keyframes fm-sos { to { box-shadow: 0 0 0 8px #ff5d6c55, 0 0 30px #ff5d6c; } }
.flight-marker:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 14px; }
.flight-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.flight-cats button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--text-2); font-size: 12px; }
.flight-cats button i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.flight-cats button b { font: 500 11px var(--mono); color: var(--muted); }
.flight-cats button.active { border-color: var(--c, var(--accent)); color: var(--text); background: color-mix(in srgb, var(--c, var(--accent)) 14%, var(--panel-2)); }
.flight-coverage { font-size: 12px; line-height: 1.55; color: var(--text-2); }
.flight-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font: 10.5px var(--mono); }
.flight-legend span { display: inline-flex; align-items: center; gap: 5px; } .flight-legend i { width: 8px; height: 8px; border-radius: 50%; } .flight-legend i.faded { background: #a4acb5; opacity: .45; }
.flight-detail { padding: 2px 0 10px; border-bottom: 1px solid var(--line); }
.fd-head { display: flex; gap: 12px; align-items: center; }
.fd-icon { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid var(--c); box-shadow: 0 0 20px -6px var(--c); }
.fd-head h2 { margin: 2px 0 0; font: 500 22px var(--mono); letter-spacing: .5px; }
.fd-cat { margin: 12px 0; font-size: 12px; line-height: 1.5; color: var(--text-2); } .fd-cat b { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 4px; background: var(--c); color: #04100c; font: 600 10.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; }
.fd-emergency { margin: 10px 0 0; padding: 8px 10px; border: 1px solid #ff5d6c; background: #ff5d6c1c; color: #ffb3ba; font: 600 12px var(--mono); }
.flight-route { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 8px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px); background: var(--panel-2); }
.flight-route > div:last-of-type { text-align: right; }
.flight-route small { display: block; font: 500 9.5px var(--mono); letter-spacing: 1.6px; color: var(--muted); }
.flight-route strong { display: block; font: 500 24px var(--mono); letter-spacing: 1px; color: var(--text); }
.flight-route span { display: block; font-size: 11px; color: var(--text-2); line-height: 1.35; }
.flight-route p { grid-column: 1 / -1; margin: 6px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.flight-route.doubt strong { color: var(--text-2); } .flight-route.doubt p { color: #ffc65c; }
.flight-route.none { display: block; } .flight-route.none span { font: 500 9.5px var(--mono); letter-spacing: 1.6px; color: var(--muted); } .flight-route.none b { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.fr-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 11px); }
.fr-line em { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%) rotate(90deg); display: grid; place-items: center; color: var(--c); background: var(--panel-2); }
.flight-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; border: 0; border-left: 2px solid transparent; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; }
.flight-row:hover { background: var(--hover); } .flight-row.selected { border-left-color: var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.flight-row.approach { opacity: .7; }
.fr-plane { width: 24px; height: 24px; display: grid; place-items: center; color: var(--c); }
.flight-row strong { display: block; font: 500 12.5px var(--mono); } .flight-row small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-meta { text-align: right; } .fr-meta b { display: block; font: 500 10px var(--mono); letter-spacing: .5px; color: var(--c); text-transform: uppercase; } .fr-meta small { font-family: var(--mono); }
.fr-sos { font-style: normal; padding: 0 4px; border-radius: 3px; background: #ff5d6c; color: #fff; font-size: 9.5px; }
@media (prefers-reduced-motion: reduce) { .flight-marker.emergency .fm-plane { animation: none; box-shadow: 0 0 0 4px #ff5d6c88; } }
.flights-view .filters-pane { overflow-x: hidden; }
.flights-view .check { white-space: normal; align-items: flex-start; line-height: 1.4; }
.flight-cats button { max-width: 100%; }
/* Okapi language and voice preferences. */
.voice-prefs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 10px; align-items: end; margin: 16px 0 4px; }
.voice-prefs label { display: grid; gap: 4px; min-width: 0; }
.voice-prefs label span { font: 500 9.5px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.voice-prefs .select { width: 100%; }
.voice-prefs-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); min-height: 1em; }
@media (max-width: 520px) { .voice-prefs { grid-template-columns: 1fr 1fr; } .voice-prefs .btn { grid-column: 1 / -1; } }

/* Topbar alert bell. */
.iconbtn.bell { position: relative; }
.iconbtn.bell b { position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--critical); color: #fff; font: 600 10px/18px var(--mono); text-align: center; }
.iconbtn.bell.has { color: var(--text); border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); }

/* Brief export. */
.brief-export { display: inline-flex; gap: 6px; align-items: center; }
.brief-export .select { width: auto; }

/* Event log. */
.ev-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ev-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ev-map-panel { position: sticky; top: 12px; }
.ev-map { display: block; width: 100%; height: auto; max-height: 44vh; padding: 8px 12px 0; }
.ev-map .map-country { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; }
.ev-dot { fill-opacity: .72; stroke: #000a; stroke-width: .8; cursor: pointer; transition: r .2s, fill-opacity .2s; }
.ev-dot:hover, .ev-dot:focus-visible, .ev-dot.open { fill-opacity: 1; stroke: #fff; stroke-width: 1.6; outline: none; }
.ev-timeline { display: flex; gap: 2px; align-items: flex-end; height: 64px; padding: 6px 12px 0; }
.ev-day { flex: 1; min-width: 3px; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-end; }
.ev-day span { display: flex; flex-direction: column-reverse; width: 100%; height: 100%; justify-content: flex-start; gap: 1px; }
.ev-day i { display: block; width: 100%; min-height: 2px; border-radius: 1px; }
.ev-day:hover span, .ev-day.active span { outline: 1px solid var(--text-2); outline-offset: 1px; }
.ev-day.active i { filter: brightness(1.25); }
.ev-axis { display: flex; justify-content: space-between; padding: 4px 12px 0; font: 10.5px var(--mono); color: var(--muted); }
.ev-map-panel .notice { margin: 12px; }
.ev-list .toolbar { padding: 0 0 10px; border: 0; }
.ev-types { margin-top: 0; }
.ev-date { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 8px; font: 500 11px var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ev-card { border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--radius-sm, 6px); background: var(--panel); padding: 12px 14px; margin-bottom: 8px; }
.ev-card.open { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); }
.ev-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ev-type { font: 600 10px var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--c); }
.ev-card header strong { font-size: 14px; }
.ev-card header small { color: var(--muted); font-size: 12px; }
.ev-toll { margin-left: auto; font: 600 12px var(--mono); color: #ff8a95; }
.ev-card .chips { margin: 8px 0 0; }
.ev-excerpt { margin: 8px 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.ev-card details summary { cursor: pointer; font-size: 12px; color: var(--text-2); }
.ev-source { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 12px; }
.ev-source strong { display: block; font-size: 12.5px; } .ev-source small { color: var(--muted); } .ev-source p { margin: 4px 0 0; color: var(--text-2); }
.ev-foot { margin-top: 6px; }
@media (max-width: 1100px) { .ev-layout { grid-template-columns: 1fr; } .ev-map-panel { position: static; } .ev-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Watchlists and alerts. */
.watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.watch-layout .stack { display: grid; gap: 16px; min-width: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid label { display: grid; gap: 5px; font-size: 12px; color: var(--text-2); min-width: 0; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid .input, .form-grid .select { width: 100%; }
.form-grid .inline { display: flex; gap: 6px; } .form-grid .inline .input { flex: 1; }
.watch-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px); }
.watch-channels .eyebrow, .watch-channels .chips, .watch-channels .actions, .watch-channels .notice { grid-column: 1 / -1; margin: 0; }
.watch-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.watch-row.paused { opacity: .55; }
.watch-row strong { display: block; font-size: 13px; } .watch-row small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.watch-row .watch-stats b { color: var(--critical); font-weight: 600; } .watch-row .watch-stats .icon { width: 11px; height: 11px; vertical-align: -1px; }
.watch-icon, .alert-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-2); color: var(--accent); }
.watch-icon .icon, .alert-icon .icon { width: 15px; height: 15px; }
.watch-row .actions { flex-wrap: nowrap; }
.alert-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; }
.alert-row:hover { background: var(--hover); }
.alert-row.unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.alert-row.unread strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--critical); vertical-align: 1px; }
.alert-row strong { display: block; font-size: 13px; line-height: 1.4; } .alert-row small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.alert-row p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.alert-meta { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) { .watch-layout { grid-template-columns: 1fr; } .form-grid, .watch-channels { grid-template-columns: 1fr; } .watch-row { grid-template-columns: 30px minmax(0, 1fr); } .watch-row .actions { grid-column: 1 / -1; flex-wrap: wrap; } }

/* Accessibility: muted and status text at WCAG AA (≥4.5:1) on panels in both themes. */
:root { --muted: #7a8c94; }
:root[data-theme="light"] { --muted: #5f6a66; --warning: #8a5900; --good: #0f7232; --signal: #0a6a95; }
:root[data-theme="light"] .classbar { background: linear-gradient(90deg, #285c16, #346f1d 50%, #285c16); }
.input:focus, .select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 1px; }

/* Tablet: keep the top bar inside the viewport; map first in map views. */
@media (max-width: 1100px) {
  .topbar { min-width: 0; }
  .crumb { min-width: 0; overflow: hidden; }
  .crumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .omni { flex: 0 0 40px; width: 40px; height: 34px; padding: 0; justify-content: center; margin-left: auto; }
  .omni span, .omni kbd { display: none; }
  .live-pill, .clocks { display: none; }
  .situation { grid-template-rows: 62vh auto auto; }
  .situation .stage { order: -1; }
  .post-topics .tag { white-space: normal; min-width: 0; }
}
/* Phone: every nav item reachable (the bottom bar scrolls), no overlapping map HUD. */
@media (max-width: 720px) {
  .rail { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; gap: 2px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail .nav-item { flex: 0 0 auto; min-width: 52px; scroll-snap-align: start; }
  .hud-pos, .hud-readout { display: none; }
  .holo-stage { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .drawer-top { flex-wrap: nowrap; }
  .drawer-top .actions .btn span { display: none; }
}
/* Touch: comfortable tap targets. */
@media (pointer: coarse) {
  .btn.sm, .seg button, .chip, .iconbtn, .linkbtn, .flight-cats button { min-height: 40px; }
  .iconbtn { min-width: 40px; }
  .geo-marker { min-width: 34px; height: 34px; }
}
@media (max-width: 720px) { .topbar { overflow-x: auto; scrollbar-width: none; } .topbar::-webkit-scrollbar { display: none; } .topbar > * { flex-shrink: 0; } }

/* Evidence-led coverage comparison */
.compare-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:18px 0}
.compare-source {border:1px solid var(--line);padding:16px;background:var(--panel);border-radius:8px}
.compare-source h3 {font-size:16px;line-height:1.5}
.compare-source p {font-size:13px;line-height:1.6}
.compare-finding {border-bottom:1px solid var(--line);padding:14px 0;font-size:13px;line-height:1.6}
.compare-finding blockquote {margin:12px 0;border-left:3px solid var(--accent);padding:8px 14px;color:var(--text-2)}
.compare-author {display:flex;width:100%;justify-content:space-between;white-space:normal;text-align:left;margin:6px 0;font-size:12px}
.compare-choice {display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px}
.compare-choice small {display:block;color:var(--text-2)}

/* Historical province evidence popup must remain legible in both themes. */
#history-map-slot .mapboxgl-popup-content { background: #142426; color: #f0f5f3; border: 1px solid #7f9592; line-height: 1.5; padding: 18px; }
#history-map-slot .mapboxgl-popup-close-button { color: #f0f5f3; }
#history-map-slot .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color: #142426; }

/* Core research pilot */
.topbar .omni{min-width:40px;overflow:hidden}.topbar .omni>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar .crumb{flex-shrink:0}
.pilot-panel{max-width:1100px;margin:24px auto;padding:24px}.pilot-panel>p{line-height:1.65}.pilot-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}.pilot-record{padding:16px;border:1px solid var(--line);border-radius:8px;margin:12px 0;overflow-wrap:anywhere}.pilot-metrics strong{font-size:30px}.pilot-panel .toolbar{flex-wrap:wrap}.pilot-panel input{min-width:200px}

/* Phone navigation and content: keep all tools reachable without a scrolling header. */
.mobile-menu-button, .mobile-tabs { display:none; }
.mobile-menu { width:min(380px,100vw); }
.mobile-menu nav { padding:12px; }
.mobile-menu .nav-item { justify-content:flex-start; min-height:46px; }
.mobile-menu .nav-item span { display:inline; }
.mobile-menu-tools { display:flex; flex-wrap:wrap; gap:10px; padding:16px; border-top:1px solid var(--line); }
@media(max-width:720px) {
  .rail { display:none; }
  .workspace { padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
  .mobile-menu-button { display:inline-flex; }
  .mobile-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:fixed; z-index:30; bottom:0; left:0; right:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); }
  .mobile-tabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:48px; border:0; background:none; color:var(--text-2); font-size:11px; border-radius:6px; }
  .mobile-tabs button[aria-current] { color:var(--accent); background:var(--accent-soft); }
  .topbar { height:auto; min-height:108px; padding:8px 12px; display:flex; flex-wrap:wrap; gap:6px; overflow:visible; }
  .topbar .crumb { display:flex; flex:1 1 calc(100% - 100px); min-width:0; }
  .topbar .crumb-code { display:none; }
  .topbar .omni { margin-left:0; flex:0 0 44px; height:44px; }
  .topbar > [data-act="settings"], .topbar > [data-act="theme"], .topbar .live-pill, .topbar .clocks, .topbar .on-air-chip { display:none; }
  .topbar .btn { padding:8px; }
  .topbar .seg button { padding:6px 7px; }
  .topbar .ai-mode-switch { font-size:11px; margin-left:auto; }
  .btn,.btn.sm,.iconbtn,.seg button,.chip,.linkbtn { min-height:44px; }
  .iconbtn { min-width:44px; }
  input,select,textarea,.input,.select { max-width:100%; font-size:16px; }
  .page-head { flex-wrap:wrap; gap:12px; }
  .page-head > div,.panel,.pilot-panel,.toolbar > * { min-width:0; }
  .page-head .actions { flex-wrap:wrap; }
  .toolbar { padding:12px; }
  .toolbar input { min-width:0!important; flex:1 1 180px; }
  .pilot-panel { margin:12px; padding:16px; }
  .pilot-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compare-grid { grid-template-columns:minmax(0,1fr); }
  .drawer { max-height:100dvh; padding-bottom:env(safe-area-inset-bottom); }
  .drawer-top { gap:8px; padding:10px 12px; flex-wrap:wrap; }
  .drawer-top .actions { flex-wrap:wrap; gap:6px; }
  .drawer-body { overflow-wrap:anywhere; }
  .dialog-shade { padding:12px; align-items:center; }
  .dialog,.palette { max-width:100%; max-height:calc(100dvh - 24px); overflow-y:auto; }
  .situation { grid-template-rows:minmax(340px,55svh) auto auto; }
  .map-float.tl { max-width:calc(100% - 20px); left:10px; top:10px; }
  .map-float .seg { flex-wrap:wrap; }
  .rail-pane { max-height:none; }
  #toast { bottom:calc(80px + env(safe-area-inset-bottom)); }
  .pilot-record,.notice,.errorbar { overflow-wrap:anywhere; }
}
@media(max-width:720px) {
  .map-float.tr,.flights-view .map-float.tr { left:10px; right:10px; bottom:30px; top:auto; max-width:none; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:4px; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
  .map-float.tr > * { flex-shrink:0; }
  .map-float.tr .seg { flex-wrap:nowrap; }
  .map-float.tr button { white-space:nowrap; }
  .map-float.tl { font-size:11px; }
}

/* War room: dedicated control/incident map in the event log. */
.warroom { position: relative; height: min(76vh, 820px); min-height: 520px; margin: 0 0 18px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); border-radius: var(--radius); overflow: hidden; background: #03080a; isolation: isolate; box-shadow: 0 0 60px -20px rgba(255, 51, 85, .25), inset 0 0 0 1px #000; }
.warroom.static { height: auto; min-height: 0; }
#war-slot, .war-map { position: absolute; inset: 0; }
.war-map .mapboxgl-ctrl-top-right { top: 56px; }
.war-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 3px), radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, #000b 100%); }
.war-hud .hud-c { position: absolute; width: 18px; height: 18px; border-color: #ff6b7f; border-style: solid; border-width: 0; opacity: .8; }
.war-hud .hud-c.tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; } .war-hud .hud-c.tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.war-hud .hud-c.bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; } .war-hud .hud-c.br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.war-scan { position: absolute; left: 0; right: 0; height: 140px; top: -140px; background: linear-gradient(transparent, rgba(255, 70, 100, .07), transparent); animation: war-scan 7s linear infinite; }
@keyframes war-scan { to { transform: translateY(calc(min(76vh, 820px) + 280px)); } }
.war-title { position: absolute; z-index: 3; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 7px 14px; border: 1px solid #ff335555; border-radius: 6px; background: #05090bd9; backdrop-filter: blur(8px); white-space: nowrap; }
.war-live { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px var(--mono); letter-spacing: 2.4px; color: #ff6b7f; }
.war-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff3355; box-shadow: 0 0 10px #ff3355; animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot { 50% { opacity: .35; } }
.war-title strong { font-size: 13px; font-weight: 500; color: #f2f5f4; } .war-title small { font: 11px var(--mono); color: #9fb3ab; }
.glass { background: #05090bd6; border: 1px solid #ffffff1a; backdrop-filter: blur(10px); }
.war-board { position: absolute; z-index: 3; top: 14px; left: 14px; bottom: 60px; width: 300px; padding: 14px; border-radius: 8px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 12px; }
.war-board .eyebrow { display: flex; justify-content: space-between; color: #ff8a9a; } .war-board .eyebrow span { color: #8aa59b; letter-spacing: 1px; }
.war-counts { display: grid; gap: 4px; }
.war-counts span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #d5e2dd; } .war-counts i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); } .war-counts b { margin-left: auto; font: 600 13px var(--mono); color: #fff; }
.war-prov { padding: 7px 0; border-top: 1px solid #ffffff12; } .war-prov strong { font-size: 12.5px; color: #f2f5f4; }
.war-bar { display: flex; gap: 1px; height: 6px; margin: 6px 0 4px; border-radius: 3px; overflow: hidden; } .war-bar i { display: block; min-width: 2px; }
.war-prov small { font-size: 11px; color: #8aa59b; }
.war-gov { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; color: #8fd4a8; line-height: 1.4; } .war-gov .icon { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
.war-group h4 { display: flex; justify-content: space-between; margin: 4px 0 4px; font: 500 10px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: #8aa59b; }
.war-place { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 5px 6px; border: 0; border-radius: 4px; background: none; color: #e6efeb; font-size: 12.5px; text-align: left; cursor: pointer; }
.war-place i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px var(--c); } .war-place small { font-size: 10.5px; color: #8aa59b; white-space: nowrap; }
.war-place:hover, .war-place.active { background: #ffffff10; }
.war-detail { position: absolute; z-index: 3; top: 60px; right: 60px; width: 320px; max-height: calc(100% - 130px); overflow-y: auto; padding: 14px 16px; border-radius: 8px; border-left: 3px solid var(--c, #ff3355); }
.war-dossier h3 { margin: 4px 0 6px; font-size: 20px; color: #fff; }
.war-ctl { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #e6efeb; font-size: 13px; } .war-ctl i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.war-dossier small { color: #8aa59b; font-size: 11.5px; } .war-dossier p { font-size: 12.5px; line-height: 1.5; color: #c8d6d0; }
.war-history { margin: 10px 0; padding-left: 16px; font-size: 12px; color: #c8d6d0; } .war-history li { margin: 4px 0; } .war-history a { color: #7fd6ff; }
.war-dossier .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; } .war-dossier .iconbtn { margin-left: auto; }
.war-legend { position: absolute; z-index: 3; left: 330px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; border-radius: 6px; font: 10.5px var(--mono); color: #c8d6d0; max-width: calc(100% - 700px); }
.war-legend span { display: inline-flex; align-items: center; gap: 6px; } .war-legend i { width: 10px; height: 10px; border-radius: 2px; } .war-legend i.ring { border-radius: 50%; border: 1.5px solid #c99bff; background: #c99bff22; }
.war-layers { position: absolute; z-index: 3; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 6px; justify-content: flex-end; max-width: 360px; }
.war-layer { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #ffffff1f; border-radius: 4px; background: none; color: #9fb3ab; font: 500 10.5px var(--mono); letter-spacing: .6px; text-transform: uppercase; cursor: pointer; }
.war-layer i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: .35; } .war-layer.on { color: #fff; border-color: var(--c); } .war-layer.on i { opacity: 1; box-shadow: 0 0 8px var(--c); }
.war-layer .icon { width: 12px; height: 12px; }
.war-marker { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; }
.wm-dot { position: relative; width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: var(--c); border: 1.5px solid #000; box-shadow: 0 0 12px var(--c); }
.war-marker.contested .wm-dot::after { content: ''; position: absolute; inset: -6px; border: 1.5px solid var(--c); border-radius: 3px; animation: war-ping 1.6s ease-out infinite; }
.war-marker.recaptured .wm-dot, .war-marker.withdrawn .wm-dot { background: transparent; border-color: var(--c); }
@keyframes war-ping { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(2); } }
.wm-label { padding: 1px 6px; border-radius: 3px; background: #05090bcc; color: #f2f5f4; font: 600 10.5px var(--mono); letter-spacing: .4px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.war-marker.selected .wm-label { background: var(--c); color: #000; }
.war-marker:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.war-claim { width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed #fff; background: #000a; color: #fff; font: 700 11px var(--mono); cursor: pointer; }
.control-form { position: relative; width: min(640px, calc(100vw - 32px)); margin: 10vh auto; }
.shade .control-form { z-index: 50; }
@media (max-width: 1100px) {
  .warroom { height: auto; min-height: 0; display: flex; flex-direction: column; }
  #war-slot { position: relative; height: 62vh; }
  .war-board, .war-detail, .war-legend, .war-layers { position: relative; inset: auto; width: auto; max-width: none; max-height: none; margin: 8px; }
  .war-title { position: absolute; top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .war-scan, .war-live i, .war-marker.contested .wm-dot::after { animation: none; } }
.shade:has(.control-form) { justify-content: center; align-items: flex-start; }
.war-marker .wm-label { display: none; }
.war-marker.major .wm-label, .war-close .war-marker .wm-label, .war-marker:hover .wm-label, .war-marker:focus-visible .wm-label, .war-marker.selected .wm-label { display: inline; }
.war-marker:hover, .war-marker.selected { z-index: 5; }
.war-review { padding: 10px; border: 1px solid #ffb02066; border-radius: 6px; background: #ffb0200d; }
.war-review .eyebrow { color: #ffc65c !important; }
.war-sug { padding: 8px 0 10px; border-top: 1px solid #ffffff14; border-left: 2px solid var(--c); padding-left: 8px; margin-top: 8px; }
.war-sug-head { display: flex; justify-content: space-between; align-items: baseline; } .war-sug-head .linkbtn { font-weight: 600; color: #fff; } .war-sug-head small { font: 10.5px var(--mono); color: #8aa59b; }
.war-sug-change { font-size: 11.5px; color: #c8d6d0; margin: 3px 0; } .war-sug-change span { color: #8aa59b; text-decoration: line-through; } .war-sug-change b { color: var(--c); }
.war-sug p { margin: 4px 0; font-size: 11.5px; line-height: 1.45; color: #b8c8c1; } .war-sug small { font-size: 10.5px; color: #8aa59b; } .war-sug a { color: #7fd6ff; }
.war-sug .actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.war-review-note { margin: 8px 0 0; font-size: 10.5px; color: #8aa59b; line-height: 1.4; }
.war-stale { display: flex; gap: 6px; align-items: center; margin: 0; font-size: 11.5px; color: #ffc65c; } .war-stale .icon { width: 13px; height: 13px; }
.war-stale-tag { font-style: normal; padding: 0 4px; border-radius: 3px; background: #ffb02026; color: #ffc65c; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; }

/* Simple mode: calm, plain-language pages; analyst chrome hidden. */
:root[data-mode="simple"] .classbar, :root[data-mode="simple"] .wire, :root[data-mode="simple"] .clocks, :root[data-mode="simple"] .ai-mode-switch,
:root[data-mode="simple"] .topbar [data-act="voice-open"], :root[data-mode="simple"] .omni, :root[data-mode="simple"] .crumb-code, :root[data-mode="simple"] .live-pill,
:root[data-mode="simple"] .rail-bottom .nav-label, :root[data-mode="simple"] .rail-bottom .feed-status, :root[data-mode="simple"] .nav-label,
:root[data-mode="simple"] [data-act="control-edit"], :root[data-mode="simple"] .war-layer[data-arg="claims"], :root[data-mode="simple"] .war-stale,
:root[data-mode="simple"] .war-stale-tag, :root[data-mode="simple"] .drawer [data-act="detail-save"], :root[data-mode="simple"] .report-kicker .badge { display: none !important; }
:root[data-mode="simple"] .nav-item { font-size: 15px; padding: 11px 12px; }
:root[data-mode="simple"] .nav-item .count { background: var(--accent-soft); }
.ui-mode button { font-size: 12px; padding: 0 12px; }
.simple-page { max-width: 1180px; margin: 0 auto; padding: 8px 4px 40px; font-size: 15px; }
.simple-page.wide { max-width: none; }
.s-hero { padding: 18px 0 22px; } .s-hero small { font: 500 12px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.s-hero h1 { margin: 6px 0 10px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.5px; }
.s-hero p { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--text-2); } .s-hero b { color: var(--text); }
.s-hero.compact { padding: 8px 0 16px; } .s-hero.compact h1 { font-size: 30px; }
.s-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.s-grid.follow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.s-side { display: grid; gap: 18px; }
.s-section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.s-section h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.s-hint { margin: -6px 0 10px; font-size: 13px; color: var(--muted); }
.s-empty { color: var(--muted); font-size: 14px; }
.s-story { display: block; width: 100%; text-align: left; padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; }
.s-story:first-child { border-top: 0; }
.s-story strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 600; }
.s-story.big strong { font-size: 22px; line-height: 1.3; }
.s-story p { margin: 6px 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.s-story small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); } .s-story small .icon { width: 12px; height: 12px; }
.s-story:hover strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.s-topic { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--text); font-size: 12px; font-weight: 500; }
.s-list { border-top: 1px solid var(--line); }
.s-more { margin-top: 14px; }
.s-incident { display: flex; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; }
.s-incident:first-of-type { border-top: 0; }
.s-incident i { flex-shrink: 0; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--c); }
.s-incident strong { display: block; font-size: 15px; } .s-incident span { display: block; font-size: 14px; color: var(--text-2); } .s-incident small { font-size: 12.5px; color: var(--muted); }
.s-incident:hover strong { text-decoration: underline; }
.s-control p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); } .s-control b { color: var(--critical); }
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-chip { min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--panel-2); color: var(--text); font-size: 14px; cursor: pointer; }
.s-chip b { margin-left: 4px; color: var(--muted); font-weight: 500; } .s-chip:hover { border-color: var(--accent); }
.s-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #0b1a10); }
.s-follow-cta p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.s-footnote { margin-top: 26px; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 820px; }
.s-filters { display: grid; gap: 12px; margin-bottom: 14px; } .s-filters .search .input { height: 46px; font-size: 16px; }
.s-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .s-row .input, .s-row .select { height: 44px; font-size: 15px; } .s-row .input { flex: 1; min-width: 200px; }
.s-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 22px; }
.s-cards .s-story { border-top: 1px solid var(--line) !important; }
.s-follow-form { display: grid; gap: 14px; margin-bottom: 20px; } .s-follow-form .btn { height: 44px; }
.s-followed { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); } .s-followed:first-of-type { border-top: 0; }
.s-followed strong { display: block; font-size: 15px; } .s-followed small { font-size: 13px; color: var(--muted); } .s-followed b { color: var(--critical); }
.s-alert { display: block; width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); text-align: left; cursor: pointer; }
.s-alert strong { display: block; font-size: 15px; line-height: 1.4; } .s-alert small { font-size: 12.5px; color: var(--muted); }
.s-alert.unread strong::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--critical); vertical-align: 2px; }
:root[data-mode="simple"] .warroom { height: min(72vh, 760px); }
@media (max-width: 900px) { .s-grid, .s-grid.follow { grid-template-columns: 1fr; } .ui-mode button { padding: 0 8px; } }
.s-story, .s-story * { font-family: var(--sans); } .s-story small { font-family: var(--sans); }

/* ============================================================================================
   Simple mode as a newspaper: white page, blackletter nameplate, serif headlines, hairline rules.
   ============================================================================================ */
:root[data-mode="simple"] {
  color-scheme: light;
  --bg: #ffffff; --panel: #ffffff; --panel-2: #f7f7f5; --raised: #ffffff; --hover: #f5f5f5;
  --line: #e2e2e2; --line-strong: #c7c7c7; --text: #121212; --text-2: #363636; --muted: #5a5a5a;
  --accent: #121212; --accent-ink: #ffffff; --accent-soft: #1212120f; --critical: #c60a1c;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --franklin: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif; --sans: var(--franklin);
}
:root[data-mode="simple"] body { background: #fff; color: var(--text); font-family: var(--franklin); }
:root[data-mode="simple"] body::before, :root[data-mode="simple"] body::after { display: none !important; }
.paper { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.n-mast { border-bottom: 1px solid var(--text); }
.n-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; }
.n-top-bar { gap: 12px; }
.n-top-bar .n-link, .n-lang button { white-space: nowrap; }
.n-tools-l, .n-tools-r { display: flex; align-items: center; gap: 14px; }
.n-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--text); font: 600 11px var(--franklin); letter-spacing: .6px; text-transform: uppercase; cursor: pointer; }
.n-link .icon { width: 17px; height: 17px; } .n-link:hover { text-decoration: underline; }
.n-lang { display: inline-flex; gap: 10px; } .n-lang button { padding: 0; border: 0; background: none; color: var(--muted); font: 500 12px var(--franklin); cursor: pointer; } .n-lang button.on { color: var(--text); font-weight: 700; }
.n-adv { padding: 6px 10px; border: 1px solid var(--text); border-radius: 3px; }
.n-plate { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; padding: 4px 0 10px; }
.n-date { display: grid; gap: 2px; font: 12px var(--franklin); color: var(--text); } .n-date strong { font-weight: 700; } .n-date span { color: var(--muted); }
.n-date.r { text-align: right; justify-items: end; } .n-date.r strong { font: 700 20px var(--serif); }
.n-name { font: 400 clamp(44px, 6.4vw, 78px)/1.05 'UnifrakturMaguntia', 'Old English Text MT', serif; color: var(--text); text-decoration: none; letter-spacing: .5px; text-align: center; }
.n-name.small { font-size: 34px; }
.n-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 4px; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 3px double var(--text); margin-bottom: 0; }
.n-nav button { padding: 8px 12px; border: 0; background: none; color: var(--text); font: 500 13px var(--franklin); cursor: pointer; }
.n-nav button:hover { text-decoration: underline; text-underline-offset: 4px; } .n-nav button.on { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.n-mast { border-bottom: 0; }
.paper .onair { height: 28px; background: #fff; border-color: var(--line-strong); box-shadow: none; } .paper .onair-main, .paper .onair-main strong { color: var(--text); } .paper .onair-label { color: var(--critical); }
.paper-main { padding: 18px 0 40px; min-height: 60vh; }
/* Story primitives */
.n-story { display: block; color: var(--text); text-decoration: none; }
.n-story h2, .n-story h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 700; color: var(--text); letter-spacing: -.1px; }
.n-story:hover h2, .n-story:hover h3, .n-story:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.n-story p { margin: 0 0 8px; font: 400 15px/1.45 var(--serif); color: var(--text-2); }
.n-kicker { display: block; margin-bottom: 5px; font: 700 11px var(--franklin); letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); }
.n-meta { display: block; font: 500 11px var(--franklin); letter-spacing: .3px; text-transform: uppercase; color: var(--muted); }
.n-fig { margin: 0 0 10px; } .n-fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #eee; }
.n-fig figcaption { margin-top: 5px; font: 400 11.5px/1.35 var(--franklin); color: var(--muted); } .n-fig figcaption span { white-space: nowrap; }
.n-fig.fig-thumb figcaption, .n-fig.fig-card figcaption, .n-fig.fig-rail figcaption, .n-fig.fig-list figcaption { display: none; }
.n-label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; padding-top: 8px; border-top: 1px solid var(--text); font: 700 14px var(--franklin); color: var(--text); }
.n-label span { font-weight: 500; font-size: 12px; color: var(--muted); }
.n-label button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } .n-label button:hover { text-decoration: underline; }
.n-empty { color: var(--muted); font: italic 17px var(--serif); }
.n-more { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--text); font: 600 13px var(--franklin); cursor: pointer; } .n-more:hover { text-decoration: underline; }
/* Front page */
.n-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.n-lead { padding: 4px 22px 22px 0; border-right: 1px solid var(--line); }
.n-story.lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.n-story.lead h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; margin-bottom: 10px; }
.n-story.lead p { font-size: 16px; line-height: 1.5; }
.n-story.lead .n-fig { margin: 0; } .n-story.lead .n-fig img { aspect-ratio: 16 / 10; }
.n-lead-side { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-top: 16px; }
.n-lead-side .n-story + .n-story { padding-left: 22px; border-left: 1px solid var(--line); }
.n-lead-side h3 { font-size: 19px; line-height: 1.2; }
.n-rail { padding: 4px 0 18px 22px; }
.n-rail .n-story { padding: 12px 0; border-bottom: 1px solid var(--line); } .n-rail .n-story:first-child { padding-top: 0; } .n-rail .n-story:last-child { border-bottom: 0; }
.n-rail h3 { font-size: 17px; line-height: 1.22; }
.n-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 0; border-bottom: 1px solid var(--line); }
.n-row .n-story { padding: 0 18px; border-left: 1px solid var(--line); } .n-row .n-story:first-child { padding-left: 0; border-left: 0; } .n-row .n-story:last-child { padding-right: 0; }
.n-row h3 { font-size: 17px; line-height: 1.22; }
.n-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 0; padding-top: 4px; }
.n-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
.n-split > div { padding: 0 22px; border-left: 1px solid var(--line); } .n-split > div:first-child { padding-left: 0; border-left: 0; } .n-split > div:last-child { padding-right: 0; }
.n-brief { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.45 var(--serif); color: var(--text); text-decoration: none; }
.n-brief strong { font-family: var(--franklin); font-size: 14px; } .n-brief span { font: 500 11px var(--franklin); text-transform: uppercase; color: var(--muted); }
.n-brief:hover { text-decoration: underline; }
.n-story.line { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.n-story.line time { font: 600 12px var(--franklin); color: var(--critical); } .n-story.line span { font: 600 15px/1.3 var(--serif); }
.n-mapbox p { font: 400 15px/1.5 var(--serif); color: var(--text-2); }
.n-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.n-section-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.n-story.first h3 { font-size: 24px; line-height: 1.15; } .n-story.first p { font-size: 15.5px; }
.n-section-list { padding-left: 22px; border-left: 1px solid var(--line); }
.n-story.item { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } .n-story.item:first-child { padding-top: 0; } .n-story.item:last-child { border-bottom: 0; }
.n-story.item h3 { font-size: 17px; line-height: 1.22; } .n-story.item .n-fig { margin: 0; }
.locmap { display: block; width: 100%; height: auto; } .locmap path { fill: #ececec; stroke: #9a9a9a; stroke-width: .5; } .locmap circle { fill: var(--critical); }
.locmap.control { max-width: 200px; margin: 0 auto 8px; } .locmap.control circle { opacity: .9; }
.locmap.end { width: 70px; margin-left: auto; }
/* Listing */
.n-listing { max-width: 1000px; margin: 0 auto; }
.n-head { padding: 10px 0 14px; border-bottom: 1px solid var(--text); }
.n-head h1 { margin: 0 0 14px; font: 700 34px var(--serif); } .n-sub { margin: 0; font: 400 17px var(--serif); color: var(--text-2); }
.n-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.n-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 3px; }
.n-search input { flex: 1; height: 40px; border: 0; background: none; color: var(--text); font: 15px var(--franklin); outline: none; } .n-search .icon { width: 16px; color: var(--muted); }
.n-search:focus-within { border-color: var(--text); }
.n-filters select { height: 40px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 3px; background: #fff; color: var(--text); font: 14px var(--franklin); }
.n-when { display: inline-flex; gap: 14px; } .n-when button { padding: 0; border: 0; background: none; color: var(--muted); font: 600 13px var(--franklin); cursor: pointer; } .n-when button.on { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.n-story.listrow { display: grid; grid-template-columns: 90px minmax(0, 1fr) 210px; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.n-story.listrow time { font: 500 12px var(--franklin); color: var(--muted); padding-top: 3px; }
.n-story.listrow h3 { font-size: 21px; line-height: 1.2; } .n-story.listrow p { font-size: 15.5px; }
.n-story.listrow .n-fig { margin: 0; }
.n-button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--text); border-radius: 3px; background: var(--text); color: #fff; font: 600 13px var(--franklin); text-decoration: none; cursor: pointer; }
.n-button:hover { background: #333; } .n-button.ghost { background: #fff; color: var(--text); } .n-button.ghost:hover { background: var(--hover); }
.n-listing > .n-button { margin-top: 20px; }
/* Article */
.n-article { max-width: 760px; margin: 10px auto 0; }
.n-article > header { max-width: 680px; margin: 0 auto; }
.n-article h1 { margin: 6px 0 12px; font: 700 clamp(32px, 4vw, 44px)/1.12 var(--serif); letter-spacing: -.3px; }
.n-dek { margin: 0 0 14px; font: 400 20px/1.45 var(--serif); color: var(--text-2); }
.n-orig { margin: 0 0 14px; font: 400 13px var(--franklin); color: var(--muted); }
.n-byline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); font: 13px var(--franklin); } .n-byline time { color: var(--muted); }
.n-fig.fig-hero { margin: 8px 0 24px; } .n-fig.fig-hero img { aspect-ratio: auto; max-height: 560px; }
.n-langbar { display: flex; gap: 16px; max-width: 680px; margin: 0 auto 10px; } .n-langbar button { padding: 0; border: 0; background: none; color: var(--muted); font: 600 13px var(--franklin); cursor: pointer; } .n-langbar button.on { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.n-body { max-width: 680px; margin: 0 auto; } .n-body p { margin: 0 0 22px; font: 400 20px/1.65 var(--serif); color: var(--text); }
.n-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 680px; margin: 28px auto 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.n-note { max-width: 680px; margin: 6px auto; font: 13px var(--franklin); color: var(--muted); }
.n-related { margin-top: 34px; }
.n-loading { height: 2px; margin: 40px 0; background: linear-gradient(90deg, transparent, var(--text), transparent); background-size: 40% 100%; animation: n-load 1.1s linear infinite; } @keyframes n-load { from { background-position: -40% 0 } to { background-position: 140% 0 } }
/* Radio */
.n-stations { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; padding-top: 18px; }
.n-station { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.n-station strong { display: block; font: 700 17px var(--serif); } .n-station small { font: 12px var(--franklin); color: var(--muted); }
.n-play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--text); background: #fff; color: var(--text); font-size: 13px; cursor: pointer; } .n-play:hover, .n-station.on .n-play { background: var(--text); color: #fff; }
/* Footer */
.n-foot { margin-top: 10px; padding: 26px 0 44px; border-top: 3px double var(--text); text-align: center; }
.n-foot p { max-width: 720px; margin: 8px auto 12px; font: 12.5px/1.6 var(--franklin); color: var(--muted); }
/* Map and follow pages on the white page */
:root[data-mode="simple"] .paper .s-hero { padding: 10px 0 14px; border-bottom: 1px solid var(--text); margin-bottom: 18px; }
:root[data-mode="simple"] .paper .s-hero h1 { margin: 0 0 8px; font: 700 34px var(--serif); } :root[data-mode="simple"] .paper .s-hero p { font: 400 17px/1.5 var(--serif); color: var(--text-2); }
:root[data-mode="simple"] .paper .s-section { border: 0; border-top: 1px solid var(--text); border-radius: 0; padding: 12px 0; background: none; }
:root[data-mode="simple"] .paper .s-section h2 { font: 700 15px var(--franklin); }
:root[data-mode="simple"] .paper .s-chip { border-radius: 3px; background: #fff; } :root[data-mode="simple"] .paper .s-chip.active { background: var(--text); border-color: var(--text); color: #fff; }
:root[data-mode="simple"] .paper .btn.primary { background: var(--text); border-color: var(--text); color: #fff; box-shadow: none; border-radius: 3px; }
:root[data-mode="simple"] .paper .input { background: #fff; border-color: var(--line-strong); border-radius: 3px; }
:root[data-mode="simple"] .paper .warroom { background: #fff; border: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; }
:root[data-mode="simple"] .paper .war-hud, :root[data-mode="simple"] .paper .war-scan { display: none; }
:root[data-mode="simple"] .paper .glass, :root[data-mode="simple"] .paper .war-title { background: #fffffff2; border: 1px solid var(--line-strong); border-radius: 0; backdrop-filter: none; }
:root[data-mode="simple"] .paper .war-board *, :root[data-mode="simple"] .paper .war-detail *, :root[data-mode="simple"] .paper .war-legend, :root[data-mode="simple"] .paper .war-title strong { color: var(--text); }
:root[data-mode="simple"] .paper .war-board small, :root[data-mode="simple"] .paper .war-board .eyebrow span, :root[data-mode="simple"] .paper .war-title small { color: var(--muted) !important; }
:root[data-mode="simple"] .paper .war-board .eyebrow, :root[data-mode="simple"] .paper .war-live { color: var(--text) !important; font-family: var(--franklin); }
:root[data-mode="simple"] .paper .war-live i { background: var(--critical); box-shadow: none; }
:root[data-mode="simple"] .paper .war-layer { color: var(--text-2); border-color: var(--line-strong); border-radius: 0; } :root[data-mode="simple"] .paper .war-layer.on { color: var(--text); }
:root[data-mode="simple"] .paper .wm-label { background: #fff; color: var(--text); text-shadow: none; border: 1px solid var(--line); border-radius: 0; font-family: var(--franklin); }
:root[data-mode="simple"] .paper .war-place:hover { background: var(--hover); } :root[data-mode="simple"] .paper .war-prov { border-color: var(--line); } :root[data-mode="simple"] .paper .war-gov { color: #24603a; }
@media (max-width: 1080px) {
  .n-top { grid-template-columns: 1fr; } .n-lead { padding-right: 0; border-right: 0; } .n-rail { padding-left: 0; border-top: 1px solid var(--line); padding-top: 16px; }
  .n-row { grid-template-columns: 1fr 1fr; gap: 18px 0; } .n-row .n-story:nth-child(3) { padding-left: 0; border-left: 0; }
  .n-split { grid-template-columns: 1fr 1fr; } .n-split > div:last-child { grid-column: 1 / -1; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 18px; }
}
@media (max-width: 720px) {
  .paper { padding: 0 16px; }
  .n-top-bar { flex-direction: column; align-items: stretch; gap: 6px; }
  .n-tools-l { justify-content: space-between; }
  .n-tools-r { justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }
  .n-top-bar .n-link, .n-lang button { min-height: 44px; }
  .n-lang { align-items: center; gap: 16px; }
  .n-tools-r .n-adv { justify-content: center; text-align: center; }
  .n-plate { grid-template-columns: 1fr; text-align: center; } .n-date { display: none; } .n-name { font-size: 42px; }
  .n-nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .n-nav button { flex: 0 0 auto; }
  .n-story.lead { grid-template-columns: 1fr; } .n-story.lead .n-fig { order: -1; }
  .n-lead-side { grid-template-columns: 1fr; } .n-lead-side .n-story + .n-story { padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px solid var(--line); }
  .n-row { grid-template-columns: 1fr; } .n-row .n-story { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); } .n-row .n-story:first-child { border-top: 0; }
  .n-split { grid-template-columns: 1fr; } .n-split > div { padding: 16px 0 0; border-left: 0; } .n-split > div + div { border-top: 1px solid var(--line); margin-top: 16px; }
  .n-section-grid { grid-template-columns: 1fr; } .n-section-list { padding-left: 0; border-left: 0; }
  .n-story.listrow { grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; } .n-story.listrow time { display: none; } .n-story.listrow p { display: none; }
  .n-body p { font-size: 18px; } .n-row.three { grid-template-columns: 1fr; }
  .n-tools-r .onair-main small, .n-tools-r .onair-main strong { display: none; }
}

/* Atlas edition switch: compact masthead, one menu for account and language. */
.n-top-bar { flex-direction: row; align-items: center; justify-content: space-between; }
.n-mobile-name { display: none; }
.n-menu { position: relative; z-index: 30; }
.n-menu summary { list-style: none; min-height: 44px; cursor: pointer; }
.n-menu summary::-webkit-details-marker { display: none; }
.n-menu-panel { position: absolute; right: 0; top: 100%; width: min(290px, calc(100vw - 32px)); padding: 20px; display: grid; gap: 12px; background: var(--paper, #fff); color: var(--text); border: 1px solid var(--line); box-shadow: 0 12px 32px #0002; }
.n-menu:not([open]) .n-menu-panel { display: none; }
.n-menu-panel .n-lang { gap: 20px; }
.n-menu-panel .n-lang button, .n-menu-panel .n-link { min-height: 44px; }
.n-menu-panel .n-adv { justify-content: center; }
.n-menu-label, .n-menu-panel small { font: 12px/1.5 var(--franklin); color: var(--muted); }
.n-search-toggle { width: 44px; height: 44px; justify-content: center; flex: 0 0 44px; }
@media (max-width: 720px) {
  .n-top-bar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; padding: 12px 0; }
  .n-mobile-name { display: block; font-size: clamp(25px, 7.5vw, 40px); white-space: nowrap; }
  .n-menu { justify-self: end; }
  .n-menu summary { width: 44px; justify-content: center; }
  .n-menu summary > span { display: none; }
  .n-menu summary .icon { width: 22px; height: 22px; }
  .n-plate { display: none; }
}