/* Common Logistics Picture
   One family, one accent, hairlines not boxes. Status colours mean status and nothing else.
   Every measure is a token so the picture can be matched to the COP and CIP in one place. */
:root {
  /* ground: one cold neutral in five steps. The page is the darkest thing on the screen, so a
     surface reads as raised by its value alone and needs no border and no shadow. */
  --bg: #17191b; --s0: #17191b; --s1: #17191b; --s2: #1e2023; --s3: #262a2e;
  --hair: #23262a; --hair-2: #333739; --hair-3: #454a4f;
  --card-bg: #1f2225;   /* card background · gunmetal grey (neutral) */
  --chat-bg: #17191b;   /* the assistant/chat panel · gunmetal, a step below the card */
  /* ink: four steps, none of them white */
  --ink: #e8ecf1; --ink-2: #aab5c2; --mute: #76828f; --dim: #4c5663;
  /* accent: interaction and own forces. One hue, two weights; saturation is spent on meaning, not decoration. */
  --accent: #4d9fd6; --accent-2: #6fb6e4; --accent-soft: rgba(77, 159, 214, 0.14);
  /* status: state against a norm, and nothing else */
  --ok: #3aa172; --warn: #d09a3c; --bad: #cf5449; --crit: #7d8794;
  /* the wash a normal state gets where status fills an area rather than inks a word. A column of
     twenty green bars makes "fine" the loudest thing on the screen; neutral here means the eye
     lands on the exceptions and nothing else. */
  --normal: #4a5c6e;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: var(--sans);
  --rail-w: 304px; --side-w: max(360px, 40vw); --strip-h: 124px; --dock-h: 0px;
  --nav-w: 82px;
  /* 40/60 by default: when a tab is open the side panel fills 40% of the width and the map 60%
     (the nav rail shrinks into the 40% side). The drag handle still overrides; double-click resets here. */
  /* the shell chrome tokens. The STRUCTURE (the screens rail, the top bar) is new; the colours are the
     product's current gunmetal, mapped through here so nothing recolours — the palette move comes later. */
  --chrome: var(--s0); --chrome-2: var(--s2); --chrome-hair: var(--hair); --nav-active: var(--s3); --nav-ink: var(--ink);
  --r-chrome: 8px;
  --r: 2px;
  /* type: one scale, used everywhere. Labels are the only uppercase. */
  --fs-micro: 10px; --fs-label: 10.5px; --fs-cap: 12.5px; --fs-body: 13.5px; --fs-val: 13px; --fs-title: 15px; --fs-h: 18px; --fs-fig: 26px;
  --tr-label: 0.09em;
  --cov-fires: #4d9fd6; --cov-ad: #9b8bea; --cov-ew: #d07ab8; --cov-strat: #7fc0e8; --cov-base: #cdd5de; --cov-other: #b9c2cd;
  /* own (friendly) forces on a chart read in the accent, as they do on the map */
  --friendly: var(--accent);
  /* chart series: what is held now, what a decision would make of it, and the ink of that projection */
  --series-now: #5a6a7c; --series-potential: #8b7ad6; --series-potential-ink: #ab9de6;
  --g2: var(--s2);
  --glass: rgba(23, 25, 27, 0.94); --glass-2: rgba(23, 25, 27, 0.86); --glass-3: rgba(23, 25, 27, 0.7);
  --on-st: #070a0e; --hostile-ink: #f0aaa4; --shadow-c: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}
/* daylight room: the same family on a light ground; the canvas follows */
:root[data-theme="light"] {
  --bg: #e7eaee; --s0: #ffffff; --s1: #f5f7f9; --s2: #e7ebf0; --s3: #dbe1e8;
  --hair: #dde2e8; --hair-2: #c6ced7; --hair-3: #a6b1bd;
  --ink: #101720; --ink-2: #33404f; --mute: #5d6873; --dim: #8b95a1;
  --accent: #1a6fb0; --accent-2: #14598f; --accent-soft: rgba(26, 111, 176, 0.12);
  --ok: #1f8a5b; --warn: #9d6a0b; --bad: #bf3729; --crit: #5f6b7a;
  --normal: #94a2b1;
  --cov-fires: #1a6fb0; --cov-ad: #5b3fc4; --cov-ew: #a3438a; --cov-strat: #2b7fb5; --cov-base: #55606e; --cov-other: #6b7683;
  --hostile: #bf3729; --hostile-soft: rgba(191, 55, 41, 0.1);
  --friendly: var(--accent); --series-now: #7d8a98; --series-potential: #6d5bbf; --series-potential-ink: #5a49a8;
  --glass: rgba(255, 255, 255, 0.96); --glass-2: rgba(255, 255, 255, 0.9); --glass-3: rgba(255, 255, 255, 0.75);
  --on-st: #ffffff; --hostile-ink: #9e2b1f; --shadow-c: rgba(20, 25, 34, 0.16);
  color-scheme: light;
}
@media (prefers-contrast: more) { :root { --hair: #384250; --hair-2: #4b5666; --hair-3: #5c6877; --mute: #a5afbd; --dim: #8b95a3; } :root[data-theme="light"] { --hair: #aab3bf; --hair-2: #8e99a7; --hair-3: #6f7a86; --mute: #3f4a58; --dim: #5f6b7a; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 13px/1.45 var(--sans); font-variant-numeric: tabular-nums; overflow: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
a { color: var(--accent); }
/* Two channels. --st is the status INK: it colours a word, a pill, a figure, where green is said
   deliberately and read once. --st-fill is the status WASH: it colours the areas that repeat down a
   table, where a normal state must recede or it drowns the exceptions. Only the wash goes neutral. */
.st-GREEN { --st: var(--ok); --st-fill: var(--normal); }
.st-AMBER { --st: var(--warn); --st-fill: var(--warn); }
.st-RED { --st: var(--bad); --st-fill: var(--bad); }
.st-BLACK { --st: var(--crit); --st-fill: var(--crit); }
.mono { font-family: var(--mono); } .dim { color: var(--dim); } .mute { color: var(--mute); }

/* labels: small, spaced, sentence-cased in markup, uppercase by style */
.kind, .k-label, .blk-h h2, .panel h3, .d-b h4, .sys-head, .lyr-head b, .fact .fl, .g-label, .finding .k, .side-tabs button, .boards-bar .lbl, .lyr-cat header b, .log .lv, .tbl th, .matrix th, .board-head h2, .legend-row, .cat {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
}

/* ================================================================ frame */
/* The conversation and its cards on the left, the picture on the right, the ask bar across the foot when it is docked. */
.frame { height: 100vh; min-height: 680px; display: grid; grid-template-columns: var(--nav-w) var(--side-w) 1fr; grid-template-rows: 48px 1fr auto; grid-template-areas: "nav top top" "nav side map" "nav dock dock"; background: var(--bg); }

/* ---- the screens rail: the primary navigation, icon over label, on the prototype's near-black ---- */
.nav-rail { grid-area: nav; display: flex; flex-direction: column; align-items: stretch; background: var(--chrome); border-right: 1px solid var(--chrome-hair); padding: 0 0 12px; overflow: hidden; z-index: 950; }
.nr-brand { height: 48px; display: flex; align-items: center; justify-content: center; font: 600 10px/1 var(--sans); letter-spacing: 0.16em; color: var(--mute); border-bottom: 1px solid var(--chrome-hair); }
.nr-items { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; flex: 1 1 auto; }
.nr-more { margin: 0 8px; }
.nr-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px 2px 8px; border-radius: var(--r-chrome); color: var(--mute); background: none; transition: background 0.12s ease, color 0.12s ease; }
.nr-item > span { font: 500 10.5px/1 var(--sans); letter-spacing: 0.01em; text-transform: none; }
.nr-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nr-item:hover { color: var(--ink-2); background: var(--chrome-2); }
.nr-item.is-on { color: var(--nav-ink); background: var(--nav-active); }
.nr-item:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }

.top { grid-area: top; display: flex; align-items: center; gap: 20px; padding: 0 16px; background: var(--chrome); border-bottom: 1px solid var(--chrome-hair); min-width: 0; }
.wordmark { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.wordmark b { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.wordmark span { color: var(--mute); font-size: 12.5px; }
.ctl { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 12px; white-space: nowrap; }
.sel { font: 500 12.5px var(--sans); color: var(--ink); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 4px 8px; max-width: 260px; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.seg-group { display: inline-flex; border: 1px solid var(--hair-2); border-radius: var(--r); overflow: hidden; }
.seg { padding: 3px 9px; font-size: 12px; font-weight: 500; color: var(--mute); border-right: 1px solid var(--hair); }
.seg:last-child { border-right: 0; }
.seg.is-on { color: var(--ink); background: var(--s2); }
.live { display: flex; align-items: center; gap: 7px; color: var(--mute); font-size: 12px; white-space: nowrap; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--crit); }
.live.is-live i { background: var(--ok); }
.dtg { font: 500 14px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-2); }
.clock-ctl, .more { position: relative; }
.clock-btn { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px 4px 10px; }
.clock-btn .caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid var(--mute); }
.clock-btn.is-open, .clock-btn.is-on { color: var(--ink); background: var(--s1); }
.clock-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 372px; white-space: normal; z-index: 1200; background: var(--s1); border: 1px solid var(--hair-2); border-top: 2px solid var(--accent); border-radius: var(--r); padding: 10px 12px 12px; box-shadow: 0 14px 40px var(--shadow-c); display: grid; gap: 8px; }
.clock-pop .cp-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.clock-pop .cp-row.rp-h { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--hair); }
.more-btn { font-size: 17px; line-height: 1; padding: 2px 8px 4px; }
.more-btn.is-open { color: var(--ink); background: var(--s1); }
.more-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; z-index: 1200; background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: 0 14px 40px var(--shadow-c); padding: 6px; display: grid; }
.more-pop .mi { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; text-align: left; padding: 7px 10px; font-size: 12.5px; color: var(--ink); border-radius: 3px; white-space: nowrap; }
.more-pop .mi:hover { background: var(--s2); }
.more-pop .mi .hint { font-size: 11px; color: var(--mute); }
.more-pop .mi kbd { margin: 0; }
.more-pop .mi.danger, .more-pop .siblings { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 9px; border-radius: 0; }
.more-pop .siblings { display: flex; align-items: center; gap: 4px; padding: 9px 10px 7px; }
.more-pop .siblings .kind { margin-right: auto; }
.more-pop .siblings a { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--mute); text-decoration: none; border: 1px solid var(--hair); border-radius: 3px; padding: 1px 7px; }
.more-pop .siblings a:hover { color: var(--ink); background: var(--s2); }
.btn { font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 5px 11px; }
.btn:hover { background: var(--s2); }
.btn.primary { color: var(--on-st); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.btn.quiet { background: transparent; color: var(--mute); border-color: transparent; }
.btn.quiet:hover { color: var(--ink); background: var(--s1); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-sm { font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 3px 9px; }
.btn-sm:hover { color: var(--ink); background: var(--s2); }
.btn-sm.is-on { color: var(--on-st); background: var(--st, var(--accent)); border-color: transparent; font-weight: 600; }
.link { color: var(--accent); text-align: left; }
.link:hover { text-decoration: underline; }

/* ================================================================ status rail */
.rail { position: fixed; left: calc(var(--nav-w) + var(--side-w)); top: 48px; visibility: hidden; bottom: var(--dock-h); width: 320px; z-index: 850; background: var(--chrome); border-right: 1px solid var(--chrome-hair); overflow-y: auto; overflow-x: hidden; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: none; }
body.rail-open .rail { transform: none; visibility: visible; box-shadow: 12px 0 32px var(--shadow-c); }
.rail-btn { margin-right: 4px; }
body.rail-open .rail-btn { color: var(--ink); background: var(--s2); }
body.rail-open .layers { left: 332px; }
.layers { transition: left 0.18s ease; }
.blk { padding: 14px 16px 16px; border-bottom: 1px solid var(--hair); }
.blk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.blk-h h2 { font-size: 11px; color: var(--mute); }
.blk-h small { color: var(--dim); font-size: 11px; text-align: right; letter-spacing: 0; text-transform: none; }
.rail .note { display: none; }
.note { font-size: 11.5px; color: var(--mute); line-height: 1.4; margin-top: 8px; }
.note b { color: var(--ink-2); font-weight: 500; }

.ladder { display: grid; }
.ladder-row { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hair); cursor: pointer; position: relative; }
.ladder-row:first-child { border-top: 0; }
.ladder-row::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 2px; background: var(--st); }
.ladder-row:hover .lbl { color: var(--accent); }
.ladder-row.is-sel .lbl::after { content: "  ·  measured"; color: var(--dim); font-weight: 400; }
.ladder-row .big { font: 500 26px/1 var(--sans); color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ladder-row .big small { font-size: 12px; color: var(--mute); margin-left: 3px; }
.ladder-row .lbl { font-size: 12.5px; font-weight: 500; }
.ladder-row .sub { font-size: 11.5px; color: var(--mute); margin-top: 2px; line-height: 1.35; }
.ladder-row .sub b { color: var(--st); font-weight: 600; }
.ladder-row.current .big { color: var(--ink-2); }

.sys-head { display: grid; grid-template-columns: 1fr 56px 52px 54px; gap: 6px; padding: 0 0 6px 8px; font-size: 10px; color: var(--dim); text-align: right; border-bottom: 1px solid var(--hair); }
.sys-head span:first-child { text-align: left; }
.sys { display: grid; }
.sys .cat { font-size: 10px; color: var(--dim); padding: 8px 0 3px 8px; }
.sys-row { display: grid; grid-template-columns: 1fr 56px 52px 54px; gap: 6px; align-items: center; padding: 4px 0 4px 8px; font-size: 12.5px; cursor: pointer; position: relative; border-top: 1px solid var(--hair); }
.sys-row::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--st); }
.sys-row:hover .n { color: var(--accent); }
.sys-row.is-sel .n { color: var(--accent); font-weight: 500; }
.sys-row .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-row .v { font: 12px var(--mono); text-align: right; color: var(--mute); }
.sys-row .v b { color: var(--ink); font-weight: 500; }

.gauges { display: grid; gap: 7px; }
.gauge { display: grid; grid-template-columns: 70px 1fr 54px; gap: 10px; align-items: center; font-size: 12.5px; cursor: pointer; }
.gauge .l { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauge .bar { position: relative; height: 6px; background: var(--s2); border-radius: 1px; }
.gauge .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--st); border-radius: 1px; }
.gauge .bar b { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--ink-2); }
.gauge .bar em { position: absolute; top: 1px; bottom: 1px; width: 2px; background: var(--bg); }
.gauge .v { font: 12px var(--mono); color: var(--ink); text-align: right; line-height: 1.15; }
.gauge .v small { color: var(--dim); font-size: 10px; display: block; }

.dots { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dots i { width: 12px; height: 12px; border: 1.5px solid var(--mute); border-radius: var(--r); display: inline-block; cursor: pointer; }
.dots i.moving { border-color: var(--warn); background: var(--warn); }
.dots i.done { border-color: var(--ok); background: var(--ok); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 12px; margin-top: 10px; }
.kv dt { color: var(--mute); } .kv dd { font-family: var(--mono); text-align: right; color: var(--ink-2); }

/* ================================================================ map */
.map-wrap { grid-area: map; position: relative; background: var(--bg); min-width: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }
.leaflet-container { font-family: var(--sans); }
.leaflet-control-zoom a { background: var(--s1); color: var(--ink); border-color: var(--hair) !important; }
.leaflet-control-zoom a:hover { background: var(--s2); }
.leaflet-control-scale-line { background: var(--glass-2); color: var(--mute); border-color: var(--hair-2); font-size: 10px; }
.leaflet-control-attribution { background: var(--glass-3) !important; color: var(--dim) !important; font-size: 9.5px; }
.leaflet-control-attribution a { color: var(--mute); }
.legend { position: absolute; right: 56px; bottom: 12px; z-index: 800; background: var(--glass); border: 1px solid var(--hair); border-radius: var(--r); padding: 8px 10px; font-size: 11px; color: var(--mute); display: grid; gap: 4px; max-width: 260px; }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend i { width: 16px; height: 2px; background: var(--st); flex: 0 0 auto; }
.legend i.ring { width: 9px; height: 9px; border: 1.5px solid var(--st); background: none; border-radius: 50%; }
.legend i.sq { width: 9px; height: 9px; border: 1.5px solid var(--st); background: none; }
.coords { position: absolute; left: 12px; bottom: 34px; z-index: 800; font: 10.5px var(--mono); color: var(--dim); }
.map-empty { position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; background: var(--glass); color: var(--mute); text-align: center; padding: 20px; }
.map-empty code { color: var(--accent); }

/* markers */
.mk, .ring-lbl, .grat-lbl, .tool-lbl { background: none !important; border: 0 !important; }
.mk-label { position: absolute; left: 100%; top: 50%; transform: translate(6px, -50%); white-space: nowrap; font: 600 11px/1.25 var(--sans); letter-spacing: 0.01em; color: var(--ink); text-shadow: 0 0 2px var(--bg), 0 0 5px var(--bg), 0 0 9px var(--bg), 0 1px 2px var(--bg); pointer-events: none; }
/* A marker says WHAT IT IS. "300 held · 200 svc · 1 d 14 h to position · assessed medium" beside a
   symbol is a table row printed over the ground, and forty of them is not a map. The second line comes
   back on hover and on selection, which is when it was actually asked for. */
.mk-label .mk-sub { display: none; color: var(--mute); font-size: 9.5px; font-weight: 400; }
.mk.is-hover .mk-label .mk-sub, .mk.is-selected .mk-label .mk-sub { display: block; }
.mk.left .mk-label { left: auto; right: 100%; transform: translate(-6px, -50%); text-align: right; }
.mk.is-dim { opacity: 0.45; }
.mk-node .ring-svg { display: block; overflow: visible; }
.mk-node .ring-svg .bg { fill: var(--s0); stroke: var(--hair-2); stroke-width: 2.5; }
.mk-node .ring-svg .arc { fill: none; stroke: var(--st); stroke-width: 2.5; transform: rotate(-90deg); transform-origin: center; }
.mk-node .ring-svg .core { fill: var(--st); }
.mk-node .ring-svg .txt { fill: var(--ink); font: 600 9px var(--mono); }
.mk-node.is-selected .ring-svg .bg { stroke: var(--accent); }
.mk-unit .sym { display: block; filter: drop-shadow(0 0 2px var(--bg)); }
.mk-unit .chip { position: absolute; left: 100%; top: -4px; transform: translateX(4px); font: 600 8.5px var(--mono); color: var(--on-st); background: var(--st); padding: 1px 4px; border-radius: 1px; white-space: nowrap; }
.mk-unit.is-selected .sym { filter: drop-shadow(0 0 4px var(--accent)); }
.mk-convoy svg { display: block; width: 12px; height: 12px; filter: drop-shadow(0 0 2px var(--bg)); }
.mk-convoy .shape { fill: var(--ink-2); stroke: var(--bg); stroke-width: 1.2; }
.mk-convoy.is-held .shape { fill: var(--warn); }
.mk-convoy.is-empty .shape { fill: var(--s1); stroke: var(--mute); }
.mk-convoy .mk-label { font-size: 9.5px; color: var(--mute); font-weight: 400; }
.mk-reserve .sq { width: 12px; height: 12px; border: 1.5px solid var(--st); border-radius: var(--r); background: color-mix(in srgb, var(--st) 25%, transparent); }
.mk-reserve.is-moving .sq { animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
.mk-asset .glyph { display: block; width: 16px; height: 16px; filter: drop-shadow(0 0 2px var(--bg)); }
/* the standard symbol, centred on the point it marks. MIL-STD-2525 colours by AFFILIATION, so the
   frame says whose it is and the status tick beside the name says how it is holding: the two signals
   stop fighting for the same channel. */
.mk .sym2525 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.mk .sym2525 svg { display: block; width: 100%; height: 100%; }
.mk:has(.sym2525) .mk-label { transform: translate(16px, -50%); }
.mk:has(.sym2525).left .mk-label { transform: translate(-16px, -50%); }
.mk.is-selected .sym2525 { filter: drop-shadow(0 0 6px var(--accent)); }
.mk.is-aware .sym2525 { opacity: 0.5; }
.mk.is-dim .sym2525 { opacity: 0.32; }
.mk.is-hover .sym2525 { filter: drop-shadow(0 0 5px var(--accent)); }
/* The symbol's colour is its affiliation and nothing else, which is the standard. Holding against the
   norm is a separate claim, so it gets its own mark: a pip that appears only when the state is not
   sound, so a normal system carries no extra ink and the short ones are the only ones flagged. */
.mk .st-pip { display: none; }
.mk:is(.st-AMBER, .st-RED, .st-BLACK) .st-pip { display: block; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -13px 0 0 5px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 1.5px var(--bg); }
.mk-asset .glyph .f { fill: color-mix(in srgb, var(--st) 30%, var(--s0)); stroke: var(--st); stroke-width: 1.5; }
.mk-asset .mk-label { font-weight: 500; }
.mk-asset.is-selected .glyph { filter: drop-shadow(0 0 4px var(--accent)); }
.mk-asset.is-selected .glyph .f { stroke: var(--accent); }
.mk-asset.is-dim { opacity: 0.3; }
.mk-asset.is-aware .glyph .f { fill: var(--s0); stroke: var(--mute); }
.mk-pos .tgt { width: 14px; height: 14px; border: 1.5px dashed var(--accent); position: relative; }
.mk-pos .tgt::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--accent); }
.mk-pos .mk-label { color: var(--accent); }
path.cov-fires { stroke: var(--cov-fires); fill: var(--cov-fires); }
path.cov-ad { stroke: var(--cov-ad); fill: var(--cov-ad); }
path.cov-ew { stroke: var(--cov-ew); fill: var(--cov-ew); stroke-dasharray: 1 4; }
path.ew-ring { stroke-dasharray: 1 4; }
path.leg-contested { stroke-dasharray: 2 5; }
path.cov-other { stroke: var(--cov-other); fill: var(--cov-other); }
path.cov-strat { stroke: var(--cov-strat); fill: var(--cov-strat); stroke-dasharray: 6 5; }
path.cov-base { stroke: var(--cov-base); fill: var(--cov-base); stroke-dasharray: 2 4; }
path.cov-sel { stroke-width: 2 !important; fill-opacity: 0.1 !important; }
.leaflet-tooltip.tt { background: var(--s1); color: var(--ink); border: 1px solid var(--hair-2); border-radius: var(--r); font: 12px var(--sans); padding: 6px 9px; box-shadow: 0 6px 24px var(--shadow-c); }
.leaflet-tooltip.tt::before { display: none; }
.tt b { font-weight: 600; } .tt small { color: var(--mute); }
.tt .st { font: 600 9.5px var(--sans); letter-spacing: 0.08em; color: var(--on-st); background: var(--st); padding: 1px 5px; margin-left: 6px; vertical-align: 1px; border-radius: 1px; }
.route-flow { stroke-dasharray: 6 9; animation: flow 1.8s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -15; } }
@media (prefers-reduced-motion: reduce) { .route-flow, .mk-reserve.is-moving .sq { animation: none; } }

