:root{
  --bg:#070b10;--panel:#101820;--line:#1c2836;--text:#eaf0f6;--muted:#8fa0b4;
  --houthi:#c45c26;--plc:#22c55e;--saudi:#1f8a7a;--contested:#e9c46a;--mixed:#457b9d;--accent:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter","Heebo","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif}
.top{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--line);align-items:center}
h1{margin:0;font-size:1.15rem}
.sub{margin:.15rem 0 0;color:var(--muted);font-size:.78rem}
.stamp{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.75rem;white-space:nowrap}
.pulse{width:.45rem;height:.45rem;border-radius:50%;background:#22c55e;animation:p 1.5s infinite}
.pulse.stale-amber{background:#f5b54a}.pulse.stale-red{background:#f87171}
@keyframes p{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}70%{box-shadow:0 0 0 8px transparent}}
.bars{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.55rem 1rem;border-bottom:1px solid var(--line)}
.bar{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.5rem .65rem}
.bar h3{margin:0;font-size:.72rem;font-weight:600;color:var(--muted)}
.bar .pct{font-size:1.35rem;font-weight:700;margin:.1rem 0;line-height:1.1}
.bar .note{display:none}
.track{height:4px;background:var(--t-surface-3,#182230);border-radius:99px;overflow:hidden;margin-top:.3rem}
.fill{height:100%}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.4rem 1rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.layers{display:flex;gap:.35rem;flex-wrap:wrap}
.layers button,.ghost,.more{background:var(--t-surface-2,#121a24);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem;font:inherit;cursor:pointer;font-size:.75rem}
.layers button.on{color:var(--t-strong,#fff);border-color:var(--t-line-strong,#334155);background:var(--t-surface-3,#1a2433)}
.ghost{border-radius:8px}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 8px var(--rail-w, 360px);align-items:stretch;min-height:0;height:var(--map-h)}
/* The map ends about three quarters down the screen on every screen, phone or desktop, so the start of what is below it shows (user, 18 Oct). 190px is the header and toolbar above it. */
:root{--map-h:max(300px, calc(74svh - 190px))}
.map-wrap{position:relative;min-height:0;height:100%;border-inline-end:1px solid var(--line);overflow:hidden}
#map{position:absolute;inset:0;background:var(--t-surface-1,#0a1018)}
/* Never scrolls. It is a key, read at a glance; a scrollbar over the map turns
   it into a widget and hides half the rows. The 94px it stops short of the top
   is the zoom buttons' corner (10px down, 63px tall) plus its own 12px off the
   bottom and a little air. When even this compact list would reach them,
   `renderLegend` measures and adds `.tight` below. */
.legend{position:absolute;z-index:500;left:10px;bottom:12px;max-height:calc(100% - 94px);overflow:hidden;background:var(--t-glass,rgba(8,12,18,.94));border:1px solid var(--line);border-radius:8px;padding:.4rem .5rem .35rem;font-size:.68rem;max-width:210px;line-height:1.3;user-select:none}
.legend .leg-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.legend .leg-title{color:var(--t-text,#c9d4e0);font-size:.66rem;font-weight:700;letter-spacing:.02em}
.legend .leg-collapse{
  background:transparent;border:0;color:var(--t-text-2,#a8bccf);font:inherit;font-size:1.25rem;line-height:1;
  cursor:pointer;padding:.1rem .34rem;border-radius:5px;margin:-.24rem -.26rem -.24rem 0;
  min-width:28px;min-height:26px;display:inline-flex;align-items:center;justify-content:center;
}
.legend .leg-collapse:hover{background:var(--t-surface-3,#1a2433);color:var(--t-text,#eaf0f6)}
/* `display:block` is load-bearing: the blanket `.legend div{display:flex}` rule
   below catches this wrapper too and lays the whole legend out as one
   horizontal row. */
.legend .leg-body{display:block;overflow:hidden;max-height:60vh;transition:max-height .18s ease,opacity .15s ease;opacity:1}
.legend.collapsed{padding-bottom:.45rem}
.legend.collapsed .leg-body{max-height:0;opacity:0;pointer-events:none}
.legend .leg-sec{color:var(--t-muted,#9aabbd);font-size:.6rem;font-weight:600;margin:.26rem 0 .08rem;letter-spacing:.02em}
.legend .leg-sec:first-child{margin-top:0}
/* Sits at the very top of the legend: one short line telling the reader the
   ticks are controls, not decoration. */
.legend .leg-hint{color:var(--t-muted,#8fa3b6);font-size:.58rem;margin:0 0 .22rem;line-height:1.25;padding-bottom:.2rem;border-bottom:1px solid var(--t-line,#1c2836)}
.legend .leg-item{
  display:flex;align-items:center;gap:.38rem;margin:.02rem 0;padding:.1rem .12rem;
  width:100%;min-height:22px;background:transparent;border:0;border-radius:6px;color:var(--text);
  font:inherit;font-size:.67rem;cursor:pointer;text-align:start;
}
.legend .leg-item:hover{background:var(--t-surface-3,#1a2433)}
.legend .leg-item:not(.on){color:var(--t-faint,#6b7c8e)}
.legend .sw{width:.85rem;height:.85rem;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 0 0 1px #0005}
/* Fixed white or near-black, never a theme colour: Day's "strong" text is dark and vanished on dark swatches. */
.legend .sw .tick{font-size:.64rem;font-weight:900;line-height:1;color:#fff;text-shadow:0 0 1px #000,0 0 2px #000,0 0 3px #000c}
.legend .sw.ink-dark .tick{color:#111;text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 3px #fffc}
.legend .leg-item:not(.on) .sw{opacity:.32}
.legend .leg-item:not(.on) .tick{visibility:hidden}
/* The two fallbacks for a map too short for the full key, `.tight` and `.cols`,
   live further down — after the short-viewport media query, which sets the same
   properties at the same specificity and would otherwise win. */
.legend div{display:flex;align-items:center;gap:.35rem;margin:.12rem 0}
.sw{width:.6rem;height:.6rem;border-radius:2px;display:inline-block}
.map-chip{position:absolute;z-index:500;top:10px;right:10px;background:var(--t-glass,rgba(8,12,18,.9));border:1px solid var(--line);border-radius:8px;padding:.3rem .55rem;font-size:.68rem;color:var(--muted)}
.map-chip.chip-hl{display:flex;align-items:center;gap:.45rem;color:var(--t-text,#eaf0f6);max-width:min(420px,78vw);background:rgba(18,24,34,.96);border-color:#fbbf24;z-index:700}
.map-chip .chip-clear{
  flex-shrink:0;background:var(--t-surface-3,#3d2a10);color:#fde68a;border:1px solid #fbbf24;border-radius:7px;
  padding:.28rem .7rem;font:inherit;font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap;
}
.map-chip .chip-clear:hover{background:var(--t-surface-4,#243447);border-color:#6b8aab}
.isl-tag.strait-tag{
  border-color:#7dd3fc;color:var(--t-text,#d7eefb);
  font-size:12px;font-weight:700;padding:3px 8px;
}
body.map-focus .rail,body.map-focus .rail-splitter,body.map-focus .timeline-wrap,body.map-focus .bars,body.map-focus .cas-wrap,body.map-focus .fronts-wrap{display:none}
body.map-focus .stage{grid-template-columns:1fr;min-height:calc(100vh - 110px)!important}
body.map-focus .map-wrap{min-height:calc(100vh - 110px)}
.rail{background:var(--panel);padding:.7rem .75rem;overflow:auto;min-width:0;min-height:0;width:100%;height:100%;-webkit-overflow-scrolling:touch}
.rail-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.rail h2{margin:0;font-size:1.05rem;font-weight:700;color:var(--t-strong,#fff)}
.rail h2.mt{margin-top:.9rem;margin-bottom:.45rem}
.muted,#feed-count{color:var(--muted);font-size:.7rem}
.feed{display:flex;flex-direction:column;gap:.4rem}
.card{background:var(--t-surface-1,#0c1219);border:1px solid var(--line);border-radius:10px;padding:.55rem .6rem;border-inline-start:3px solid #5a6a7a}
.card.lean-houthi{border-inline-start-color:var(--houthi)}
.card.lean-gov{border-inline-start-color:var(--plc)}
.card.lean-south{border-inline-start-color:#94a3b8}
.card.lean-indep{border-inline-start-color:#94a3b8}
.card.lean-intl{border-inline-start-color:#94a3b8}
.feed-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;margin:0 0 .45rem;padding:0;background:transparent;border:0;font-size:.66rem;color:var(--muted);line-height:1.3}
.feed-fresh{font-size:.68rem;color:var(--muted);margin:0 0 .35rem;display:flex;align-items:center;gap:.35rem}
.feed-fresh::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:#22c55e;flex:none}
.feed-fresh.stale-amber{color:#f5b54a}.feed-fresh.stale-amber::before{background:#f5b54a}
.feed-fresh.stale-red{color:#f87171}.feed-fresh.stale-red::before{background:#f87171}
.feed-fresh:empty{display:none}
.feed-legend > span{display:inline-flex;align-items:center;gap:.28rem;white-space:nowrap}
.card.lean-south,.card.lean-intl,.card.lean-other{border-inline-start-color:#94a3b8}
.lean-tag{display:none}
.card .lean-tag{display:inline-block;font-size:.62rem;color:var(--t-muted,#9aabbd);background:var(--t-surface-2,#15202c);border-radius:999px;padding:.06rem .35rem;max-width:100%}
.card .meta{display:flex;flex-wrap:wrap;gap:.35rem .55rem;align-items:center;margin-bottom:.3rem}
.card time,.card .src{color:var(--muted);font-size:.68rem}
.card .src{background:var(--t-surface-2,#15202c);border-radius:999px;padding:.08rem .4rem}
.card .headline{margin:0;font-size:.84rem;line-height:1.4;font-weight:500}
/* The card's substance. Clamped to keep a card a short report, never a wall. */
.card .lead{margin:.3rem 0 0;font-size:.78rem;line-height:1.45;color:var(--t-text-2,#b8c4d2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card.open .lead{-webkit-line-clamp:unset;overflow:visible}
.card.expandable{cursor:pointer}
.card.expandable:hover{
  border-top-color:var(--t-line-strong,#3a4a5c);
  border-inline-end-color:var(--t-line-strong,#3a4a5c);
  border-bottom-color:var(--t-line-strong,#3a4a5c);
}
.card.lean-houthi:hover,.card.lean-houthi.open{border-inline-start-color:var(--houthi)!important}
.card.lean-gov:hover,.card.lean-gov.open{border-inline-start-color:var(--plc)!important}
.card.lean-south:hover,.card.lean-intl:hover,.card.lean-indep:hover,.card.lean-other:hover,
.card.lean-south.open,.card.lean-intl.open,.card.lean-indep.open,.card.lean-other.open{border-inline-start-color:#94a3b8!important}
.card .full{display:none;margin:.4rem 0 0;font-size:.78rem;line-height:1.45;color:var(--t-text,#c9d4e0)}
.card.open .full{display:block}
.card .actions{display:flex;gap:.45rem;margin-top:.35rem}
.card .actions button,.card .actions a{background:transparent;border:0;color:var(--t-link,#7eb6ff);font:inherit;font-size:.72rem;cursor:pointer;padding:0;text-decoration:none}
.more{display:block;width:100%;margin-top:.55rem;border-radius:8px;padding:.45rem}
.more[hidden]{display:none}
.front{background:var(--t-surface-1,#0c1219);border:1px solid var(--line);border-radius:8px;padding:.45rem .55rem;margin-bottom:.4rem}
.front strong{display:block;font-size:.8rem}
.front span{color:var(--muted);font-size:.7rem}
.cas-box{margin-top:.85rem;border:1px solid var(--line);border-radius:8px;padding:.35rem .5rem;background:var(--t-surface-1,#0c1219)}
.cas-box summary{cursor:pointer;font-size:.78rem;color:var(--muted)}
.cas-box #casualties{margin-top:.35rem;font-size:.72rem;line-height:1.4;color:var(--muted)}
.timeline-wrap{border-top:1px solid var(--line);padding:.7rem 1rem .9rem}
.timeline-wrap > h2{margin:0 0 .45rem;font-size:1.05rem;font-weight:700}
.now-tag{display:inline-block;margin-right:.3rem;padding:.05rem .4rem;border-radius:999px;background:#14532d;color:var(--t-text,#bbf7d0);font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:.1em}
footer{padding:.55rem 1rem .9rem;color:var(--muted);font-size:.65rem;line-height:1.4;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.2rem}

.situation{padding:.55rem 1rem;background:var(--t-surface-1,#0c1219)}
.situation > h2{margin:0 0 .25rem;font-size:1.05rem;font-weight:700;color:var(--t-strong,#fff)}
.situation p{margin:0;font-size:.82rem;line-height:1.45}
.srcs{margin-top:.35rem;color:var(--muted);font-size:.68rem}
.hint{margin:.15rem 0 .45rem;color:var(--muted);font-size:.7rem;line-height:1.35}
.front-card{background:var(--t-surface-1,#0c1219);border:1px solid var(--line);border-radius:10px;padding:.55rem .6rem;margin-bottom:.45rem}
.front-card strong{display:block;font-size:.82rem;margin-bottom:.25rem}
.front-sum{margin:0;font-size:.78rem;line-height:1.4}
.front-dir{margin:.3rem 0 0;color:var(--contested);font-size:.72rem}
.front-card .full{display:none;margin-top:.4rem;font-size:.75rem;line-height:1.45;color:var(--t-text,#c9d4e0)}
.front-card.open .full{display:block}
.toggle-front,.toggle-phase,.toggle-sit{background:transparent;border:0;color:var(--t-link,#7eb6ff);font:inherit;font-size:.72rem;cursor:pointer;padding:0;margin-top:.35rem}
.cas-box #casualties .cas-sum{margin:0 0 .35rem;font-size:.78rem;line-height:1.4;color:var(--text)}
.cas-box #casualties ul{margin:.2rem 0 0;padding-inline-start:1.1rem}
.cas-box #casualties li{margin:.2rem 0;font-size:.72rem;line-height:1.4}
.phase-head{display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.phase-sum{margin:.35rem 0 0;font-size:.82rem;line-height:1.45}
.phase-card .full{display:none;margin-top:.4rem}
.phase-card.open .full{display:block}
.phase-card .full p{margin:.25rem 0;font-size:.78rem;line-height:1.45}

.time-filter{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.time-filter .tf-label{color:var(--muted);font-size:.72rem;margin-inline-end:.15rem}
.time-filter .tf-sep{width:1px;height:1.1rem;background:var(--t-surface-4,#2a3a4e);margin:0 .25rem}
.time-filter .tf-to{color:var(--muted);font-size:.7rem}
.ctrl-slider-wrap{display:flex;align-items:center;gap:.4rem;flex:1 1 220px;min-width:200px;margin-inline-start:.15rem}
.ctrl-slider-wrap input[type="range"]{flex:1 1 auto;accent-color:#c45c26;height:4px;cursor:pointer}
.ctrl-slider-label{color:#f0d78c;font-size:.68rem;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
body.ctrl-mode .ev{visibility:hidden}
.cas-wrap .cas-lead{display:none}
.time-filter button{background:var(--t-surface-2,#121a24);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.22rem .55rem;font:inherit;cursor:pointer;font-size:.72rem}
.time-filter button.on{color:var(--t-strong,#fff);border-color:var(--t-line-strong,#334155);background:var(--t-surface-3,#1a2433)}
.map-chip{max-width:min(280px,70vw);line-height:1.35}
.leaflet-popup-content{font-family:"Inter","Heebo","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.82rem;line-height:1.4;margin:.55rem .7rem;min-width:180px;max-width:280px;color:var(--t-on-light,#1a2330)}
.leaflet-popup-content .pop-h{font-weight:600;margin:0 0 .35rem;font-size:.88rem;color:var(--t-on-light,#111827)}
.leaflet-popup-content .pop-meta{color:var(--t-faint,#5a6a7a);font-size:.7rem;margin:0 0 .35rem}
.leaflet-popup-content .pop-body{margin:0;color:var(--t-on-light,#1a2330);font-size:.78rem}
.leaflet-popup-content .pop-src{margin:.2rem 0 .35rem;color:var(--t-on-light,#334155);font-size:.72rem;font-weight:600}
.leaflet-popup-content a{color:#1a5fb4}
.leaflet-popup-content a.src-link,
.leaflet-popup-content .pop-src a{
  color:#1a5fb4 !important;
  border-bottom:1px solid #1a5fb466;
  font-weight:600;
}
/* ---- Event marks -------------------------------------------------------
   Floating pill markers: a filled disc that lifts off the basemap on a short
   stem, so the glyph reads at a glance and the point it marks stays exact.   */
.ev-wrap{background:none!important;border:0!important}
.ev{
  --ev-ink:#facc15;
  width:34px;height:42px;position:relative;background:transparent;
  display:flex;align-items:flex-start;justify-content:center;
  animation:evFloat 3.6s ease-in-out infinite;
  will-change:transform;
}
.ev .ev-glyph{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ev-ink);
  color:var(--t-on-light,#0b0f14);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 6px 12px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6);
  transition:transform .14s ease, box-shadow .14s ease;
}
.ev .ev-glyph svg{width:17px;height:17px;display:block}
/* The stem points at the actual coordinate under the floating disc. */
.ev .ev-stem{
  position:absolute;left:50%;top:27px;transform:translateX(-50%);
  width:2px;height:11px;border-radius:2px;
  background:linear-gradient(to bottom,var(--ev-ink),rgba(0,0,0,0));
  opacity:.85;
}
.ev::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:10px;height:4px;border-radius:50%;
  background:rgba(0,0,0,.45);filter:blur(1.5px);
}
.ev:hover .ev-glyph{transform:scale(1.12);box-shadow:0 10px 18px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6)}
/* Many events on one spot: one mark with their number; its note lists them all (17 Oct). */
.ev .ev-count{
  position:absolute;top:-7px;right:-9px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  background:#0b0f14;color:#fff;border:1.5px solid rgba(255,255,255,.92);
  font:700 .62rem/15px var(--f-body,system-ui,sans-serif);text-align:center;box-sizing:border-box;
}
.leaflet-popup-content .stack-list{list-style:none;margin:.25rem 0 0;padding:0}
.leaflet-popup-content .stack-list li{padding:.35rem 0;border-top:1px solid var(--t-line,rgba(127,127,127,.25))}
.leaflet-popup-content .stack-open{all:unset;cursor:pointer;display:block;font-weight:600;line-height:1.3}
.leaflet-popup-content .stack-open:hover,.leaflet-popup-content .stack-open:focus-visible{text-decoration:underline}
.leaflet-popup-content .stack-list .pop-meta{display:block;margin:.1rem 0 0}

/* Anything logged in the last six hours pulses. */
.ev.fresh .ev-glyph{box-shadow:0 6px 12px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6), 0 0 0 0 color-mix(in srgb, var(--ev-ink) 70%, transparent);animation:evPulse 2s ease-out infinite}

@keyframes evFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@keyframes evPulse{
  0%{box-shadow:0 6px 12px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6),0 0 0 0 rgba(255,255,255,.45)}
  70%{box-shadow:0 6px 12px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6),0 0 0 11px rgba(255,255,255,0)}
  100%{box-shadow:0 6px 12px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6),0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion: reduce){
  .ev{animation:none}
  .ev.fresh .ev-glyph{animation:none}
}

.ev.combat,.ev.clash,.ev.capture,.ev.redeploy,.ev.military,.ev.deployment,.ev.position{--ev-ink:#facc15}
.ev.strike,.ev.missile{--ev-ink:#ef4444}
.ev.statement,.ev.diplomacy,.ev.intel,.ev.humanitarian{--ev-ink:#a855f7}
.ev.vessel{--ev-ink:#22d3ee}
.ev.port{--ev-ink:#fb923c}
.island-dot{width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0006}
a.src-link,.src-wrap a,.srcs a,.pop-src a{color:var(--t-link,#7eb6ff);text-decoration:none;border-bottom:1px solid #7eb6ff55}
a.src-link:hover,.src-wrap a:hover,.srcs a:hover{border-bottom-color:#7eb6ff;color:var(--t-link,#a8d0ff)}
a.src-go{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--t-link,#7eb6ff);opacity:.8;margin-inline-start:.3em;
  vertical-align:-2px;text-decoration:none;
}
a.src-go:hover{opacity:1;color:var(--t-link,#a8d0ff)}
a.src-go svg{display:block}
.card .src-wrap{font-size:.68rem}
.card .headline{font-weight:500;line-height:1.45}
.full-label{margin:0 0 .25rem;color:var(--muted);font-size:.7rem}
.present-banner{background:var(--t-surface-2,#15202c);border:1px solid var(--line);border-radius:8px;padding:.55rem .65rem;margin-bottom:.55rem}
.present-banner strong{display:block;font-size:.8rem;margin-bottom:.25rem;color:var(--contested)}
.present-banner p{margin:0;font-size:.8rem;line-height:1.4}
.front-card > .srcs{margin-top:.3rem}
.leaflet-popup-content .pop-full{display:none;margin:.4rem 0 0;font-size:.76rem;line-height:1.4;color:var(--t-on-light,#1a2330);max-height:180px;overflow:auto}
.leaflet-popup-content .pop-full.open{display:block}
.leaflet-popup-content .pop-toggle{background:transparent;border:0;color:#1a5fb4;font:inherit;font-size:.72rem;cursor:pointer;padding:0;margin-top:.35rem}
.leaflet-popup-content .pop-h{font-weight:500;line-height:1.4;color:var(--t-on-light,#111827)}
.time-filter input[type="date"]{
  background:var(--t-surface-2,#121a24);color:var(--text);border:1px solid var(--line);border-radius:8px;
  padding:.22rem .4rem;font:inherit;font-size:.75rem;color-scheme:dark;
}
.time-filter #btn-day-prev,.time-filter #btn-day-next,button.day-nav{
  min-width:auto;padding:.22rem .55rem;border-radius:8px;font-size:.75rem;font-weight:500;
  display:inline-flex !important;align-items:center;gap:.28rem;flex-direction:row !important;direction:ltr !important;
}
.time-filter #btn-day-prev .day-nav-arr,
.time-filter #btn-day-next .day-nav-arr{
  font-size:.85rem;line-height:1;opacity:.9;
}
.bars-note{display:none}
.fronts-wrap{border-top:1px solid var(--line);padding:.75rem 1rem 1rem;background:var(--t-surface-1,#0a1018)}
.fronts-wrap h2{margin:0 0 .55rem;font-size:1.05rem;font-weight:700;color:var(--t-strong,#fff)}
.cas-wrap{border-top:1px solid var(--line);padding:.75rem 1rem 1.1rem;background:var(--t-surface-1,#0c1219)}
.cas-wrap h2{margin:0 0 .25rem;font-size:1.05rem;font-weight:700;color:var(--t-strong,#fff)}
.cas-wrap .cas-lead{margin:0 0 .55rem;font-size:.78rem;color:var(--t-text-2,#a8b8c9);line-height:1.4}
.cas-wrap #casualties{font-size:.82rem;line-height:1.5;color:var(--text)}
.cas-wrap #casualties .cas-sum{margin:0 0 .5rem;font-size:.86rem;line-height:1.5;color:var(--t-text,#eaf0f6)}
.cas-wrap #casualties ul{margin:.15rem 0 0;padding-inline-start:1.15rem}
.cas-wrap #casualties li{margin:.35rem 0;font-size:.8rem;line-height:1.45;color:var(--t-text,#d7e2ef)}
/* The control shares, in the numbers column (they were a strip at the top until 17 Oct). */
#casualties .ctrl-box .bars{padding:.1rem 0 0;border:0}
#casualties .ctrl-box .ctrl-wait{margin:.35rem 0 0;color:var(--muted)}
#fronts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.5rem}
#fronts .front-card{margin-bottom:0}
#btn-day-next[hidden]{display:none !important}
.isl-tag-wrap{background:none!important;border:0!important}
.isl-tag{
  background:var(--t-glass,rgba(8,12,18,.94));border:1px solid #7dd3fc;color:var(--t-text,#eaf0f6);
  font-size:11px;line-height:1.2;padding:2px 7px;border-radius:6px;white-space:nowrap;
  box-shadow:0 2px 8px #0008;font-family:inherit;
}
.leaflet-tooltip.strait-tip{
  background:var(--t-glass,rgba(8,12,18,.92));border:1px solid #7dd3fc;color:var(--t-text,#d7eefb);
  font-size:11px;border-radius:6px;box-shadow:none;font-family:inherit;
}
.leaflet-tooltip.strait-tip::before{border-top-color:var(--t-glass,rgba(8,12,18,.92))}
body.front-hl .ev{visibility:hidden}
@keyframes govhl{
  0%,100%{fill-opacity:.55}
  50%{fill-opacity:.95}
}
.time-filter #btn-day-today{border-radius:8px}
.front-where{margin:.1rem 0 .35rem;color:var(--muted);font-size:.7rem}
/* readability + comfort */
.layers button,.time-filter button,.ghost,.more{color:var(--t-text,#d7e2ef);border-color:var(--t-line-strong,#2a3a4e);background:var(--t-surface-2,#15202c)}
.layers button.on,.time-filter button.on{color:var(--t-strong,#fff);background:var(--t-surface-4,#243447);border-color:#4a6280}
.bar{background:var(--t-surface-2,#15202c);border-color:var(--t-line-strong,#2a3a4e)}
.bar h3{color:var(--t-text-2,#b8c6d6)}
.bar .pct{color:var(--text)}
.situation{background:var(--t-surface-2,#121a24)}
.situation p,.phase-sum,.phase-card .full p,.front-sum,.card .headline,.card .full{color:var(--t-text,#eaf0f6)}
.hint,.sub,.muted,.card time,.front-where,.srcs{color:var(--t-text-2,#a8b8c9)}
.phase-head strong,.phase-head b{color:var(--t-strong,#fff)}
.present-banner{display:none} /* retired — situation strip is the present */
.timeline-wrap{background:var(--t-surface-1,#0a1018)}
.card,.front-card,.cas-box{background:var(--t-surface-2,#121a24);border-color:var(--t-line-strong,#2a3a4e)}
.rail{background:var(--t-surface-1,#0e151d)}
.time-filter input[type="date"]{color:var(--t-text,#eaf0f6);background:var(--t-surface-2,#15202c);border-color:var(--t-line-strong,#2a3a4e)}
footer{color:var(--t-muted,#9aabbc)}
a.src-link{color:var(--t-link,#8ec5ff)}
html{scroll-behavior:smooth}

.rail-splitter{
  cursor:col-resize;background:var(--line);position:relative;z-index:5;
  touch-action:none;
}
.rail-splitter:hover,.rail-splitter:active{background:#4a6280}
.rail-splitter::after{
  content:"";position:absolute;inset:-4px 0; /* easier grab */
}
.card .headline{
  /* Same teaser at any rail width — no progressive reveal of the full text */
  display:block;
}
.card:not(.open) .full{display:none!important}

.src-plain{color:var(--muted)}


#time-filter button.on{outline:1px solid #22c55e}

/* —— Mobile only (desktop unchanged) —— */

/* Map popups: keep expand usable on small screens */
.leaflet-popup-content-wrapper{
  max-width:min(320px, 92vw);
}
.leaflet-popup-content{
  max-height:min(360px, 52vh);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.leaflet-popup-content .pop-full{
  max-height:min(160px, 28vh);
}
.leaflet-popup-content .pop-h{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.map-wrap.popup-open .map-chip{
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.map-wrap.popup-open .map-chip.chip-hl{
  opacity:1;
  pointer-events:auto;
}

@media (max-height: 540px) {
  .top { padding: .4rem .75rem; }
  .bars { padding: .35rem .75rem; }
  .bar { padding: .35rem .5rem; }
  .bar .pct { font-size: 1.05rem; }
  .situation { padding: .4rem .75rem; }
  .situation p { font-size: .78rem; margin: 0; }
  .toolbar { padding: .3rem .75rem; }
  .stage {
    height: calc(100dvh - 5.8rem);
    max-height: calc(100svh - 5.2rem);
    min-height: 0;
  }
  .map-wrap { min-height: 0; overflow: hidden; }
  .rail { max-height: none; height: 100%; overflow: auto; }
  .legend {
    left: 8px;
    bottom: 8px;
    max-height: calc(100% - 90px);
    max-width: min(190px, 38%);
    padding: .25rem .32rem .2rem;
    font-size: .6rem;
    line-height: 1.2;
  }
  .legend .leg-hint { display: none; }
  .legend .leg-sec { margin: .16rem 0 .02rem; font-size: .54rem; }
  .legend .leg-item {
    min-height: 18px;
    padding: .04rem .06rem;
    margin: 0;
    font-size: .58rem;
    gap: .25rem;
  }
  .legend .sw { width: .68rem; height: .68rem; }
  .map-chip { top: 6px; right: 6px; max-width: min(240px, 46%); }
}

/* ---- Legend: the two steps taken when the map is too short -------------
   The legend never scrolls, so `fitLegend()` measures it and, if it would be
   clipped, closes the rows up (`.tight`); if it still would be, sets it two
   columns wide (`.cols`) rather than losing rows off the bottom. These sit
   after the max-height query above on purpose: that query sets the same
   properties at the same specificity, and the later rule wins. */
.legend.tight .leg-hint{display:none}
.legend.tight .leg-sec{margin:.14rem 0 .02rem;font-size:.55rem}
.legend.tight .leg-item{min-height:17px;padding:.02rem .06rem;margin:0;font-size:.59rem;gap:.28rem}
.legend.tight .sw{width:.66rem;height:.66rem}
.legend.tight .leg-ico{width:13px;height:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.legend.tight .leg-ico svg{width:8px;height:8px}
/* Two columns: half the height, and a short map is nearly always a wide one. */
.legend.cols{max-width:min(340px,62%)}
.legend.cols .leg-body{columns:2;column-gap:.7rem}
.legend.cols .leg-sec,.legend.cols .leg-item{break-inside:avoid}
.legend.cols .leg-sec:first-child{margin-top:0}

@media (max-width: 700px) {
  .rail-splitter { display: none !important; }

  .top {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    padding: .85rem .9rem calc(.85rem + env(safe-area-inset-bottom, 0px));
  }
  h1 { font-size: 1.08rem; line-height: 1.3; }
  .sub { font-size: .76rem; margin-top: .2rem; }
  .stamp { font-size: .72rem; white-space: normal; }

  .bars {
    grid-template-columns: 1fr;
    gap: .65rem;
    padding: .75rem .9rem;
  }
  .bar {
    padding: .65rem .75rem;
    border-radius: 12px;
  }
  .bar .pct { font-size: 1.45rem; }

  .situation {
    padding: .75rem .9rem;
    margin: 0;
  }
  .situation p { font-size: .84rem; line-height: 1.5; }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    padding: .65rem .9rem .75rem;
  }
  .map-chip.chip-hl{
    max-width:94vw;
    gap:.5rem;
    padding:.4rem .5rem;
    font-size:.72rem;
  }
  .map-chip .chip-clear{
    padding:.38rem .75rem;
    font-size:.74rem;
  }
  .layers {
    gap: .4rem;
  }
  .layers button,
  .time-filter button,
  .ghost,
  .more {
    padding: .4rem .75rem;
    font-size: .76rem;
    min-height: 2.1rem;
  }
  .time-filter {
    gap: .4rem;
    width: 100%;
  }
  .ctrl-slider-wrap{flex:1 1 100%;min-width:0}
  .ctrl-slider-label{max-width:none}
  .time-filter input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: .4rem .5rem;
    font-size: .78rem;
  }

  .stage {
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
    max-height: none;
    gap: 0;
  }
  .map-wrap {
    min-height: 300px;
    height: var(--map-h);
    max-height: none;
    border-left: none;
    border-bottom: 1px solid var(--line);
    order: -1;
    margin-bottom: .15rem;
  }
  .legend {
    left: 8px;
    bottom: 10px;
    max-width: min(190px, 58vw);
    padding: .4rem .5rem;
    font-size: .65rem;
    border-radius: 10px;
  }
  .map-chip {
    top: 8px;
    right: 8px;
    max-width: min(240px, 72vw);
    padding: .35rem .5rem;
    font-size: .66rem;
    border-radius: 10px;
  }
  .leaflet-popup-content-wrapper{
    max-width: min(300px, 90vw) !important;
  }
  .leaflet-popup-content{
    max-width: min(280px, 86vw) !important;
    max-height: 42vh !important;
    overflow: auto !important;
    margin: .45rem .55rem !important;
  }
  .leaflet-popup-content .pop-full.open{
    max-height: 22vh !important;
    overflow: auto !important;
  }
  .leaflet-popup-content .pop-h{
    -webkit-line-clamp: 3;
    font-size: .82rem !important;
  }
  .map-chip{
    z-index: 600;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
  }


  .rail {
    order: 1;
    max-height: none;
    height: auto;
    padding: .85rem .9rem 1.1rem;
    overflow: visible;
  }
  .rail-head {
    margin-bottom: .65rem;
  }
  .rail h2 { font-size: 1.05rem; font-weight: 700; }
  .rail h2.mt {
    margin-top: 1.25rem;
    margin-bottom: .55rem;
    padding-top: .35rem;
  }
  .feed-legend {
    gap: .45rem .85rem;
    margin: 0 0 .65rem;
    font-size: .68rem;
    line-height: 1.4;
  }
  .feed {
    gap: .7rem;
  }
  .card {
    padding: .7rem .75rem;
    border-radius: 12px;
  }
  .card .headline {
    font-size: .88rem;
    line-height: 1.5;
  }
  .card .meta { margin-bottom: .4rem; gap: .4rem .6rem; }
  .card .actions { margin-top: .45rem; }
  .more {
    margin-top: .75rem;
    padding: .55rem;
    border-radius: 10px;
  }

  .hint {
    margin: .2rem 0 .55rem;
    line-height: 1.4;
  }
  .front-card {
    padding: .7rem .75rem;
    margin-bottom: .65rem;
    border-radius: 12px;
  }
  .cas-box {
    margin-top: 1.1rem;
    padding: .55rem .65rem;
    border-radius: 12px;
  }

  .fronts-wrap {
    padding: .85rem .9rem 1.1rem;
  }
  .cas-wrap {
    padding: .85rem .9rem 1.2rem;
  }
  #fronts {
    grid-template-columns: 1fr;
    gap: .65rem;
  }

  footer {
    padding: .75rem .9rem calc(.95rem + env(safe-area-inset-bottom, 0px));
    gap: .35rem;
    line-height: 1.45;
  }

  body.map-focus .map-wrap {
    height: calc(100vh - 100px);
    max-height: none;
    min-height: calc(100vh - 100px);
  }
}

.front-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.45rem;margin-bottom:.15rem}
.front-head strong{flex:1;margin-bottom:0}
.front-map-btn{
  flex-shrink:0;background:var(--t-surface-2,#15202c);color:var(--t-text,#d7e2ef);border:1px solid var(--t-line-strong,#2a3a4e);
  border-radius:999px;padding:.16rem .55rem;font:inherit;font-size:.68rem;cursor:pointer;line-height:1.3;
}
.front-map-btn:hover,.front-map-btn[aria-expanded="true"]{border-color:#6b8aab;background:var(--t-surface-3,#1a2838);color:var(--t-strong,#fff)}
.front-plain{margin:.12rem 0 .28rem;font-size:.76rem;line-height:1.4;color:var(--t-text,#d5deea)}

.media-block{margin:.4rem 0 .15rem;display:flex;flex-direction:column;gap:.4rem}
.media-fig{margin:0}
.media-open{
  display:block;width:100%;padding:0;border:0;background:var(--t-surface-1,#0a1018);cursor:zoom-in;border-radius:8px;overflow:hidden;
}
.media-fig img,.media-fig video{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:8px}
.media-fig figcaption{margin:.28rem 0 0;font-size:.66rem;line-height:1.35;color:var(--t-muted,#8fa0b4)}
.media-credit{color:var(--t-muted,#7b8c9e)}
.media-yt{position:relative;width:100%;padding-top:56.25%;border-radius:8px;overflow:hidden;background:var(--t-bg,#000)}
.media-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.media-block.compact .media-fig img,.media-block.compact .media-fig video{max-height:150px}

.leaflet-popup-content .media-block{margin:.35rem 0}
.leaflet-popup-content .media-fig figcaption{color:var(--t-faint,#5a6a7a)}
.leaflet-popup-content .media-open{background:#eef2f6}

.front-float-title{margin:0 0 .15rem;font-size:.78rem;font-weight:600;color:var(--t-strong,#fff)}
.front-float-go{
  background:var(--t-surface-2,#15202c);color:var(--t-text,#d7e2ef);border:1px solid var(--t-line-strong,#2a3a4e);border-radius:8px;
  padding:.28rem .55rem;font:inherit;font-size:.7rem;cursor:pointer;width:100%;
}
.front-float-go:hover{border-color:#6b8aab;background:var(--t-surface-3,#1a2838)}

#media-float{
  position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.82);
  display:none;align-items:center;justify-content:center;padding:1.5rem 1rem;
}
#media-float.show{display:flex;flex-direction:column;gap:.6rem}
.media-float-frame{position:relative;display:inline-block;max-width:min(920px,96vw);overflow:hidden;border-radius:8px;box-shadow:0 8px 40px #000c}
#media-float img{display:block;max-width:min(920px,96vw);max-height:78vh;object-fit:contain;cursor:zoom-in;touch-action:none;user-select:none;-webkit-user-select:none;transform-origin:center;transition:transform .15s ease-out}
.media-float-frame.zoomed img{cursor:grab}
.media-float-frame.zoomed.dragging img{cursor:grabbing;transition:none}
/* The × sits on the picture's top right corner, in the same small square as the other buttons. */
.media-float-close{
  position:absolute;top:8px;right:8px;width:32px;height:32px;padding:0;display:grid;place-items:center;
  background:rgba(12,18,26,.82);color:#eaf0f6;border:1px solid rgba(255,255,255,.22);border-radius:8px;cursor:pointer;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .15s,border-color .15s;
}
.media-float-close:hover{background:rgba(12,18,26,.95);border-color:rgba(255,255,255,.45)}
.media-float-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none}
.media-float-cap{margin:0;max-width:min(920px,96vw);font-size:.78rem;line-height:1.4;color:var(--t-text,#d7e2ef);text-align:center}

.live-scan{padding:.35rem 1rem .5rem;border-bottom:1px solid var(--line);background:var(--t-surface-1,#0a1018)}
.live-scan details{background:var(--t-surface-1,#0c1219);border:1px solid var(--line);border-radius:10px;padding:.15rem .65rem .2rem}
.live-scan summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;padding:.4rem 0}
.live-scan summary::-webkit-details-marker{display:none}
.live-scan summary::before{content:"▸";color:var(--t-link,#7eb6ff);font-size:.7rem}
.live-scan details[open] summary::before{content:"▾"}
.live-scan .ls-title{font-weight:700;font-size:.82rem;color:var(--t-strong,#fff)}
.live-scan .ls-meta{color:var(--muted);font-size:.72rem}
.live-scan .ls-hint{margin:0 0 .45rem;color:var(--muted);font-size:.7rem;line-height:1.4}
.live-scan .ls-stats{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .45rem}
.live-scan .ls-chip{background:var(--t-surface-2,#121a24);border:1px solid var(--line);border-radius:999px;padding:.12rem .45rem;font-size:.65rem;color:var(--t-text,#c9d4e0)}
.live-scan .ls-chip.ok{border-color:#14532d;color:#86efac}
.live-scan .ls-chip.fail{border-color:#7f1d1d;color:#fca5a5}
.live-scan .ls-chip.hold{border-color:#854d0e;color:#fcd34d}
.live-scan .ls-tally{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.live-scan .ls-sources{display:flex;flex-wrap:wrap;gap:.3rem}
.live-scan .ls-unplaced{margin:0 0 .5rem;padding:.4rem .55rem;border:1px solid #854d0e;border-radius:6px;font-size:.7rem;color:#fcd34d}
.live-scan .ls-unplaced ul{margin:.3rem 0 0;padding-left:1rem}
.live-scan .ls-unplaced li{margin:.15rem 0;color:var(--t-text,#c9d4e0)}
.live-scan .ls-row.tray{border-left:2px solid #854d0e}
.ls-list{display:flex;flex-direction:column;gap:.3rem;padding-bottom:.4rem}
.ls-row{background:var(--t-surface-2,#121a24);border:1px solid var(--line);border-radius:8px;padding:.35rem .5rem;font-size:.72rem;line-height:1.35}
.ls-row.kept{border-color:var(--t-line-strong,#334155)}
.ls-row .ls-top{display:flex;justify-content:space-between;gap:.4rem;align-items:baseline}
.ls-row .ls-src{color:var(--t-link,#7eb6ff);font-weight:600}
.ls-row .ls-at{color:var(--muted);font-size:.65rem;direction:ltr}
.ls-row .ls-sn{margin:.2rem 0 .3rem;color:var(--t-text,#d7e2ef)}
.ls-row .ls-mark{display:flex;gap:.3rem}
.ls-row .ls-mark button{background:var(--t-surface-2,#15202c);color:var(--t-text,#c9d4e0);border:1px solid var(--line);border-radius:999px;padding:.1rem .45rem;font:inherit;font-size:.65rem;cursor:pointer}
.ls-row .ls-mark button.on-yes{border-color:#166534;background:#14532d;color:var(--t-text,#bbf7d0)}
.ls-row .ls-mark button.on-no{border-color:#7f1d1d;background:var(--t-surface-2,#450a0a);color:var(--t-text,#fecaca)}
.ls-row a{color:var(--t-link,#7eb6ff)}
.leg-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;flex-shrink:0;
  margin-inline-end:.15rem;color:var(--t-on-light,#0b0f14);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);
}
.leg-ico svg{width:10px;height:10px;display:block}
.leg-ico.combat{background:#facc15}
.leg-ico.strike{background:#ef4444}
.leg-ico.vessel{background:#22d3ee}
.leg-ico.port{background:#fb923c}
.legend .leg-item:not(.on) .leg-ico{opacity:.3}

/* ---- 12-hour brief -----------------------------------------------------
   The situation strip, the fronts and the numbers panel are rebuilt on a fixed
   12-hour cadence. Each carries a stamp saying when it last refreshed and when
   it next will, so a stale panel can never pass for a live one.              */
.cadence{
  margin:.5rem 0 0;font-size:.66rem;color:var(--t-muted,#8fa3b6);line-height:1.35;
  border-top:1px solid var(--t-line,#1c2836);padding-top:.35rem;
}
.cadence.late{color:#fbbf24}
.situation .cadence{border-top-color:var(--t-line-strong,#22303f)}
.situation-window{margin:.35rem 0 0;font-size:.8rem;line-height:1.45;color:var(--t-text-2,#b8c6d6)}
.front-activity{
  margin:.35rem 0 0;font-size:.72rem;line-height:1.4;color:var(--t-text-2,#9fb3c8);
  border-inline-start:2px solid var(--t-line-strong,#2a3a4e);padding-inline-start:.45rem;
}
#fronts + .cadence,.fronts-wrap .cadence{margin-top:.15rem}

/* ---- Live scan extras --------------------------------------------------- */
.ls-marks{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  flex-wrap:wrap;margin:0 0 .45rem;font-size:.68rem;color:var(--muted);
}
.ls-marks button{
  background:var(--t-surface-2,#15202c);color:var(--t-text,#c9d4e0);border:1px solid var(--line);border-radius:999px;
  padding:.16rem .6rem;font:inherit;font-size:.68rem;cursor:pointer;
}
.ls-marks button:hover{border-color:#6b8aab;color:var(--t-strong,#fff)}
.ls-row .ls-why{
  background:var(--t-surface-1,#1a1410);border:1px solid var(--t-line,#3d2a10);color:#f0c98c;
  border-radius:999px;padding:.08rem .45rem;font-size:.62rem;cursor:help;
}
/* Items that look like things the operator marked uninteresting sink visually. */
.ls-row.dim{opacity:.48}
.ls-row.dim:hover{opacity:1}

@media (max-width:800px){
  .media-fig img,.media-fig video{max-height:180px}
}
.card .also{margin:.3rem 0 0;font-size:.68rem;color:var(--t-muted,#8b98a8)}
.card .reply-to{display:block;margin:.15rem 0 .3rem;padding:.2rem .45rem;border-left:2px solid #5b7290;background:rgba(91,114,144,.12);font-size:.68rem;color:var(--t-text-2,#9fb4cc);text-decoration:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:2px}
.card .reply-to:hover{color:var(--t-text,#c9d8ea)}
.card .x-desk{display:inline-block;margin-top:.35rem;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--t-text-2,#9fb4cc);text-decoration:none;border-bottom:1px solid currentColor}
.card .x-desk:hover{color:var(--t-text,#c9d8ea)}
.card.flash{outline:2px solid #9fb4cc;outline-offset:2px;transition:outline-color 1.2s}
.card .also a{color:var(--t-text-2,#9fb4cc);text-decoration:none}
.card .also a:hover{text-decoration:underline}
.card .citing{color:var(--t-muted,#8b98a8)}
.cm{position:relative;margin:.45rem 0 .1rem}
.cm-still{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--t-bg,#05080c);cursor:pointer}
.cm-still img{display:block;width:100%;height:100%;object-fit:cover}
.cm-still[style]{max-height:560px}
.cm-still[style] img{object-fit:contain}
.cm-photo .cm-still{touch-action:pan-x pan-y}
.cm-photo .cm-still img{transform-origin:center;will-change:transform}
.cm-photo .cm-still.pinched{touch-action:none}
.cm-player{max-height:560px}
.cm-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;place-items:center;border-radius:50%;background:rgba(8,12,18,.72);border:1px solid rgba(255,255,255,.35);transition:background .2s,transform .2s}
.cm-play svg{width:20px;height:20px;margin-left:3px;fill:var(--t-strong,#fff)}
.cm-still:hover .cm-play,.cm-still:focus-visible .cm-play{background:rgba(185,28,28,.85);transform:scale(1.06)}
.cm-dur{position:absolute;right:6px;bottom:6px;padding:.05rem .35rem;border-radius:4px;background:rgba(0,0,0,.75);color:var(--t-strong,#fff);font-size:.62rem;font-variant-numeric:tabular-nums}
.cm-link{display:none;font-size:.7rem;color:var(--t-link,#7eb6ff)}
.cm.cm-gone .cm-still{display:none}
.cm.cm-gone .cm-link{display:inline-block}
.cm-player{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px;background:var(--t-bg,#000)}
.cm-tg{aspect-ratio:auto;height:440px;background:transparent}
/* A post's several pictures: one at a time, dots on the picture, arrows on hover. */
.cm-album .cm-still img.cm-slide{position:absolute;inset:0;opacity:0;transition:opacity .26s ease}
.cm-album .cm-still img.cm-slide.on{opacity:1}
.cm-dots{position:absolute;left:50%;bottom:8px;z-index:2;display:flex;gap:1px;padding:0 5px;border-radius:999px;background:rgba(0,0,0,.5);transform:translateX(-50%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cm-dots button{display:flex;align-items:center;padding:6px 3px;border:0;border-radius:999px;background:none;cursor:pointer}
.cm-dots button::before{content:"";width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.5);transition:width .26s cubic-bezier(.2,.7,.2,1),background-color .26s}
.cm-dots button.on::before{width:16px;background:#fff}
.cm-arrow{position:absolute;top:50%;z-index:2;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(8,12,18,.6);opacity:0;transition:opacity .2s;cursor:pointer}
.cm-prev{left:8px}.cm-next{right:8px}
.cm-arrow svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cm-album:hover .cm-arrow,.cm-arrow:focus-visible{opacity:1}
.cm-album.cm-first .cm-prev,.cm-album.cm-last .cm-next{visibility:hidden}
.cm.cm-gone .cm-dots,.cm.cm-gone .cm-arrow{display:none}
@media (hover:none){.cm-arrow{display:none}}
@media (prefers-reduced-motion:reduce){.cm-album .cm-still img.cm-slide,.cm-dots button::before{transition:none}}
.front-card .front-composed{margin:.35rem 0 0;font-size:.78rem;line-height:1.5;color:var(--t-text,#c9d4e0)}
.front-card .front-asof{margin:.4rem 0 0;font:italic 500 .74rem/1.3 var(--f-body,inherit);color:var(--t-muted,#8b98a8)}

/* The conflict in numbers: three plain boxes, no accent colour. */
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.tally-box{border:1px solid var(--t-line-strong,#243244);border-radius:8px;padding:.5rem .65rem;background:var(--t-surface-2,#0f1822)}
.tally-box h3{margin:0 0 .35rem;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t-text-2,#9fb3c8)}
.tally-row{display:flex;justify-content:space-between;gap:.5rem;padding:.18rem 0;font-size:.8rem;color:var(--t-text,#c9d4e0);border-top:1px solid var(--t-line,#1a2531)}
.tally-row:first-of-type{border-top:0}
.tally-row strong{font-variant-numeric:tabular-nums;font-weight:600;color:var(--t-text,#eaf0f6)}
.tally-note{margin:.45rem 0 0;font-size:.68rem;color:var(--t-muted,#8fa3b6)}
/* One box at a time: arrows either side, dots below, swipe on a phone. */
.tally.one{display:block}
.tally-row strong .q,.tally-box.claims td .q{font-size:.66rem;font-weight:400;color:var(--t-muted,#8fa3b6)}
/* The day row stays one line on any width: shorter labels, then a sideways scroll. */
.time-filter .tf-short{display:none}
@media (max-width:720px){
  .time-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .time-filter::-webkit-scrollbar{display:none}
  .time-filter > *{flex:0 0 auto}
  .time-filter .day-nav-txt,.time-filter .tf-long{display:none}
  .time-filter .tf-short{display:inline}
  .time-filter input[type="date"]{flex:1 1 7.5rem;min-width:7.5rem;max-width:10rem}
  .time-filter #btn-day-prev,.time-filter #btn-day-next{padding:.4rem .6rem}
}
/* Back to the report a jump started from. */
.jump-back{position:fixed;bottom:18px;transform:translateX(-50%);z-index:900;background:var(--t-surface-3,#1a2433);color:var(--t-text,#eaf0f6);border:1px solid #4a6280;border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.78rem;cursor:pointer;box-shadow:0 4px 14px #0009}
.jump-back:hover{background:var(--t-surface-4,#243447)}
.jump-back[hidden]{display:none}

/* Map notes: a larger close ×. */
.leaflet-container a.leaflet-popup-close-button{width:26px;height:26px;font:20px/24px Tahoma,Verdana,sans-serif;color:var(--t-faint,#475569);right:2px;top:2px}
.leaflet-container a.leaflet-popup-close-button:hover{color:var(--t-on-light,#111827)}
/* A phone has no room for both: the legend steps aside while notes are open. */
@media (max-width:720px){.map-wrap.popup-open .legend{display:none}}
/* The "Updated" line under a column's heading. */
/* Under a column's heading: the same small type as the live scan's "Last scan" line. */
.cadence.at-head{margin:0 0 .5rem;border-top:0;padding-top:0;font-size:.72rem;color:var(--muted);line-height:1.3}
.cadence.at-head.late{color:#fbbf24}
.situation .cadence.at-head{margin:.1rem 0 .35rem}

/* "Show on map" on a feed card, and the pulse of the pin it lands on. */
.card .meta .card-map{
  margin-inline-start:auto;flex:none;font:inherit;font-size:.66rem;line-height:1;
  padding:.28rem .45rem;border:1px solid var(--t-line-strong,#2f4257);border-radius:4px;
  background:var(--t-surface-2,#101a25);color:var(--t-link,#9cc3e6);cursor:pointer;
}
.card .meta .card-map:hover{background:var(--t-surface-3,#17273a);color:var(--t-strong,#fff)}
@keyframes pin-pulse{0%,100%{transform:scale(1);filter:none}50%{transform:scale(1.35);filter:drop-shadow(0 0 8px #fff)}}
.ev.pin-pulse{animation:pin-pulse .9s ease-in-out 5;transform-origin:50% 100%}
.pin-sheet{position:fixed;inset:0;z-index:4000;background:rgba(4,8,12,.72);display:none;align-items:center;justify-content:center;padding:16px}
.pin-sheet.show{display:flex}
.pin-sheet-box{width:100%;max-width:520px;background:var(--t-surface-1,#0e1620);border:1px solid var(--t-line-strong,#2a3a4e);border-radius:8px;padding:10px;box-sizing:border-box}
.pin-sheet-head{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;margin-bottom:8px}
.pin-sheet-x{flex:none;width:30px;height:30px;font-size:20px;line-height:1;border:1px solid var(--t-line-strong,#2f4257);border-radius:4px;background:var(--t-surface-2,#101a25);color:var(--t-strong,#fff);cursor:pointer}
#pin-sheet-map{height:min(60vh,420px);border-radius:6px}
/* The control key for the pop-up map: one row, between the map and the button
   to the main map. Wraps rather than scrolls on a narrow pop-up. */
.pin-sheet .pop-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem;
  margin:6px 2px 0;font-size:.66rem;color:var(--t-text-2,#b6c5d4);line-height:1.3;
}
.pin-sheet .pop-legend span{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.pin-sheet .pop-legend .sw{width:.7rem;height:.7rem;border-radius:2px;flex:none;box-shadow:inset 0 0 0 1px #0005}
.pin-sheet .front-float-go{margin-top:8px;width:100%;padding:.55rem;border:0;border-radius:4px;background:#1d4ed8;color:var(--t-strong,#fff);font:inherit;font-size:.82rem;cursor:pointer}

/* ---- Governorate names, above the control colours ----------------------- */
.gov-name{background:none;border:0}
.gov-name span{
  display:block;transform:translate(-50%,-50%);white-space:nowrap;
  font:700 12px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.01em;color:var(--t-on-light,#0b0f14);
  text-shadow:0 0 2px #fff,0 0 3px #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff;
}
.names-small .gov-name span{font-size:9.5px}

/* ---- The pin map floating beside a card (desktop hover) ----------------- */
.pin-sheet.as-pop{background:none;pointer-events:none;display:none}
.pin-sheet.as-pop.show{display:block}
.pin-sheet.as-pop .pin-sheet-box{position:fixed;pointer-events:auto;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.pin-sheet.as-pop #pin-sheet-map{height:300px}
/* The stamp tight under each heading, the same distance in every column. */
#fronts-stamp > .cadence.at-head{margin-top:-6px}
#casualties > .cadence.at-head{margin-top:-1px}
.situation .cadence.at-head{margin-top:-1px}

/* ---- Saudi cities: the big ones, and the border towns and targets ------- */
.sa-city{background:none;border:0}
.sa-city i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--t-surface-3,#1f2937);border:1px solid #fff}
.sa-city span{position:absolute;left:6px;top:-7px;white-space:nowrap;font:600 11px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--t-on-light,#374151);font-style:italic;
  text-shadow:0 0 2px #fff,0 0 3px #fff,1px 1px 0 #fff,-1px -1px 0 #fff}
.sa-city.t1 span{font-size:12px;font-weight:700;color:var(--t-on-light,#1f2937)}
.sa-t2-off .sa-city.t2,.sa-t3-off .sa-city.t3{display:none}
/* A label the shared collision pass (declutterLabels) stood down. `!important`
   because the class lands on the text itself, and `.gov-name span{display:block}`
   above is the more specific selector. A stood-down Saudi city keeps its dot:
   the place is still marked, it just goes unnamed at this zoom. */
.lbl-collide{display:none!important}

/* ---- The numbers: Official | Unofficial ---------------------------------- */
.tally.wide{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.tally-box.claims table{width:100%;border-collapse:collapse;font-size:.76rem}
.tally-box.claims th,.tally-box.claims td{padding:.2rem .25rem;border-top:1px solid var(--t-line,#1a2531);text-align:right;font-variant-numeric:tabular-nums}
.tally-box.claims tr:first-child th{border-top:0;font-size:.62rem;font-weight:600;color:var(--t-muted,#8fa3b6);text-transform:uppercase;letter-spacing:.03em;vertical-align:bottom}
.tally-box.claims th[scope=row]{text-align:left;font-weight:400;color:var(--t-text,#c9d4e0)}
.tally-box.claims td{color:var(--t-text,#eaf0f6);font-weight:600}
.tally-box.claims td a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.tally-box.claims .h{color:#e08a55}
.tally-box.claims .g{color:#4ade80}

/* Latest developments: a quiet way down to the fronts. */
.sit-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.situation .sit-head > h2{margin:0 0 .25rem;font-size:1.05rem;font-weight:700;color:var(--t-strong,#fff)}
.to-fronts{flex:none;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.12rem .6rem;transition:color .15s,border-color .15s}
.to-fronts:hover,.to-fronts:focus-visible{color:var(--text);border-color:var(--t-line-strong,#3a4b5f);outline:none}
.fronts-wrap:focus{outline:none}

/* Fronts, one at a time (the shared pager below). */
#fronts.one-front{display:block}

/* Fronts and Numbers share one pager (app.js pagerHtml): every slide in one
   grid cell, so the box keeps the height of its tallest slide and the section
   under it never moves. */
.pager{position:relative;border:1px solid var(--t-line-strong,#2a3a4e);border-radius:10px;background:var(--t-surface-2,#121a24);overflow:hidden}
.pg-track{display:grid;touch-action:pan-y}
.pg-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateX(calc(var(--from,1) * 24px));transition:opacity .26s cubic-bezier(.2,.7,.2,1),transform .26s cubic-bezier(.2,.7,.2,1),visibility 0s linear .26s}
.pg-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .26s cubic-bezier(.2,.7,.2,1),transform .26s cubic-bezier(.2,.7,.2,1),visibility 0s}
.pager .front-card,.pager .tally-box,.pager .phase-card{height:100%;margin:0;border:0;border-radius:0;background:transparent}
.pager .front-card,.pager .phase-card{padding:.7rem .85rem}
.pager .tally-box{padding:.6rem .8rem .7rem}
.pg-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:28px;height:28px;margin-top:-14px;padding:0;border:1px solid var(--t-line-strong,#2a3a4e);border-radius:50%;background:rgba(15,24,34,.88);color:var(--t-text,#c9d4e0);opacity:.5;transition:opacity .2s,background .2s,border-color .2s,color .2s}
.pg-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-arrow[hidden]{display:none}
.pg-prev{left:8px}
.pg-next{right:8px}
.pager:hover .pg-arrow{opacity:.85}
.pg-arrow:hover,.pg-arrow:focus-visible{opacity:1;background:var(--t-surface-3,#1e2c3c);border-color:#4a6380;color:var(--t-strong,#fff);outline:none}
@media (hover:hover) and (min-width:721px){.pager.many .front-card,.pager.many .tally-box,.pager.many .phase-card{padding-left:2.9rem;padding-right:2.9rem}}
@media (hover:none),(max-width:720px){.pg-arrow{display:none}}
.pg-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin-top:.45rem}
.pg-dots button{display:flex;align-items:center;padding:6px 3px;border:0;border-radius:999px;background:none}
.pg-dots button::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--t-surface-4,#334155);transition:width .26s cubic-bezier(.2,.7,.2,1),background-color .26s}
.pg-dots button:hover::before{background:#64748b}
.pg-dots button.on::before{width:18px;background:#cbd5e1}
.pg-dots button:focus-visible{outline:1px solid #4a6380;outline-offset:0}
/* A dot's name: shown only where the dots are a row of named tabs (the map view's Arenas and Fronts, ops.css). */
.pg-dots .pg-name{display:none}
.tally-box.claims td.none{color:var(--t-faint,#556579);font-weight:400}
@media (prefers-reduced-motion:reduce){.pg-slide{transform:none!important}.pg-dots button::before{transition:none}}
.prose-pin{color:inherit;text-decoration:underline dotted rgba(126,182,255,.7);text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.prose-pin:hover,.prose-pin:focus-visible{color:var(--t-link,#7eb6ff);text-decoration-style:solid}

/* ---- Search and the alignment filters, in the reports column ------------ */
.rail-head:has(.feed-search-btn){align-items:center}
.feed-search-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:0;background:transparent;color:var(--t-text-2,#b8c4d2);cursor:pointer}
.feed-search-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* The search and its X stand bare, with no box round them (user, 18 Oct). */
.feed-search-btn:hover,.feed-search-btn[aria-expanded="true"]{background:transparent;color:var(--t-strong,#fff)}
.feed-search .fs-field{position:relative;flex:1;min-width:0;display:flex}
.feed-search .fs-field input{padding-right:2.1rem}
.feed-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.feed-search .fs-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--t-muted,#7d8ea0);cursor:pointer}
.feed-search .fs-clear[hidden]{display:none}
.feed-search .fs-clear:hover{color:var(--t-strong,#fff)}
.feed-search .fs-clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.feed-search{display:flex;gap:6px;margin:0 0 .6rem}
.feed-search[hidden]{display:none}
.feed-search input{flex:1;min-width:0;height:36px;padding:0 .7rem;border:1px solid var(--t-line-strong,#2a3a4e);border-radius:var(--r-btn,6px);background:var(--t-surface-2,#101a25);color:var(--t-strong,#fff);font:inherit;font-size:.82rem}
.feed-search input::placeholder{color:var(--t-muted,#7d8ea0)}
.feed-search input:focus{outline:2px solid var(--t-link,#7eb6ff);outline-offset:1px}
.feed-search .fs-go{flex:none;height:36px;padding:0 .85rem;border:0;border-radius:var(--r-btn,6px);background:#1d4ed8;color:#fff;font:600 .72rem/1 var(--f-body,inherit);cursor:pointer}
.feed-search .fs-go:hover{filter:brightness(1.12)}
/* The source groups behind one button (user, 9 Oct: six chips were heavy on the eye) */
.feed-legend.lf{position:relative;display:block}
.lf-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .6rem;border:1px solid var(--t-line-strong,#2a3a4e);border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.lf-btn:hover,.lf-btn[aria-expanded="true"]{background:var(--t-surface-3,#17273a);color:var(--t-strong,#fff)}
.lf-btn.on{border-color:currentColor;color:var(--t-strong,#fff)}
.lf-sws{display:inline-flex;gap:2px}
.lf-sws .sw,.lf-menu .sw{width:8px;height:8px;border-radius:50%;flex:none}
.lf-menu{color:var(--t-text,#e2e8f0);font-size:.8rem}
.lf-btn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.lf-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lf-menu{position:absolute;z-index:40;top:calc(100% + 4px);inset-inline-start:0;min-width:220px;display:flex;flex-direction:column;padding:.3rem;background:var(--t-surface-1,#0f1822);border:1px solid var(--t-line-strong,#2a3a4e);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lf-menu[hidden]{display:none}
.feed-legend .lf-menu :is(.lean-f,.lf-all){display:flex;align-items:center;gap:.5rem;width:100%;padding:.45rem .55rem;border:0;border-radius:6px;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;white-space:nowrap}
.feed-legend .lf-menu :is(.lean-f,.lf-all):hover{background:var(--t-surface-3,#17273a);color:var(--t-strong,#fff)}
.feed-legend .lf-menu :is(.lean-f,.lf-all)[aria-pressed="true"]{background:var(--t-surface-3,#17273a);color:var(--t-strong,#fff);font-weight:600;border:0}
.feed-legend.lf.filtering .lean-f[aria-pressed="false"]{opacity:1}
.feed-legend .lean-f{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;padding:.3rem .6rem;border:1px solid var(--t-line-strong,#2a3a4e);border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.feed-legend .lean-f:hover{background:var(--t-surface-3,#17273a);color:var(--t-strong,#fff)}
.feed-legend .lean-f[aria-pressed="true"]{background:var(--t-surface-3,#17273a);border-color:currentColor;color:var(--t-strong,#fff);font-weight:600}
.feed-legend.filtering .lean-f[aria-pressed="false"]{opacity:.5}
.feed-note{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;margin:0 0 .6rem;font-size:.74rem;line-height:1.4;color:var(--t-text-2,#b8c4d2)}
.feed-note[hidden]{display:none}
.feed-note b{color:var(--t-strong,#fff)}
.feed-note button{padding:0;border:0;background:none;color:var(--t-link,#7eb6ff);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.feed-note .fs-spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:fsSpin .8s linear infinite}
@keyframes fsSpin{to{transform:rotate(360deg)}}
.fs-empty{margin:.4rem 0;font-size:.8rem;line-height:1.45;color:var(--t-text-2,#b8c4d2)}
@media (max-width:720px){.feed-legend .lean-f{padding:.42rem .7rem}.lf-btn{padding:.42rem .7rem}.feed-legend .lf-menu :is(.lean-f,.lf-all){padding:.6rem .6rem}.feed-search input,.feed-search .fs-go{height:40px;font-size:16px}.feed-search .fs-go{font-size:.78rem}}
@media (prefers-reduced-motion:reduce){.feed-note .fs-spin{animation:none}}

/* The Yemen clock at the head of the top line: a small label, then the time to the second */
.ye-clock{display:inline-flex;align-items:baseline;gap:.4rem;padding-inline-end:.7rem;margin-inline-end:.3rem;border-inline-end:1px solid var(--line)}
.yc-label{font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
#ye-clock{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.02em;color:var(--text,#e6edf3)}

/* The numbers' category switch (Casualties | Maritime | Energy) and the ledger's boxes */
.num-cat{display:inline-flex;margin:.15rem 0 .45rem;border:1px solid var(--t-line-strong,#334155);border-radius:6px;overflow:hidden}
.num-cat button{padding:.42rem .75rem;border:0;background:transparent;color:var(--t-text-2,#a8b8c9);font:600 .68rem/1 var(--f-body,inherit);letter-spacing:.04em;cursor:pointer;transition:background .15s,color .15s}
.num-cat button+button{border-left:1px solid var(--t-line-strong,#334155)}
.num-cat button:hover{color:var(--t-strong,#fff)}
.num-cat button.on{background:#f8fafc;color:#0b1220}
.num-cat button:focus-visible{outline:2px solid var(--accent-ui,#7eb6ff);outline-offset:-2px}
.tally-box.ledger td.src,.tally-box.ledger th.src{text-align:left;font-weight:400;font-size:.7rem;color:var(--t-text-2,#a8b8c9)}
.tally-box.ledger td.src small{color:var(--t-muted,#8fa3b6);white-space:nowrap}
.tally-box.ledger td.src a{border-bottom:1px dotted currentColor;color:var(--t-text,#d7e2ef);text-decoration:none}
.tally-box.ledger .l{text-align:left;font-weight:400}
.tally-box.ledger td small,.tally-box.ledger th small{display:block;font-size:.66rem;font-weight:400;color:var(--t-muted,#8fa3b6)}
.tally-box.ledger td small.q{display:inline}
.tally-box.ledger small.q.down{color:#f59e0b}
.tally-box.ledger small.q.up{color:#4ade80}
.tally-box.ledger tr.sum th,.tally-box.ledger tr.sum td{border-top:1px solid var(--t-line-strong,#243244);font-weight:600}
.tally-box.ledger tr.spark-row td{border-top:0;padding:0 .25rem .35rem}
.tally-box.ledger .spark{display:block;width:100%;height:30px}
.tally-box.ledger .spark polyline{fill:none;stroke:var(--t-strong,#e6edf3);stroke-width:1.5;vector-effect:non-scaling-stroke}
.tally-box.ledger .spark .base{stroke:var(--t-muted,#8fa3b6);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.tally-box.ledger table.figs{margin-top:.5rem}
.tally-box.ledger small.claim,.num-note small.claim{display:inline-block;margin-left:.2rem;padding:0 .3rem;border:1px solid currentColor;border-radius:3px;font-size:.6rem;line-height:1.35;letter-spacing:.04em;text-transform:uppercase;color:#f59e0b;white-space:nowrap}
.num-empty{margin:.4rem 0;font-size:.78rem;color:var(--t-muted,#8fa3b6)}
.num-note{margin:.45rem 0 0;font-size:.68rem;line-height:1.4;color:var(--t-muted,#8fa3b6)}
.num-note a{color:inherit}
.st{display:inline-block;padding:.12rem .4rem;border-radius:3px;font-size:.64rem;font-weight:600;letter-spacing:.03em;border:1px solid currentColor}
.st-working{color:#4ade80}.st-reduced{color:#f59e0b}.st-down{color:#f87171}.st-unknown{color:var(--t-muted,#8fa3b6)}

/* Maritime and Energy (30 Sep, round 2): three counts, source tags, charts, month bars */
.stat3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:.3rem 0 .35rem}
.stat3 div{border:1px solid var(--t-line,#1c2836);border-radius:6px;padding:.5rem .4rem .45rem;text-align:center}
.stat3 b{display:block;font-size:1.5rem;line-height:1.1;font-weight:700;color:var(--t-strong,#fff);font-variant-numeric:tabular-nums}
.stat3 span{display:block;margin-top:.15rem;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--t-muted,#8fa3b6)}
/* A count with no link is the same size as one with a link (20 Oct: the energy counts were tiny). */
.stat3 b span.sl{display:inline;margin:0;font-size:inherit;letter-spacing:inherit;text-transform:none}
.tier{display:inline-block;padding:0 .32rem;border:1px solid currentColor;border-radius:3px;font-size:.6rem;font-weight:600;line-height:1.45;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
a.tier:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
.tally-box.claims td .tier,.tally-box.claims .tier{border:1px solid currentColor}
.tally-box.claims .tier.t-official{color:#4ade80}.tally-box.claims .tier.t-wire{color:#7eb6ff}.tally-box.claims .tier.t-claim{color:#f59e0b}.tally-box.claims .tier.t-data{color:var(--t-text-2,#a8b8c9)}
.tally-box.ledger table.list td.d,.tally-box.ledger table.list th.d{width:3.6rem;text-align:left;white-space:nowrap;color:var(--t-text-2,#a8b8c9)}
.tally-box.ledger table.list td.t,.tally-box.ledger table.list th.t{width:4.2rem;text-align:right}

.tally-box.ledger table.list{margin-top:.5rem}
.tally-box.ledger td.hits{line-height:1.9}
.tally-box.ledger .hit{display:inline-block;margin-right:.45rem;white-space:nowrap;font-size:.7rem;color:var(--t-text-2,#a8b8c9)}
.tally-box.ledger table.span4,.tally-box.ledger table.span5{margin-top:.35rem}
.tally-box.ledger td.big{font-size:1.05rem;font-weight:700}
.chart-title{margin:.75rem 0 .1rem;font-size:.7rem;font-weight:600;color:var(--t-text-2,#a8b8c9)}
.chart{display:block;width:100%;height:auto;max-height:230px;overflow:visible}
.chart .grid line{stroke:var(--t-line,#1c2836);stroke-width:.6}
.chart .grid line.tick{stroke:var(--t-muted,#8fa3b6)}
.chart text{fill:var(--t-muted,#8fa3b6);font-size:8.5px;font-family:inherit}
.chart polyline{fill:none;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.chart .s1{stroke:var(--t-strong,#e6edf3);fill:none}.chart circle.s1{fill:var(--t-strong,#e6edf3);stroke:none}
.chart .s2{stroke:#7eb6ff;fill:none}.chart circle.s2{fill:#7eb6ff;stroke:none}
.chart .base{stroke:var(--t-muted,#8fa3b6);stroke-width:1;stroke-dasharray:4 3}
.chart line.war{stroke:#ef4444;stroke-width:1;stroke-dasharray:2 2}.chart text.war{fill:#ef4444}
.chart-key{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:.2rem 0 .1rem;font-size:.64rem;color:var(--t-muted,#8fa3b6)}
.chart-key i{display:inline-block;width:14px;height:0;margin-right:.3rem;vertical-align:middle;border-top:2px solid var(--t-strong,#e6edf3)}
.chart-key i.s2{border-top-color:#7eb6ff}.chart-key i.base{border-top:1px dashed var(--t-muted,#8fa3b6)}
.mbars{margin:.2rem 0}
.mbar{display:grid;grid-template-columns:7rem minmax(0,1fr) 2.9rem 4rem;align-items:center;gap:.5rem;padding:.3rem 0;border-top:1px solid var(--t-line,#1c2836);font-size:.74rem}
.mbar .k{color:var(--t-text,#d7e2ef)}.mbar .k small{display:block;font-size:.62rem;color:var(--t-muted,#8fa3b6)}
.mbar .mb-track{height:9px;background:color-mix(in srgb,var(--t-line,#1c2836) 70%,transparent);border-radius:2px;overflow:hidden}
.mbar .mb-track i{display:block;height:100%;background:var(--t-strong,#e6edf3)}
.mbar.pre .mb-track i{background:var(--t-muted,#8fa3b6)}
.mbar b{text-align:right;font-variant-numeric:tabular-nums;color:var(--t-strong,#fff)}
.mbar .tier{justify-self:end}
@media (max-width:560px){
  .stat3 b{font-size:1.25rem}
  .mbar{grid-template-columns:5.2rem minmax(0,1fr) 2.6rem 3.6rem;gap:.35rem;font-size:.7rem}
  .tally-box.ledger table.span5 th,.tally-box.ledger table.span5 td{padding-left:.2rem;padding-right:.2rem;font-size:.72rem}
}

/* Maritime and Energy (30 Sep, round 3): links in the numbers, More details, the spots' charts */
.pg-track{position:relative}
/* Each box is as tall as the slide shown: no blank space under a short one. */
.pg-slide:not(.on){position:absolute;top:0;left:0;right:0}
.tally-box h3 small.unit{margin-left:.25rem;font-size:.62rem;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--t-muted,#8fa3b6)}
/* A linked number: a thin line under it, in its own colour (white official, amber not). */
.tally-box.claims .sl{border-bottom:0;text-decoration:none;white-space:nowrap}
.tally-box.claims a.sl,.tally-box.claims td a{text-decoration:none;border-bottom:1px dotted currentColor}
.tally-box.claims a.sl:hover,.tally-box.claims td a:hover{border-bottom-style:solid}
.tally-box.ledger table.span5 small.q{display:block}
.tally-box.claims .sl-off,.sl-key .sl-off{color:var(--t-strong,#f1f5f9)}
.tally-box.claims .sl-unoff,.sl-key .sl-unoff{color:#f59e0b}
.sl-key{display:flex;gap:.9rem;margin:.45rem 0 0;font-size:.64rem;color:var(--t-muted,#8fa3b6)}
.sl-key span::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.3rem;border-radius:50%;background:currentColor;vertical-align:.04em}
.led-detail{margin-top:.5rem}
.led-more:not(.open) tr.led-rest{display:none}
.led-more .led-tog{display:block;margin-top:.6rem}
.led-more.expandable,.front-card.expandable,.tally-box.expandable{cursor:pointer}
.tally-box.ledger td small.flag{display:inline;font-size:.64rem}
.tally-box.ledger th small.span{display:block;margin-top:.1rem;font-size:.58rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--t-muted,#8fa3b6)}
.tally-box.ledger table.list td.d{width:4.2rem}
.tally-box.ledger table.list td.dates{width:6.2rem;white-space:normal;line-height:1.6}
.tally-box.ledger table.list td.dates .sl{display:inline-block;margin-right:.45rem}
.tally-box.ledger table.list td,.tally-box.ledger table.list th{vertical-align:top}
.tally-box.ledger table.span3{margin-top:.35rem}
.tally-box.ledger .st-link svg{color:var(--t-muted,#8fa3b6)}
/* The chart icon sits to the right of the name (never wrapped under it); the dotted line stays under the name */
.tally-box.ledger .spot{display:inline;white-space:nowrap;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.tally-box.ledger .spot-name{border-bottom:1px dotted var(--t-muted,#8fa3b6)}
.tally-box.ledger .spot-end{white-space:nowrap}
@media (max-width:720px){.tally-box.ledger .spot{white-space:normal}}
.tally-box.ledger .spot svg{display:inline-block;width:.95em;height:.95em;margin-left:.35em;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.tally-box.ledger .spot:hover,.tally-box.ledger .spot[aria-expanded="true"]{color:var(--t-strong,#fff)}
.mbar{grid-template-columns:7.4rem minmax(0,1fr) 3.6rem}
.mbar b{white-space:nowrap}
.spot-pop{position:absolute;z-index:1300;box-sizing:border-box;padding:.55rem .7rem .45rem;border:1px solid var(--t-line-strong,#2a3a4e);border-radius:8px;background:var(--t-surface-2,#121a24);box-shadow:0 10px 30px #0008}
.spot-pop .chart-title{margin-top:0;color:var(--t-strong,#fff)}
@media (max-width:560px){.mbar{grid-template-columns:6rem minmax(0,1fr) 3.4rem}}
/* The weapon column (user, 2 Oct): ballistic missile, drones, explosive boat... */
.tally-box.ledger table.list td.w{font-size:.92em;line-height:1.35;color:var(--t-text-2,#a8b8c9)}
.tally-box.ledger table.list th.w{width:24%}
.tally-box.ledger table.list td.w .unk{opacity:.7}
@media (max-width:520px){.tally-box.ledger table.list td.w,.tally-box.ledger table.list th.w{font-size:.85em}}

/* The Iran desk's six source groups (Round 30 stage 3b): the colours of its filter buttons. */
.card.ir-axis,.card.ir-axis:hover,.card.ir-axis.open{border-inline-start-color:#c45c26!important}
.card.ir-opposition,.card.ir-opposition:hover,.card.ir-opposition.open{border-inline-start-color:#a855f7!important}
.card.ir-israel,.card.ir-israel:hover,.card.ir-israel.open{border-inline-start-color:#3b82f6!important}
.card.ir-us,.card.ir-us:hover,.card.ir-us.open{border-inline-start-color:#ef4444!important}
.card.ir-gulf,.card.ir-gulf:hover,.card.ir-gulf.open{border-inline-start-color:#22c55e!important}
.card.ir-intl,.card.ir-intl:hover,.card.ir-intl.open{border-inline-start-color:#94a3b8!important}
/* The Gaza – Judea & Samaria desk's groups (user, 23 Oct); Israeli and International as above. */
.card.ir-pa,.card.ir-pa:hover,.card.ir-pa.open{border-inline-start-color:#eab308!important}
.card.ir-factions,.card.ir-factions:hover,.card.ir-factions.open{border-inline-start-color:#16a34a!important}
.card.ir-palestinian,.card.ir-palestinian:hover,.card.ir-palestinian.open{border-inline-start-color:#ef4444!important}
.card.ir-arab,.card.ir-arab:hover,.card.ir-arab.open{border-inline-start-color:#c45c26!important}
.ls-note{margin:0 0 8px;font-size:12px;opacity:.75}
.ls-verdict{margin-inline-start:auto;font-size:11px;opacity:.7}
/* A group picked: its × clears the filter, unturned and a touch larger to hit. */
.lf-btn.on svg{transform:none!important;width:12px;height:12px;padding:2px;margin:-2px -4px -2px 0;box-sizing:content-box;border-radius:50%}
.lf-btn.on svg:hover{background:var(--t-line-strong,#2a3a4e)}
/* The Iran desk's pins (user, 9 Oct): a plain dot in its side's colour, no symbol. */
.ir-dot-wrap{background:none;border:0}
.ir-dot{display:block;width:14px;height:14px;margin:1px;border-radius:50%;background:var(--ink,#94a3b8);border:2px solid #fff;box-shadow:0 0 0 1px #0008,0 1px 3px #0006;box-sizing:border-box}
.ir-dot.fresh{animation:ir-dot-pulse 1.8s ease-out infinite}
@keyframes ir-dot-pulse{0%{box-shadow:0 0 0 1px #0008,0 0 0 0 var(--ink)}100%{box-shadow:0 0 0 1px #0008,0 0 0 9px transparent}}
.leaflet-popup-content .pop-body{margin:.4rem 0 0;font-size:.76rem;line-height:1.4;color:var(--t-on-light,#1a2330);max-height:180px;overflow:auto}
/* The Iran desk's numbers (Round 31 N3): scoped to its own boxes, so the Yemen desk's are unchanged. */
.tally-box.ir.rows-more tr.xtra{display:none}
.tally-box.ir.rows-more.open tr.xtra{display:table-row}
.tally-box.ir.claims th.u,.tally-box.ir.claims td.u a{color:#f59e0b}
.tally-box.ir th[scope=row] small,.tally-box.ir td.l small{display:block;font-weight:400;color:var(--t-muted,#8fa3b6);font-size:.72em}
.tally-box.ledger.ir td small.q{display:block}
.tally-box.ir .stat3.solo{grid-template-columns:minmax(0,16rem);justify-content:center}
.tally-box.ledger.ir table.one td,.tally-box.ledger.ir table.one th:not(.l){text-align:center}
.tally-box.ledger.ir table.span3 td:not(.l),.tally-box.ledger.ir table.span3 th:not(.l){text-align:center}
.tally-box.ledger.ir h3 small.unit-why{display:block;margin-top:.15rem;font-size:.66rem;font-weight:400;text-transform:none;letter-spacing:0;color:var(--t-muted,#8fa3b6)}
.tally-box.ir .ir-note{margin:.5rem 0 0;font-size:.74rem;line-height:1.4;color:var(--t-muted,#8fa3b6)}
.tally-box.ir .ir-spark{margin:.6rem 0 0}
.tally-box.ir .ir-spark svg{display:block;width:100%;height:64px}
.tally-box.ir .ir-spark path{fill:none;stroke:var(--accent,#60a5fa);stroke-width:2;vector-effect:non-scaling-stroke}
.tally-box.ir .ir-spark figcaption{display:flex;justify-content:space-between;gap:.5rem;font-size:.68rem;color:var(--t-muted,#8fa3b6)}
@media (max-width:560px){
  .tally-box.ir table td,.tally-box.ir table th{white-space:normal;padding-left:.2rem;padding-right:.2rem}
  .tally-box.ir table.list td,.tally-box.ir table.span3 td{font-size:.8rem}
  .tally-box.ir .led-detail,.tally-box.ir table.span3{max-width:100%}
  .tally-box.ir .led-detail{overflow-x:auto}
  .tally-box.ir a.sl,.tally-box.ir small{white-space:normal}
  .tally-box.ir table td.l{min-width:5.5rem}
  .tally-box.ir table.list td.l.w{min-width:6rem}
}
/* Iran numbers (user, 11 Oct): a long box opens with Read more; the chart sign by a box's name; the older sanctions given room. */
.tally-box.ir.ir-clamp:not(.open) .ir-clamp-body{max-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.tally-box.ir table.list.sanc td{padding-top:.55rem;padding-bottom:.55rem;line-height:1.45;vertical-align:top}
.tally-box.ir table.list.sanc tr+tr td{border-top:1px solid var(--t-line,rgba(127,127,127,.18))}
/* Six sets do not fit a phone's width in one row: two rows of three. */
@media (max-width:560px){
  #iran-numbers .num-cat{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--t-line-strong,#334155);width:100%}
  #iran-numbers .num-cat button{background:var(--t-bg,var(--bg,#111));padding:.55rem .3rem;text-align:center}
  #iran-numbers .num-cat button+button{border-left:0}
  #iran-numbers .num-cat button.on{background:#f8fafc}
  html[data-set="broadsheet"] #iran-numbers .num-cat button.on{background:var(--t-strong)}
  /* Yemen's four sets (Territory added 17 Oct): two rows of two. */
  #casualties .num-cat{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--t-line-strong,#334155);width:100%}
  #casualties .num-cat button{background:var(--t-bg,var(--bg,#111));padding:.55rem .3rem;text-align:center}
  #casualties .num-cat button+button{border-left:0}
  #casualties .num-cat button.on{background:#f8fafc}
  html[data-set="broadsheet"] #casualties .num-cat button.on{background:var(--t-strong)}
}
/* A short "By" (EU, UN) stays on one line; a long "Who" (the US list: "17 tankers, 17 firms...") wraps, so no box needs a sideways scroll on a phone (user, 18 Oct). */
.tally-box.ir table.list.sanc td.l:not(.w),.tally-box.ir table.list.sanc th.l:not(.w){width:auto;min-width:2.6rem;max-width:40%;white-space:normal;overflow-wrap:anywhere}
.tally-box.ir table.list.sanc td.l.w,.tally-box.ir table.list.sanc th.l.w{width:auto}
/* The timeline's sources: a list that opens on a click (user, 12 Oct). */
.src-list{margin-top:.25rem}
.src-list summary{cursor:pointer;color:var(--t-link,#7eb6ff);list-style:none;display:inline-block}
.src-list summary::-webkit-details-marker{display:none}
.src-list summary::after{content:" ▾";font-size:.85em}
.src-list[open] summary::after{content:" ▴"}
.src-list ul{margin:.3rem 0 0;padding-left:1.1rem;columns:2 12rem;column-gap:1.2rem}
.src-list li{margin:.12rem 0;break-inside:avoid}
.ir-mark{color:var(--t-accent,#f59e0b);font-weight:700;margin-left:1px}

/* Every map's pin (user, 17 Oct): the mark says what happened, the colour who did it.
   A white mark on a dark side colour, a near-black one on a light one; the legend's
   marks for the kinds of event sit on a plain disc, since the colour is the side's. */
/* The kinds' marks: white on a slate disc, clear in day and night (user, 17 Oct: a white mark on a pale disc did not show). */
html .leg-ico.kind,html[data-set] .leg-ico.kind{background:#475569;color:#fff;box-shadow:none}
.ev.ink-light .ev-glyph{color:#fff}
/* A period: the day's own date box is its first day, a second one like it beside it its last (user, 17 Oct). */
.time-filter .tf-range{display:inline-flex;flex-basis:auto;align-items:center;gap:.35rem;padding:0}
.time-filter .tf-range[hidden]{display:none}
.time-filter .tf-range .tf-to{font-size:.72rem}

/* Going from one desk, or the home page, to another is one cross-fade (user, 17 Oct): the masthead stays put. */
@view-transition{navigation:auto}
.mast{view-transition-name:mast}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media (prefers-reduced-motion: reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* The Gaza desk's brief: Gaza, then Judea and Samaria, each its own list (user, 24 Oct). */
.sit-area + .sit-area { margin-top: 14px; }
.sit-area-h { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, #8a94a6); }

/* The Gaza map's IDF-held area (user, 24 Oct): its box and the line's reported moves. */
.gz-line-box { background: rgba(15, 20, 30, 0.86); color: #e5e7eb; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 7px 9px; font-size: 11.5px; line-height: 1.45; max-width: 290px; }
.gz-line-box b { font-weight: 700; }
.gz-line-on { display: flex; gap: 6px; align-items: center; cursor: pointer; margin-bottom: 2px; }
.gz-row { display: flex; gap: 6px; align-items: flex-start; }
.gz-latest { color: #fcd34d; }
.gz-sw { flex: none; width: 11px; height: 11px; margin-top: 3px; border-radius: 2px; }
.gz-sw-held { background: rgba(234, 179, 8, 0.45); border: 1.5px solid #facc15; }
.gz-sw-zone { background: rgba(245, 158, 11, 0.2); border: 1.5px dashed #f59e0b; }
.gz-move span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #f59e0b; color: #111; font-size: 10px; box-shadow: 0 0 0 1.5px #111; }
.gz-move.gz-back span { background: #22c55e; }
.gz-move.gz-past span { background: rgba(17, 17, 17, 0.75); color: #f59e0b; box-shadow: 0 0 0 1.5px #f59e0b; }
.gz-move.gz-inline span { width: 14px; height: 14px; font-size: 8px; flex: none; margin-top: 1px; }
.gz-move-pop { font-size: 12.5px; line-height: 1.45; max-width: 260px; }
@media (max-width: 560px) { .gz-line-box { max-width: 210px; font-size: 10.5px; } }
.gz-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.gz-line-on { margin-bottom: 0; }
.gz-more { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; color: inherit; font: 700 11px/1 Georgia, serif; padding: 0; }
.gz-rows { margin-top: 4px; }
.gz-rows[hidden] { display: none; }
/* Yemen's district lines only zoomed in, as the other countries' (user, 26 Oct). */
.ye-dist-off path.ye-dist{stroke-opacity:0!important}
/* The IDF-held area is only a tick box now (26 Oct): it sits above the pointer's coordinates, not over them. */
.gz-line-box { margin-bottom: 36px !important; padding: 5px 8px; }
/* 26 Oct (user: "the idf held area covers some of the coordinates box"): above the coordinates box (bottom 34px, two
   lines), with room between; its share's source and date under the tick. */
html[data-view="ops"] .gz-line-box { margin-bottom: 44px !important; }
.gz-line-box .gz-line-src { display: block; margin: 1px 0 0 20px; color: #94a3b8; font-size: 10.5px; text-decoration: none; }
.gz-line-box .gz-line-src:hover { text-decoration: underline; }
.gz-line-box .gz-oslo-on { display: block; margin-top: 4px; }
.gz-oslo-sw { display: inline-block; width: 10px; height: 10px; margin: 0 2px 0 4px; border: 1px solid; border-radius: 2px; vertical-align: -1px; }
/* The explainers in categories (26 Oct): the chosen category's cards one under another. */
.ex-list { display: flex; flex-direction: column; gap: 10px; }
/* 26 Oct (user: "minimized in default and right over the coordinates box"): a one-line header that opens the tick boxes. */
.gz-box > summary { cursor: pointer; list-style: none; font-weight: 700; white-space: nowrap; }
.gz-box > summary::-webkit-details-marker { display: none; }
.gz-box > summary::before { content: "▸"; display: inline-block; width: 12px; color: #94a3b8; }
.gz-box[open] > summary::before { content: "▾"; }
.gz-box[open] > summary { margin-bottom: 4px; }

/* ---------- The Explainers' cards and the Timeline's eras, designed (user, 26 Oct: "much more nice to look at — clear
   colours, diagrams … very professional; the timeline too"). Each category a colour and an icon (app.js EX_CAT). ---------- */
.ex-list { gap: 12px; }
.ex-card { position: relative; padding: 14px 14px 12px; border: 1px solid var(--t-line, #243042); border-left: 3px solid var(--ex-c, #8a939d); border-radius: 4px; background: var(--t-surface-2, #141b24); }
.ex-svg { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.15em; }
.ex-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.ex-ic { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 4px; font-size: 15px; color: var(--ex-c); background: color-mix(in srgb, var(--ex-c) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ex-c) 40%, transparent); }
.ex-catname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1.1 var(--ops-cond, var(--f-body, inherit)); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ex-c) 72%, var(--t-strong, #fff)); }
.ex-date { flex: none; margin-left: auto; padding: 2px 7px; border: 1px solid var(--t-line-strong, #334155); border-radius: 999px; font: 500 10.5px/1.3 var(--ops-mono, ui-monospace, monospace); color: var(--t-muted, #94a3b8); white-space: nowrap; max-width: 52%; overflow: hidden; text-overflow: ellipsis; }
.ex-title { margin: 10px 0 5px; font: 700 15.5px/1.3 var(--ops-ui, var(--f-body, inherit)); color: var(--t-strong, #fff); text-wrap: balance; }
.ex-card .phase-sum { margin: 0; font-size: 13.5px; line-height: 1.5; }
.ex-xref { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0 0; }
.ex-xh { flex-basis: 100%; font: 700 10.5px/1 var(--ops-cond, var(--f-body, inherit)); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted, #94a3b8); }
.ex-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 24px; padding: 3px 9px; border: 1px solid var(--t-line-strong, #334155); border-radius: 999px; background: var(--t-surface-1, #0f141b); font-size: 12px; line-height: 1.25; color: var(--t-text, #dbe4ee) !important; text-decoration: none !important; }
.ex-chip:hover { border-color: var(--accent-ui, #e0a43c); color: var(--t-strong, #fff) !important; }
.ex-chip .ex-svg { font-size: 13px; color: var(--accent-ui, #e0a43c); }
.ex-chip-tl, .ex-chip-ex { border-color: color-mix(in srgb, var(--accent-ui, #e0a43c) 45%, var(--t-line-strong, #334155)); background: color-mix(in srgb, var(--accent-ui, #e0a43c) 8%, var(--t-surface-1, #0f141b)); }
.ex-read { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; font: 700 11.5px/1 var(--ops-cond, var(--f-body, inherit)); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ex-c, var(--accent-ui, #e0a43c)) 75%, var(--t-strong, #fff)) !important; text-decoration: none !important; }
.ex-read:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.ex-open { padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--ex-c) 55%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--ex-c) 12%, transparent); }
.ex-open:hover { background: color-mix(in srgb, var(--ex-c) 22%, transparent); text-decoration: none !important; }
.ex-guide { background: linear-gradient(180deg, color-mix(in srgb, var(--ex-c) 9%, var(--t-surface-2, #141b24)), var(--t-surface-2, #141b24) 55%); }
.ex-g-fig { display: block; margin: -2px 0 12px; padding: 8px 6px 6px; border: 1px solid var(--t-line, #243042); border-radius: 3px; color: var(--t-strong, #fff); background-color: var(--t-surface-1, #0f141b); background-image: radial-gradient(color-mix(in srgb, var(--t-line-strong, #334155) 80%, transparent) 1px, transparent 1.2px); background-size: 12px 12px; }
.ex-org { display: flex; flex-direction: column; align-items: center; }
.eo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; }
.eo-row > span { flex: 1 1 auto; max-width: 100%; padding: 4px 6px 3px; border: 1px solid color-mix(in srgb, var(--eo) 60%, transparent); border-top: 2px solid var(--eo); border-radius: 2px; background: color-mix(in srgb, var(--eo) 14%, transparent); font: 600 10.5px/1.15 var(--ops-ui, system-ui, sans-serif); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-top > span { flex: 0 1 auto; padding: 5px 12px 4px; font-size: 11.5px; }
.eo-sm > span { font-size: 10px; font-weight: 500; }
.eo-ln { display: block; width: 1px; height: 8px; background: currentColor; opacity: .4; }
.ex-all { margin: 0; }
.ex-cats button { display: inline-flex; align-items: center; gap: 6px; }
.ex-cats button .ex-svg { font-size: 14px; color: var(--ex-c); }

/* The Timeline's eras: the dates first, the era's place in the run, Now in the highlight colour. */
.tl-card .tl-head { align-items: center; }
.tl-when { display: inline-flex; align-items: center; gap: 8px; font: 500 .74rem var(--ops-mono, ui-monospace, monospace); color: var(--t-muted, #94a3b8); }
.tl-now2 { display: none; }
.tl-n { color: var(--t-faint, #64748b); font-size: .9em; }
.tl-card .phase-sum { font-weight: 500; color: var(--t-strong, #fff); }
.tl-card .full > p:first-child { margin-top: .6rem; }
.tl-card .tl-map { padding: 6px 9px; border-left: 2px solid var(--t-line-strong, #334155); background: var(--t-surface-1, #0f141b); }
.tl-upd { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.tl-upd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #46b37a; }
.tl-card .src-list ul { list-style: none; padding: 0; columns: 1; }
.tl-card .src-list li { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--t-line, #243042); }
.tl-card .src-list li:last-child { border-bottom: 0; }
.src-host { margin-left: 4px; font: 400 10.5px var(--ops-mono, ui-monospace, monospace); color: var(--t-faint, #64748b); }
.pg-dots .tl-yr { display: none; }
@keyframes tl-flash { 0% { box-shadow: 0 0 0 2px var(--accent-ui, #e0a43c); } 100% { box-shadow: 0 0 0 2px transparent; } }
.pg-slide.tl-flash .phase-card { animation: tl-flash 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .pg-slide.tl-flash .phase-card { animation: none; } }