/* layer control */
.layers { position: absolute; left: 12px; top: 12px; z-index: 800; width: 262px; max-height: calc(100% - 64px); display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--hair); border-radius: var(--r); font-size: 12px; }
.layers.is-collapsed .lyr-body { display: none; }
.lyr-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--hair); }
.lyr-head b { font-size: 10.5px; color: var(--mute); }
.lyr-head .count { color: var(--dim); font-size: 11px; margin-right: auto; }
.lyr-body { overflow-y: auto; min-height: 0; }
.presets { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px 10px; border-bottom: 1px solid var(--hair); }
.presets button { font-size: 11px; font-weight: 500; padding: 3px 8px; color: var(--ink-2); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); }
.presets button:hover { color: var(--ink); background: var(--s2); }
.emph { display: flex; border-bottom: 1px solid var(--hair); }
.emph button { flex: 1; border-right: 1px solid var(--hair); padding: 5px 0; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; color: var(--dim); }
.emph button:last-child { border-right: 0; }
.emph button.is-on { color: var(--ink); background: var(--s2); }
.lyr-cat { border-bottom: 1px solid var(--hair); }
.lyr-cat header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.lyr-cat header b { font-size: 10.5px; color: var(--ink-2); }
.lyr-cat header .count { color: var(--dim); font-size: 10.5px; margin-left: 4px; letter-spacing: 0; }
.lyr-cat header .ck { flex: 1; }
.lyr-cat ul { display: none; padding: 0 10px 6px 14px; }
.lyr-cat.is-open ul { display: block; }
.lyr-cat li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.lyr-cat li .ck { flex: 1; color: var(--ink); }
.lyr-cat .rk { color: var(--dim); font: 10.5px var(--mono); margin-left: 6px; }
.ck { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.ck input { accent-color: var(--accent); margin: 0; width: 13px; height: 13px; }
.ring-btn { border: 1px solid var(--hair-2); border-radius: var(--r); color: var(--dim); width: 22px; height: 20px; font-size: 13px; line-height: 1; }
.ring-btn.is-on { color: var(--accent); border-color: var(--accent); }
.caret { color: var(--dim); width: 18px; }

/* ================================================================ findings strip */
.strip { grid-area: strip; background: var(--s0); border-top: 1px solid var(--hair); display: none; grid-template-rows: 32px; min-width: 0; }   /* the boards bar left the working screen: boards open from the More menu, the palette, cards and B; the strip is the wall's ticker */
body.wall .strip { display: grid; }
.findings { display: flex; gap: 1px; padding: 0 0 0 16px; overflow-x: auto; overflow-y: hidden; align-items: stretch; }
.finding { flex: 0 0 250px; padding: 10px 14px 9px 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 3px; text-align: left; border-right: 1px solid var(--hair); position: relative; }
.finding::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 9px; width: 2px; background: var(--st); }
.finding:hover { background: var(--s1); }
.finding .k { font-size: 10px; color: var(--st); display: flex; justify-content: space-between; }
.finding .k span { color: var(--dim); }
.finding .t { font-size: 12.5px; font-weight: 500; line-height: 1.3; overflow: hidden; }
.finding .a { font-size: 11px; color: var(--mute); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.findings .none { color: var(--mute); font-size: 12.5px; align-self: center; padding: 0 4px; }
.boards-bar { display: flex; align-items: center; gap: 0; padding: 0 16px; border-top: 1px solid var(--hair); font-size: 12px; overflow-x: auto; }
.boards-bar .lbl { color: var(--dim); font-size: 10px; margin-right: 12px; }
.boards-bar button { color: var(--mute); padding: 6px 10px; white-space: nowrap; font-weight: 500; }
.boards-bar button:hover, .boards-bar button.is-on { color: var(--ink); }
.boards-bar button.is-on { box-shadow: inset 0 -2px 0 var(--accent); }
.boards-bar .right { margin-left: auto; color: var(--dim); font-size: 11px; white-space: nowrap; }

/* ================================================================ side: detail and assistant */
.side { grid-area: side; background: var(--s0); border-right: 1px solid var(--hair); display: flex; flex-direction: column; min-height: 0; }
.side-tabs { display: flex; border-bottom: 1px solid var(--hair); flex: 0 0 auto; }
.side-tabs button { flex: 1; padding: 10px 8px 8px; font-size: 11px; color: var(--mute); border-bottom: 2px solid transparent; }
.side-tabs button.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.mode-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--crit); margin-left: 6px; vertical-align: 1px; }
.mode-dot.claude { background: var(--accent); }
.side-pane { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.side-pane.is-on { display: flex; flex-direction: column; }
#assistant { background: var(--chat-bg); }   /* lift the chat panel off the near-black page so it is not too dark behind the cards */
.side-empty { padding: 22px 18px; color: var(--mute); font-size: 12.5px; line-height: 1.5; }
.kind { font-size: 10px; color: var(--dim); }
.d-h { padding: 14px 16px 12px; border-bottom: 1px solid var(--hair); position: relative; }
.d-h::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 12px; width: 2px; background: var(--st); }
.d-h h3 { margin: 4px 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; }
.d-h .row { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 12px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; background: var(--st); border-radius: 1px; }
.pill.solid { color: var(--ink); }
.d-b { padding: 12px 16px 14px; border-bottom: 1px solid var(--hair); }
.d-b h4 { margin: 0 0 8px; font-size: 10.5px; color: var(--mute); }
.stock { display: grid; gap: 6px; }
.srow { display: grid; grid-template-columns: 74px 1fr 78px; gap: 10px; align-items: center; font-size: 12px; }
.srow .bar { height: 6px; background: var(--s2); position: relative; border-radius: 1px; }
.srow .bar i { position: absolute; inset: 0 auto 0 0; background: var(--st); border-radius: 1px; }
.srow .bar b { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--ink-2); }
.srow .q { font: 12px var(--mono); text-align: right; color: var(--ink); }
.srow .q small { display: block; color: var(--dim); font-size: 10px; }
.lead { color: var(--ink-2); font-size: 12.5px; line-height: 1.5; }
.lead b { color: var(--ink); font-weight: 500; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fact { display: grid; gap: 2px; min-width: 0; }
.fact .fl { font-size: 10px; color: var(--dim); }
.fact .fv { font-size: 12.5px; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.spark { width: 100%; height: 44px; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { font-size: 12px; padding: 3px 9px; border: 1px solid var(--hair-2); border-radius: var(--r); color: var(--ink); background: var(--s1); display: inline-flex; align-items: center; gap: 7px; }
.chip-btn:hover { background: var(--s2); }
.chip-btn i { display: inline-block; width: 7px; height: 7px; background: var(--st); border-radius: 1px; }
.tag { display: inline-block; padding: 2px 8px; font-size: 11.5px; color: var(--ink-2); border: 1px solid var(--hair-2); border-radius: var(--r); }
.tag b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.route-ctl { display: flex; gap: 6px; }

/* assistant */
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 8px; border-bottom: 1px solid var(--hair); flex: 0 0 auto; }
.chat { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.msg { font-size: 12.5px; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--accent-soft); border: 1px solid rgba(90, 180, 230, 0.3); border-radius: var(--r); padding: 8px 11px; max-width: 88%; }
.msg.bot { border-left: 2px solid var(--hair-2); padding: 2px 0 2px 12px; }
.msg.bot p { margin: 0 0 6px; } .msg.bot p:last-child { margin: 0; }
.msg.bot ul { margin: 4px 0 6px; padding-left: 18px; list-style: disc; } .msg.bot li { margin: 2px 0; }
.msg.bot strong { color: var(--ink); font-weight: 600; } .msg.bot em { color: var(--mute); }
.msg.bot code { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.msg .tool { display: flex; gap: 8px; align-items: center; font: 11px var(--mono); color: var(--dim); padding: 2px 0; }
.msg .tool::before { content: ""; width: 5px; height: 5px; background: var(--accent); }
.msg.typing::after { content: "▍"; color: var(--accent); animation: blink 1s infinite; }
.msg.typing.is-working::after { content: none; }
.msg .working { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; color: var(--mute); font-size: 11.5px; }
.msg .working span { margin-left: 6px; letter-spacing: 0.02em; }
.msg .working i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.35; animation: working 1.2s ease-in-out infinite; }
.msg .working i:nth-child(2) { animation-delay: 0.2s; } .msg .working i:nth-child(3) { animation-delay: 0.4s; }
@keyframes working { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .msg .working i { animation: none; opacity: 0.8; } }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; flex: 0 0 auto; }
.chat-suggest button { font-size: 11.5px; padding: 4px 9px; border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--s1); color: var(--ink-2); text-align: left; }
.chat-suggest button:hover { color: var(--ink); background: var(--s2); }
.chat-form { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--hair); flex: 0 0 auto; }
.chat-form textarea { flex: 1; resize: none; font: 12.5px/1.4 var(--sans); color: var(--ink); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 7px 9px; }
.chat-form textarea::placeholder { color: var(--dim); }
/* speak instead of typing. The transcript lands in the box and is never sent on its own, so this is
   a composer control and reads as one: quiet at rest, clearly live while the microphone is open. */
.chat-form { flex-wrap: wrap; }
.btn-mic { flex: 0 0 auto; width: 34px; align-self: stretch; display: grid; place-items: center; color: var(--mute); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); }
.btn-mic svg { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; }
.btn-mic:hover { color: var(--ink); border-color: var(--hair-3); }
.btn-mic.is-rec { color: var(--bad); border-color: var(--bad); background: var(--s0); }
/* the ring is the level: it is obvious at a glance that the microphone is open */
.btn-mic.is-rec::after { content: ""; position: absolute; inset: -2px; border: 1px solid var(--bad); border-radius: var(--r); opacity: calc(0.25 + var(--level, 0) * 0.75); }
.btn-mic { position: relative; }
.btn-mic.is-busy { color: var(--accent); border-color: var(--accent); }
.btn-mic.is-busy svg { animation: mic-work 1.1s ease-in-out infinite; }
@keyframes mic-work { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.mic-note { flex: 1 0 100%; font-size: var(--fs-cap); color: var(--mute); padding-top: 2px; }
.mic-note:empty { display: none; }
.mic-note.bad { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .btn-mic.is-busy svg { animation: none; } }

/* ================================================================ boards */
.board { grid-area: map; z-index: 900; background: var(--bg); display: flex; flex-direction: column; min-height: 0; }
.board-head { display: flex; align-items: center; gap: 18px; padding: 0 18px; height: 44px; border-bottom: 1px solid var(--hair); background: var(--s0); flex: 0 0 auto; }
.board-head h2 { font-size: 11px; color: var(--mute); }
.board-nav { display: flex; gap: 0; margin-left: 6px; height: 100%; }
.board-nav button { padding: 0 12px; color: var(--mute); font-size: 12.5px; font-weight: 500; border-bottom: 2px solid transparent; }
.board-nav button.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.board-head .btn { margin-left: auto; }
.board-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 24px; display: grid; gap: 16px; align-content: start; }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.panel { background: var(--s0); border: 1px solid var(--hair); border-radius: var(--r); min-width: 0; }
.panel > header { padding: 10px 14px; border-bottom: 1px solid var(--hair); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.panel h3 { font-size: 10.5px; color: var(--mute); }
.panel .sub { color: var(--dim); font-size: 11.5px; margin: 0; }
.panel-body { padding: 12px 14px 14px; }
.panel-body.flush { padding: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-bottom: 1px solid var(--hair); padding-bottom: 14px; }
.kpi { padding: 0 18px 0 0; border-right: 1px solid var(--hair); margin-right: 18px; }
.kpi:last-child { border-right: 0; margin-right: 0; }
.kpi .k-label { font-size: 10px; color: var(--mute); }
.kpi .k-value { font: 500 24px/1.15 var(--sans); margin-top: 4px; color: var(--st, var(--ink)); letter-spacing: -0.01em; }
.kpi .k-value small { font-size: 12px; font-weight: 400; color: var(--mute); }
.kpi .k-note { font-size: 11.5px; color: var(--mute); margin-top: 2px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th, .tbl td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tbl th { font-size: 10px; color: var(--mute); position: sticky; top: 0; background: var(--s0); z-index: 1; }
.tbl tbody tr:hover { background: var(--s1); }
.tbl .num { text-align: right; font-family: var(--mono); font-size: 12px; }
.tbl th.num { font-family: var(--sans); }
.tbl .lead-cell { font-weight: 500; }
.tbl .wrap { white-space: normal; max-width: 360px; color: var(--mute); font-size: 12px; }
.tbl tr.is-row-st td:first-child { box-shadow: inset 2px 0 0 var(--st-fill, var(--st, transparent)); }
.tbl tr.group td { background: var(--s1); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); padding: 6px 12px; }
.scroll-x { overflow-x: auto; }
.meter { display: block; height: 6px; background: var(--s2); position: relative; min-width: 90px; border-radius: 1px; }
.meter i { display: block; height: 100%; background: var(--st-fill, var(--st, var(--accent))); border-radius: 1px; }
.meter b { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--ink-2); }
.meter-lbl { font: 11px var(--mono); color: var(--mute); margin-top: 3px; display: block; }
.stack { display: flex; height: 8px; min-width: 110px; overflow: hidden; background: var(--s2); border-radius: 1px; }
.stack i { display: block; height: 100%; }
.stack .s-fmc { background: var(--ok); } .stack .s-pmc { background: var(--warn); } .stack .s-nmc { background: var(--bad); }
.chart { display: block; width: 100%; overflow: visible; }
.chart text { font-family: var(--sans); font-size: 10.5px; fill: var(--mute); }
.chart .grid line { stroke: var(--hair); }
.chart .axis line { stroke: var(--hair-2); }
.chart .lbl { fill: var(--ink-2); font-size: 11px; }
.chart .marker { stroke: var(--ink-2); stroke-dasharray: 3 3; }
.chart .series { fill: none; stroke-width: 1.6; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 11px; color: var(--mute); letter-spacing: 0; text-transform: none; }
.legend-row span { display: inline-flex; align-items: center; gap: 7px; }
.legend-row i { display: inline-block; width: 12px; height: 8px; border: 0; }
.legend-row i.line { height: 2px; }
.legend-row i.dash { height: 0; background: none !important; border-top: 2px dashed; }
.legend-row i.dot { width: 7px; height: 7px; border-radius: 50%; }
.matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.matrix th { font-size: 10px; color: var(--mute); padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--hair); }
.matrix th.row-head, .matrix td.row-head { text-align: left; color: var(--ink); font-weight: 400; white-space: nowrap; }
.matrix td { text-align: right; padding: 6px 10px; font-family: var(--mono); font-size: 12px; color: var(--st, var(--ink)); border-bottom: 1px solid var(--hair); }
.matrix td.na { color: var(--dim); }
.matrix .coa-head { text-transform: none; letter-spacing: 0; }
.matrix .coa-head.is-sel b { color: var(--accent); }
.matrix .coa-head b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 500; }
.matrix .coa-head span { font-size: 10.5px; color: var(--st, var(--mute)); font-weight: 400; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.card { background: var(--s0); border: 1px solid var(--hair); border-radius: var(--r); padding: 12px 14px 13px; position: relative; }
.card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 13px; width: 2px; background: var(--st, transparent); }
.card-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.card-head h4 { font-size: 13.5px; font-weight: 600; }
.card .loc { font-size: 12px; color: var(--mute); margin-top: 1px; }
.card .qty { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 10px 0 0; font-size: 12.5px; }
.card dt { color: var(--mute); }
.card .note { display: block; margin-top: 8px; font-size: 12px; color: var(--mute); }
.timeline { display: flex; height: 18px; border-radius: 1px; overflow: hidden; margin-top: 10px; font-size: 10.5px; }
.timeline div { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; color: var(--on-st); font-weight: 600; }
.timeline .t-dec { background: #6c7a89; } .timeline .t-load { background: #8e7cc3; } .timeline .t-move { background: var(--accent); } .timeline .t-done { background: var(--ok); }
.timeline-sub { display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); margin-top: 4px; }
.log li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
.log .t { font-family: var(--mono); color: var(--mute); flex: 0 0 auto; font-size: 11.5px; }
.log .lv { flex: 0 0 70px; font-size: 10px; color: var(--dim); }
.log .lv-ORDER { color: var(--accent); } .log .lv-DELIVERY { color: var(--ok); }
.empty-note { color: var(--mute); font-size: 12.5px; padding: 10px 0; }
.gauges-row { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: flex-start; }
.gauge-cell { display: grid; justify-items: center; gap: 4px; text-align: center; }
.gauge-cell .g-label { font-size: 10.5px; color: var(--ink-2); max-width: 150px; }
.gauge-cell .g-sub { font-size: 11.5px; color: var(--mute); max-width: 160px; }
.ring, .gauge-big { display: block; }
.equip { display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: center; }
.fleet { display: grid; gap: 4px; font-size: 11.5px; }
.fleet div { display: grid; grid-template-columns: 1fr 44px 34px; gap: 6px; align-items: center; cursor: pointer; }
.fleet .b { height: 5px; background: var(--s2); position: relative; }
.fleet .b i { position: absolute; inset: 0 auto 0 0; background: var(--st); }
.fleet .p { font: 11.5px var(--mono); color: var(--st); text-align: right; }
.fleet .nm { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================ wall mode */
body.wall { --side-w: 0px; }
body.wall .frame { grid-template-columns: 1fr minmax(560px, 44%); grid-template-rows: 48px 36px 1fr 40px; grid-template-areas: "top top" "ribbon ribbon" "map board" "ticker ticker"; }
body.wall .rail { display: none !important; }   /* the brief keeps everything on the right: map, boards, ticker */
body.wall .board { grid-area: board; position: relative; display: flex !important; border-left: 1px solid var(--hair); z-index: 1; }
body.wall .board[hidden] { display: flex !important; }
body.wall .strip { grid-area: ticker; }

body.wall .rail-tab, body.wall .rail-btn { display: none; }
body.wall .siblings, body.wall .ctl, body.wall #btn-reset, body.wall .side, body.wall .boards-bar, body.wall .layers, body.wall .coords { display: none; }
body.wall .strip { grid-template-rows: 1fr; }
body.wall .wordmark b { font-size: 16px; }
body.wall .dtg { font-size: 17px; }
body.wall .ladder-row { grid-template-columns: 104px 1fr; padding: 11px 0; }
body.wall .ladder-row .big { font-size: 34px; }
body.wall .ladder-row .lbl { font-size: 14px; }
body.wall .ladder-row .sub { font-size: 12.5px; }
body.wall .sys-row { font-size: 13.5px; padding: 6px 0 6px 8px; grid-template-columns: 1fr 66px 60px 60px; }
body.wall .sys-row .v { font-size: 13px; }
body.wall .gauge { grid-template-columns: 88px 1fr 62px; font-size: 13.5px; }
body.wall .gauge .bar { height: 8px; }
body.wall .finding { flex-basis: 300px; }
body.wall .finding .t { font-size: 14.5px; }
body.wall .mk-label { font-size: 12px; }

@media (max-width: 1280px) { :root { --rail-w: 288px; } .grid-2, .grid-3 { grid-template-columns: 1fr; } }   /* --side-w keeps the 40/60 rule (floored at 340px) */
@media (max-width: 1080px) {
  .frame { grid-template-columns: 1fr; grid-template-rows: 48px 1fr auto; grid-template-areas: "top" "map" "dock"; }
  .side { position: fixed; right: 0; top: 48px; bottom: 0; width: 360px; z-index: 950; box-shadow: -10px 0 30px var(--shadow-c); transform: translateX(100%); transition: transform 0.2s; }
  .side.is-open { transform: none; }
}

/* ================================================================ chart details */
.leaflet-tile-pane .base-tiles { filter: saturate(0.5) brightness(0.95); }
#map[data-basemap="dark"] .base-tiles { filter: saturate(0.4) brightness(0.72) contrast(1.05); }
#map[data-basemap="terrain"] .base-tiles { filter: brightness(0.5) saturate(0.35) contrast(1.05); }
#map[data-basemap="imagery"] .base-tiles { filter: brightness(0.58) saturate(0.4) contrast(1.06); }
/* the basemap's place names are context, not the picture. They recede so the picture's own labels
   and symbols are the first thing read, which is what stops the two sets fighting. */
.leaflet-shadow-pane .base-labels { filter: brightness(0.82) contrast(0.95); opacity: 0.5 !important; pointer-events: none; }
.graticule { pointer-events: none; }
.grat-lbl { pointer-events: none; }
.grat-lbl .in { display: inline-block; font: 9.5px var(--mono); color: var(--dim); white-space: nowrap; transform: translate(4px, -14px); letter-spacing: 0.02em; }
.ring-lbl { pointer-events: none; }
.ring-lbl .in { display: inline-block; font: 500 10px var(--sans); letter-spacing: 0.04em; white-space: nowrap; transform: translate(-50%, -16px); text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg); }
.ring-lbl.cov-fires .in { color: var(--cov-fires); } .ring-lbl.cov-ad .in { color: var(--cov-ad); } .ring-lbl.cov-ew .in { color: var(--cov-ew); } .ring-lbl.cov-strat .in { color: var(--cov-strat); } .ring-lbl.cov-base .in { color: var(--cov-base); } .ring-lbl.cov-other .in { color: var(--cov-other); }
.mk.is-hover .mk-label { color: var(--accent); }
.mk-asset.is-hover .glyph .f, .mk-node.is-hover .ring-svg .bg { stroke: var(--accent); }
.mk-asset.is-hover .glyph, .mk-unit.is-hover .sym { filter: drop-shadow(0 0 4px var(--accent)); }
.mk-pos.is-hover .tgt { border-color: var(--ink); }
path.cov-hover { stroke-width: 2 !important; fill-opacity: 0.1 !important; }
.delta { font: 10.5px var(--mono); color: var(--dim); margin-left: 6px; letter-spacing: 0; text-transform: none; }
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); } .delta.flat { color: var(--dim); }
.ladder-row .lbl .delta { font-size: 10.5px; }
.tbl thead th { cursor: pointer; user-select: none; }
.tbl thead th:hover { color: var(--ink-2); }
.tbl thead th[data-sort]::after { content: " ▲"; font-size: 8px; color: var(--accent); }
.tbl thead th[data-sort="desc"]::after { content: " ▼"; }
.basemaps { display: flex; gap: 3px; padding: 6px 10px 4px; }
.basemaps button { flex: 1; font-size: 11px; font-weight: 500; padding: 4px 0; color: var(--mute); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); }
.basemaps button.is-on { color: var(--ink); background: var(--s2); border-color: var(--hair-2); box-shadow: inset 0 -2px 0 var(--accent); }
.cat-ic { width: 12px; height: 12px; fill: var(--s0); stroke: var(--ink-2); stroke-width: 1.3; flex: 0 0 auto; }

/* ================================================================ opposing forces */
:root { --hostile: #e2655c; --hostile-soft: rgba(226, 101, 92, 0.14); }
.st-HOSTILE { --st: var(--hostile); }
.mk.hostile .mk-label { color: var(--hostile-ink); }
.mk-node.hostile .ring-svg .arc, .mk-node.hostile .ring-svg .core { stroke: var(--hostile); fill: var(--hostile); }
.mk-node.hostile .ring-svg .arc { fill: none; }
.mk-asset.hostile .glyph .f { fill: var(--hostile-soft); stroke: var(--hostile); }
.mk-asset.hostile.is-aware .glyph .f { fill: var(--s0); stroke: #b8746f; }
.mk-pos.hostile .tgt { border-color: var(--hostile); } .mk-pos.hostile .tgt::after { border-color: var(--hostile); } .mk-pos.hostile .mk-label { color: var(--hostile-ink); }
path.cov-hostile { stroke: #ff7366; fill: var(--hostile); stroke-dasharray: 7 5; }
.ring-lbl.cov-hostile .in { color: var(--hostile-ink); }
.leaflet-tooltip.tt.hostile { border-color: rgba(226, 101, 92, 0.5); }
.force { display: flex; border-bottom: 1px solid var(--hair); }
.force button { flex: 1; padding: 6px 0; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--dim); border-right: 1px solid var(--hair); }
.force button:last-child { border-right: 0; }
.force button.is-on { color: var(--ink); background: var(--s2); box-shadow: inset 0 -2px 0 var(--accent); }
.force button[data-force="opp"].is-on, .force button[data-force="both"].is-on { box-shadow: inset 0 -2px 0 var(--hostile); }
.lyr-force header { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--hair); background: var(--s1); }
.lyr-force header b { font-size: 10.5px; color: var(--ink-2); }
.lyr-force header .count { color: var(--dim); font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.lyr-force.hostile header b { color: var(--hostile-ink); }
.lyr-force.hostile .is-off { opacity: 0.45; pointer-events: none; }
.lyr-force.hostile .ck input { accent-color: var(--hostile); }
.lyr-force.hostile .ring-btn.is-on { color: var(--hostile); border-color: var(--hostile); }
.hostile-blk { background: linear-gradient(90deg, rgba(226, 101, 92, 0.06), transparent 60%); }
.hostile-blk .blk-h h2 { color: var(--hostile-ink); }
.sys-row.hostile::before, .gauge.hostile .bar i { background: var(--hostile); }
.sys-row.hostile .v b { color: var(--ink); }
.conf { font: 500 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.assessed { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 16px; background: var(--hostile-soft); border-bottom: 1px solid rgba(226, 101, 92, 0.35); font-size: 11.5px; color: var(--ink-2); }
.assessed .kind { color: var(--hostile-ink); }
.assessed .conf { color: var(--ink); }
.side-pane .assessed + .d-h::before { background: var(--hostile); }


/* ================================================================ operator tooling */
kbd { font: 500 10px var(--mono); color: var(--ink-2); background: var(--s2); border: 1px solid var(--hair-2); border-radius: 2px; padding: 0 4px; margin-left: 4px; }
#btn-palette kbd { margin-left: 6px; }
.alerts { position: relative; }
#btn-alerts .count { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 6px; font: 600 10px/16px var(--mono); text-align: center; color: var(--on-st); background: var(--warn); border-radius: 8px; }
#btn-alerts.has-new { color: var(--ink); }
.alerts-pop { position: absolute; right: 0; top: calc(100% + 6px); width: 420px; max-height: 60vh; display: flex; flex-direction: column; background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: 0 14px 40px var(--shadow-c); z-index: 1200; }
.alerts-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--hair); }
.alerts-list { overflow-y: auto; margin: 0; padding: 4px 0; }
.alerts-list li { display: grid; grid-template-columns: 50px 70px 1fr; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--ink-2); }
.alerts-list li.is-new { color: var(--ink); box-shadow: inset 2px 0 0 var(--warn); }
.alerts-list li .t { font: 11px var(--mono); color: var(--mute); }
.alerts-list li .lv { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.alerts-list li.lv-ORDER .lv { color: var(--accent); } .alerts-list li.lv-DELIVERY .lv { color: var(--ok); }
.alerts-list .none { color: var(--mute); grid-template-columns: 1fr; }

.tools { position: absolute; right: 12px; top: 12px; z-index: 800; display: flex; border: 1px solid var(--hair); border-radius: var(--r); background: var(--glass); }
.tools button { padding: 5px 10px; font-size: 11.5px; font-weight: 500; color: var(--mute); border-right: 1px solid var(--hair); }
.tools button:last-child { border-right: 0; }
.tools button.is-on { color: var(--ink); background: var(--s2); box-shadow: inset 0 -2px 0 var(--accent); }
#map.is-tool { cursor: crosshair; }
#map.is-tool .leaflet-interactive { cursor: crosshair; }
.tool-lbl { pointer-events: none; }
.tool-lbl .in { display: inline-block; font: 500 10.5px var(--mono); color: var(--ink); white-space: nowrap; text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg), 0 0 10px var(--bg); }
.tool-lbl.grid .in { transform: translate(8px, 6px); color: var(--ink-2); }
.tool-lbl.seg .in { transform: translate(-50%, -22px); background: var(--glass); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 2px 6px; }
.tool-lbl.live .in { opacity: 0.8; }

.palette { position: fixed; inset: 0; z-index: 1500; background: rgba(5, 8, 12, 0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.palette-card { width: min(680px, 92vw); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: 0 30px 80px var(--shadow-c); overflow: hidden; }
#palette-input { width: 100%; border: 0; border-bottom: 1px solid var(--hair); background: transparent; color: var(--ink); font: 15px var(--sans); padding: 14px 16px; outline: none; }
#palette-input::placeholder { color: var(--dim); }
#palette-list { margin: 0; padding: 6px 0; max-height: 52vh; overflow-y: auto; }
#palette-list li { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; padding: 7px 16px; cursor: pointer; font-size: 13px; }
#palette-list li.is-on, #palette-list li:hover { background: var(--s2); }
#palette-list .pk { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
#palette-list .pl { color: var(--ink); font-weight: 500; }
#palette-list .ps { color: var(--mute); font-size: 12px; text-align: right; }
#palette-list .none { color: var(--mute); grid-template-columns: 1fr; }
.palette-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--hair); font-size: 11px; color: var(--dim); }

.clock-pop .replay-label { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
body.replay .clock-pop .replay-label { color: var(--warn); }
body.replay .clock-btn .live i { background: var(--warn); }
#replay-range { width: 100%; height: 2px; accent-color: var(--warn); margin: 6px 0; }
#replay-range:disabled { opacity: 0.35; }
.clock-pop .rp-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.clock-pop .rp-note { font-size: 11px; color: var(--mute); line-height: 1.4; white-space: normal; }
.clock-pop .rp-btns { display: flex; gap: 6px; flex: 0 0 auto; }
#dtg.is-replay { color: var(--warn); }
body.replay .map-wrap::after { content: "REPLAY"; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 850; font: 600 10.5px var(--sans); letter-spacing: 0.16em; color: var(--warn); border: 1px solid var(--warn); border-radius: var(--r); padding: 3px 10px; background: var(--glass); pointer-events: none; }
.replay-banner { padding: 8px 16px; font-size: 11.5px; color: var(--warn); background: rgba(214, 160, 63, 0.1); border-bottom: 1px solid rgba(214, 160, 63, 0.35); }

#map[data-zoom="far"] .mk-node .mk-label, #map[data-zoom="far"] .mk-convoy .mk-label, #map[data-zoom="far"] .mk-asset .mk-sub, #map[data-zoom="far"] .mk-pos .mk-label, #map[data-zoom="far"] .grat-lbl, #map[data-zoom="far"] .mk-unit .chip { display: none; }
#map[data-zoom="mid"] .mk-convoy .mk-label, #map[data-zoom="mid"] .mk-pos .mk-sub, #map[data-zoom="mid"] .mk-node.is-dim .mk-label { display: none; }
.trail { pointer-events: none; }

.help { position: fixed; inset: 0; z-index: 1400; background: rgba(5, 8, 12, 0.55); display: flex; align-items: center; justify-content: center; }
.help-card { width: 380px; background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 18px 20px; box-shadow: 0 30px 80px var(--shadow-c); }
.help-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 10px 0 0; font-size: 12.5px; }
.help-card dt { color: var(--ink-2); } .help-card dd { margin: 0; color: var(--mute); }
.help-card kbd { margin-left: 0; margin-right: 4px; }
.help-card p { font-size: 12px; color: var(--mute); margin-top: 6px; line-height: 1.5; }
body.wall .tools, body.wall .clock-pop, body.wall .clock-btn .caret, body.wall #btn-palette, body.wall .alerts, body.wall #btn-help { display: none; }

/* ================================================================ planning overlay */
#map.is-plan { cursor: crosshair; }
.plan-lbl { pointer-events: none; background: none !important; border: 0 !important; }
.plan-lbl .in { display: inline-block; transform: translate(-50%, -50%); text-align: center; font: 600 11px/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 3px var(--bg), 0 0 8px var(--bg); }
.plan-lbl .in small { display: block; font: 400 10px var(--mono); letter-spacing: 0.02em; text-transform: none; color: var(--ink-2); margin-top: 2px; }
.plan-lbl.aa .in { transform: translate(-50%, 14px); }
.plan-arrow { pointer-events: none; background: none !important; border: 0 !important; }
.plan-arrow span { display: inline-block; color: var(--accent); font-size: 16px; line-height: 1; transform-origin: 50% 50%; margin: -8px 0 0 -8px; text-shadow: 0 0 3px var(--bg); }
.plan-name { width: 100%; margin: 4px 0; font: 600 18px/1.2 var(--sans); letter-spacing: -0.005em; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed transparent; padding: 0; }
.plan-name:hover, .plan-name:focus { border-bottom-color: var(--hair-2); outline: none; }
.plan-draw { padding: 16px; }
.plan-draw p { color: var(--ink-2); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.plan-units li { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--hair); font-size: 12.5px; }
.plan-units li:first-child { border-top: 0; }
.plan-units .v { font: 12px var(--mono); color: var(--mute); }
.plan-units .ck input { accent-color: var(--accent); }
.plan-recs li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 12.5px; align-items: center; }
.plan-recs li:first-child { border-top: 0; }
.plan-recs li b { font-weight: 500; color: var(--ink); grid-column: 1; }
.plan-recs li span { grid-column: 1; color: var(--mute); font-size: 12px; }
.plan-recs li .btn-sm { grid-column: 2; grid-row: 1 / 3; }
.plan-recs li.threat b { color: var(--hostile-ink); }
.plan-saved li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--hair); font-size: 12.5px; }
.plan-saved li:first-child { border-top: 0; }

/* plan: parameters, estimate blocks, readiness against H, decisions, risks */
details.d-b > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
details.d-b > summary::-webkit-details-marker { display: none; }
details.d-b > summary::after { content: ""; width: 6px; height: 6px; border-right: 1px solid var(--dim); border-bottom: 1px solid var(--dim); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform 0.12s; }
details.d-b:not([open]) > summary::after { transform: rotate(-45deg); margin-top: 0; }
details.d-b:not([open]) > summary h4 { margin-bottom: 0; }
details.d-b > summary h4 { margin-bottom: 8px; }
/* a folded section keeps its one-line lead in view; Clear sits at the right of the rung */
details.d-b > summary { flex-wrap: wrap; } details.d-b > summary h4 { flex: 1 1 auto; } details.d-b > summary::after { order: 1; } details.d-b > summary p.lead { order: 2; flex: 1 1 100%; margin: 0 0 6px; } details.d-b:not([open]) > summary p.lead { margin-bottom: 0; }
.dz-rung [data-decide-clear] { margin-left: auto; }
.plan-params { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.plan-params label.wide { grid-column: 1 / -1; }
.plan-params label { display: grid; gap: 3px; min-width: 0; }
.plan-params .fl { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.plan-params input, .plan-params select { width: 100%; min-width: 0; font: 12px var(--mono); color: var(--ink); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 4px 6px; color-scheme: dark; }
.plan-params select { font-family: var(--sans); }
.plan-params input:focus, .plan-params select:focus { outline: none; border-color: var(--accent); }
.plan-params .inp { display: flex; align-items: center; gap: 6px; }
.plan-params .inp em { font: 11px var(--sans); color: var(--mute); font-style: normal; }
/* a status figure repeated down a table column: normal is the absence of a finding, so it reads as
   plain ink and only amber, red and black spend colour. One-off figures keep .st-txt and stay green. */
.st-fig { color: var(--st); }
.st-fig.st-GREEN { color: var(--ink); }
.st-txt.GREEN { color: var(--ok); } .st-txt.AMBER { color: var(--warn); } .st-txt.RED, .st-txt.BLACK { color: var(--bad); } .st-txt.HOSTILE { color: var(--hostile-ink); }
.rdy { display: grid; gap: 5px; }
.rrow { display: grid; grid-template-columns: 118px 1fr 56px; gap: 10px; align-items: center; font-size: 12px; }
.rrow .link { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow .bar { height: 6px; background: var(--s2); position: relative; border-radius: 1px; }
.rrow .bar i { position: absolute; inset: 0 auto 0 0; background: var(--st); border-radius: 1px; }
.rrow .bar b { position: absolute; top: -4px; bottom: -4px; width: 1.5px; background: var(--ink); }
.rrow .q { font: 12px var(--mono); text-align: right; color: var(--ink); }
.plan-dec li { display: grid; grid-template-columns: 96px 1fr auto; grid-template-rows: auto auto; gap: 1px 10px; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 12.5px; align-items: center; }
.plan-dec li:first-child { border-top: 0; }
.plan-dec .when { grid-row: 1 / 3; font-size: 11.5px; color: var(--accent); align-self: start; padding-top: 2px; }
.plan-dec li b { grid-column: 2; font-weight: 500; color: var(--ink); }
.plan-dec li > span:not(.when) { grid-column: 2; color: var(--mute); font-size: 11.5px; }
.plan-dec li .btn-sm { grid-column: 3; grid-row: 1 / 3; }
.plan-dec li.late .when { color: var(--warn); }
.plan-dec li em { color: var(--warn); font-style: normal; }
.plan-risk li { display: grid; grid-template-columns: 6px 1fr; gap: 10px; padding: 5px 0; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.plan-risk li:first-child { border-top: 0; }
.plan-risk li i { width: 6px; height: 6px; margin-top: 6px; background: var(--st); border-radius: 1px; }
.plan-risk li.st-HOSTILE { --st: var(--hostile); }
.proposal { margin-top: 10px; border: 1px solid var(--hair-2); border-left: 2px solid var(--st, var(--accent)); border-radius: var(--r); padding: 10px 12px; background: var(--s1); }
.proposal .p-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.proposal ul { margin: 0 0 6px !important; padding-left: 16px !important; }
.proposal .p-a { font: 12px var(--mono); color: var(--ink); margin: 0 0 6px !important; }
.proposal .p-r { color: var(--mute); font-size: 12px; margin: 0 0 8px !important; }

/* while a tool or plan is being drawn, every click belongs to the map, not to what sits under it */
#map.is-tool .leaflet-marker-pane, #map.is-tool .leaflet-overlay-pane, #map.is-tool .leaflet-tooltip-pane { pointer-events: none !important; }
#map.is-tool .leaflet-marker-pane * , #map.is-tool .leaflet-overlay-pane * { pointer-events: none !important; }

/* top bar: identity on the left, the parameter, the clock, alerts and one menu on the right; nothing to give up */
.top { gap: 14px; }   /* no overflow clipping: the popovers hang below the bar */
.top > *, .top-right > * { flex: 0 0 auto; }
.wordmark span { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.top-right .ctl { margin-right: 8px; }
@media (max-width: 1499px) { .lbl-txt { display: none; } .wordmark span { max-width: 220px; } #scenario-select { max-width: 170px; } }
@media (max-width: 1199px) { .wordmark span { display: none; } }

/* small rings (air base protection, SHORAD) carry their label only when zoomed in enough to read the ring */
#map[data-zoom="far"] .ring-lbl.rk-small, #map[data-zoom="mid"] .ring-lbl.rk-small, #map[data-zoom="mid"] .mk-asset.is-aware .mk-sub { display: none; }

/* ================================================================ the brief and the intro */
.brief { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 860; width: min(640px, 62%); background: var(--glass); border: 1px solid var(--hair-2); border-left: 2px solid var(--accent); border-radius: var(--r); padding: 12px 16px 12px; box-shadow: 0 16px 48px var(--shadow-c); }
.brief .b-h { display: flex; justify-content: space-between; align-items: center; }
.brief h3 { margin: 6px 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; }
.brief p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.brief .b-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.brief .dots { display: flex; gap: 5px; } .brief .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hair-2); } .brief .dots i.done { background: var(--mute); } .brief .dots i.on { background: var(--accent); }
.brief .b-btns { display: flex; gap: 8px; align-items: center; }
body.briefing .legend, body.briefing .coords { display: none; }
.intro { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; background: rgba(6, 8, 12, 0.72); backdrop-filter: blur(3px); }
.intro-card { width: min(640px, 92vw); background: var(--s0); border: 1px solid var(--hair-2); border-top: 2px solid var(--accent); border-radius: var(--r); padding: 26px 30px 22px; box-shadow: 0 30px 80px var(--shadow-c); }
.intro-card .eyebrow { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.intro-card h2 { margin: 6px 0 14px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.intro-card ol { margin: 0 0 12px; padding-left: 22px; } .intro-card li { margin: 6px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); } .intro-card li b { color: var(--ink); font-weight: 500; }
.intro-card .intro-sub { font-size: 12.5px; color: var(--mute); margin: 0 0 16px; line-height: 1.5; }
.intro-card .actions { display: flex; gap: 10px; }
.intro-card .intro-note { margin: 14px 0 0; font-size: 11px; color: var(--dim); }

/* plan: mission, phases, comparison */
.plan-mission { width: 100%; margin: 0 0 6px; font: 12.5px/1.4 var(--sans); color: var(--ink-2); background: transparent; border: 0; border-bottom: 1px dashed transparent; padding: 0; }
.plan-mission::placeholder { color: var(--dim); } .plan-mission:hover, .plan-mission:focus { border-bottom-color: var(--hair-2); outline: none; }
.phases { display: grid; gap: 6px; }
.ph { display: grid; grid-template-columns: 1fr 138px 68px 22px; gap: 6px; align-items: center; }
.ph input, .ph select { width: 100%; min-width: 0; font: 12px var(--sans); color: var(--ink); background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 4px 6px; color-scheme: dark; }
.ph input[type="number"] { font-family: var(--mono); }
.ph input:focus, .ph select:focus { outline: none; border-color: var(--accent); }
.ph .inp { display: flex; align-items: center; gap: 4px; } .ph .inp em { font: 11px var(--sans); color: var(--mute); font-style: normal; }
.ph .x { color: var(--dim); font-size: 15px; line-height: 1; } .ph .x:hover { color: var(--bad); } .ph .x:disabled { opacity: 0.3; }
.ph-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11.5px; }
.tbl.coa th { text-align: left; font-size: 11px; color: var(--ink); text-transform: none; letter-spacing: 0; vertical-align: top; }
.tbl.coa td { vertical-align: top; font-size: 12px; } .tbl.coa td .dim { font-size: 11px; }
.tbl.coa .actions { display: flex; gap: 6px; }

/* top bar with the Brief button: what is given up as the screen narrows */

/* the case: ladder strip in the card, reported places on the map, the ladder board */
.brief .ladder { display: flex; gap: 4px; margin: 8px 0 2px; padding: 0; list-style: none; }
.brief .ladder li { flex: 1; display: grid; gap: 4px; font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); text-align: center; }
.brief .ladder li i { display: block; height: 3px; background: var(--hair-2); border-radius: 1px; }
.brief .ladder li.done i { background: var(--mute); } .brief .ladder li.done { color: var(--mute); }
.brief .ladder li.on i { background: var(--hostile); } .brief .ladder li.on { color: var(--ink); font-weight: 600; }
.brief .b-when { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: var(--mute); } .brief .b-when .mono { color: var(--accent); }
.brief .b-pic { border-left: 2px solid var(--accent); padding-left: 10px; color: var(--ink); }
.brief .b-pic b { color: var(--accent); font-weight: 600; margin-right: 4px; }
.case-pt { pointer-events: none; background: none !important; border: 0 !important; }
.case-pt i { display: block; width: 12px; height: 12px; margin: -6px 0 0 -6px; }
/* a marker carrying a real symbol sizes itself; the dot shapes below must not paint over it */
.case-pt i.sym { background: none !important; border: 0 !important; border-radius: 0 !important; transform: none !important; box-shadow: none !important; }
.case-pt i.sym svg { display: block; width: 100%; height: 100%; }
.case-pt.past i.sym { filter: grayscale(0.5); }
.case-pt .in { position: absolute; left: 9px; top: -7px; font: 500 10.5px var(--sans); white-space: nowrap; color: var(--ink-2); text-shadow: 0 0 3px var(--bg), 0 0 6px var(--bg); }
.case-pt.struck i { background: linear-gradient(45deg, transparent 42%, var(--hostile) 42%, var(--hostile) 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--hostile) 42%, var(--hostile) 58%, transparent 58%); }
.case-pt.struck .in { color: var(--hostile-ink); }
.case-pt.wave i { border: 1.5px dashed var(--hostile); border-radius: 50%; } .case-pt.wave.opp i { border-color: var(--accent); }
.case-pt.target i { border: 1.5px solid var(--accent); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4.5px var(--accent); } .case-pt.target .in { color: var(--accent); }
.case-pt.event i { background: var(--mute); transform: rotate(45deg); width: 9px; height: 9px; margin: -4px 0 0 -4px; }
.tbl tr.is-on td { background: var(--accent-soft); }

/* response options */
.trig-list li button { display: grid; grid-template-columns: 138px 1fr auto; gap: 8px; width: 100%; text-align: left; padding: 5px 0; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-2); align-items: baseline; }
.trig-list li:first-child button { border-top: 0; }
.trig-list .when { font-size: 11px; color: var(--mute); } .trig-list .r { font-size: 10.5px; color: var(--dim); }
.trig-list li.is-on button { color: var(--ink); } .trig-list li.is-on .t { font-weight: 600; } .trig-list li.is-on .when { color: var(--accent); }
.trig-list li button:hover .t { color: var(--ink); }
.o-rec { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; } .o-rec b { color: var(--ok); font-weight: 600; margin-right: 4px; }
.opts { display: grid; gap: 6px; }
.opt button { display: block; width: 100%; text-align: left; padding: 9px 10px 8px 12px; border: 1px solid var(--hair); border-left: 2px solid var(--st, var(--hair-2)); border-radius: var(--r); background: var(--s1); }
.opt.st-ACCENT { --st: var(--accent); }
.opt.is-on button { background: var(--s2); border-color: var(--hair-2); border-left-color: var(--st); }
.opt.is-off button { opacity: 0.6; }
.opt .o-h { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--mute); margin-bottom: 4px; }
.opt .rec { color: var(--ok); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 9.5px; }
.opt b { display: block; font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.3; }
.opt .o-m { font-size: 11.5px; color: var(--mute); margin-top: 3px; }
.opt .o-e { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 6px; font-size: 10.5px; color: var(--dim); }
.opt .o-e .bar { position: relative; height: 4px; background: var(--s0); border-radius: 1px; overflow: hidden; }
.opt .o-e .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--warn); } .opt .o-e .bar i.s { background: var(--hostile); }
.opt-d h3 { margin: 4px 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.opt-d .lead { color: var(--ink-2); }
.esc { display: grid; gap: 5px; margin-bottom: 8px; }
.esc .er { display: grid; grid-template-columns: 14px 1fr 38px 130px; gap: 8px; align-items: center; font-size: 11px; color: var(--mute); }
.esc .er .n { font: 600 10.5px var(--mono); color: var(--dim); } .esc .er .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.esc .er .bar { height: 6px; background: var(--s2); position: relative; border-radius: 1px; } .esc .er .bar i { position: absolute; inset: 0 auto 0 0; background: var(--hostile); opacity: 0.55; border-radius: 1px; }
.esc .er.mid .bar i { opacity: 0.8; } .esc .er.hi .bar i { opacity: 1; } .esc .er.hi .l, .esc .er.hi .p { color: var(--ink); }
.esc-ans { margin: 0 0 8px; padding-left: 16px; font-size: 12px; color: var(--ink-2); } .esc-ans li { margin: 2px 0; }
.case-pt.target.out i { border-color: var(--warn); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4.5px var(--warn); } .case-pt.target.out .in { color: var(--warn); }

/* decisions on the map: firing lines that run, targets that pulse, moves, dispersal */
@keyframes fire-run { to { stroke-dashoffset: -32; } }
path.fire-line { stroke-dasharray: 10 6; animation: fire-run 1.1s linear infinite; filter: drop-shadow(0 0 3px rgba(90, 180, 230, 0.6)); }
path.move-line { stroke-dasharray: 2 6; }
@keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.case-pt.target.pulse i { position: relative; }
.case-pt.target.pulse i::after { content: ""; position: absolute; inset: -2px; border: 1.5px solid var(--accent); border-radius: 50%; animation: pulse-ring 1.6s ease-out infinite; }
.case-pt.past { opacity: 0.45; } .case-pt.past .in { display: none; }
.dec-lbl { pointer-events: none; background: none !important; border: 0 !important; }
.dec-lbl .in { position: absolute; left: 12px; top: -22px; font: 500 10.5px var(--mono); letter-spacing: 0.02em; white-space: nowrap; color: var(--accent); background: var(--glass); border: 1px solid rgba(90, 180, 230, 0.35); border-radius: var(--r); padding: 2px 6px; }
.dec-lbl.alt .in { color: var(--mute); border-color: var(--hair-2); } .dec-lbl.warn .in { color: var(--warn); border-color: rgba(214, 160, 63, 0.4); } .dec-lbl.def .in { color: #a58ff0; border-color: rgba(165, 143, 240, 0.4); } .dec-lbl.move .in { top: 10px; }
path.disperse { animation: none; }
/* the scenario control beside Status: a button, and the steps in a popover under it */
/* the strike bar on an assessed site, the decision card, grounding and reasoning */
.strike-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--hair); background: linear-gradient(90deg, rgba(90, 180, 230, 0.08), transparent); font-size: 11.5px; color: var(--mute); }
.d-h.decide h3 { font-size: 20px; }
.pkg .pkg-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; } .pkg .pkg-big b { font-size: 18px; font-weight: 600; color: var(--ink); } .pkg .pkg-big span { font: 12.5px var(--mono); color: var(--ink-2); }
.pkg { border-left: 2px solid var(--st); }
.reason { margin: 0; display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 12.5px; }
.reason dt { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); padding-top: 2px; } .reason dd { margin: 0; color: var(--ink-2); line-height: 1.45; } .reason dd:last-child { color: var(--ink); }
.ground { margin: 0; padding: 0; list-style: none; } .ground li { display: grid; gap: 2px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 12px; color: var(--ink-2); line-height: 1.4; } .ground li:first-child { border-top: 0; }
.ground .link { text-align: left; color: var(--ink-2); } .ground .link:hover { color: var(--accent); }
.ground .src { font: 10.5px var(--mono); color: var(--dim); letter-spacing: 0.02em; }
.esc .er.cur .n { color: var(--ink); } .esc .er em { font-style: normal; font-size: 9.5px; color: var(--accent); margin-left: 4px; } .esc .er.opt em { color: var(--warn); }
.trig summary h4 { display: inline; }

/* ================================================================ decide: the agent's workspace */
.dz-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--hair); position: relative; }
.dz-head::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 12px; width: 2px; background: var(--st); }
.dz-rung { display: flex; align-items: center; gap: 10px; } .dz-rung b { font: 700 13px/1 var(--mono); letter-spacing: 0.04em; color: var(--on-st); background: var(--st); padding: 4px 7px; border-radius: 2px; } .dz-rung span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.dz-title { margin: 8px 0 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.005em; }
.dz-sit { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); } .dz-sit .mono { color: var(--accent); } .dz-sit em.ok { font-style: normal; color: var(--ok); }
.dz-rec { margin-top: 12px; padding: 10px 12px; background: var(--s1); border: 1px solid var(--hair); border-left: 2px solid var(--ok); border-radius: var(--r); display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.dz-rec .kind { grid-column: 1 / -1; font-size: 10px; } .dz-rec b { font-size: 13.5px; font-weight: 600; color: var(--ink); } .dz-rec .score { font-size: 18px; color: var(--ok); } .dz-rec p { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.dz-threat .lead { color: var(--ink-2); }
.dz-tl { margin: 8px 0 10px; padding: 0; list-style: none; display: grid; gap: 6px; }
.dz-tl li { display: grid; grid-template-columns: 1fr 90px 32px; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; font-size: 12px; }
.dz-tl .link { text-align: left; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-tl .bar { height: 6px; background: var(--s2); border-radius: 1px; position: relative; } .dz-tl .bar i { position: absolute; inset: 0 auto 0 0; background: var(--hostile); border-radius: 1px; }
.dz-tl .x { font-size: 11px; color: var(--hostile-ink); text-align: right; }
.dz-tl .by { grid-column: 1 / -1; font-size: 11.5px; color: var(--mute); } .dz-tl .by em { font-style: normal; color: var(--warn); }
.dz-tl li { font-size: var(--fs-val); } .dz-tl .t { color: var(--ink); line-height: 1.3; }
.dz-prot { margin: 8px 0 0; padding: 0; list-style: none; } .dz-prot li { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 12px; } .dz-prot li:first-child { border-top: 0; }
.dz-prot .a { color: var(--ink); font-weight: 500; } .dz-prot .w { grid-column: 1; color: var(--mute); font-size: 11.5px; } .dz-prot .r { grid-row: 1 / 3; grid-column: 2; font: 11px var(--mono); color: var(--mute); align-self: center; } .dz-prot .r em { font-style: normal; color: var(--warn); } .dz-prot .r em.ok { color: var(--ok); }
.dz-opts { display: grid; gap: 6px; }
.dz-opt button { display: grid; grid-template-columns: 22px 1fr 40px; gap: 10px; align-items: start; width: 100%; text-align: left; padding: 9px 10px 9px 10px; border: 1px solid var(--hair); border-left: 2px solid var(--st, var(--hair-2)); border-radius: var(--r); background: var(--s1); }
.dz-opt.st-ACCENT { --st: var(--accent); } .dz-opt.is-on button { background: var(--s2); border-color: var(--hair-2); border-left-color: var(--st); } .dz-opt.is-rec button { box-shadow: inset 0 0 0 1px rgba(63, 174, 124, 0.35); } .dz-opt.is-off button { opacity: 0.55; }
.dz-opt .rank { font-size: 12px; color: var(--dim); padding-top: 2px; } .dz-opt .body { display: grid; gap: 4px; min-width: 0; }
.dz-opt .h { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--mute); } .dz-opt .rec { color: var(--ok); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 9.5px; }
.dz-opt b { font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.3; } .dz-opt .m { font-size: 11.5px; color: var(--mute); }
.dz-opt .total { font-size: 15px; font-weight: 600; color: var(--ink-2); text-align: right; padding-top: 2px; } .dz-opt .total.hi { color: var(--ok); } .dz-opt .total.lo { color: var(--dim); }
.dz-score { display: grid; gap: 2px; width: 100%; max-width: 160px; } .dz-score i { display: block; height: 3px; background: var(--s0); border-radius: 1px; position: relative; overflow: hidden; }
.dz-score i.e { background: linear-gradient(90deg, var(--ok) 0 var(--w, 0), var(--s0) 0); } .dz-score i { --w: 0; }
.dz-score i.e { background: var(--ok); } .dz-score i.c { background: var(--warn); } .dz-score i.r { background: var(--hostile); }
.dz-sel h3 { margin: 4px 0 6px; font-size: 16px; font-weight: 600; } .dz-sel .lead { color: var(--ink-2); } .dz-sel .reason { margin-top: 10px; }
.dz-plan { margin: 0; padding: 0; list-style: none; position: relative; }
.dz-plan li { display: grid; grid-template-columns: 62px 16px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 12px; align-items: start; } .dz-plan li:first-child { border-top: 0; }
.dz-plan .t { font-size: 11px; color: var(--accent); display: grid; } .dz-plan .t small { font-size: 9.5px; color: var(--dim); }
.dz-plan .g { color: var(--mute); text-align: center; } .dz-plan .b { color: var(--ink-2); line-height: 1.4; } .dz-plan .b b { color: var(--ink); font-weight: 500; }
.dz-plan .k-salvo .g, .dz-plan .k-salvo .t { color: var(--warn); } .dz-plan .k-order .g { color: var(--hostile-ink); } .dz-plan .k-disperse .g { color: var(--warn); } .dz-plan .k-assess .g { color: var(--ok); }
.dz-look { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dz-look li { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: start; font-size: 12px; }
.dz-look .cx { display: block; margin-top: 2px; font-size: var(--fs-cap); color: var(--ink-2); } .dz-look .cx b { color: var(--warn); }
.dz-look .p { display: grid; gap: 3px; } .dz-look .p i { display: block; height: 5px; background: var(--hostile); border-radius: 1px; opacity: 0.8; } .dz-look .p b { font-size: 11px; color: var(--ink-2); }
.dz-look .w { display: grid; gap: 2px; color: var(--ink-2); } .dz-look .w > b { color: var(--ink); font-weight: 600; } .dz-look .th { font-size: 11px; color: var(--mute); } .dz-look .nx { font-size: 11.5px; color: var(--ink-2); } .dz-look .nx b { color: var(--accent); font-weight: 600; }
.dec-lbl.threat .in { color: var(--hostile-ink); border-color: rgba(226, 101, 92, 0.4); }
.trig summary .dim { font-weight: 400; text-transform: none; letter-spacing: 0; }

.mode-dot.blocked { background: var(--warn); box-shadow: 0 0 6px var(--warn); }

/* the agent in the chat: watch card, traces, approvable actions */
.mode-dot.agent { background: var(--ok); }
.agent-watch { padding: 10px 14px 8px; border-bottom: 1px solid var(--hair); background: var(--s1); font-size: 12px; }
.agent-watch .w-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.agent-watch ul { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.agent-watch li { display: grid; grid-template-columns: 6px 1fr; gap: 8px; color: var(--ink-2); line-height: 1.4; font-size: 11.5px; }
.agent-watch li i { width: 6px; height: 6px; margin-top: 5px; border-radius: 1px; background: var(--mute); }
.agent-watch li.sv-RED i { background: var(--bad); } .agent-watch li.sv-AMBER i { background: var(--warn); } .agent-watch li.sv-INFO i { background: var(--accent); }
.agent-watch .actions { display: flex; gap: 6px; }
.msg .trace { margin-top: 8px; font-size: 11.5px; color: var(--mute); } .msg .trace summary { cursor: pointer; color: var(--dim); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; } .msg .trace ol { margin: 6px 0 0; padding-left: 18px; } .msg .trace li { margin: 2px 0; }
.msg .acts { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--hair-2); border-left: 2px solid var(--ok); border-radius: var(--r); background: var(--s1); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.msg .acts .kind { flex: 0 0 100%; font-size: 10px; margin-bottom: 2px; }
.msg.act { border-left-color: var(--ok); }

/* ================================================================ product pass: less prose, quieter surfaces */
.note, .panel header .sub, .d-b > .note, details.d-b > .note { display: none; }
.show-notes .note, .show-notes .panel header .sub, .panel.show-notes header .sub { display: block; }
.note-toggle { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 6px; border: 1px solid var(--hair-2); border-radius: 50%; color: var(--dim); font: 600 9px/1 var(--mono); vertical-align: 1px; letter-spacing: 0; text-transform: none; }
.note-toggle:hover, .show-notes .note-toggle { color: var(--accent); border-color: var(--accent); }
button, .btn, .btn-sm, .seg, .pill, .link, .side-tabs button, .boards-bar button, .lyr-cat header, .opt button, .dz-opt button, .tbl tbody tr { transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; }
.tbl tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.side-pane, .rail, .board-body, .lyr-body, .chat, .alerts-list { scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; }
.side-pane::-webkit-scrollbar, .rail::-webkit-scrollbar, .board-body::-webkit-scrollbar, .lyr-body::-webkit-scrollbar, .chat::-webkit-scrollbar { width: 6px; }
.side-pane::-webkit-scrollbar-thumb, .rail::-webkit-scrollbar-thumb, .board-body::-webkit-scrollbar-thumb, .lyr-body::-webkit-scrollbar-thumb, .chat::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 3px; }
.side-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.side-tabs .ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.side-tabs button.is-on .ic { opacity: 1; }
.dz-rec.cmd { border-left-color: var(--accent); } .dz-rec.cmd .score { color: var(--accent); } .dz-rec.cmd em { font-style: normal; color: var(--ink-2); }
.dz-rec-acts { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 8px; }
.dz-pickbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 11.5px; }
.dz-pickbar .btn-sm:disabled { opacity: 0.45; }
.dz-opt { display: flex; gap: 6px; align-items: stretch; }
.dz-opt .pick { flex: 0 0 16px; height: 16px; margin-top: 11px; border: 1px solid var(--hair-2); border-radius: 3px; background: var(--s1); cursor: pointer; position: relative; }
.dz-opt .pick:hover { border-color: var(--accent); }
.dz-opt .pick.is-on { border-color: var(--accent); background: var(--accent); } .dz-opt .pick.is-on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--on-st); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dz-opt .pick.none { visibility: hidden; }
.dz-opt > button { flex: 1; min-width: 0; width: auto; }
.dz-opt .rec.cmd { color: var(--accent); } .dz-opt.is-cmd > button { box-shadow: inset 0 0 0 1px var(--accent); }
.acts button.is-superseded { opacity: 0.45; text-decoration: line-through; }
.dz-rec p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dz-rec.show-notes p { display: block; -webkit-line-clamp: unset; }
.dz-sel details.why summary { cursor: pointer; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-top: 8px; list-style: none; } .dz-sel details.why summary::-webkit-details-marker { display: none; } .dz-sel details.why[open] summary { color: var(--accent); }
.intro-card ol { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.intro-card li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; margin: 0; }
.intro-card li i { font: 600 11px var(--mono); color: var(--accent); }
.intro-card li b { display: block; color: var(--ink); font-weight: 600; } .intro-card li span { color: var(--mute); font-size: 12.5px; }

/* ================================================================ space: the situation ribbon */
.ribbon { grid-area: ribbon; display: none; }   /* the situation line belongs to the wall; the working screen stays clean */
.ribbon { align-items: center; gap: 0; padding: 0 16px; background: var(--s0); border-bottom: 1px solid var(--hair); font-size: 11.5px; color: var(--ink-2); min-width: 0; overflow: hidden; }
.ribbon .rb { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 14px; height: 30px; border-right: 1px solid var(--hair); white-space: nowrap; min-width: 0; color: var(--ink-2); }
.ribbon .rb.rec b, .ribbon .rb.threat b { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.ribbon .ws { flex: 0 0 auto; }
body.wall .ribbon { display: flex; }
.more-pop .mi-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 10px; }
.more-pop .mi-row .seg { padding: 3px 9px; }
.ribbon .rb:first-child { padding-left: 0; } .ribbon .rb:last-child { border-right: 0; }
.ribbon button.rb { cursor: pointer; } .ribbon button.rb:hover { color: var(--ink); background: var(--s1); }
.ribbon .rb .k { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.ribbon .rb b { font-weight: 600; color: var(--ink); } .ribbon .rb .mono { color: var(--accent); }
.ribbon .rung { font: 700 11px/1 var(--mono); color: var(--on-st); padding: 3px 6px; border-radius: 2px; background: var(--st); }
.ribbon .rb.flex { flex: 1 1 0; min-width: 90px; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 30px; }
.ribbon .rb.flex span { vertical-align: middle; }
.ribbon .ws { margin-left: auto; display: inline-flex; border: 1px solid var(--hair-2); border-radius: var(--r); overflow: hidden; }
.ribbon .ws button { padding: 2px 10px; font-size: 11px; color: var(--mute); border-right: 1px solid var(--hair); } .ribbon .ws button:last-child { border-right: 0; }
.ribbon .ws button.is-on { color: var(--ink); background: var(--s2); box-shadow: inset 0 -2px 0 var(--accent); }
.ribbon .exp { display: inline-block; width: 46px; height: 4px; background: var(--s2); border-radius: 1px; position: relative; vertical-align: middle; } .ribbon .exp i { position: absolute; inset: 0 auto 0 0; background: var(--hostile); border-radius: 1px; }
.ribbon .sc { font: 600 12px var(--mono); color: var(--ok); }
.ribbon .pulse { animation: rb-pulse 0.9s ease-out 1; } @keyframes rb-pulse { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
body.wall .ribbon .ws, body.wall .ribbon .rb.act { display: none; }
@media (max-width: 1799px) { .ribbon .rb.rec b, .ribbon .rb.threat b { max-width: 210px; } .ribbon .rb.threat .k:last-child { display: none; } }
@media (max-width: 1499px) { .ribbon .rb.threat .k, .ribbon .rb.rec .k { display: none; } .ribbon .rb.rec b, .ribbon .rb.threat b { max-width: 170px; } .ribbon .rb { padding: 0 10px; } }
@media (max-width: 1349px) { .ribbon .rb.threat .exp { display: none; } .ribbon .rb.rec b { max-width: 140px; } .ribbon .rb.flex .k { display: none; } }
/* the side pane resizes by drag */
.side { position: relative; }
.side-handle { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; }
.side-handle::after { content: ""; position: absolute; right: 2px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background 0.12s; }
.side-handle:hover::after, body.resizing .side-handle::after { background: var(--accent); }
body.resizing { cursor: col-resize; user-select: none; } body.resizing #map { pointer-events: none; }
body.ws-plan .layers { width: 220px; } body.ws-plan .layers:not(.is-collapsed) .lyr-body { max-height: 40vh; }

/* ================================================================ space: hover cards and the right-click menu */
.tt .tt-figs { display: flex; gap: 14px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--hair); }
.tt .fg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tt .fk { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.tt .fv { font: 600 12px var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt .fg.st-GREEN .fv, .tt .fg.st-AMBER .fv, .tt .fg.st-RED .fv, .tt .fg.st-BLACK .fv { color: var(--st); }
.tt .tt-hint { display: block; margin-top: 6px; font-size: 9px; letter-spacing: 0.05em; color: var(--dim); }
.leaflet-tooltip.tt { max-width: 340px; white-space: normal; }
.cmenu { position: fixed; z-index: 1300; min-width: 232px; max-width: 320px; background: var(--s1); border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: 0 14px 44px var(--shadow-c); padding: 4px 0; font-size: 12px; }
.cmenu .cm-h { padding: 7px 12px 7px; border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
.cmenu .cm-h b { display: block; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cmenu .cm-h b .st { font: 600 9px var(--sans); letter-spacing: 0.08em; color: var(--on-st); background: var(--st); padding: 1px 5px; margin-left: 6px; vertical-align: 1px; border-radius: 1px; }
.cmenu .cm-h small { display: block; margin-top: 2px; color: var(--mute); font: 10.5px var(--mono); }
.cmenu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; text-align: left; padding: 6px 12px; color: var(--ink-2); line-height: 1.3; }
.cmenu button:hover, .cmenu button:focus-visible { background: var(--s2); color: var(--ink); outline: 0; }
.cmenu button kbd { font: 10px var(--mono); color: var(--dim); border: 1px solid var(--hair-2); border-radius: 2px; padding: 0 4px; }
.cmenu button.hot { color: var(--hostile); } .cmenu button.hot:hover { color: var(--hostile); }
.cmenu hr { border: 0; border-top: 1px solid var(--hair); margin: 4px 0; }

/* ================================================================ stage: labels give way, halos, selection that settles, ring hierarchy, relief */
.mk.lbl-hide .mk-label, .ring-lbl.lbl-hide .in { display: none; }
.mk.lbl-flip .mk-label { left: auto; right: 100%; transform: translate(-6px, -50%); text-align: right; }
.mk.left.lbl-flip .mk-label { left: 100%; right: auto; transform: translate(6px, -50%); text-align: left; }
.mk-asset .glyph, .mk-unit .sym, .mk-convoy svg { filter: drop-shadow(0 0 2px var(--bg)) drop-shadow(0 0 1px var(--bg)); }
.mk-node .ring-svg { filter: drop-shadow(0 0 2px var(--bg)); }
.mk.is-selected::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid var(--accent); border-radius: 50%; opacity: 0.55; pointer-events: none; animation: sel-settle 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1; }
.mk-node.is-selected::before { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.mk-pos.is-selected::before { display: none; }
.mk-asset.is-selected .glyph, .mk-unit.is-selected .sym { animation: sel-glow 0.9s ease-out 1; }
@keyframes sel-settle { 0% { transform: scale(2.4); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: scale(1); opacity: 0.55; } }
@keyframes sel-glow { 0% { filter: drop-shadow(0 0 12px var(--accent)) drop-shadow(0 0 4px var(--accent)); } 100% { filter: drop-shadow(0 0 4px var(--accent)); } }
path.cov-hostile.conf-hig { stroke-dasharray: 14 4; } path.cov-hostile.conf-med { stroke-dasharray: 7 5; } path.cov-hostile.conf-low { stroke-dasharray: 2 5; stroke-opacity: 0.7; }
.ring-lbl.cov-hostile .in em { font-style: normal; color: var(--mute); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; margin-left: 4px; }
#map[data-zoom="far"] .ring-lbl.cov-hostile .in em { display: none; }
.leaflet-tile-pane .base-hill { mix-blend-mode: soft-light; filter: contrast(1.6) brightness(1.1); pointer-events: none; }
.basemaps .shade { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .mk.is-selected::before, .mk-asset.is-selected .glyph, .mk-unit.is-selected .sym, .ribbon .pulse { animation: none; } }

/* ================================================================ form: charts, KPI tiles, daylight canvas, print */
.chart .g { stroke: var(--hair); } .chart .track { fill: var(--s2); } .chart .hatch { fill: var(--bad); opacity: 0.85; }
.chart .lead { fill: var(--ink); } .chart .lg-bar { fill: var(--ok); }
.chart .sub { font-size: 10px; fill: var(--dim); } .chart .sub.bad { fill: var(--bad); } .chart .v { font: 600 12px var(--mono); }
.chart .lbl.bad { fill: var(--bad); }
.gantt-wrap { margin: 2px 0 10px; } .gantt-wrap:empty { display: none; }
.gantt .h { stroke: var(--ink); stroke-width: 1.2; } .gantt .last { stroke: var(--bad); stroke-dasharray: 3 3; }
.gantt .ph { fill: var(--mute); opacity: 0.85; } .gantt .ph-strike { fill: var(--warn); } .gantt .ph-advance { fill: var(--accent); } .gantt .ph-hold { fill: var(--ok); } .gantt .ph-ready { fill: var(--mute); }
.gantt .in { font: 500 10px var(--sans); fill: var(--on-st); } .gantt .mv { fill: var(--accent); stroke: var(--s0); stroke-width: 1.5; } .gantt .dec { fill: var(--ink); } .gantt .dec.late { fill: var(--bad); }
.esc-wrap { margin: 0 0 10px; } .esc.esc-list { display: none; } .hostile-blk .esc-wrap + .esc-list { display: none; }
.ladder-chart .floor { stroke: var(--ink-2); stroke-width: 1.5; } .ladder-chart .floor.cur { stroke: var(--accent); stroke-width: 2; } .ladder-chart .riser { stroke: var(--hair-2); }
.ladder-chart .p { fill: var(--hostile); opacity: 0.45; } .ladder-chart .p.mid { opacity: 0.75; } .ladder-chart .p.hi { opacity: 1; }
.ladder-chart .cur { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; } .ladder-chart .opt { fill: rgba(214, 160, 63, 0.1); stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 2; }
.ladder-chart .tag { font: 600 9px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; } .ladder-chart .tag.cur { fill: var(--accent); } .ladder-chart .tag.opt { fill: var(--warn); }
.ladder-chart .n { font: 600 11px var(--mono); fill: var(--mute); } .ladder-chart .pv { font: 600 10px var(--mono); fill: var(--ink); } .ladder-chart .cap { font-size: 10px; fill: var(--mute); }
.kpi .k-spark { margin-top: 6px; } .kpi .k-spark svg { display: block; }
.kpi .k-trend { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font: 500 11px var(--mono); color: var(--ok); vertical-align: 3px; }
.kpi .k-trend svg path { fill: currentColor; } .kpi .k-trend.down svg { transform: rotate(180deg); } .kpi .k-trend.bad { color: var(--bad); } .kpi .k-trend.flat { color: var(--dim); }
.kpi .k-trend .eq { display: inline-block; width: 8px; height: 2px; background: currentColor; }
:root[data-theme="light"] .leaflet-tile-pane .base-tiles { filter: saturate(0.4) brightness(1.02); }
:root[data-theme="light"] .leaflet-tile-pane .base-hill { mix-blend-mode: multiply; opacity: 0.35 !important; filter: contrast(1.2); }
:root[data-theme="light"] #map[data-basemap="terrain"] .base-tiles { filter: saturate(0.5); } :root[data-theme="light"] #map[data-basemap="imagery"] .base-tiles { filter: brightness(0.95) saturate(0.7); }
:root[data-theme="light"] .mk-asset .glyph .f { fill: color-mix(in srgb, var(--st) 22%, var(--s0)); }
@media print {
  :root { --bg: #ffffff; --s0: #ffffff; --s1: #f6f7f9; --s2: #e9ecf0; --hair: #cfd5dc; --hair-2: #b8c0ca; --ink: #111; --ink-2: #222; --mute: #444; --dim: #666; --accent: #1a6fb0; --ok: #1f8a5b; --warn: #a8720c; --bad: #c23b2c; --crit: #555; --hostile: #c23b2c; }
  html, body { height: auto; overflow: visible; background: #fff; }
  .frame { display: block; height: auto; min-height: 0; }
.top, .ribbon, .side, .dock, .rail, .strip, .layers, .tools, #map, .legend, .cmenu, #intro, .alerts-pop, .clock-pop, .more-pop, #brief, .board-nav, .board-head .btn, .board-head button, .actions, .note-toggle { display: none !important; }
  .board { position: static; display: block; height: auto; background: #fff; }
  .board-head { height: auto; padding: 0 0 8px; border-bottom: 1px solid #000; }
  .board-body { display: block; padding: 0; overflow: visible; }
  .board-body > * { margin-bottom: 12px; break-inside: avoid; }
  .panel, .kpis, .card { break-inside: avoid; }
  .note { display: block !important; color: #444; }
  a { color: inherit; text-decoration: none; }
}

/* ================================================================ hands: handles, drop, undo, watch approvals, tour, motion */
.plan-h { background: none !important; border: 0 !important; cursor: grab; } .plan-h:active { cursor: grabbing; }
.plan-h i { display: block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; background: var(--s0); border: 2px solid var(--accent); box-shadow: 0 0 0 2px var(--bg); transition: transform 0.15s; }
.plan-h:hover i { transform: scale(1.25); }
.plan-h.plan-mid i { border-width: 1.5px; border-color: var(--accent); opacity: 0.7; background: var(--bg); } .plan-h.plan-mid:hover i { opacity: 1; }
.plan-h.plan-move i { border-radius: 2px; background: var(--accent); border-color: var(--s0); cursor: move; }
.undo-redo { margin-left: auto; display: inline-flex; gap: 4px; } .undo-redo .btn-sm:disabled { opacity: 0.35; cursor: default; }
body.dragging-unit .plan-obj { stroke-width: 3; stroke-dasharray: none; fill-opacity: 0.14; }
body.dragging-unit #plan { outline: 1px dashed var(--accent); outline-offset: -4px; }
[data-select^="unit:"][draggable="true"] { cursor: grab; }
#agent-watch li { position: relative; flex-wrap: wrap; } #agent-watch .w-act { display: flex; flex: 0 0 100%; gap: 6px; margin: 4px 0 2px 18px; } #agent-watch .w-act .btn-sm { white-space: nowrap; }
#agent-watch li.is-done > span { color: var(--ok); } #agent-watch li.is-failed > span { color: var(--bad); }
#agent-watch li.is-gone, .proposal.is-gone { opacity: 0; transform: translateX(8px); transition: opacity 0.18s, transform 0.18s; }
.tour { position: fixed; inset: 0; z-index: 1400; } .tour .t-mask { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour.t-first .t-hole, .tour.t-first .t-card { transition: none; }
.tour .t-hole { transition: x 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), y 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.25s, height 0.25s; }
.tour .t-card { position: absolute; width: 340px; background: var(--s0); border: 1px solid var(--hair-2); border-top: 2px solid var(--accent); border-radius: var(--r); padding: 14px 16px 12px; box-shadow: 0 20px 60px var(--shadow-c); transition: left 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tour .t-n { font: 500 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.tour h3 { font-size: 15px; font-weight: 600; margin: 4px 0 6px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.tour p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.tour .t-acts { display: flex; gap: 6px; align-items: center; margin-top: 12px; } .tour .t-sp { flex: 1; }
body.touring .cmenu { display: none; }
/* motion: panes rise in, figures pulse once */
.side-pane.is-on > * { animation: rise 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.side-pane.is-on > *:nth-child(2) { animation-delay: 0.03s; } .side-pane.is-on > *:nth-child(3) { animation-delay: 0.06s; } .side-pane.is-on > *:nth-child(4) { animation-delay: 0.09s; } .side-pane.is-on > *:nth-child(n+5) { animation-delay: 0.12s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fig-pulse { animation: fig-pulse 0.9s ease-out 1; } @keyframes fig-pulse { 0% { color: var(--accent); text-shadow: 0 0 10px var(--accent-soft); } 100% { color: inherit; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .side-pane.is-on > *, .fig-pulse, .tour .t-hole, .tour .t-card { animation: none; transition: none; } }

/* ================================================================ wall: zero chrome, cycling boards, the ticker */
body.wall .rail-btn, body.wall .ctl, body.wall #btn-brief, body.wall #btn-palette, body.wall .alerts, body.wall #btn-help, body.wall #btn-reset, body.wall .tools, body.wall .legend, body.wall #board-close, body.wall .pop-btn, body.wall .side-handle { display: none !important; }
body.wall .top { gap: 22px; } body.wall .wordmark b { font-size: 17px; } body.wall .live { font-size: 13px; }
body.wall .ribbon { font-size: 13.5px; } body.wall .ribbon .rb { height: 36px; padding: 0 18px; } body.wall .ribbon .rung { font-size: 12.5px; padding: 4px 8px; } body.wall .ribbon .rb .k { font-size: 11px; } body.wall .ribbon .exp { width: 70px; height: 5px; }
body.wall .board-head { height: 40px; } body.wall .board-head h2 { font-size: 12px; } body.wall .board-nav button { font-size: 12.5px; }
body.wall .kpi .k-value { font-size: 30px; } body.wall .board-body { padding: 14px 16px 20px; }
.wall-progress { display: none; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }
body.wall .wall-progress { display: block; } .wall-progress.run { animation: wall-run var(--period, 20s) linear 1 forwards; }
@keyframes wall-run { from { width: 0; } to { width: 100%; } }
.ticker { display: none; align-items: center; gap: 16px; height: 40px; padding: 0 0 0 16px; overflow: hidden; font-size: 13px; color: var(--ink-2); }
body.wall .boards-bar { display: none; } body.wall .ticker { display: flex; }
.ticker .tk-h { flex: 0 0 auto; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding-right: 16px; border-right: 1px solid var(--hair); white-space: nowrap; }
.ticker .tk-track { flex: 1 1 auto; overflow: hidden; display: flex; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker .tk-run { display: inline-flex; gap: 40px; padding-right: 40px; animation: tk-move var(--dur, 40s) linear infinite; }
.ticker .tk-track:hover .tk-run { animation-play-state: paused; }
.ticker .tk { display: inline-flex; align-items: center; gap: 8px; } .ticker .tk i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.ticker .tk.sv-RED i, .ticker .tk.sv-BLACK i { background: var(--bad); } .ticker .tk.sv-AMBER i { background: var(--warn); } .ticker .tk.sv-GREEN i { background: var(--ok); } .ticker .tk.sv-HOSTILE i { background: var(--hostile); }
@keyframes tk-move { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker .tk-run { animation: none; } .wall-progress.run { animation: none; width: 100%; } }
/* pop-outs */
.pop-btn { color: var(--dim); } .pop-btn:hover { color: var(--ink); }
.side-tabs .side-pop { flex: 0 0 auto; margin-left: auto; padding: 0 10px; } .side-tabs .side-pop .ic { width: 13px; height: 13px; }
.board-head .pop-btn { margin-left: auto; } .board-head .pop-btn + .btn { margin-left: 8px; }
body.pop .top, body.pop .ribbon, body.pop .rail, body.pop .strip, body.pop .layers, body.pop .tools, body.pop .legend, body.pop .map-wrap, body.pop .side-handle, body.pop .pop-btn, body.pop #board-close, body.pop .side-pop { display: none !important; }
body.pop .frame { display: block; height: 100vh; }
body.pop-board .board { position: fixed; inset: 0; display: flex; } body.pop-board .side { display: none; }
body.pop-side .side { position: fixed; inset: 0; width: auto; border: 0; } body.pop-side .board { display: none !important; }
body.pop .side-tabs { justify-content: center; }
/* tablet: the pane is a bottom sheet, touch targets grow */
@media (max-width: 1080px) {
  .frame { grid-template-columns: 1fr; grid-template-rows: 48px 1fr 40vh auto; grid-template-areas: "top" "map" "side" "dock"; }
  .side { position: static; transform: none; width: auto; border-left: 0; border-right: 0; border-top: 1px solid var(--hair); box-shadow: none; }
  .rail { left: 0; }
  .side-handle { display: none; }
  .side-tabs button, .tools button, .boards-bar button, .layers button, .btn, .btn-sm { min-height: 36px; }
  .ribbon .rb.threat, .ribbon .rb .k, .ribbon .ws { display: none; }
  .top { gap: 8px; padding: 0 10px; } .alerts, .lbl-txt, .wordmark span { display: none; }
  .layers { width: 232px; max-height: 50%; }
  .legend { display: none; }
  body.wall .frame { grid-template-columns: 1fr; grid-template-rows: 48px 34px 1fr 40vh 40px; grid-template-areas: "top" "ribbon" "map" "board" "ticker"; }
  body.wall .rail { display: none; } body.wall .board { border-left: 0; border-top: 1px solid var(--hair); }
}
/* Urdu labels on the chrome */
:root { --urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", "Geeza Pro", "Arial Unicode MS", var(--sans); }
body.lang-ur .top button, body.lang-ur .top .lbl-txt, body.lang-ur .side-tabs button, body.lang-ur #boards-bar button, body.lang-ur #boards-bar .lbl, body.lang-ur .board-nav button, body.lang-ur #board-title, body.lang-ur .tools button, body.lang-ur .ribbon .k, body.lang-ur .ribbon .ws button, body.lang-ur .layers button, body.lang-ur .layers .lyr-head b, body.lang-ur .layers label, body.lang-ur .lyr-force header b, body.lang-ur .lyr-cat header b, body.lang-ur .basemaps button, body.lang-ur .undo-redo button, body.lang-ur .wordmark span { font-family: var(--urdu); letter-spacing: 0; text-transform: none; line-height: 1.7; }
body.lang-ur .side-tabs button, body.lang-ur #boards-bar button, body.lang-ur .board-nav button { font-size: 13px; }

@media (max-width: 900px) { #live-text { display: none; } #scenario-select { width: 128px; } .wordmark b { font-size: 14px; } .top { gap: 6px; } }

/* the brief closes on its own cross */
.brief .b-acts { display: inline-flex; align-items: center; gap: 4px; }
.brief .b-close { width: 26px; height: 26px; font-size: 18px; line-height: 1; color: var(--mute); border-radius: var(--r); } .brief .b-close:hover { color: var(--ink); background: var(--s2); }

/* ================================================================ the agent's cards and its layer */
.chat-head-acts { display: inline-flex; gap: 6px; align-items: center; }
.acard { margin-top: 10px; border: 1px solid var(--hair-2); border-left: 2px solid var(--st, var(--accent)); border-radius: var(--r); padding: 10px 12px 10px; background: var(--s1); font-size: 12.5px; }
.acard.st-ACCENT { --st: var(--accent); } .acard.st-HOSTILE { --st: var(--hostile); }
.acard .ac-h { display: flex; align-items: baseline; gap: 10px; } .acard .ac-h b { font-weight: 600; color: var(--ink); font-size: 13px; flex: 1 1 auto; }
.acard .ac-kind { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st, var(--mute)); font-weight: 600; }
.acard .ac-score { font-weight: 600; color: var(--ok); font-size: 14px; }
.acard .ac-sub { color: var(--mute); font-size: 11.5px; margin-top: 2px; }
.acard .ac-verdict { margin: 8px 0 0 !important; color: var(--ink); }
.acard .ac-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 14px; margin-top: 10px; }
.acard .ac-kpi { display: grid; gap: 1px; } .acard .ac-kpi .k { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } .acard .ac-kpi b { font: 600 18px/1.15 var(--sans); color: var(--st, var(--ink)); } .acard .ac-kpi small { color: var(--mute); font-size: 11px; }
.acard .ac-kpi.st-ACCENT b { color: var(--ink); }
.acard .ac-tbl { margin-top: 10px; font-size: 11.5px; } .acard .ac-tbl th { font-size: 9.5px; } .acard .ac-tbl tr.is-rec td { color: var(--ink); background: color-mix(in srgb, var(--ok) 10%, transparent); } .acard .ac-tbl tr[data-coa] { cursor: pointer; } .acard .ac-tbl tr[data-coa]:hover td, .acard .ac-tbl tr.is-on td { background: var(--s2); }
.acard .ac-items { margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 5px; } .acard .ac-items li { display: flex; gap: 8px; align-items: baseline; margin: 0 !important; } .acard .ac-items li i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); position: relative; top: -1px; }
.acard .ac-items li.sv-RED i, .acard .ac-items li.sv-BLACK i { background: var(--bad); } .acard .ac-items li.sv-AMBER i { background: var(--warn); } .acard .ac-items li.sv-GREEN i { background: var(--ok); } .acard .ac-items li.sv-HOSTILE i { background: var(--hostile); }
.acard .ac-why { margin: 8px 0 0 !important; padding-left: 16px !important; color: var(--ink-2); } .acard .ac-why li { margin: 2px 0; }
.acard .ac-esc { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-top: 8px; font-size: 11.5px; color: var(--ink-2); } .acard .ac-esc .k { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } .acard .ac-esc small { flex: 0 0 100%; color: var(--mute); }
.acard .ac-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.acard .ac-note { margin: 8px 0 0 !important; color: var(--dim); font-size: 11px; }
.msg .acts.done { border-left-color: var(--ok); } .msg .acts.done .ok { color: var(--ok); } .msg .acts.done .bad { color: var(--bad); }
.dec-lbl.agent .in { color: var(--accent); border-color: var(--accent); } .dec-lbl.warn .in { color: var(--warn); border-color: rgba(214, 160, 63, 0.5); }
.agent-hl { animation: sel-settle 0.9s ease-out 1; }
body.ws-agent .chat { font-size: 13px; } body.ws-agent .msg { font-size: 13px; }


/* ================================================================ target folders, briefs, tidy chatter */
.acard .ac-img { margin: 10px 0 0; } .acard .ac-img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--s2); } .acard .ac-img figcaption { font-size: 10.5px; color: var(--dim); margin-top: 4px; }
.acard .ac-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 16px; margin-top: 10px; }
.acard .k { display: block; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 3px; } .acard .k.hostile { color: var(--hostile-ink); }
.acard .ac-list { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 3px; } .acard .ac-list li { margin: 0 !important; line-height: 1.4; } .acard .ac-list li small { display: block; color: var(--mute); font-size: 11px; }
.acard .ac-p { margin: 0 !important; color: var(--ink-2); font-size: 12px; line-height: 1.45; } .acard .ac-p em { color: var(--accent); font-style: normal; }
.acard .ac-sec { margin-top: 10px; }
.acard .ac-react { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } .acard .ac-react ul, .d-b .ac-react ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 4px; } .acard .ac-react li, .d-b .ac-react li { font-size: 12px; line-height: 1.4; color: var(--ink-2); padding-left: 10px; position: relative; margin: 0 !important; } .acard .ac-react li::before, .d-b .ac-react li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: var(--hair-2); } .acard .ac-react > div:first-child li::before, .d-b .ac-react > div:first-child li::before { background: var(--hostile); }
.d-b .ac-react { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .d-b .ac-react .k { display: block; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 3px; } .d-b .ac-react .k.hostile { color: var(--hostile-ink); }
.acard .ac-tl, .d-b .ac-tl { margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 3px; } .acard .ac-tl li, .d-b .ac-tl li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 11.5px; color: var(--ink-2); margin: 0 !important; } .acard .ac-tl .mono, .d-b .ac-tl .mono { color: var(--accent); }
.acard .ac-backing { margin-top: 10px; } .acard .ac-backing summary { cursor: pointer; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); } .acard .ac-backing ul { margin: 6px 0 0 !important; padding: 0 !important; list-style: none !important; display: grid; gap: 4px; } .acard .ac-backing li { font-size: 11.5px; color: var(--ink-2); margin: 0 !important; } .acard .ac-backing li small { display: block; color: var(--dim); font-size: 10.5px; }
@media (max-width: 1080px) { .acard .ac-react { grid-template-columns: 1fr; } }

/* the agent's pins: the picture's own items, named */
.case-pt.ag i { width: 9px; height: 9px; border: 2px solid var(--accent); background: var(--s0); border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); }
.case-pt.ag.hostile i { border-color: var(--hostile); } .case-pt.ag.fmn i { border-radius: 2px; }
.case-pt.ag .in { color: var(--ink); font-weight: 600; background: var(--glass); padding: 1px 6px; border-radius: 2px; border: 1px solid var(--hair-2); } .case-pt.ag.hostile .in { color: var(--hostile-ink); }
.case-pt.ag .in small { font-weight: 400; color: var(--mute); }

/* ================================================================ the intelligence layer: passes, signals, dependencies */
.acard .ac-passes { display: grid; gap: 10px; margin-top: 10px; } .acard .ac-passes.two { grid-template-columns: 1fr 1fr; }
.acard .ac-imgwrap { position: relative; } .acard .ac-imgwrap img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--s2); filter: saturate(0.8) contrast(1.05); }
.acard .ann { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(226, 101, 92, 0.18); border: 1.5px solid var(--hostile); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); display: grid; place-items: center; } .acard .ann b { font: 700 10px var(--mono); color: #fff; }
.acard .ann::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(226, 101, 92, 0.5); border-radius: 50%; }
.acard .ac-passtag { position: absolute; left: 6px; top: 6px; font: 500 9.5px var(--mono); letter-spacing: 0.04em; color: #fff; background: rgba(4, 6, 10, 0.7); padding: 2px 6px; border-radius: 2px; }
.acard .pass figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: var(--mute); margin-top: 5px; } .acard .pass figcaption b { color: var(--hostile-ink); font-family: var(--mono); margin-right: 3px; } .acard .pass figcaption em { flex: 0 0 100%; color: var(--ink-2); font-style: normal; }
.acard .ac-act { display: flex; align-items: center; gap: 10px; } .acard .ac-act svg { display: block; } .acard .ac-act small { color: var(--mute); font-size: 11px; }
.acard .ac-list.sig li { display: grid; grid-template-columns: 52px 1fr; gap: 2px 8px; } .acard .ac-list.sig li small { grid-column: 2; }
.src { display: inline-block; font: 600 9px var(--mono); letter-spacing: 0.06em; padding: 1px 5px; border-radius: 2px; background: var(--s2); color: var(--ink-2); border: 1px solid var(--hair-2); vertical-align: 1px; }
.src.IMINT { color: var(--accent); border-color: rgba(90, 180, 230, 0.4); } .src.SIGINT { color: var(--warn); border-color: rgba(214, 160, 63, 0.4); } .src.OSINT { color: var(--ok); border-color: rgba(63, 174, 124, 0.4); } .src.HUMINT { color: var(--hostile-ink); border-color: rgba(226, 101, 92, 0.4); }
.acard .ac-links { display: flex; flex-wrap: wrap; gap: 6px; } .acard .ac-links .lk { display: grid; text-align: left; padding: 4px 8px; border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--s2); color: var(--ink); font-size: 11.5px; } .acard .ac-links .lk small { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); } .acard .ac-links .lk:hover { border-color: var(--accent); }
.acard .pill { margin-left: auto; }
@media (max-width: 1080px) { .acard .ac-passes.two { grid-template-columns: 1fr; } }

/* imagery, large */
.acard img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 1500; background: rgba(4, 6, 10, 0.78); display: grid; place-items: center; padding: 24px; }
.lightbox .lb-card { width: min(1200px, 96vw); background: var(--s0); border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); overflow: hidden; }
.lightbox .lb-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--hair); font: 500 11px var(--mono); letter-spacing: 0.04em; color: var(--mute); }
.lightbox .lb-img { position: relative; background: #000 url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><path d=%22M0 20h40M20 0v40%22 stroke=%22%23222833%22/></svg>'); aspect-ratio: 3 / 2; max-height: 74vh; } .lightbox .lb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox .ann { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(226, 101, 92, 0.2); border: 2px solid var(--hostile); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4); display: grid; place-items: center; } .lightbox .ann b { font: 700 12px var(--mono); color: #fff; } .lightbox .ann::after { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(226, 101, 92, 0.5); border-radius: 50%; }
.lightbox .lb-cap { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 12px; font-size: 12px; color: var(--mute); } .lightbox .lb-cap b { color: var(--hostile-ink); font-family: var(--mono); margin-right: 3px; } .lightbox .lb-cap em { flex: 0 0 100%; color: var(--ink-2); font-style: normal; }
.lightbox .lb-state { margin-left: auto; margin-right: 12px; color: var(--dim); font-size: 10.5px; }

/* ================================================================ terrain in 3D */
.terrain { position: absolute; inset: 0; z-index: 870; display: grid; grid-template-columns: 1fr 340px; background: var(--bg); }
.terrain .t3-map { position: relative; min-width: 0; } .terrain .t3-map canvas { outline: none; }
.terrain .t3-side { border-left: 1px solid var(--hair); background: var(--s0); overflow-y: auto; padding: 0 0 14px; font-size: 12.5px; }
.terrain .t3-h { padding: 12px 14px 10px; border-bottom: 1px solid var(--hair); display: grid; gap: 2px; } .terrain .t3-h b { font-size: 15px; font-weight: 600; }
.terrain .t3-block { padding: 10px 14px 0; } .terrain .t3-block .k { display: block; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; } .terrain .t3-block .k.hostile { color: var(--hostile-ink); }
.terrain .t3-block b { display: block; font-weight: 600; color: var(--ink); } .terrain .t3-block small { display: block; color: var(--mute); font-size: 11.5px; }
.terrain .t3-block ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.terrain .t3-tl { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; } .terrain .t3-tl li { display: block; color: var(--dim); font-size: 11.5px; transition: color 0.2s; } .terrain .t3-tl li.on { color: var(--ink-2); } .terrain .t3-tl li.on .mono { color: var(--accent); }
.terrain .t3-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.terrain .t3-note { padding: 10px 14px 0; color: var(--dim); font-size: 11px; line-height: 1.45; }
.terrain .t3-top { position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 6px; } .terrain .t3-top .btn { background: var(--glass); } .terrain .t3-top .btn[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.terrain.no-side { grid-template-columns: 1fr; } .terrain.no-side .t3-side { display: none; }
.terrain .t3-clock { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 2; background: var(--glass); border: 1px solid var(--hair-2); border-radius: var(--r); padding: 4px 10px; font-size: 12px; color: var(--accent); }
.terrain .maplibregl-ctrl-group { background: var(--glass); border: 1px solid var(--hair-2); box-shadow: none; } .terrain .maplibregl-ctrl-group button + button { border-top: 1px solid var(--hair); } .terrain .maplibregl-ctrl button span { filter: invert(0.85); }
body.wall .terrain { grid-template-columns: 1fr; } body.wall .terrain .t3-side { display: none; }
/* the drone feed */
.feed { position: absolute; left: 12px; bottom: 12px; z-index: 865; width: 440px; background: var(--glass); border: 1px solid var(--hair-2); border-radius: var(--r); box-shadow: 0 16px 48px var(--shadow-c); overflow: hidden; }
.feed .feed-h { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--hair); } .feed .feed-h .kind { font-size: 10px; } .feed .feed-tag { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.feed .feed-acts { margin-left: auto; display: inline-flex; gap: 2px; } .feed .feed-acts button { font: 600 10.5px var(--mono); padding: 2px 7px; border: 1px solid var(--hair-2); border-radius: 2px; color: var(--mute); } .feed .feed-acts button.is-on { color: var(--ink); background: var(--s2); }
.feed .feed-view { position: relative; aspect-ratio: 4 / 3; background: #000; } .feed .feed-map { position: absolute; inset: 0; background: #000; }
.feed[data-mode="IR"] .feed-tiles { filter: grayscale(1) contrast(1.45) brightness(1.1) invert(1); } .feed .feed-tiles { filter: saturate(0.6) contrast(1.05); }
.feed .feed-hud { position: absolute; inset: 0; z-index: 1000; pointer-events: none; font: 500 10.5px/1.5 var(--mono); color: #d8f0d0; text-shadow: 0 0 2px #000, 0 0 4px #000; }
.feed .hud-l { position: absolute; left: 10px; top: 8px; } .feed .hud-r { position: absolute; right: 10px; top: 8px; text-align: right; }
.feed .hud-x { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; } .feed .hud-x::before, .feed .hud-x::after { content: ""; position: absolute; background: rgba(216, 240, 208, 0.85); } .feed .hud-x::before { left: 0; right: 0; top: 50%; height: 1px; } .feed .hud-x::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.feed .feed-view::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px); pointer-events: none; }
.feed .feed-box { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 1.5px solid #ff8a80; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); } .feed .feed-box::after { content: "TGT"; position: absolute; left: 0; top: -14px; font: 600 9px var(--mono); color: #ff8a80; }
.feed .rec { display: inline-flex; align-items: center; gap: 5px; color: #ff8a80; } .feed .rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff5252; animation: blink 1s infinite; }
@media (max-width: 1080px) { .feed { width: min(440px, calc(100% - 24px)); } .terrain { grid-template-columns: 1fr; } .terrain .t3-side { display: none; } }

/* the terrain panel: every item picks, every item switches */
.terrain .t3-it { display: grid; grid-template-columns: 1fr 22px; align-items: start; gap: 6px; border-radius: var(--r); }
.terrain .t3-pick { display: grid; text-align: left; padding: 4px 6px; border-radius: var(--r); color: inherit; width: 100%; } .terrain .t3-pick:hover { background: var(--s2); } .terrain .t3-it.is-on .t3-pick { background: var(--s2); box-shadow: inset 2px 0 0 var(--accent); } .terrain .t3-it.hostile.is-on .t3-pick { box-shadow: inset 2px 0 0 var(--hostile); }
.terrain .t3-it.is-off .t3-pick { opacity: 0.45; }
.terrain .t3-eye { color: var(--dim); font-size: 11px; padding: 4px 0; } .terrain .t3-eye:hover { color: var(--ink); } .terrain .t3-it.hostile .t3-eye { color: var(--hostile-ink); } .terrain .t3-it.is-off .t3-eye { color: var(--dim); }
.terrain .t3-title { text-align: left; color: inherit; padding: 0; } .terrain .t3-title:hover b { color: var(--accent); }
.terrain .t3-tl li button { display: grid; grid-template-columns: 58px 1fr; gap: 8px; text-align: left; width: 100%; padding: 3px 4px; border-radius: var(--r); color: inherit; line-height: 1.35; } .terrain .t3-tl li button:hover { background: var(--s2); }

/* ================================================================ the site monitor: detections, baseline, observations, the hold */
:root { --det: #3fc9c1; } :root[data-theme="light"] { --det: #0e8f88; }
.acard .det { position: absolute; border: 1.5px solid var(--det); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: auto; }
.acard .det i { position: absolute; left: -1px; top: -16px; font: 500 9px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--det); background: rgba(6, 10, 14, 0.7); padding: 2px 4px; border-radius: 2px; white-space: nowrap; }
.acard .det-more { position: absolute; transform: translate(-50%, 0); font: 500 9px/1 var(--mono); color: var(--det); background: rgba(6, 10, 14, 0.7); padding: 2px 5px; border-radius: 2px; white-space: nowrap; }
.lightbox .det { position: absolute; border: 2px solid var(--det); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.acard .ac-baseline { margin-top: 4px; } .acard .ac-baseline .bars { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 34px; padding-bottom: 1px; border-bottom: 1px solid var(--hair); }
.acard .ac-baseline .bars i { flex: 1; background: var(--hair-2); border-radius: 1px 1px 0 0; min-height: 2px; } .acard .ac-baseline .bars i.now { background: var(--accent); } .acard .ac-baseline.is-above .bars i.now { background: var(--warn); }
.acard .ac-baseline .bars u { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--mute); }
.acard .ac-baseline small { display: block; margin-top: 4px; font-size: 11px; color: var(--mute); } .acard .ac-baseline small b { color: var(--warn); font-weight: 600; }
.acard .ac-tbl { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; } .acard .ac-tbl th { font: 500 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 2px 6px 4px 0; } .acard .ac-tbl td { padding: 3px 6px 3px 0; border-top: 1px solid var(--hair); color: var(--ink-2); } .acard .ac-tbl .num { text-align: right; font-family: var(--mono); }
.acard .ac-tbl tr.up .chg { color: var(--hostile-ink); font-weight: 600; } .acard .ac-tbl tr.down .chg { color: var(--ok); }
.obs-list li.obs, tr.obs { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: start; }
.acard .obs-list li.obs { padding: 6px 0; border-top: 1px solid var(--hair); } .acard .obs-list li.obs .t { grid-column: 2; color: var(--ink-2); } .acard .obs-list li.obs small { grid-column: 2; color: var(--mute); font-size: 11px; } .acard .obs-list li.obs .obs-acts { grid-column: 2; display: flex; gap: 4px; margin-top: 4px; }
.pill.obs-st { font: 500 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--hair-2); border-radius: 3px; color: var(--mute); }
.obs.st-new .obs-st { color: var(--warn); border-color: var(--warn); } .obs.st-reviewed .obs-st { color: var(--ok); border-color: var(--ok); } .obs.st-escalated .obs-st { color: var(--hostile-ink); border-color: var(--hostile); } .obs.st-dismissed { opacity: 0.6; }
.obs-acts .btn-sm[disabled] { opacity: 0.4; } .obs-acts .btn-sm.is-on { opacity: 1; }
tr.obs { display: table-row; } tr.obs .obs-acts { display: flex; gap: 4px; }
.acard .ac-p.hold, .dz-sel .note.gate.hold { color: var(--warn); } .dz-sel .note.gate { margin: 6px 0 0; }
.dz-opt .rec.held { color: var(--warn); }
/* small chips side by side: class labels on hover only; the lightbox and single chips keep them */
.acard .ac-passes.two .det i { display: none; } .acard .ac-passes.two .ac-imgwrap:hover .det i { display: block; }

/* ================================================================ scorecard · force explorer · synchronisation */
.acard .sc-wrap { overflow-x: auto; margin-top: 8px; }
.acard .ac-tbl.sc th, .acard .ac-tbl.sc td { padding: 5px 8px 5px 0; vertical-align: top; } .acard .ac-tbl.sc td .dim { font-size: 10.5px; }
.acard .ac-tbl.sc tr.is-opt td { background: var(--accent-soft, rgba(90, 160, 220, 0.08)); } .acard .ac-tbl.sc td.lead-cell { color: var(--ink); font-weight: 500; } .acard .ac-tbl.sc td.lead-cell small { color: var(--accent); font-weight: 600; }
.acard .ac-tbl.sc td.exp { max-width: 220px; } .acard .ac-tbl.sc td.num.lead { color: var(--warn); } .acard .ac-tbl.sc td .why { max-width: 200px; }
.acard .ac-tbl.sc tr.is-out td { opacity: 0.6; }
/* the tripwires: a hard decision reads red, a caution amber; one item per line with its figure */
.acard .ac-warn, .acts .ac-warn { margin: 0; padding: 6px 12px; border-top: 1px solid var(--hair-2); border-left: 2px solid var(--st, var(--hair-2)); display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; } .acard .ac-warn.is-full, .acts .ac-warn { display: block; }
.ac-warn.st-RED { --st: var(--red, #e2655c); } .ac-warn.st-AMBER { --st: var(--warn); }
.ac-warn .k { display: block; font: 600 10.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--st); margin-bottom: 0; white-space: nowrap; } .ac-warn.is-full .k, .acts .ac-warn .k { margin-bottom: 4px; }
.ac-warn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .ac-warn li { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: baseline; font-size: var(--fs-cap); color: var(--ink); }
.ac-warn li i { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); align-self: center; } .ac-warn li.w-hard i { background: var(--red, #e2655c); } .ac-warn li b { color: var(--mute); font-weight: 500; font-size: 11px; }
.acts.is-hard { border-left: 2px solid var(--red, #e2655c); } .acts .ac-warn { padding-left: 0; border-top: 0; border-left: 0; }
.acts .btn-sm.is-hardact { border-color: var(--red, #e2655c); } .acts .btn-sm.is-confirm { background: var(--red, #e2655c); color: #fff; border-color: var(--red, #e2655c); }
.ac-guid li small { display: block; color: var(--mute); font-style: italic; }
.btn-plus { font: 500 20px/1 var(--mono); padding-bottom: 2px; }
.msg.guid-line small { color: var(--mute); }
.dz-opt.is-hard > button::after { content: ' · hard'; color: var(--red, #e2655c); font-size: 10.5px; }
.pill.vd { font: 500 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--st, var(--hair-2)); border-radius: 3px; color: var(--st, var(--mute)); }
.dz-opt .vd { font: 500 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .dz-opt .vd-viable { color: var(--ok); } .dz-opt .vd-exposed, .dz-opt .vd-slow, .dz-opt .vd-held { color: var(--warn); } .dz-opt .vd-fails { color: var(--bad); } .dz-opt .vd-weather { color: var(--warn); }
.sync-wrap { overflow-x: auto; margin-top: 6px; }
table.sync { border-collapse: collapse; font-size: 11px; min-width: 560px; } table.sync th { font: 500 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--hair-2); white-space: nowrap; } table.sync tbody th { color: var(--ink-2); border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); text-transform: none; letter-spacing: 0; font: 500 11px var(--sans); }
table.sync td { padding: 3px 4px; border-bottom: 1px solid var(--hair); border-left: 1px dashed var(--hair); vertical-align: top; min-width: 64px; } table.sync td i { display: block; font-style: normal; font-size: 10.5px; line-height: 1.3; color: var(--ink-2); padding: 1px 4px; margin: 1px 0; border-left: 2px solid var(--hair-2); background: var(--s1); border-radius: 2px; white-space: nowrap; }
table.sync td i.k-order { border-left-color: var(--accent); } table.sync td i.k-salvo { border-left-color: var(--hostile); } table.sync td i.k-disperse, table.sync td i.k-move { border-left-color: var(--ok); } table.sync td i.k-assess { border-left-color: var(--warn); }

/* ================================================================ enemy hypotheses · our air defence */
.acard .hyps { display: grid; gap: 8px; margin-top: 8px; }
.acard .hyp { border: 1px solid var(--hair); border-left: 2px solid var(--hair-2); border-radius: var(--r); padding: 8px 10px; } .acard .hyp.is-marked { border-left-color: var(--hostile); }
.acard .hyp-h { display: grid; grid-template-columns: 56px auto 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; } .acard .hyp-h .lik { height: 6px; background: var(--s2); border-radius: 3px; overflow: hidden; } .acard .hyp-h .lik i { display: block; height: 100%; background: var(--hostile); } .acard .hyp-h b { font: 600 12px var(--mono); color: var(--ink); } .acard .hyp-h .t { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.pill.hyp-l { font: 500 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--hostile); color: var(--hostile-ink); border-radius: 3px; white-space: nowrap; }
.acard .ac-grid.two { grid-template-columns: 1fr 1fr; } .acard .ev li { font-size: 11.5px; } .acard .ev.for li { border-left: 2px solid var(--hostile); padding-left: 6px; } .acard .ev.against li { border-left: 2px solid var(--ok); padding-left: 6px; }
.acard .tg li small b, .acard .cover li.gap small b { color: var(--warn); font-weight: 600; } .acard .cover li.ok small { color: var(--ok); }

/* collection tasks and effects */
.pill.task-st { font: 500 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--st, var(--hair-2)); color: var(--st, var(--mute)); border-radius: 3px; }
.acard.k-effects .ac-tbl td:first-child { color: var(--ink-2); }

/* disclosure and products */
.pill.mark { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; color: #fff; background: #7a1f1f; } .pill.mark.partner { background: #1f5a7a; }
.acard .ok-list li::before { content: "✓ "; color: var(--ok); } .acard .held-list li::before { content: "— "; color: var(--warn); } .acard .held-list li small { display: block; color: var(--mute); font-size: 10.5px; }

/* product viewer: a printable product inside the app; paper document under a dark bar, above every map layer */
.prodv { position: fixed; inset: 0; z-index: 1600; display: grid; grid-template-columns: 1fr minmax(640px, 880px); }
.prodv-scrim { background: rgba(6, 9, 12, .5); }
.prodv-panel { display: grid; grid-template-rows: auto 1fr; background: #fff; border-left: 1px solid #2b3138; box-shadow: -12px 0 40px rgba(0,0,0,.35); animation: prodv-in .18s ease-out; }
@keyframes prodv-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .prodv-panel { animation: none; } }
.prodv-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #1c2128; border-bottom: 1px solid #2b3138; color: #e6e9ed; }
.prodv-title { font: 600 12.5px var(--sans); color: #e6e9ed; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch; }
.prodv-mark { font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; color: #fff; background: #7a1f1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; } .prodv-mark.partner { background: #1f5a7a; }
.prodv-sp { flex: 1; }
.prodv-bar button { font: 500 12px var(--sans); padding: 5px 11px; border-radius: 3px; border: 1px solid #3a414a; background: #2b3138; color: #e6e9ed; cursor: pointer; } .prodv-bar button:hover { background: #343b44; } .prodv-bar button[data-prodv-print] { background: #275f8c; border-color: #275f8c; } .prodv-bar button[data-prodv-print]:hover { background: #2f6ea0; } .prodv-bar button[data-prodv-close] { font-size: 15px; line-height: 1; padding: 3px 9px; } .prodv-bar button:focus-visible { outline: 2px solid #8fb8dc; outline-offset: 1px; }
.prodv-frame { border: 0; width: 100%; height: 100%; background: #fff; }
@media (max-width: 1100px) { .prodv { grid-template-columns: 0 1fr; } }
/* compact release and product cards */
.acard .ac-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 2px; font-size: 12px; color: var(--ink-2, var(--ink)); } .acard .ac-facts b { font-weight: 600; }
/* THE GLANCE AND THE DETAIL. Closed, a card shows its head band, one sub line, a two-line verdict, its instrument and
   its foot band. Every block marked data-detail, every row past the fifth of a capped list or table, every column
   marked col-more and every sub-line inside a cell waits behind the one Details toggle in the foot band. */
.acard[data-fold="closed"] [data-detail] { display: none !important; }
.acard[data-fold="closed"] [data-cap] > :nth-child(n+6), .acard[data-fold="closed"] [data-cap] > tbody > tr:nth-child(n+6), .acard[data-fold="closed"] .ac-tbl tr.is-out { display: none; }
.acard[data-fold="closed"] .ac-tbl .col-more { display: none; }
.acard[data-fold="closed"] .ac-tbl td .dim { display: none; }
/* open, a wide table's text columns keep a floor and the table scrolls sideways rather than wrapping a word a line */
.acard[data-fold="open"] .ac-tbl.sc td.txt, .acard[data-fold="open"] .ac-tbl.sc th.txt { min-width: 120px; }
.acard[data-fold="closed"] > .ac-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acard[data-fold="closed"] .ac-verdict { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acard .ac-fold { margin-left: auto; color: var(--mute); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acard .ac-fold::after { content: "▾"; margin-left: 6px; font-size: 9px; color: var(--dim); }
.acard[data-fold="open"] .ac-fold::after { content: "▴"; }
.acard .ac-fold:hover { color: var(--ink); }
.acard .hyp .ac-facts { margin: 4px 0 0; font-size: var(--fs-cap); }
.acard .ac-tbl td.num.lead { color: var(--warn); }

/* drone missions: map layer, feed detections, mission and detections cards */
.drone-ico { display: flex; align-items: center; gap: 4px; color: #8fb8dc; font: 600 9px var(--mono); letter-spacing: .06em; white-space: nowrap; filter: drop-shadow(0 0 3px rgba(0,0,0,.8)); } .drone-ico span { display: inline-block; font-size: 16px; color: #fff; transform-origin: 50% 50%; } .drone-ico b { color: #e6e9ed; }
.msn-tip { font: 11px var(--mono) !important; }
.det-popup .leaflet-popup-content { margin: 8px 10px; font: 12px var(--sans); } .det-chip { position: relative; margin: 6px 0; width: 300px; max-width: 100%; } .det-chip img { width: 100%; display: block; border-radius: 2px; } .det-chip i { position: absolute; border: 1.5px solid #3ff0e0; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.feed-dets { position: absolute; inset: 0; pointer-events: none; } .feed-det { position: absolute; border: 1.5px solid #3ff0e0; box-shadow: 0 0 0 1px rgba(0,0,0,.6); } .feed-det span { position: absolute; left: 0; bottom: 100%; font: 600 9px var(--mono); letter-spacing: .05em; color: #3ff0e0; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 3px #000; } .feed-det.launcher, .feed-det.aircraft, .feed-det.SAM-launcher { border-color: #ff6a3d; } .feed-det.launcher span, .feed-det.aircraft span, .feed-det.SAM-launcher span { color: #ff6a3d; }
.acard .msn-bar { height: 3px; background: var(--s2); border-radius: 2px; margin: 6px 0 2px; overflow: hidden; } .acard .msn-bar i { display: block; height: 100%; background: var(--accent, #8fb8dc); }
.acard .msn-route td small { display: block; color: var(--mute); font-size: 10.5px; } .acard .msn-route td small .lk { color: var(--warn); } .acard .msn-route tr.now td { color: var(--ink); background: rgba(143,184,220,.08); }
.acard .ac-facts .warn b { color: var(--warn); } .acard .ac-facts .ok { color: var(--ok); }
.acard .det-grid, .msn-dets .det-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 8px 0 4px; } .acard .det, .msn-dets .det { display: grid; gap: 3px; cursor: pointer; position: relative; } .acard .det input, .msn-dets .det input { position: absolute; left: 4px; top: 4px; z-index: 2; margin: 0; } .acard .det-img, .msn-dets .det-img { position: relative; display: block; aspect-ratio: 4 / 3; background: #0b0f14; border-radius: 2px; overflow: hidden; border: 1px solid var(--hair); } .acard .det-img img, .msn-dets .det-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .acard .det-img i, .msn-dets .det-img i { position: absolute; border: 1.5px solid #3ff0e0; box-shadow: 0 0 0 1px rgba(0,0,0,.5); } .acard .det-img.none, .msn-dets .det-img.none { display: grid; place-items: center; color: var(--mute); font: 10px var(--mono); } .acard .det input:checked ~ .det-img, .msn-dets .det input:checked ~ .det-img { outline: 2px solid var(--accent, #8fb8dc); } .acard .det-l, .msn-dets .det-l { font-size: 11px; line-height: 1.25; } .acard .det-l small, .msn-dets .det-l small { display: block; color: var(--mute); font-size: 10px; }
.acard .recs li { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; } .acard .recs li .rec-t { display: grid; gap: 2px; flex: 1; min-width: 0; } .acard .recs li small { color: var(--mute); } .acard .recs li .btn-sm { flex: none; margin-top: 1px; }
.btn-sm.primary { background: var(--accent, #275f8c); color: #fff; border-color: transparent; }

/* mission console and the drone on the map */
.wp { display: grid; place-items: center; } .wp i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #0b0f14; border: 1px solid #8fb8dc; color: #8fb8dc; font: 600 8px var(--mono); font-style: normal; } .wp.done i { background: #8fb8dc; color: #0b0f14; }
.drone-ico { display: grid; place-items: center; overflow: visible !important; } .drone-ico .uav { display: block; width: 30px; height: 30px; transform-origin: 50% 50%; filter: drop-shadow(0 0 4px rgba(0,0,0,.9)); transition: transform .3s linear; } .drone-ico b { position: absolute; left: 34px; top: 8px; white-space: nowrap; color: #e6e9ed; font: 600 9px var(--mono); letter-spacing: .06em; text-shadow: 0 0 4px #000, 0 0 2px #000; }
.feed-seeing { position: absolute; left: 10px; right: 10px; bottom: 8px; font: 10px var(--mono); color: #cfe9e6; text-shadow: 0 0 3px #000; letter-spacing: .02em; pointer-events: none; line-height: 1.35; }
.msn-head { display: grid; gap: 10px; } .msn-title b { font-size: 15px; letter-spacing: .02em; } .msn-title .pill { margin-left: 6px; vertical-align: middle; } .msn-title .lead { margin: 6px 0 0; }
.msn-ctl { display: flex; flex-wrap: wrap; gap: 6px; } .msn-ctl .btn-sm.is-on { background: var(--accent, #275f8c); color: #fff; border-color: transparent; } .btn-sm.danger { border-color: var(--hostile, #c0392b); color: var(--hostile, #c0392b); }
.msn-telem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; } .msn-telem > div { display: grid; gap: 1px; } .msn-telem .k { font-size: 9px; letter-spacing: .1em; color: var(--mute); } .msn-telem b { font: 600 16px/1.1 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msn-telem small { color: var(--mute); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msn-tl-bar { position: relative; height: 22px; background: var(--s1); border: 1px solid var(--hair); border-radius: 3px; overflow: hidden; } .msn-tl-bar i { position: absolute; top: 0; bottom: 0; border-right: 1px solid var(--hair); background: var(--s2); } .msn-tl-bar i.done { background: rgba(143,184,220,.28); } .msn-tl-bar i.now { background: rgba(63,240,224,.28); } .msn-tl-bar i.search, .msn-tl-bar i.orbit { border-top: 2px solid #3ff0e0; } .msn-tl-bar i span { position: absolute; left: 4px; top: 4px; font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; max-width: calc(100% - 6px); text-overflow: clip; } .msn-tl-bar i[style*='width:0'] span, .msn-tl-bar i.search span, .msn-tl-bar i.orbit span { font-size: 8px; letter-spacing: .04em; } .msn-now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; box-shadow: 0 0 4px #fff; } .msn-tl-lbl { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--mute); margin-top: 4px; }
.msn-seeing .lead { margin: 0 0 6px; } .msn-inview { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; } .msn-inview .chip { font: 600 10px var(--mono); padding: 2px 6px; border-radius: 2px; border: 1px solid var(--hair); color: var(--ink-2); } .msn-inview .chip.st-RED { border-color: var(--hostile); color: var(--hostile); } .msn-inview .chip.st-AMBER { border-color: var(--warn); color: var(--warn); }
.msn-dets .det.inview .det-img { outline: 1.5px solid #3ff0e0; } .msn-dets .det-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.msn-route tr.done td { color: var(--mute); } .side-pane .msn-route td, .side-pane .msn-route th { font-size: 11.5px; }
.msn-pick { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 16px 0; } .msn-pick .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 4px; background: var(--mute); } .msn-pick .dot.airborne { background: #3ff0e0; } .msn-pick .dot.complete { background: var(--ok); }

.msn-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px 0; } .msn-top .msn-pick { padding: 0; } .msn-top-acts { display: flex; gap: 4px; margin-left: auto; } .btn-sm.quiet { background: transparent; }

/* ================================================================ the ask bar across the foot of the screen
   Docked, the composer leaves the chat pane and spans the whole width, so a question can be asked while the
   Decide, Mission or Selected pane is open; the left column then carries only the conversation and its cards. */
.dock { grid-area: dock; display: none; background: var(--s0); border-top: 1px solid var(--hair); box-shadow: 0 -8px 24px -18px var(--shadow-c); }
body.dock-on .dock { display: block; }
.dock-in { display: flex; align-items: center; gap: 12px; padding: 9px 14px 10px; }
.dock-lbl { flex: 0 0 auto; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.dock-slot { flex: 1 1 auto; min-width: 0; display: flex; }
.dock-slot .chat-form { flex: 1 1 auto; align-items: center; padding: 0; border-top: 0; }
.dock-slot .chat-form textarea { height: 36px; min-height: 36px; max-height: 108px; padding: 9px 11px; }
.dock-slot .chat-form .btn { align-self: stretch; }
.dock-x { flex: 0 0 auto; font-size: 15px; line-height: 1; padding: 3px 8px; color: var(--dim); }
.dock-x:hover { color: var(--ink); }
#btn-dock.is-on { color: var(--ink); background: var(--s2); }
body.wall .dock, body.pop .dock { display: none !important; }
@media (max-width: 1080px) { .dock-lbl { display: none; } .dock-in { padding: 8px 10px; gap: 8px; } }

/* the conversation column: the head reads on one line, and the cards fold by the width of the PANE, not the window */
.chat-head { gap: 8px; }
.chat-head .kind { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-acts { flex: 0 0 auto; }
.chat, #mission-body { container-type: inline-size; container-name: pane; }
@container pane (max-width: 520px) {
  .acard .ac-react, .acard .ac-passes.two, .acard .ac-grid.two { grid-template-columns: 1fr; }
  .acard .det-grid, .msn-dets .det-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .msn-telem { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------- the legend opens on demand */
.legend { padding: 0; gap: 0; max-width: 300px; }
.legend .lg-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 9px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.legend .lg-h:hover { color: var(--ink); }
.legend .lg-h .lg-n { margin-left: auto; font: 10px var(--mono); color: var(--dim); }
.legend .lg-h::after { content: "▴"; font-size: 8px; color: var(--dim); }
.legend.is-open .lg-h::after { content: "▾"; }
.legend .lg-body { display: none; gap: 4px; padding: 2px 10px 8px; border-top: 1px solid var(--hair); }
.legend.is-open .lg-body { display: grid; }

/* the header carries the name on the left and the controls on the right, with the flipped columns */
.top-right .rail-btn { margin-right: 2px; }
.more-pop .mi-row.mi-measure, .more-pop .mi-row.mi-clock { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.more-pop .mi-sel { display: flex; }
.more-pop .clock-ctl { position: relative; }
.more-pop .clock-pop { position: static; margin-top: 6px; box-shadow: none; }
body.dock-on { --dock-h: 56px; }   /* the status rail and anything else pinned to the foot stops at the ask bar */

/* ---------------------------------------------------------------- the task tabs come and go with their contents */
.side-tabs button { position: relative; }
.side-tabs button:has(.tab-x) { padding-right: 18px; }
.side-tabs .tab-x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font: 13px/1 var(--sans); font-style: normal; color: var(--dim); padding: 2px 4px; border-radius: 2px; opacity: 0; transition: opacity 0.12s, color 0.12s; cursor: pointer; }
.side-tabs button:hover .tab-x, .side-tabs button.is-on .tab-x { opacity: 1; }
.side-tabs .tab-x:hover { color: var(--ink); background: var(--s2); }
.dz-rest .dz-ways { display: flex; flex-wrap: wrap; gap: 6px; }
.dz-rest .note { margin-top: 8px; }

/* ================================================================================================
   THE INSTRUMENT SET · production pass
   One card anatomy, one label scale, one elevation ladder. Everything below is structure rather
   than decoration: a head band that names the card and carries its status, a body of figures
   banded by hairlines, a foot band for the actions, and a 2 px status spine down the left edge.
   Surfaces are separated by value, not by shadow; nothing here introduces a colour of its own.
   ================================================================================================ */

/* ---------------------------------------------------------------- labels: one scale, one tracking */
.kind, .k-label, .blk-h h2, .panel h3, .d-b h4, .sys-head, .lyr-head b, .fact .fl, .g-label, .finding .k,
.side-tabs button, .boards-bar .lbl, .lyr-cat header b, .log .lv, .tbl th, .matrix th, .board-head h2, .cat,
.acard .k, .acard .ac-kpi .k, .dock-lbl, .ribbon .rb .k, .terrain .t3-block .k {
  font-size: var(--fs-label); letter-spacing: var(--tr-label); font-weight: 500;
}
.acard .ac-kind, .plan-params .fl, .reason dt, .tt .fk { letter-spacing: 0.11em; }

/* ---------------------------------------------------------------- the card */
.acard { margin-top: 12px; padding: 0; overflow: hidden; background: var(--card-bg); border: 1px solid var(--hair); border-left: 2px solid var(--st, var(--accent)); border-radius: var(--r); font-size: var(--fs-body); }
.acard > * { padding-left: 12px; padding-right: 12px; }
.acard > *:last-child { padding-bottom: 11px; }
/* head band: kind, title, figure. The band is a surface of its own, so the card reads as an object. */
.acard > .ac-h { display: flex; align-items: baseline; gap: 10px; padding-top: 9px; padding-bottom: 8px; background: var(--card-bg); border-bottom: 1px solid var(--hair); }
.acard > .ac-h:has(+ .ac-sub) { border-bottom: 0; padding-bottom: 2px; }
.acard > .ac-h + .ac-sub { padding-bottom: 9px; margin-top: 0; background: var(--card-bg); border-bottom: 1px solid var(--hair); }
.acard .ac-kind { flex: 0 0 auto; font-weight: 600; font-size: var(--fs-micro); color: var(--st, var(--mute)); }
.acard .ac-kind::after { content: ""; display: inline-block; width: 1px; height: 9px; margin-left: 10px; background: var(--hair-2); vertical-align: -1px; }
.acard .ac-h b { flex: 1 1 auto; min-width: 0; font: 600 var(--fs-title)/1.25 var(--sans); letter-spacing: -0.005em; color: var(--ink); }
.acard .ac-score { flex: 0 0 auto; font: 600 15px/1 var(--mono); color: var(--ink); }
.acard .ac-sub { color: var(--mute); font-size: var(--fs-cap); }
/* body: sections band by hairline, and the rule runs the full width of the card */
.acard > .ac-sec, .acard > .ac-react, .acard > .ac-backing, .acard > .ac-grid, .acard > .sc-wrap, .acard > .hyps, .acard > .ac-passes { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.acard > .ac-h + .ac-grid, .acard > .ac-sub + .ac-grid, .acard > .ac-h + .ac-sec, .acard > .ac-sub + .ac-sec, .acard > .ac-h + .ac-passes, .acard > .ac-sub + .ac-passes { border-top: 0; }
.acard .ac-verdict { color: var(--ink); line-height: 1.5; }
/* figures inside a card: a strip of cells divided by hairlines, full bleed */
.acard > .ac-kpis { padding-left: 0; padding-right: 0; margin-top: 0; gap: 0; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); border-bottom: 1px solid var(--hair); }
.acard .ac-kpi { padding: 9px 12px 10px; border-right: 1px solid var(--hair); gap: 2px; }
.acard .ac-kpi:last-child { border-right: 0; }
.acard .ac-kpi .k { color: var(--mute); }
.acard .ac-kpi b { font: 500 17px/1.15 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.acard .ac-kpi.st-GREEN b, .acard .ac-kpi.st-AMBER b, .acard .ac-kpi.st-RED b, .acard .ac-kpi.st-BLACK b, .acard .ac-kpi.st-HOSTILE b { color: var(--st); }
.acard .ac-kpi small { color: var(--mute); font-size: 10.5px; line-height: 1.3; }
/* foot band: what the card lets you do */
.acard > .ac-acts { margin-top: 11px; padding-top: 8px; padding-bottom: 8px; background: var(--card-bg); border-top: 1px solid var(--hair); }
.acard > .ac-acts:last-child { padding-bottom: 8px; }
.acard > .ac-note { margin-top: 0 !important; padding-top: 7px; padding-bottom: 9px; color: var(--dim); font-size: 10.5px; line-height: 1.45; background: var(--card-bg); }
.acard > .ac-acts + .ac-note { border-top: 0; padding-top: 0; margin-top: -2px !important; }
.acard .ac-tbl { margin-top: 0; }
.acard > .scroll-x { padding-left: 0; padding-right: 0; margin-top: 10px; }
.acard > .scroll-x .ac-tbl th:first-child, .acard > .scroll-x .ac-tbl td:first-child { padding-left: 12px; }
.acard > .scroll-x .ac-tbl th:last-child, .acard > .scroll-x .ac-tbl td:last-child { padding-right: 12px; }
.acard .ac-tbl th { background: var(--s0); border-bottom: 1px solid var(--hair); padding: 5px 8px 5px 0; color: var(--mute); font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: 0.06em; }
.acard .ac-tbl td { border-top: 0; border-bottom: 1px solid var(--hair); }
.acard .ac-tbl tr:last-child td { border-bottom: 0; }
/* the name takes the width it needs and the figures take none: a column of numbers should be as
   narrow as its widest number, never as wide as its heading */
.acard .ac-tbl th:not(:first-child):not(.txt) { text-align: right; width: 1%; white-space: nowrap; }
.acard .ac-tbl td.num { width: 1%; white-space: nowrap; }
/* a text column (a verdict, a release level, what a unit brings) takes the width it needs and wraps as prose */
.acard .ac-tbl th.txt, .acard .ac-tbl td.txt { width: auto; text-align: left; white-space: normal; }
.acard .ac-tbl td:first-child, .acard .ac-tbl th:first-child { width: auto; min-width: 128px; }
.acard .ac-tbl td.num:first-child, .acard .ac-tbl th.num:first-child { width: 1%; min-width: 0; text-align: right; }   /* a numbered first column is a figure, not a name */
.acard .ac-tbl td.lead-cell { color: var(--ink); font-weight: 500; line-height: 1.3; }
/* a detection box is a box: it never reads as a stray mark, and nothing escapes the chip */
.acard .ac-imgwrap { overflow: hidden; border-radius: var(--r); }
.acard .det { min-width: 9px; min-height: 8px; }

/* ---------------------------------------------------------------- how current the picture is, always on the bar */
.asof { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; padding-right: 12px; border-right: 1px solid var(--hair); white-space: nowrap; }
.asof i { width: 6px; height: 6px; border-radius: 50%; background: var(--crit); flex: 0 0 auto; }
.asof .dtg { font: 500 12.5px/1 var(--mono); letter-spacing: 0.03em; color: var(--ink-2); }
body.live-on .asof i { background: var(--ok); }
body.replay .asof i { background: var(--warn); } body.replay .asof .dtg { color: var(--warn); }
@media (max-width: 1199px) { .asof { display: none; } }

/* ---------------------------------------------------------------- narrow columns keep their manners */
.board-nav { overflow-x: auto; scrollbar-width: none; }
.board-nav::-webkit-scrollbar { display: none; }
.board-nav button { white-space: nowrap; }
.gauge-cell .g-sub { max-width: 188px; line-height: 1.45; }
.gauge-cell .g-sub b { font-weight: 600; }
.gauges-row { gap: 10px 24px; justify-content: space-between; }

/* ---------------------------------------------------------------- panels and the figure strip on a board */
.panel { background: var(--s0); border-color: var(--hair); }
.panel > header { padding: 9px 14px 8px; }
.panel h3 { color: var(--mute); }
/* the figure strip: cells divided by a 1 px gap that shows the ground through, so a strip that wraps
   onto a second row is ruled in both directions without a single extra border */
/* no overflow clipping here: the strip is a grid item, and hiding its overflow lets the row it
   sits in collapse to nothing */
.kpis { padding: 0; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: var(--r); grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); }
.kpi { padding: 13px 18px 14px; margin: 0; border-right: 0; background: var(--s0); position: relative; }
.kpi:last-child { border-right: 0; }
.acard > .ac-kpis { gap: 1px; background: var(--hair); border-bottom: 1px solid var(--hair); }
.acard .ac-kpi { background: var(--s1); border-right: 0; }
.kpi::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 14px; width: 2px; background: var(--st, transparent); }
.kpi .k-label { color: var(--mute); }
.kpi .k-value { font: 500 var(--fs-fig)/1.1 var(--sans); letter-spacing: -0.015em; color: var(--ink); margin-top: 5px; }
.kpi.st-GREEN .k-value, .kpi.st-AMBER .k-value, .kpi.st-RED .k-value, .kpi.st-BLACK .k-value, .kpi.st-HOSTILE .k-value { color: var(--st); }
.kpi .k-note { color: var(--mute); font-size: var(--fs-cap); margin-top: 3px; line-height: 1.35; }
.kpi .k-spark { margin-top: 7px; opacity: 0.85; } .kpi .k-spark .spark { height: 20px; }
.board-body { gap: 14px; }

/* ---------------------------------------------------------------- controls: flat, hairline, one filled state */
.btn { background: transparent; border-color: var(--hair-2); color: var(--ink-2); }
.btn:hover { background: var(--s2); color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-st); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-sm { background: transparent; border-color: var(--hair-2); }
.btn-sm:hover { background: var(--s2); }
button:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.tbl tbody tr:hover td { background: var(--s1); }
.tbl th { letter-spacing: var(--tr-label); }

/* ---------------------------------------------------------------- the conversation column */
.msg.user { background: var(--s2); border: 1px solid var(--hair-2); color: var(--ink); }
.msg.bot { border-left-color: var(--hair-2); }
.chat-idle { margin: auto 0; display: grid; gap: 4px; justify-items: start; padding: 0 2px 18px; }
.chat-idle .ci-k { font: 500 var(--fs-label)/1 var(--sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--dim); }
.chat-idle b { font: 500 15px/1.2 var(--sans); color: var(--ink-2); }
.chat-idle .ci-s { font-size: var(--fs-cap); color: var(--dim); line-height: 1.5; max-width: 44ch; }
.chat:has(.msg) .chat-idle, .chat:has(.acard) .chat-idle { display: none; }

/* ================================================ the sequenced operation card
   Three phases as a rail, and the transition the sequence buys as the hero the eye lands on. */
.k-sequence .seq-hero { margin: 10px 12px 2px; padding: 11px 13px; background: var(--s0); border: 1px solid var(--hair); border-left: 2px solid var(--accent); border-radius: var(--r); }
.k-sequence .seq-hero .k { color: var(--mute); }
.k-sequence .seq-ba { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.k-sequence .seq-b { color: var(--bad); font: 600 13px var(--sans); }
.k-sequence .seq-a { color: var(--ok); font: 600 13px var(--sans); }
.k-sequence .seq-arrow { color: var(--accent); font-style: normal; font-size: 15px; }
.k-sequence .seq-rail { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; padding: 12px; }
.k-sequence .seq-ph { background: var(--s0); border: 1px solid var(--hair); border-top: 2px solid var(--st, var(--accent)); border-radius: var(--r); padding: 9px 10px 10px; }
.k-sequence .seq-ph-1 { --st: var(--series-potential); } .k-sequence .seq-ph-2 { --st: var(--warn); } .k-sequence .seq-ph-3 { --st: var(--bad); }
.k-sequence .seq-ph.is-held { opacity: 0.72; }
.k-sequence .seq-ph-h { display: flex; align-items: center; gap: 7px; }
.k-sequence .seq-n { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--st, var(--accent)); color: var(--on-st, #06090d); font: 700 10px var(--mono); flex: 0 0 auto; }
.k-sequence .seq-ph-h b { font-size: var(--fs-cap); letter-spacing: 0.01em; }
.k-sequence .seq-aim { margin: 6px 0 6px; font-size: var(--fs-cap); color: var(--ink-2); line-height: 1.35; }
.k-sequence .seq-means { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.k-sequence .seq-means li { font-size: var(--fs-cap); color: var(--ink); }
.k-sequence .seq-means small { color: var(--mute); }
.k-sequence .seq-note { margin: 6px 0 0; font-size: var(--fs-micro); color: var(--mute); line-height: 1.35; }
.k-sequence .seq-note.warn { color: var(--warn); }
.k-sequence .seq-join { align-self: center; width: 14px; height: 0; border-top: 2px dotted var(--hair-3); }
/* the rail stacks by the width of the PANE it sits in, not the window */
@container pane (max-width: 720px) { .k-sequence .seq-rail { grid-template-columns: 1fr; gap: 7px; } .k-sequence .seq-join { display: none; } }

/* ================================================================================================
   THE READING PASS · the type scale stepped up one notch (tokens at the top of the file), and the
   sizes the cards and the conversation had set below the scale brought up with it. Nothing here
   introduces a new size: every value sits on the scale or one step under it for small print.
   ================================================================================================ */
.msg { font-size: var(--fs-body); } body.ws-agent .chat, body.ws-agent .msg { font-size: 14px; }
.acard .ac-tbl { font-size: var(--fs-val); }
.acard .ac-p, .acard .ac-facts, .acard .ac-react li, .acard .ac-esc, .acard .ev li, .acard .ac-tl li, .acard .ac-backing li, .acard .ac-links .lk { font-size: var(--fs-val); }
.acard .ac-list li small, .acard .ac-kpi small, .acard .det-l, .acard .obs-list li.obs small, .acard .ac-tbl.sc td .dim, .acard .msn-route td small, .acard .ac-backing li small, .acard .held-list li small { font-size: 11.5px; }
.acard > .ac-note, .acard .ac-img figcaption, .acard .pass figcaption, .acard .ac-baseline small, .acard .ac-act small, .acard .recs li small { font-size: 11.5px; }
.acard .ac-kpi b { font-size: 19px; }
.acard .hyp-h .t { font-size: var(--fs-body); } .acard .hyp-h b { font-size: var(--fs-val); }
.pill.vd, .pill.obs-st, .pill.task-st, .pill.hyp-l, .pill.mark { font-size: 10.5px; }
.btn-sm { font-size: var(--fs-val); }
.acard .ac-tbl td { padding-top: 5px; padding-bottom: 5px; }

/* the manoeuvre balance: the two closing curves and the quadrant the verdict is judged under */
.ratio-chart { display: block; margin: 8px 0 4px; max-width: 100%; height: auto; }
.plan-quad { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.plan-quad .btn-sm { white-space: normal; text-align: left; }
.fgrid.man > div > .k { display: block; font-size: 11px; color: var(--mute); }
.fgrid.man > div > b { display: block; }
.fgrid.man > div > small { display: block; color: var(--mute); }

/* the effects graph: acts on one clock */
.seq-wrail { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.seq-wrow { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 8px; }
.seq-wname { font-size: 11px; color: var(--mute); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-wtrack { position: relative; height: 16px; background: var(--hair); border-radius: 3px; }
.seq-wbar { position: absolute; top: 0; height: 16px; border-radius: 3px; overflow: hidden; }
.seq-wbar span { font-size: 9px; padding: 0 4px; line-height: 16px; color: var(--on-st); white-space: nowrap; }
.seq-wbar.ok { background: var(--accent); } .seq-wbar.them { background: var(--hostile, var(--bad)); } .seq-wbar.short { background: repeating-linear-gradient(45deg, var(--warn), var(--warn) 4px, transparent 4px, transparent 8px); }

/* ---- wargame worksheet on the card: action -> reaction -> counteraction ---- */
.acard .wg-turns { margin-top: 6px; display: grid; gap: 10px; }
.acard .wg-turn { border: 1px solid var(--hair); border-radius: var(--r); padding: 8px 10px; background: color-mix(in srgb, var(--card-bg) 55%, var(--s0)); }
.acard .wg-move { font: 600 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.acard .wg-line { display: grid; grid-template-columns: 140px 1fr; gap: 8px; padding: 5px 0; align-items: baseline; }
.acard .wg-line + .wg-line { border-top: 1px solid var(--hair); }
.acard .wg-role { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.acard .wg-blue .wg-role { color: var(--accent); }
.acard .wg-red .wg-role { color: var(--hostile, #e2655c); }
.acard .wg-red.danger .wg-role { color: var(--warn); }
.acard .wg-body b { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.acard .wg-body small { display: block; color: var(--mute); font-size: 11px; margin-top: 1px; }
.acard .wg-window-row { margin-top: 7px; font-size: 11.5px; color: var(--ink-2); }
.acard .wg-window-row small { color: var(--mute); }
.acard .wg-dp { margin-top: 7px; padding: 5px 8px; border-left: 2px solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 11.5px; color: var(--ink); border-radius: 0 var(--r) var(--r) 0; }
.acard .wg-dp small { color: var(--mute); }

/* ---- wargame playback on the map: a timeline control and the animated sequence ---- */
.wg-timeline { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 900; width: min(580px, calc(100% - 32px)); background: var(--glass); border: 1px solid var(--hair-2); border-radius: 6px; padding: 8px 10px; backdrop-filter: blur(6px); box-shadow: 0 6px 24px var(--shadow-c); }
.wg-tl-head { display: flex; align-items: center; gap: 10px; }
.wg-tl-title { font-size: 12px; color: var(--ink); font-weight: 600; flex: 0 0 auto; }
.wg-tl-step { flex: 1 1 auto; font: 500 11px var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-tl-acts { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.wg-tl-acts button { width: 28px; height: 24px; border: 1px solid var(--hair-2); background: var(--s1); color: var(--ink-2); border-radius: var(--r); cursor: pointer; font-size: 11px; }
.wg-tl-acts button:hover { background: var(--s2); color: var(--ink); }
.wg-tl-dots { display: flex; gap: 4px; margin-top: 8px; }
.wg-dot { flex: 1 1 0; height: 6px; border: 0; border-radius: 3px; background: var(--hair-2); cursor: pointer; opacity: 0.55; padding: 0; }
.wg-dot.ours.is-on { background: #5ab4e6; opacity: 1; }
.wg-dot.theirs.is-on { background: #e2655c; opacity: 1; }
.wg-dot.is-now { height: 9px; margin-top: -1.5px; }
@keyframes wgpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.wg-arc.wg-now, .wg-window.wg-now { animation: wgpulse 1.2s ease-in-out infinite; }

/* ---- probability of attack: the matrix, the factor bars ---- */
.acard.k-probability .pb-grid { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; margin-top: 10px; }
@media (max-width: 560px) { .acard.k-probability .pb-grid { grid-template-columns: 1fr; } }
.acard .pb-matrix { display: block; background: var(--s2); border: 1px solid var(--hair); border-radius: var(--r); }
.acard .pb-cap { font-size: 10.5px; margin-top: 4px; }
.acard .pb-facs { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.acard .pb-fac { display: grid; grid-template-columns: 1fr 64px 40px; align-items: center; gap: 6px 8px; font-size: 11.5px; }
.acard .pb-fac .pb-fl { color: var(--ink-2); }
.acard .pb-fac .pb-fv { text-align: right; color: var(--ink); font-size: 11px; }
.acard .pb-fac small { grid-column: 1 / -1; color: var(--mute); font-size: 10px; line-height: 1.3; margin-top: -3px; }
.acard .pb-fbar { position: relative; height: 6px; background: var(--hair-2); border-radius: 3px; overflow: hidden; }
.acard .pb-fbar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
.acard .pb-fbar i.up { background: #e2655c; }
.acard .pb-fbar i.dn { background: #3fae7c; }

/* ======== the screens rail: structure only (the prototype's layout); colours unchanged for now ======== */
/* the screens rail is the working navigation; in the wall/brief layout the grid has no nav column, so the
   rail steps out of the way and the frame keeps its own areas. */
body.wall .nav-rail, body.ws-brief .nav-rail { display: none; }
body.wall .frame, body.ws-brief .frame { grid-template-columns: 1fr minmax(560px, 44%); }

/* the screens rail is the ONLY navigation: the in-panel tab bar is gone, so a screen never shows another
   screen's tab beside it (no Decide next to Chat). Each rail item opens exactly its own pane. */
.side-tabs { display: none !important; }

/* Default is the map alone: the side panel collapses and the map fills, as the prototype shows. Chat,
   Decide and Mission bring the panel back; nothing shows beside the map until a rail item asks for it. */
body.map-full { --side-w: 0px; }
body.map-full .side { display: none; }

/* when a screen is open the SCREENS rail squeezes to 60% — a thinner strip that still shows every term,
   so the map and the panel get the room. On Default the rail is full again. */
body.rail-min { --nav-w: 49px; }
body.rail-min .nr-brand { font-size: 7.5px; letter-spacing: 0.08em; }
body.rail-min .nr-items { padding: 8px 4px; gap: 1px; }
body.rail-min .nr-more { margin: 0 4px; }
body.rail-min .nr-item { padding: 8px 1px 7px; gap: 3px; }
body.rail-min .nr-ic { width: 17px; height: 17px; }
body.rail-min .nr-item > span { font-size: 8px; line-height: 1.05; }
.nav-rail, .nr-item, .nr-ic, .nr-item > span { transition: all 0.15s ease; }

/* the layers overlay is hidden until Layer tree opens it */
#layers { display: none; }
body.layers-on:not(.wall) #layers { display: flex; }

/* the top bar keeps to the prototype's minimum: identity on the left, the clock and the alerts bell on the
   right. The status-rail button and the whole ⋯ More menu (Brief, Find, Wall, Boards, Role, scenario,
   clock, decision brief, shortcuts, layout, other pictures, reset) are removed from the top bar — Find is
   on the CLI rail item, the boards open with B, the layouts from the rail. */
.top #btn-rail { display: none; }
.top .more { display: none !important; }

/* ---- clarify ask card: Claude-style clickable options, each re-asks on click ---- */
.acard.k-clarify .clarify-opts { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; }
.acard.k-clarify .clarify-opts .btn-sm { text-align: left; justify-content: flex-start; padding: 9px 12px; border: 1px solid var(--hair-2); border-radius: var(--r); background: var(--s1); color: var(--ink); }
.acard.k-clarify .clarify-opts .btn-sm:hover { background: var(--s2); border-color: var(--hair-3); }
.acard.k-clarify .clarify-opts .btn-sm small { color: var(--mute); }
.acard.k-clarify .clarify-other { opacity: 0.85; font-style: italic; }

/* Number grade chip under an answer: which figures are solid vs judgement (S0 · number grading) */
.ans-grade { display: inline-flex; align-items: center; gap: 5px; margin: 7px 0 1px; padding: 2px 8px; border: 1px solid var(--hair-2); border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--mute); background: var(--chrome-2); cursor: default; user-select: none; }
.ans-grade .g-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ans-grade.g-modelled { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--hair-2)); }
.ans-grade.g-sourced { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--hair-2)); }
.ans-grade.g-estimate, .ans-grade.g-reasoned { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--hair-2)); }
.ans-grade.g-flagged { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--hair-2)); background: color-mix(in srgb, var(--bad) 8%, var(--chrome-2)); }

/* ===== Agent network — the live call tree (public/js/agentnet.js) ===== */
#agentnet{ --an-panel:#FFFFFF; --an-ink:#16202B; --an-muted:#55606E; --an-line:#D5DAE1; --an-edge:#A9B2BE;
  --an-agent:#2D66C3; --an-engine:#0F6E5C; --an-audit:#55606E; --an-turn:#16202B; --an-answer:#17784A;
  --an-run:#A86200; --an-bad:#B42318; --an-ok:#17784A; --an-sel:#A86200 }
/* the pane shows ONLY when .is-on (the base .side-pane rule); never force display on the id selector */
html[data-theme="dark"] #agentnet{ --an-panel:#151B22; --an-ink:#E4E9EF; --an-muted:#9EA9B7; --an-line:#29323D; --an-edge:#4E5967;
  --an-agent:#5B9BF0; --an-engine:#34B596; --an-audit:#9EA9B7; --an-turn:#E4E9EF; --an-answer:#4FCF97;
  --an-run:#F2AA48; --an-bad:#F26B4B; --an-ok:#4FCF97; --an-sel:#F2AA48 }
@media (prefers-color-scheme:dark){ html:not([data-theme="light"]) #agentnet{ --an-panel:#151B22; --an-ink:#E4E9EF; --an-muted:#9EA9B7; --an-line:#29323D; --an-edge:#4E5967;
  --an-agent:#5B9BF0; --an-engine:#34B596; --an-audit:#9EA9B7; --an-turn:#E4E9EF; --an-answer:#4FCF97;
  --an-run:#F2AA48; --an-bad:#F26B4B; --an-ok:#4FCF97; --an-sel:#F2AA48 } }
#agentnet-body{ display:flex; flex-direction:column; min-height:0; height:100% }
.an-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; padding:8px 4px }
.an-title{ display:flex; align-items:center; gap:8px; font-weight:600 }
.an-live{ width:8px; height:8px; border-radius:50%; background:var(--an-muted) }
.an-live.on{ background:var(--an-ok); animation:an-blink 1.6s ease-in-out infinite }
@keyframes an-blink{ 50%{ opacity:.3 } }
.an-stat{ font-weight:400; color:var(--an-muted); font-variant-numeric:tabular-nums; font-size:12px }
.an-ctrl{ display:flex; gap:8px; align-items:center }
.an-chk{ display:inline-flex; gap:5px; align-items:center; color:var(--an-muted); font-size:12px }
.an-legend{ display:flex; flex-wrap:wrap; gap:10px; padding:4px; color:var(--an-muted); font-size:11px }
.an-legend span{ display:inline-flex; align-items:center; gap:5px }
.an-k{ width:11px; height:11px; border-radius:3px; display:inline-block }
.an-k.turn{ background:var(--an-turn) } .an-k.agent{ border-radius:50%; background:var(--an-agent) }
.an-k.engine{ background:var(--an-engine) } .an-k.audit{ border-radius:50%; background:transparent; border:2px solid var(--an-audit) }
.an-k.ans{ background:transparent; border:2px solid var(--an-answer) } .an-k.msg{ background:transparent; border-top:2px dashed var(--an-run); height:0; width:14px; border-radius:0 }
.an-body{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; border-top:1px solid var(--an-line) }
.an-stage{ flex:1 1 auto; min-height:140px; min-width:0; overflow:auto; position:relative }
.an-detail{ flex:0 0 auto; max-height:42%; min-width:0; overflow:auto; border-top:1px solid var(--an-line); padding:12px; font-size:13px }
#agentnet svg text{ font-family:inherit }
.an-lbl,.an-sub{ paint-order:stroke; stroke:var(--an-panel); stroke-width:4px; stroke-linejoin:round }
.an-lbl{ fill:var(--an-ink); font-size:13px } .an-lbl.code{ font-family:ui-monospace,Menlo,monospace; font-size:12px } .an-lbl.turn{ font-weight:600 }
.an-sub{ fill:var(--an-muted); font-size:11px; font-variant-numeric:tabular-nums } .an-sub.bad{ fill:var(--an-bad) }
.an-edge{ fill:none; stroke:var(--an-edge); stroke-width:1.5 } .an-edge.hl{ stroke:var(--an-sel); stroke-width:2.25 }
.an-xlink{ fill:none; stroke:var(--an-run); stroke-width:1.5; stroke-dasharray:5 4 } .an-xlink.retry{ stroke:var(--an-muted) }
.an-node{ cursor:pointer; outline:none } .an-node:focus-visible .an-selring{ visibility:visible!important }
.an-ring{ fill:none; stroke:var(--an-run); stroke-width:2; stroke-dasharray:4 4; animation:an-spin 1s linear infinite }
@keyframes an-spin{ to{ stroke-dashoffset:-16 } }
.an-selring{ fill:none; stroke:var(--an-sel); stroke-width:2 }
@media (prefers-reduced-motion:reduce){ .an-ring,.an-live.on{ animation:none } }
.an-detail h2{ font-size:15px; font-weight:600; margin:0 0 2px } .an-d-kind{ margin:0; color:var(--an-muted); font-size:12px }
.an-d-path{ margin:6px 0 0; font-size:11px; color:var(--an-muted) }
.an-d-sec{ margin-top:14px } .an-d-sec h3{ font-size:11px; font-weight:600; color:var(--an-muted); margin:0 0 5px } .an-d-sec p{ margin:0 }
.an-d-sec ul{ margin:0; padding-left:16px } .an-d-sec li{ margin:2px 0 }
.an-status{ display:inline-block; margin-top:8px; padding:2px 8px; border-radius:4px; font-size:12px; border:1px solid var(--an-line) }
.an-status.running{ color:var(--an-run); border-color:var(--an-run) } .an-status.ok,.an-status.resolved{ color:var(--an-ok); border-color:var(--an-ok) }
.an-status.rejected,.an-status.conflict{ color:var(--an-bad); border-color:var(--an-bad) }
.an-flag{ color:var(--an-run); font-weight:600 }
.an-chips{ display:flex; flex-wrap:wrap; gap:6px } .an-chip{ padding:2px 8px; border-radius:4px; font-size:12px; font-variant-numeric:tabular-nums }
.an-chip.m{ background:var(--an-agent); color:var(--an-panel) } .an-chip.s{ border:1px solid var(--an-muted) } .an-chip.e{ border:1px dashed var(--an-run); color:var(--an-run) }
.an-empty{ color:var(--an-muted) }

/* Answer prose: a short ~2-line lead above the cards (no "Disclaimer" label); the rest folds behind "More". */
.ans-lead p { margin: 0 0 6px; }
.ans-lead p:last-child { margin-bottom: 0; }
.ans-more { margin: 4px 0 8px; }
.ans-more > summary { cursor: pointer; list-style: none; font: 500 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 3px 0; display: inline-flex; align-items: center; gap: 6px; }
.ans-more > summary::-webkit-details-marker { display: none; }
.ans-more > summary::before { content: "\25B8"; font-size: 9px; }
.ans-more[open] > summary::before { content: "\25BE"; }
.ans-rest { padding-top: 4px; border-left: 1px solid var(--hair-2); padding-left: 12px; margin-top: 4px; }
.ans-rest p { margin: 0 0 6px; }
.ans-rest p:last-child { margin-bottom: 0; }

/* ── Minimal card polish (universal · no card logic) ───────────────────────────
   Quieter hierarchy: hairline-separated figures, de-emphasised lead prose, sections
   divided by a thin rule. The glance leads with the first section; the rest fold. */
.acard .ac-kpis { gap: 0; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--hair); }
.acard .ac-kpi { padding: 0 13px; border-left: 1px solid var(--hair); }
.acard .ac-kpi:first-child { padding-left: 0; border-left: 0; }
.acard .ac-kpi b { font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.acard .ac-kpi .k { letter-spacing: 0.06em; }
.acard .ac-sec { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--hair); }
.acard .ac-sec > .k { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.1em; color: var(--mute); margin-bottom: 9px; }
.acard .ac-p { color: var(--mute); font-size: 11.5px; line-height: 1.5; }
.acard .ac-list { gap: 7px; }

/* Agent network · a node's BACKING: how it was computed, its inputs and figures, the reasoning it rests on */
.an-detail{ max-height:58% }
.an-figs{ width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums }
.an-figs td{ padding:3px 6px 3px 0; border-bottom:1px solid var(--an-line); vertical-align:top }
.an-figs td.k{ color:var(--an-muted) } .an-figs td.v{ font-weight:600; color:var(--an-ink); text-align:right; white-space:nowrap } .an-figs td.g{ width:1%; white-space:nowrap }
.an-figs tr.an-src td{ border:0; border-bottom:1px solid var(--an-line); background:none; color:var(--an-muted); font:400 11.5px/1.35 inherit; font-family:inherit; padding:0 0 4px; white-space:normal }
.an-figs tr:has(+ tr.an-src) td{ border-bottom:0 }
.an-figs .an-chip{ padding:0 6px; font-size:11px }
.an-claims{ list-style:none; padding-left:0 !important } .an-claims li{ margin:4px 0 !important; line-height:1.4 }
.an-lik{ display:inline-block; margin-right:6px; padding:0 6px; border:1px solid var(--an-line); border-radius:4px; font-size:11px; color:var(--an-muted); text-transform:uppercase; letter-spacing:.04em }
.an-rests{ display:grid; gap:8px } .an-rest{ border:1px solid var(--an-line); border-radius:6px; padding:8px 10px; cursor:pointer } .an-rest:hover{ border-color:var(--an-edge) }
.an-rest > b{ display:block; font-size:13px; margin-bottom:2px } .an-rest p{ margin:2px 0 4px !important; font-size:12.5px }
.an-ev{ list-style:none; padding-left:0 !important } .an-ev q{ font-style:italic } .an-ev small{ color:var(--an-muted) }

/* an earlier answer on the map: its symbols stay, dimmed; its labels go (declutter) */
.case-pt.ag-earlier .in, .dec-lbl.ag-earlier { display: none !important; }
.case-pt.ag-earlier { opacity: 0.4; }