:root{
  --bg:#0a0d12;--bg-1:#0d1117;--bg-2:#10151c;--bg-3:#141a22;--bg-4:#1a212b;
  --line:#1f2630;--line-2:#262e3a;--line-3:#334050;
  --fg:#d3d8e0;--fg-2:#8f98a6;--fg-3:#6b7280;
  --green:#3f9b5c;--amber:#c9922a;--red:#d9484e;--blue:#4a93dd;--prop:#6e6a85;--grey:#55606e;
  --green-bg:rgba(63,155,92,.12);--amber-bg:rgba(201,146,42,.12);--red-bg:rgba(217,72,78,.12);--blue-bg:rgba(74,147,221,.12);--prop-bg:rgba(110,106,133,.14);
  --sans:'IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace;
  --r:4px;color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:12px/1.4 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow:hidden}
a{color:var(--fg-2);text-decoration:none}
a:hover{color:var(--fg)}
button{font:inherit;color:inherit;background:none;border:1px solid var(--line-2);border-radius:var(--r);padding:0 8px;line-height:22px;cursor:pointer}
button:hover{border-color:var(--line-3);background:var(--bg-3)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--blue);outline-offset:1px}
.lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.val{font-family:var(--mono);font-size:11px;color:var(--fg);white-space:nowrap}
.dot{display:inline-block;width:7px;height:7px;border-radius:3.5px;background:var(--grey);flex:none}
.dot.green{background:var(--green)}.dot.amber{background:var(--amber)}.dot.red{background:var(--red)}.dot.grey{background:transparent;border:1px solid var(--fg-3)}.dot.blue{background:var(--blue)}
.tr{display:block;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;flex:none}
.tr.up{border-bottom:5px solid var(--fg-2)}
.tr.down{border-top:5px solid var(--fg-2)}
.tr.flat{width:6px;border:0;border-top:1px solid var(--fg-3)}
.badge{display:inline-flex;align-items:center;border:1px solid var(--line-3);border-radius:var(--r);padding:0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:16px;white-space:nowrap;color:var(--fg)}
/* confirmation badges are solid, matching the map diamonds (.mk-sit, .legend .sw.sd) */
.badge.confirmed{background:var(--blue);color:#0a0d12;border-color:var(--blue)}
.badge.corrob{background:#c7d1de;color:#0a0d12;border-color:#e6ebf1}
.badge.unverified{border-style:dashed;border-color:var(--fg-3);color:var(--fg-2)}
.badge.resolved{border-color:var(--line-3);color:var(--fg-3);background:var(--bg-3)}
.badge.resolved .ck{display:inline-block;width:5px;height:8px;margin:0 6px 2px 0;border:solid var(--fg-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.badge.off{border-color:rgba(74,147,221,.55);color:var(--blue)}
.badge.adv{border-color:var(--fg-2);color:var(--fg-2);background:var(--bg-3)}
.badge.prop{border-color:var(--prop);color:var(--prop);background:var(--prop-bg)}
.badge.obs{border-color:var(--green);color:var(--green);background:var(--green-bg)}
.badge.obs.amber{border-color:var(--amber);color:var(--amber);background:var(--amber-bg)}
.badge.obs.red{border-color:var(--red);color:var(--red);background:var(--red-bg)}
/* words, not grades (2026-11-08): the letter box left; a muted word says what a source is (.bas, below) */
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-3);border-radius:var(--r);padding:0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:18px;white-space:nowrap;color:var(--fg)}
.chip.red{border-color:rgba(217,72,78,.55);color:var(--red)}
.chip.late{border-color:rgba(201,146,42,.55);color:var(--amber)}
.chip.ok{color:var(--fg-2)}
.chip.grey{border-style:dashed;border-color:var(--line-3);color:var(--fg-3)}

/* ---- app grid ---- */
.app{height:100dvh;display:grid;grid-template-rows:48px minmax(0,1fr) 56px;gap:8px;padding:16px 16px 32px}
.top,.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;min-height:0}
.cell{border:1px solid var(--line);background:var(--bg-1);border-radius:var(--r);padding:0 8px;display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
/* header: brand span 3 (the name and "updated hh:mm" need about 245 px), the status strip span 6, nav span 3 (Reports, Signals, News, Get alerts,
   Credits, About; 2026-11-08) */
.brand{grid-column:span 3;border-color:transparent;background:transparent;gap:16px}
.brand .nm{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;color:var(--fg);display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand .nm::before{content:"";width:9px;height:9px;border:2px solid var(--fg);border-radius:1px}
.brand .val{color:var(--fg-2)}
.state{grid-column:span 6;border-color:var(--line-3);background:var(--bg-2);gap:12px;padding:0 12px;--st:var(--fg-2);--st-bg:var(--bg-2);--st-line:var(--line-3)}
.state.quiet{--st:var(--green);--st-bg:var(--green-bg);--st-line:rgba(63,155,92,.5)}
.state.watch{--st:var(--amber);--st-bg:var(--amber-bg);--st-line:rgba(201,146,42,.5)}
.state.elevated{--st:var(--red);--st-bg:var(--red-bg);--st-line:rgba(217,72,78,.5)}
.state.quiet,.state.watch,.state.elevated{border-color:var(--st-line);background:var(--st-bg)}
.state .word{font-family:var(--mono);font-size:20px;font-weight:500;letter-spacing:.12em;color:var(--st);line-height:1}
.state .sw{display:flex;flex-direction:column;gap:4px}
.ladder{display:flex;gap:2px}
.ladder i{width:10px;height:5px;background:var(--bg-4);border:1px solid var(--line-3)}
.ladder i.lit{background:var(--st);border-color:var(--st)}
.state .sep{width:1px;height:24px;background:var(--st-line);opacity:.6;flex:none}
.state .grp{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.state .grp.reasons .chip{overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:240px;line-height:18px;background:none;cursor:pointer}
.state .grp.reasons .chip:hover{background:var(--bg-3)}
/* one reason chip plus "+N" (the state drawer lists all); "N reasons" and "N late" are the phone's compact forms */
.state .grp.reasons .r1{flex:0 1 auto;min-width:0}
.state .grp.reasons .more{flex:none}
.state .grp.reasons .rn,.state .grp.fresh .ln{display:none}
.state .grp.fresh .ln{background:none;cursor:pointer}
.state .grp.reasons{flex:1 1 auto}
/* the freshness and collection groups never shrink: the ellipsized reason chip (its "+N" opens the full list) gives way first. When the late chips still do not
   fit (more than about six late feeds, or a reason squeezed under 110 px), fitFresh in app.js sets .compact and one "N late" button replaces them */
.state .grp.fresh,.state #st-coll{flex:none}
.state .grp.fresh.compact .lt{display:none}
.state .grp.fresh.compact .ln{display:inline-block}
.brand .val.err{color:var(--amber)}
.hbar{height:3px;width:96px;background:var(--bg-4);position:relative;overflow:hidden}
.hbar i{position:absolute;inset:0 auto 0 0;background:var(--fg-2)}
.nav{grid-column:span 3;justify-content:flex-end;border-color:transparent;background:transparent;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:0}
.nav a{white-space:nowrap;line-height:20px;border-bottom:2px solid transparent}
.nav a.cur{color:var(--fg);border-bottom-color:var(--fg-2)}

.col{min-width:0;min-height:0;display:grid;gap:8px}
.col-l{grid-column:span 3;grid-template-rows:minmax(0,1fr) fit-content(320px)}
.col-m{grid-column:span 5;gap:0}
/* round 4: the right column is the three news lanes, Official, Media, Telegram & independent (the Airspace panel became the NOTAM drawer) */
.col-r{grid-column:span 4;grid-template-rows:minmax(0,4fr) minmax(0,4fr) minmax(0,5fr)}
.panel{border:1px solid var(--line);background:var(--bg-1);border-radius:var(--r);display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.ph{height:32px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;border-bottom:1px solid var(--line)}
.ph h2{margin:0;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.ph h2 .n{margin-left:8px;letter-spacing:0;font-size:12px;color:var(--fg)}
.ph h2 .n.blue{color:var(--blue)}
.ph .sum{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--fg);white-space:nowrap}
.ph .sum span{display:inline-flex;align-items:center;gap:4px}
.ph .sum span[hidden]{display:none}
.pb{overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}

/* indicator tiles: dot | name | trend / value+baseline | sparkline */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;align-content:start;gap:8px;padding:8px;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.tiles .fam{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-height:12px}
.tiles .fam::after{content:"";flex:1;height:1px;background:var(--line)}
.tiles .empty{grid-column:1/-1;align-self:start;color:var(--fg-3);font-family:var(--mono);font-size:11px;padding:4px}
.tile{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);padding:8px;display:grid;grid-template-columns:7px minmax(0,1fr) auto;grid-template-rows:14px minmax(0,1fr);gap:4px 6px;align-items:center;min-width:0;height:56px;min-height:56px;overflow:hidden;cursor:pointer}
.tile:hover{border-color:var(--line-3)}
.tile .nm{font-size:11px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tile.green .nm,.tile.grey .nm{color:var(--fg-2)}
.tile .tr{justify-self:end}
.tile .r2{grid-column:1/4;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-width:0;align-self:end}
.tile .v{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--fg);white-space:nowrap;display:flex;align-items:baseline;gap:4px;min-width:0;overflow:hidden}
.tile .v .bs{font-size:10px;font-weight:400;color:var(--fg-3)}
/* the value never shrinks: tags and the baseline give way first (fitValues), the value is cut only when nothing else is left */
.tile .v b,.tile .v .bs,.tile .v .yb{flex:none}
.tile.f3 .v b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tile.green .v,.tile.grey .v{color:var(--fg-2);font-weight:400}
/* grey with a value: the value muted with a "no baseline" or "stale" tag; only a null value reads "no data" */
.tile.grey .v{color:var(--fg-3)}
.tile.grey.nodata .v{font-size:11px}
.gy{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:9px;font-weight:400;line-height:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3);border:1px dashed var(--line-3);border-radius:3px;padding:0 3px}
/* a value row still too wide after 53.0k-style shortening gives way in steps (fitValues in app.js sets the class on the tile): the age tag (f1),
   then the sparkline (f2: the value row takes the full width, the trend arrow stays), and only then the baseline (f3). The tile's title and
   aria-label always carry value, baseline and age tag */
.tile.f1 .v .yb{display:none}
/* Cloudflare Radar outage notes (2026-10-17): a blue corner mark on the tile (outside the grid, so it never takes the value's room; the tip
   and the aria-label carry the notes), on the chart a shaded span, a dotted line at the start and the note's number, and a numbered list under it */
.tile .nb{position:absolute;top:0;left:0;width:0;height:0;border-top:8px solid var(--blue);border-right:8px solid transparent;pointer-events:none}
.tile.f2 .r2>svg{display:none}
.tile.f3 .v .bs{display:none}
.tile svg{display:block;width:56px;height:18px;color:var(--fg-3);flex:none}
.tile.red svg{color:var(--red)}.tile.amber svg{color:var(--amber)}
.tile.red{border-color:rgba(217,72,78,.4)}
.tile.manip{box-shadow:inset 2px 0 0 var(--prop)}
.tile.ctx{box-shadow:inset 2px 0 0 var(--fg-3)}

/* developing situations: one row per open situation  badge place family | N items · M sources / latest title [lang] / first source · started */
.sit .pb{display:flex;flex-direction:column}
.sit .none{padding:12px 8px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:6px 8px;border-top:1px solid var(--line);cursor:pointer;min-width:0}
.srow:first-child{border-top:0}
.srow:hover{background:var(--bg-2)}
.srow .r1{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.srow .r1 .pl{font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .r1 .fam{font-family:var(--mono);font-size:10px;color:var(--fg-3);white-space:nowrap}
.srow .cnt{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap;align-self:center}
.srow .lt{grid-column:1/-1;font-size:12px;color:var(--fg);line-height:1.3;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.srow .r3{grid-column:1/-1;display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;color:var(--fg-3);min-width:0}
.srow .r3 .src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.srow .r3 .ag{white-space:nowrap}
/* situations v1: the story title (English) leads the row, its one-line summary under it */
.srow .lt.st{font-weight:500}
.srow .sm{grid-column:1/-1;font-size:11px;color:var(--fg-2);line-height:1.35;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang{display:inline-block;margin-left:5px;padding:0 3px;border:1px solid var(--line-3);border-radius:2px;font-family:var(--mono);font-size:9px;line-height:12px;color:var(--fg-3);text-transform:uppercase;vertical-align:1px}

/* NOTAM list (the NOTAM drawer since round 4): MIL | code name | activity | band | validity */
.airnote{flex:none;margin:0;padding:5px 8px;border-bottom:1px solid var(--line);font-size:11px;line-height:1.35;color:var(--fg-3)}
.airlist{display:flex;flex-direction:column}
.airlist .none{padding:12px 8px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.an{display:grid;grid-template-columns:26px minmax(64px,1fr) minmax(0,auto) minmax(0,auto) auto;gap:0 8px;align-items:center;padding:0 8px;height:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--fg-2);cursor:pointer;white-space:nowrap}
.an:first-child{border-top:0}
.an:hover,.an:focus-visible{background:var(--bg-2);color:var(--fg)}
.an .mt{font-size:9px;letter-spacing:.06em;color:#4fc3f7}
.an .cd{color:var(--fg);overflow:hidden;text-overflow:ellipsis;min-width:0}
.an .bd,.an .va{color:var(--fg-3)}
.an .ac,.an .bd{overflow:hidden;text-overflow:ellipsis;min-width:0}
/* notices not yet in force: muted, in their own group at the end, outside every count */
.an.grp.up .cd{color:var(--fg-3)}
.ph h2 .n .nu,.ndh .n .nu{margin-left:6px;font-size:10px;letter-spacing:.04em;color:var(--fg-3)}
.an.mil .cd{font-weight:500}
.an.nogeo{cursor:default}
.an.nogeo .cd{color:var(--fg-2)}
.an.fut{opacity:.6}
/* in force but outside its schedule now: dimmed, the validity column says "off until 05:00" */
.an.off{opacity:.55}.an.off .va{color:var(--fg-3)}

/* map */
.maphead .hl{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden}
.maphead .hl .t{font-family:var(--mono);font-size:10px;color:var(--fg-2)}
.maphead .hl .ti{overflow:hidden;text-overflow:ellipsis;min-width:0}
.maphead .sum .warn{color:var(--amber)}
.maphead button{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:22px}
.maphead button.on{background:var(--bg-4);border-color:var(--line-3)}
.mapbox{position:relative;flex:1;min-height:0;background:var(--bg)}
#map{position:absolute;inset:0}
#tip{position:absolute;z-index:4;pointer-events:none;display:none;background:rgba(10,13,18,.92);border:1px solid var(--line-2);border-radius:var(--r);padding:2px 6px;font-family:var(--mono);font-size:10px;color:var(--fg);white-space:nowrap}
/* KEY: swatches use the exact map colours (see app.js layer paint) */
.legend{position:absolute;right:8px;top:8px;z-index:3;max-height:calc(100% - 16px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent;background:rgba(10,13,18,.94);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px;display:none;grid-template-columns:auto auto;gap:3px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.legend.open{display:grid}
.legend .lg{grid-column:1/-1;margin-top:5px;padding-top:4px;border-top:1px solid var(--line)}
.legend .lg:first-child{margin-top:0;padding-top:0;border-top:0}
/* the KEY never grows past the map box: two columns that share the width, long entries wrap */
.legend{max-width:calc(100% - 16px);grid-template-columns:repeat(2,minmax(0,max-content))}
.legend .k{display:flex;align-items:center;gap:8px;min-width:0;line-height:1.3}
.legend .k.nt{grid-column:1/-1;display:block;color:var(--fg-3);font-size:10px;max-width:300px;white-space:normal;text-transform:none;letter-spacing:0}
.legend .sw{width:12px;height:8px;border:1px solid transparent;flex:none;box-sizing:border-box}
.legend .sw.hexr{background:rgba(217,72,78,.22);border-color:rgba(217,72,78,.6)}
.legend .sw.hexa{background:rgba(201,146,42,.14);border-color:rgba(201,146,42,.6)}
.legend .sw.hexyr{border-color:rgba(217,72,78,.5)}
.legend .sw.hexya{border-color:rgba(201,146,42,.45)}
.legend .sw.hexs{background:rgba(217,72,78,.22);border:1px dashed rgba(255,255,255,.7)}
.legend .sw.hexn{border-color:rgba(255,255,255,.06)}
.legend .sw.hexc{border-color:rgba(217,72,78,.5);border-style:dotted}
.legend .sw.hexf{border-color:rgba(201,146,42,.35);border-style:dotted}
.legend .sw.v{width:6px;height:6px;border-radius:3px;margin:0 3px;border:0;box-shadow:0 0 0 1px #0a0d12}
.legend .sw.v.tank{background:#e0a030}.legend .sw.v.cargo{background:#aab7c7}.legend .sw.v.pax{background:#3cc6b4}.legend .sw.v.mil{background:#d05cc0}.legend .sw.v.oth{background:#7a8594}
.legend .sw.v.wait{width:9px;height:9px;border-radius:4.5px;margin:0 1.5px;background:#aab7c7}
.legend .sw.v.clu{width:12px;height:12px;border-radius:6px;margin:0;background:#e0a030;opacity:.85}
.legend .sw.v.sanc{width:6px;height:6px;border-radius:3px;margin:0 3px;background:#e0a030;box-shadow:0 0 0 1px #0a0d12,0 0 0 2.5px #d9484e}
.legend .sw.trk{height:0;border:0;border-top:1.5px solid rgba(255,255,255,.35)}
.legend .sw.ac{width:12px;height:12px;border:0;margin:0 0 0 -1px}
.legend .sw.ac svg{display:block;width:12px;height:12px;fill:#f2f5f8}
.legend .sw.notamm{border:1px dashed rgba(79,195,247,.7)}
.legend .sw.notamc{border:1px dashed rgba(79,195,247,.35)}
.legend .sw.notamu{border:1px dotted rgba(79,195,247,.35)}
.legend .sw.cov{background:rgba(255,255,255,.035)}
.legend .sw.covn{border:1px dashed var(--line-2)}
.legend .sw.aoi{border-color:rgba(255,255,255,.18)}
.legend .sw.cable{height:0;border:0;border-top:1px dashed rgba(255,255,255,.4)}
.legend .sw.it{width:9px;height:9px;border-radius:1px;margin:0 1px}
.legend .sw.it.official{background:rgba(74,147,221,.85);border-color:#4a93dd}
.legend .sw.it.media{background:rgba(199,209,222,.85);border-color:#c7d1de}
.legend .sw.it.developing{background:rgba(201,146,74,.85);border-color:#c9924a}
.legend .sw.it.noconf{background:rgba(110,106,133,.85);border-color:#6e6a85}
.legend .sw.sd{width:8px;height:8px;margin:0 2px;transform:rotate(45deg);border-width:1.5px}
.legend .sw.sd.confirmed{background:#4a93dd;border-color:#4a93dd}
.legend .sw.sd.corroborated{background:#c7d1de;border-color:#e6ebf1}
.legend .sw.sd.unverified{background:transparent;border-style:dashed;border-color:#b89a6a}
.legend .sw.sd.resolved{background:#3a414c;border-color:#55606e}
.mapfoot{flex:none;border-top:1px solid var(--line);background:var(--bg-1);display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:16px;align-items:center;height:40px;padding:0 8px}
.toggles{display:flex;gap:12px;align-items:center;white-space:nowrap}
.tg{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);line-height:16px;cursor:pointer;user-select:none;white-space:nowrap}
.tg::before{content:"";width:6px;height:6px;background:var(--fg);border-radius:1px}
.tg.off{color:var(--fg-3)}.tg.off::before{background:transparent;border:1px solid var(--fg-3)}
.track{position:relative;height:24px;min-width:0;cursor:pointer;touch-action:none}
.track .ticks{position:absolute;inset:10px 0 auto 0;display:flex;justify-content:space-between}
.track .ticks i{width:1px;height:5px;background:var(--line-3)}
.track .ticks i:nth-child(6n+1){height:8px;background:var(--fg-3)}
.track .labels{position:absolute;inset:-2px 0 auto 0;display:flex;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.track .labels span{position:absolute;top:0;transform:translateX(-50%)}
.track .head{position:absolute;left:100%;margin-left:-2px;top:6px;width:2px;height:14px;background:var(--fg)}
.track .head::after{content:attr(data-t);position:absolute;right:4px;top:-2px;font-family:var(--mono);font-size:10px;color:var(--fg);white-space:nowrap}
.track .head.lo::after{right:auto;left:4px}
body.replay .track .head{background:var(--amber)}
body.replay .track .head::after{color:var(--amber)}
/* replay controls: play/pause, speed, a note while loading or when the route is missing; the map header clock turns amber with a LIVE button beside it */
.rp{display:flex;align-items:center;gap:4px;white-space:nowrap}
.rp button{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:20px;padding:0 7px;color:var(--fg-2);min-width:44px}
.rp button#rp-speed{min-width:30px}
.rp button.on{color:var(--amber);border-color:rgba(201,146,42,.6);background:var(--amber-bg)}
.rp button[disabled]{color:var(--fg-3);cursor:progress}
.rp .rpn{color:var(--amber);letter-spacing:.04em}
.maphead .hl .t.replay{color:var(--amber)}
#rp-live{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:18px;padding:0 6px;color:var(--amber);border-color:rgba(201,146,42,.6);flex:none}
#rp-live:hover{background:var(--amber-bg)}
#rp-live[hidden]{display:none}
.ev.now{box-shadow:inset 2px 0 0 var(--amber)}
.ev.now.open{box-shadow:inset 2px 0 0 var(--blue)}
.zoomctl{position:absolute;left:8px;bottom:8px;z-index:3;display:flex;flex-direction:column;gap:2px}
.zoomctl button{width:24px;height:24px;padding:0;line-height:22px;font-family:var(--mono);font-size:12px;background:rgba(10,13,18,.85)}
.zoomctl button.in::before{content:"+"}.zoomctl button.out::before{content:"-"}

/* maplibre minimal + markers */
.maplibregl-map{overflow:hidden;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.maplibregl-canvas{left:0;position:absolute;top:0;outline:none}
.maplibregl-canvas-container.maplibregl-interactive{cursor:grab;user-select:none}
.maplibregl-canvas-container.maplibregl-interactive:active{cursor:grabbing}
.maplibregl-marker{position:absolute;top:0;left:0;will-change:transform}
.maplibregl-marker.mkw-sit{z-index:2}
.maplibregl-marker.mkw-air{z-index:3}
.mk{position:relative;font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap;pointer-events:auto}
.mk .lab{position:absolute;left:12px;top:-8px;background:rgba(10,13,18,.85);border:1px solid var(--line-2);padding:0 4px;border-radius:2px;line-height:14px;color:var(--fg-2)}
.mk .lab b{color:var(--fg);font-weight:500}
.mk.up .lab{left:50%;transform:translateX(-50%);top:auto;bottom:11px}
.mk.dn .lab{left:50%;transform:translateX(-50%);top:11px}
.mk.lf .lab{left:auto;right:12px}
/* aircraft: a bright glyph with a dark outline and a soft halo, 18 px, so it reads on the dark map at any zoom. The marker's .ic is
   reset in full: the lane chips' global .ic rule (round 3) once turned every plane into a dark 14 px chip with a 2 px sliver of the glyph */
.mk-ac{color:#c7d1de}
.mk-ac .ic{display:block;width:18px;height:18px;transform-origin:50% 50%;padding:0;margin:0;border:0;border-radius:0;background:none;overflow:visible;max-width:none;min-width:0;line-height:0;font-size:0}
.mk-ac .ic:hover{background:none;border:0}
.mk-ac .ic svg{display:block;width:18px;height:18px;margin:0;vertical-align:baseline;fill:#f6f8fa;stroke:#0a0d12;stroke-width:1.1;stroke-linejoin:round;paint-order:stroke;filter:drop-shadow(0 0 1.5px rgba(10,13,18,.95)) drop-shadow(0 0 4px rgba(246,248,250,.35))}
.mk-ac .lab{left:20px}
.mk-ac.up .lab{bottom:22px}
.mk-cnt{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--fg);background:rgba(10,13,18,.85);border:1px solid var(--fg-2);border-radius:2px;padding:0 5px;line-height:16px}
.mk-hit{width:14px;height:14px;cursor:help}
.mk-aoi{color:#8a94a4;font-size:10px;letter-spacing:.04em;text-transform:uppercase;background:rgba(10,13,18,.7);padding:0 3px;line-height:14px}
.hidden-mk{display:none}

/* item cards (the News screen's lanes)  time | title | badge  /  source + basis word + kind | link */
.lane.dev{border-style:dashed;border-color:var(--line-3)}
.lane.dev .ph{border-bottom-style:dashed}
.lane .pb{display:flex;flex-direction:column;overflow:auto}
.lane .none{padding:12px 8px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.ev{flex:1;min-height:52px;display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:4px 8px;align-content:center;padding:6px 8px;border-top:1px solid var(--line);cursor:pointer;min-width:0}
.ev:first-child{border-top:0}
.lane.dev .ev{border-top-style:dashed;border-top-color:var(--line-3)}
.ev:hover{background:var(--bg-2)}
.ev.open{background:var(--bg-3);box-shadow:inset 2px 0 0 var(--blue)}
.ev .t{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap}
.ev .ti{font-size:12px;color:var(--fg);min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.ev .badge,.ev .chip{justify-self:end;align-self:start}
.ev .m{grid-column:2;display:flex;gap:6px;align-items:center;min-width:0;font-family:var(--mono);font-size:10px;color:var(--fg-2)}
.ev .m .src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ev .m .chip{line-height:14px;padding:0 4px;color:var(--fg-3);border-color:var(--line-2)}
.ev .m .tag{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;border-radius:2px;background:var(--bg-3);color:var(--fg-2);line-height:14px;letter-spacing:.02em}
/* the health family's chip (track H, 2026-10-07): the same neutral grey with an outline, so health items are told apart without an alarm colour */
.ev .m .tag.health{color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-3)}
.ev .lk{grid-column:3;justify-self:end;display:inline-flex;align-items:center;color:var(--fg-3);width:16px;height:16px;justify-content:center;border-radius:2px}
.ev .lk:hover{color:var(--fg);background:var(--bg-4)}
.ev .lk svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5}
.ev.unv .ti{color:var(--fg-2)}
.ev.prop{box-shadow:inset 2px 0 0 var(--prop)}
.ev.prop .ti{color:var(--fg-2)}
.ev.prop.open{box-shadow:inset 2px 0 0 var(--blue)}
.ev.adv .ti{color:var(--fg-2)}
/* Telegram & independent: fold for posts from sources not used to confirm that name no place */
.lane .fold{flex:none;margin:0;border:0;border-top:1px dashed var(--line-3);border-radius:0;padding:0 8px;line-height:26px;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);background:var(--bg-2);box-shadow:inset 2px 0 0 var(--prop)}
.lane .fold:hover{color:var(--fg-2);background:var(--bg-3)}
.lane .fold.open{color:var(--fg-2)}
.lane .fold+.ev{border-top-style:dashed;border-top-color:var(--line-3)}
/* "show N more" (phones) and "older than 7 days": plain folds; old cards stay muted so they never read as current */
.lane .fold.more,.lane .fold.old{box-shadow:none}
.ev.old{opacity:.6}
.ev.old:hover{opacity:.85}
.panel.stale{opacity:.5;filter:saturate(.3)}
.ph .err{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);white-space:nowrap}

/* continuity pills: name + one value + the time of its newest point; up to eight share one row (columns set by app.js), more go into two rows
   of single-line pills whose widths follow their content and whose names give way first */
.cont{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;min-height:0}
.cpills{display:grid;gap:8px;min-width:0;min-height:0}
.cpills.two{display:flex;flex-direction:column}
.crow{display:flex;gap:8px;flex:1 1 0;min-height:0;min-width:0}
.cont .crow .pill{flex:1 1 auto;min-width:0;flex-direction:row;align-items:center;justify-content:space-between;gap:6px;padding:0 5px}
.cpills.two .pill>.lbl{display:block;white-space:nowrap;flex:0 1 auto;min-width:0;max-width:none;letter-spacing:.02em}
.cpills.two .pill .val{flex:none;max-width:none;gap:4px}
/* desktop strip: a normal pill shows no state word (its rule is green), and the name outranks the word: a cut name drops the grey reason too (the
   muted value and the old time still show it, the title spells it out); the phone's full-width rows keep every word */
@media (min-width:768px){
  .cpills.two .pill:not(.d):not(.x):not(.g) .sw2{display:none}
  .cpills.two .pill.f2 .val .sw2{display:none}
}
.cont.stale{opacity:.5}
.cont .cell{padding:0 8px;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.cont .csum .val{display:flex;align-items:center;gap:6px;color:var(--fg-2)}
.cont .csum .val.d{color:var(--amber)}.cont .csum .val.x{color:var(--red)}
.pill{cursor:pointer;border-left:3px solid var(--green)}
.pill.d{border-left-color:var(--amber)}.pill.x{border-left-color:var(--red)}.pill.g{border-left-color:var(--line-3)}
.pill.g .lbl,.pill.g .val{color:var(--fg-3)}
.pill:hover{background:var(--bg-2)}
.pill .lbl{color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:.04em}
.pill.d .lbl{color:var(--amber)}.pill.x .lbl{color:var(--red)}
.pill .val{overflow:hidden;text-overflow:ellipsis;max-width:100%;display:flex;align-items:baseline;gap:5px}
.pill .val b{font-weight:500}
.pill .val .yb{margin-left:0}
.pill .ptm{font-family:var(--mono);font-size:9px;letter-spacing:.02em;color:var(--fg-3)}
/* context only (an adversary-official measurement that never moves the board level): a double left rule on the pill, a grey inset rule on the tile */
.pill.ctx{border-left-style:double;border-left-width:4px}
/* names may take two lines; the state word sits small after the value and gives way (f2) before the value does */
.pill>.lbl{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:12px}
.pill .val .sw2{letter-spacing:.04em}
.pill.f1 .val .yb{display:none}
.pill.f2:not(.g) .val .sw2{display:none}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(5,7,10,.55);z-index:30;display:none}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:600px;max-width:100%;background:var(--bg-1);border-left:1px solid var(--line-2);z-index:40;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .18s ease}
.drawer.open{transform:none}
.dh{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);flex:none}
.dh .id{font-family:var(--mono);font-size:10px;color:var(--fg-2)}
.dh h2{margin:0;font-size:13px;font-weight:500;flex:1;min-width:0;line-height:1.3}
.dbody{overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.dbadges{display:flex;flex-wrap:wrap;gap:4px;padding:8px 16px;border-bottom:1px solid var(--line)}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;padding:8px 16px;border-bottom:1px solid var(--line)}
.kv div{display:flex;flex-direction:column;gap:2px;min-width:0}
.kv .val{white-space:normal}
.dsec{padding:8px 16px;border-bottom:1px solid var(--line)}
.dsec h3{margin:0 0 8px;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.tbl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 8px;align-items:baseline;font-size:12px}
.tbl .k{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap}
.tbl .v{color:var(--fg);min-width:0}
.tbl .v .g{color:var(--fg-2)}
.tbl .z{font-family:var(--mono);font-size:11px;color:var(--fg);white-space:nowrap;text-align:right}
.tbl .z.hi{color:var(--red)}.tbl .z.na{color:var(--fg-3)}.tbl .z.lag{color:var(--amber)}
.tbl.c2{grid-template-columns:auto minmax(0,1fr)}
.tbl.c4{grid-template-columns:minmax(0,1.2fr) 64px minmax(0,1fr) minmax(0,1fr)}
.tbl .hd{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.tbl .lk{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.tbl .lk.likely{color:var(--fg)}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.dsec p.snip{margin:0;font-size:12px;color:var(--fg);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.dsec a.ext{color:var(--blue);font-family:var(--mono);font-size:11px;word-break:break-all}
/* X posts (contract "X posts"): a post as X's display rules ask, in a lane card (.cmp), a popup and the item drawer: the author's
   picture, name and @handle linked to the profile, the X mark at the top right, the text unmodified below, the time and View on X */
.xpost{display:flex;flex-direction:column;gap:4px;min-width:0}
.xpost .xhead{display:flex;align-items:center;gap:6px;min-width:0}
.xpost .xav{flex:none;display:inline-flex;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--bg-3)}
.xpost .xav img{width:100%;height:100%;object-fit:cover;display:block}
.xpost .xav0{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--fg-2)}
/* the @handle is always shown whole (X's display rules): only the display name gives way */
.xpost .xwho{display:flex;align-items:baseline;gap:4px;color:var(--fg);font-size:12px;min-width:0;white-space:nowrap;text-decoration:none}
.xpost .xwho b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis}
.xpost .xwho .xu{color:var(--fg-2);flex:none}
.xpost .xwho:hover{text-decoration:underline}
.xpost .xmark{width:14px;height:14px;margin-left:auto;flex:none;fill:var(--fg)}
.xpost .xtext{font-size:12px;color:var(--fg);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.xpost .xtext a{color:var(--blue);text-decoration:none}
.xpost .xtext a:hover{text-decoration:underline}
.xpost .xtext.note{color:var(--fg-2);font-style:italic}
.xpost .xrp{width:12px;height:12px;fill:var(--fg-2);vertical-align:-2px;margin-right:4px}
.xpost .xtr{font-size:11px;color:var(--fg-2);line-height:1.4}
.xpost .xtr .w{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.xpost .xfoot{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:10px}
.xpost .xfoot a{color:var(--blue);text-decoration:none}
.xpost .xfoot a:hover{text-decoration:underline}
.xpost.cmp .xav{width:20px;height:20px}
.xpost.cmp .xav0{font-size:10px}
.xpost.cmp .xwho{font-size:11px}
.xpost.cmp .xtext{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* a lane card's title cell holds the whole post block, not a two-line title */
.ev .ti.xti{display:block;-webkit-line-clamp:unset;overflow:visible}
.ptx.px{margin-bottom:6px}
.dsec ul.rl{margin:0;padding-left:16px;font-size:12px;color:var(--fg);line-height:1.5}
.badge.obs.grey{border-color:var(--line-3);color:var(--fg-2);background:var(--bg-3)}
.tbl.src{grid-template-columns:minmax(0,1fr) 28px 28px 64px 44px}
.tbl.src .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal{position:fixed;inset:0;z-index:40;display:none;place-items:center;padding:16px}
.modal.open{display:grid}
.mbox{width:640px;max-width:100%;max-height:100%;overflow:auto;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--r)}
.mbox .dsec p{margin:0 0 8px;font-size:12px;color:var(--fg-2);line-height:1.5}
.mbox .dsec ul{margin:0;padding-left:16px;font-size:12px;color:var(--fg-2);line-height:1.5}
.mbox .dsec li{margin:2px 0}
.livetag{position:fixed;left:16px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:50;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);background:rgba(10,13,18,.9);padding:0 8px;line-height:16px;border-radius:var(--r)}
.tabs{display:none}

/* ---- map popups (maplibre-gl.css is not loaded; these are the popup rules it would supply, in board colours) ---- */
.maplibregl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none;z-index:6}
.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}
.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}
.maplibregl-popup-anchor-left{flex-direction:row}
.maplibregl-popup-anchor-right{flex-direction:row-reverse}
.maplibregl-popup-tip{width:0;height:0;border:7px solid transparent;z-index:1}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{align-self:center;border-top:none;border-bottom-color:var(--line-3)}
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-start;border-top:none;border-left:none;border-bottom-color:var(--line-3)}
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-end;border-top:none;border-right:none;border-bottom-color:var(--line-3)}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{align-self:center;border-bottom:none;border-top-color:var(--line-3)}
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:var(--line-3)}
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:var(--line-3)}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{align-self:center;border-left:none;border-right-color:var(--line-3)}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{align-self:center;border-right:none;border-left-color:var(--line-3)}
.maplibregl-popup-content{position:relative;pointer-events:auto;background:rgba(13,17,23,.96);border:1px solid var(--line-3);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.45);padding:8px 24px 8px 10px;color:var(--fg);font:12px/1.4 var(--sans);min-width:160px;max-height:min(72vh,640px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.maplibregl-popup-close-button{position:absolute;right:2px;top:2px;width:18px;height:18px;padding:0;border:0;border-radius:2px;background:transparent;color:var(--fg-3);font:14px/18px var(--mono);cursor:pointer}
.maplibregl-popup-close-button:hover{color:var(--fg);background:var(--bg-4)}
.pp .pk{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2px;display:flex;gap:6px;align-items:center}
.pp .pk .dot{width:6px;height:6px;border-radius:3px}
.pp .pt{font-size:12px;font-weight:500;color:var(--fg);margin-bottom:4px;word-break:break-word}
.pp .pr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline}
.pp .pr .k{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap}
.pp .pr .v{font-family:var(--mono);font-size:11px;color:var(--fg);min-width:0;word-break:break-word}
.pp .pr .v.na{color:var(--fg-3)}
.pp .pr .v.red{color:var(--red)}.pp .pr .v.amber{color:var(--amber)}
.pp .ptx{margin-top:6px;font-size:11px;color:var(--fg-2);line-height:1.45;word-break:break-word}
/* a row per detection in a grouped sensor card (thermal anomalies), only the columns that differ */
.pp .ptab{border-collapse:collapse;margin:0 0 6px;font-family:var(--mono);font-size:11px}
.pp .ptab th{font-size:10px;font-weight:400;color:var(--fg-2);text-align:left;padding:0 12px 2px 0;white-space:nowrap}
.pp .ptab td{color:var(--fg);padding:1px 12px 1px 0;white-space:nowrap;border-top:1px solid var(--line)}
.pp .ptab .r{text-align:right}
.pp .ptab td.amber{color:var(--amber)}.pp .ptab td.na{color:var(--fg-3)}
.pp .pi{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 8px;padding:5px 0;border-top:1px solid var(--line)}
.pp .pk+.pi,.pp .pt+.pi{border-top:0;padding-top:0}
.pp .pi .t{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap;padding-top:1px}
.pp .pi .ti{font-size:12px;color:var(--fg);line-height:1.3;word-break:break-word}
.pp .pi .ti a{color:var(--fg)}
.pp .pi .ti a:hover{color:var(--blue)}
.pp .pi .m{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--fg-2);min-width:0}
.pp .pi .m .src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.pp .pi.prop .ti,.pp .pi.adv .ti{color:var(--fg-2)}
.pp .pmore{margin-top:4px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}

/* layer panel */
.layers{position:absolute;right:8px;top:8px;z-index:4;width:220px;max-height:calc(100% - 16px);overflow:auto;background:rgba(10,13,18,.94);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px;display:none;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
.layers.open{display:flex}
.layers .lg{display:flex;flex-direction:column;gap:3px;padding-top:4px;border-top:1px solid var(--line)}
.layers .lg:first-child{padding-top:0;border-top:0}
.layers .lg .lbl{margin-bottom:1px}
.layers label{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2);line-height:16px;cursor:pointer;user-select:none;white-space:nowrap}
.layers label:hover{color:var(--fg)}
.layers input{appearance:none;width:9px;height:9px;margin:0;border:1px solid var(--fg-3);border-radius:1px;background:transparent;flex:none;cursor:pointer}
.layers input[type=radio]{border-radius:5px}
.layers input:checked{background:var(--fg);border-color:var(--fg)}
.layers input:focus-visible{outline:1px solid var(--blue);outline-offset:1px}
.layers .row{display:flex;flex-wrap:wrap;gap:3px 10px;padding-left:15px}
.layers label.dis{color:var(--fg-3)}
.layers .lnote{color:var(--amber);text-transform:none;letter-spacing:0}
.lane-sw{display:inline-block;width:8px;height:8px;border-radius:1px;flex:none}
.layers label .lane-sw{margin-left:-2px}
.pp .pi .lane-sw{width:6px;height:6px}
.lane-sw.official{background:#4a93dd}.lane-sw.media{background:#c7d1de}.lane-sw.developing{background:#c9924a}.lane-sw.noconf{background:#6e6a85}

/* item place markers: a small square with the count, coloured by the highest lane present (lane colours: official #4a93dd, media #c7d1de, developing #c9924a, not used to confirm (noconf) #6e6a85) */
.mk-it{min-width:14px;height:14px;padding:0 3px;border-radius:2px;font-family:var(--mono);font-size:10px;font-weight:500;line-height:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid;box-shadow:0 0 0 1px rgba(10,13,18,.9)}
.mk-it.official{background:rgba(74,147,221,.85);border-color:#4a93dd;color:#0a0d12}
.mk-it.media{background:rgba(199,209,222,.85);border-color:#c7d1de;color:#0a0d12}
.mk-it.developing{background:rgba(201,146,74,.85);border-color:#c9924a;color:#0a0d12}
.mk-it.noconf{background:rgba(110,106,133,.85);border-color:#6e6a85;color:#e2e5ea}
.mk-it:hover{filter:brightness(1.15)}
.mk-ac .ic{cursor:pointer}

/* situation markers: a diamond coloured by confirmation */
.mk-sit{width:14px;height:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mk-sit i{display:block;width:9px;height:9px;transform:rotate(45deg);border:1.5px solid;box-shadow:0 0 0 1px #0a0d12}
.mk-sit.confirmed i{background:#4a93dd;border-color:#4a93dd}
.mk-sit.corroborated i{background:#c7d1de;border-color:#e6ebf1}
.mk-sit.unverified i{background:rgba(10,13,18,.6);border-style:dashed;border-color:#b89a6a}
.mk-sit.resolved i{background:#3a414c;border-color:#55606e}
.mk-sit:hover i{filter:brightness(1.2)}
/* several situations at one place: one diamond, coloured by the strongest confirmation, with their count beside it */
.mk-sit.n{position:relative}
.mk-sit b{position:absolute;left:12px;top:-6px;min-width:12px;padding:0 3px;border-radius:6px;background:rgba(10,13,18,.88);border:1px solid var(--line-3);font-family:var(--mono);font-size:9px;font-weight:500;line-height:11px;text-align:center;color:var(--fg);pointer-events:none}
.pp .pbtn{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:20px;color:var(--fg-2)}

/* situation drawer timeline: time | title [lang] / source, basis word, badges, kind */
.tls{display:flex;flex-direction:column}
.tl{display:grid;grid-template-columns:40px minmax(0,1fr);gap:3px 10px;padding:7px 0;border-top:1px solid var(--line)}
.tl:first-child{border-top:0;padding-top:0}
.tl .t{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap;padding-top:1px}
.tl .ti{font-size:12px;color:var(--fg);line-height:1.35;word-break:break-word}
.tl .ti a{color:var(--fg)}
.tl .ti a:hover{color:var(--blue)}
.tl .m{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--fg-2);min-width:0}
.tl .m .src{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.tl .m .chip{line-height:14px;padding:0 4px;color:var(--fg-3);border-color:var(--line-2)}
.tl.prop .ti,.tl.adv .ti{color:var(--fg-2)}
.dsec p.snip.more,.dsec p.snip.note{color:var(--fg-3);font-size:11px;margin-top:6px}
/* situations v1: the original headline under the English one, syndicated copies behind "+N outlets", linked events as chips, the story summary under the header */
.tl .og{grid-column:2;font-size:11px;color:var(--fg-3);line-height:1.3;word-break:break-word;margin-top:-1px}
.tl .m .cpb{line-height:14px;padding:0 5px;font-family:var(--mono);font-size:10px;color:var(--fg-2);border-color:var(--line-2);border-radius:2px}
.tl .m .cpb::after{content:'';display:inline-block;width:0;height:0;margin-left:5px;vertical-align:1px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor}
.tl .m .cpb.open::after{border-top:0;border-bottom:4px solid currentColor}
.tl .cpl{grid-column:2;list-style:none;margin:2px 0 0;padding:4px 0 2px 8px;border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:10px;color:var(--fg-2);min-width:0}
.tl .cpl[hidden]{display:none}
.tl .cpl li{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl .cpl a{color:var(--fg)}
.tl .cpl a:hover{color:var(--blue)}
.tl .cpl .via{margin-left:6px;color:var(--fg-3)}
.tl .cpl .badge{margin-right:6px;line-height:12px;padding:0 4px}
.tl .cpl li.prop a,.tl .cpl li.adv a{color:var(--fg-2)}
.evcs{display:flex;flex-wrap:wrap;gap:4px}
.evc{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;min-width:0;padding:2px 7px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--bg-2);font-size:12px;line-height:16px;color:var(--fg)}
.evc .k{flex:none;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.evc .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evc:hover{border-color:var(--blue);color:var(--fg);background:var(--bg-3)}
.dsum{padding:8px 16px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--fg-2)}
.pp .psum{margin:0 0 6px;font-size:11px;line-height:1.45;color:var(--fg-2);word-break:break-word}
/* a story's slug is long: on a phone the detail drawer's id gives way to the English title (only there: the history modal header wraps instead) */
@media (max-width:767px){#drawer .dh .id{max-width:30%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* history affordance in the tile corner */
.tile .tr{margin-right:12px}
.tile .hg{position:absolute;top:5px;right:5px;width:10px;height:10px;color:var(--fg-3);opacity:.55;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tile:hover .hg,.tile:focus-visible .hg{opacity:1;color:var(--fg-2)}
.pill{position:relative}

/* indicator history modal */
.hbox{width:min(1120px,100%)}
.hbox .dh{flex-wrap:wrap}
/* the title keeps room for a few words, so on a phone the five range buttons wrap to their own line instead of running over it */
.hbox .dh h2{min-width:140px}
.hrange{display:flex;gap:2px}
.hrange button{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:20px;padding:0 7px;color:var(--fg-2)}
.hrange button.cur{color:var(--fg);background:var(--bg-4);border-color:var(--line-3)}
.hrange button[disabled]{color:var(--fg-3);border-style:dashed;cursor:default;background:none}
.hwrap{padding:8px 16px;border-bottom:1px solid var(--line)}
.hread{height:18px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;color:var(--fg);white-space:nowrap;overflow:hidden}
.hread .lbl{letter-spacing:.06em}
.hread b{font-weight:500}
.hread .b{color:var(--fg-2)}
.hchart{position:relative;height:clamp(280px,48vh,460px);width:100%;margin-top:4px}
.hchart svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--mono);font-size:10px}
.hchart .grid{stroke:var(--line);stroke-width:1}
.hchart .ax{stroke:var(--line-3);stroke-width:1}
.hchart .tk{fill:var(--fg-3);font-size:10px}
.hchart .band.amber{fill:rgba(201,146,42,.09)}
.hchart .band.red{fill:rgba(217,72,78,.10)}
.hchart .thr.amber{stroke:rgba(201,146,42,.5);stroke-width:1}
.hchart .thr.red{stroke:rgba(217,72,78,.55);stroke-width:1}
.hchart path.thr{fill:none;stroke-linejoin:miter}
.hchart .thl{font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.hchart .thl.amber{fill:var(--amber)}.hchart .thl.red{fill:var(--red)}
.hchart .base{stroke:var(--fg-2);stroke-width:1;stroke-dasharray:4 3;fill:none}
.hchart .val{stroke:var(--fg);stroke-width:1.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.hchart .pt{fill:var(--fg)}
.hchart .cx{stroke:var(--fg-2);stroke-width:1;stroke-dasharray:2 2}
.hchart .hov{fill:var(--fg);stroke:var(--bg-1);stroke-width:1.5}
.hchart .hit{fill:transparent;cursor:crosshair}
.hchart .hempty{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--fg-3);border:1px dashed var(--line-2);border-radius:var(--r)}
/* the airspace history's record marks (2026-10-06): rebuilt segments dotted and their day marks filled in the dotted line's colour (a full day on
   the line; hollow is kept for a partial day, off the line, with its label), the live point ringed, the days before the first snapshot shaded
   and named, and a legend under the chart */
.hchart .val.rc{stroke:var(--fg-2);stroke-dasharray:1.5 3.5}
.hchart .pt.rc{fill:var(--fg-2)}
.hchart .pt.hol{fill:var(--bg-1);stroke:var(--fg);stroke-width:1.4}
.hchart .pt.live{fill:var(--fg);stroke:var(--bg-1);stroke-width:1.5}
.hchart .plbl{fill:var(--fg-2);font-size:10px}
.hchart .nodata{fill:var(--bg-3);opacity:.55}
.hchart .ndl{fill:var(--fg-3);font-size:10px;letter-spacing:.04em}
.hlegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--fg-2)}
.hlegend[hidden]{display:none}
.hchart .nspan{fill:var(--blue-bg)}
.hchart .nline{stroke:var(--blue);stroke-width:1;stroke-dasharray:1.5 2.5;opacity:.8}
.hchart .nnum{fill:var(--blue);font-family:var(--mono);font-size:10px}
.hread .b.nt{color:var(--blue)}
.dsec[hidden]{display:none}
.hnotes{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:6px;font-size:12px;line-height:1.5;color:var(--fg)}
.hnotes li{word-break:break-word}
.hnotes b{font-family:var(--mono);font-weight:500;color:var(--blue);margin-right:6px}
.hnotes .nw{font-family:var(--mono);font-size:10px;color:var(--fg-2)}
.hnotes .nx{display:block}
.hnotes .nx+.nw{margin-right:6px}
.hnotes a.ext{color:var(--blue);font-family:var(--mono);font-size:11px}
.dsec .nsrc{margin:0;font-size:10px;color:var(--fg-3)}
.hlegend .k{display:inline-flex;align-items:center;gap:6px}
.hlegend .sw{display:inline-block;width:18px;height:0;border-top:1.5px solid var(--fg)}
.hlegend .sw.rc{border-top:1.5px dotted var(--fg-2)}
.hlegend .sw.pa{width:7px;height:7px;border:1.4px solid var(--fg);border-radius:50%}

/* sea warnings: a second list under the NOTAM list (Traficom nautical warnings), same row grammar as .an */
.airsub{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.airsub .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.airsub .n{margin-left:6px;color:var(--fg-3)}
.airsub .ti{font-size:10px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an.sea{grid-template-columns:26px minmax(96px,1fr) auto 16px}
.an.sea .mt{color:#3cc6b4}
.an .lk{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:2px;color:var(--fg-3)}
.an .lk:hover{color:var(--fg);background:var(--bg-4)}
.an .lk svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5}

/* sensor markers are plain dots (2026-10-17): FIRMS orange, seismic violet, GFW a grey ring (colours mirrored in .legend .sw and .lane-sw) */
.maplibregl-marker.mkw-sens{z-index:1}
.mk-fire{width:8px;height:8px;border-radius:50%;background:rgba(224,120,32,.9);box-shadow:0 0 0 1px #0a0d12;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mk-fire i{display:none}
.mk-seis{width:10px;height:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mk-seis i{display:block;width:7px;height:7px;border-radius:50%;box-sizing:border-box;background:rgba(150,96,220,.9);border:1px solid #b48cff;box-shadow:0 0 0 1px #0a0d12}
.mk-gfw{width:14px;height:14px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mk-gfw i{display:block;width:10px;height:10px;border-radius:5px;border:1.5px solid rgba(170,180,196,.85);box-shadow:0 0 0 1px #0a0d12,inset 0 0 0 1px #0a0d12}
.mk-fire:hover,.mk-seis:hover i,.mk-gfw:hover i{filter:brightness(1.2)}
.legend .sw.fire{width:9px;height:9px;border-radius:5px;margin:0 1.5px;border:0;background:rgba(224,120,32,.9);box-shadow:0 0 0 1px #0a0d12}
.legend .sw.seis{width:7px;height:7px;margin:0 2.5px;border-radius:50%;background:rgba(150,96,220,.9);border-color:#b48cff}
.legend .sw.gfw{width:10px;height:10px;border-radius:5px;margin:0 1px;border:1.5px solid rgba(170,180,196,.85)}
.lane-sw.fire{border-radius:4px;background:rgba(224,120,32,.9)}.lane-sw.seis{border-radius:4px;background:rgba(150,96,220,.9)}.lane-sw.gfw{border-radius:4px;background:transparent;border:1.5px solid rgba(170,180,196,.85);box-sizing:border-box}
.pp .pmore a{color:var(--fg-2)}
.pp .pmore a:hover{color:var(--fg)}
/* "what is here": sections in a fixed order with counts; each entry is one line that expands in place to the full card */
.pp.stack .pk b,.pp .sh b{color:var(--fg);font-weight:500;margin-left:6px;letter-spacing:0}
.pp .sx{border-top:1px solid var(--line);margin-top:5px;padding-top:4px}
.pp .sh{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);display:flex;align-items:center;margin-bottom:1px}
.pp .se{border-top:1px dashed var(--line)}
.pp .se:first-of-type{border-top:0}
.pp .sl{display:grid;grid-template-columns:8px minmax(0,1fr) auto auto;gap:0 8px;align-items:center;padding:3px 0;cursor:pointer;min-width:0;border-radius:2px}
.pp .sl:hover,.pp .sl:focus-visible{background:var(--bg-3)}
.pp .sl::before{content:"";width:0;height:0;border-left:4px solid var(--fg-3);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;transition:transform .12s ease;margin-left:1px}
.pp .se.open .sl::before{transform:rotate(90deg)}
.pp .sl .st{font-size:12px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:flex;align-items:center;gap:6px}
.pp .sl .st .dot{width:6px;height:6px;border-radius:3px;flex:none}
.pp .sl .sk,.pp .sl .stm{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap}
.pp .sl .sk{max-width:130px;overflow:hidden;text-overflow:ellipsis}
.pp .sl .stm{color:var(--fg-3)}
.pp .sd{padding:2px 0 6px 16px}
.pp .sd .pp .pk{display:none}
.pp .sd .pp .pt{margin-top:2px}
/* badges under a card title: sanctions red outline, russia-bound amber, laden/ballast and role tags neutral; the OpenSanctions credit sits with the programs */
.pp .pbad{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px}
.badge.sanc{border-color:var(--red);color:var(--red);background:var(--red-bg)}
.badge.rub{border-color:rgba(201,146,42,.7);color:var(--amber);background:var(--amber-bg)}
.badge.ld{color:var(--fg-2);border-color:var(--line-3)}
.pp .psanc{margin-top:6px;padding:4px 6px;border:1px solid rgba(217,72,78,.35);border-radius:var(--r);font-family:var(--mono);font-size:10px;color:var(--fg);line-height:1.5;word-break:break-word}
.pp .psanc .k{color:var(--red);letter-spacing:.06em;text-transform:uppercase}
.pp .psanc .credit{color:var(--fg-3);margin-top:2px}
.pp .credit.sanc{margin-top:4px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
/* remote photo with credit and link (Planespotters, Wikimedia Commons); a failed load collapses to the credit */
.pp .pph{margin-top:8px}
.pp .pph img{display:block;width:100%;height:auto;max-height:150px;object-fit:cover;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-3)}
.pp .pph .cred{margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--fg-3);line-height:1.4;word-break:break-word}
.pp .pph .cred a{color:var(--fg-2)}
.pp .pph .cred a:hover{color:var(--fg)}
.pp .pph.broken img{display:none}
/* aircraft type photo (2026-10-07): the label says plainly that the photo shows the type, not this aircraft */
.pp .pph.tph .tpl{margin-bottom:3px;font-family:var(--mono);font-size:10px;color:var(--fg-2);line-height:1.4}
.pp .pph.tph img{opacity:.85}
.pp .sil{margin-top:8px;height:26px;display:flex;align-items:center}
.pp .sil svg{height:22px;width:auto;fill:currentColor;opacity:.8;display:block}

/* a narrow NOTAM drawer (below 480 px: a laptop up to about 1435 px wide, and a phone): a row keeps its name and moves band + validity to a
   second line; a wider drawer shows every name on one line. A container query on the drawer's list, so it follows the drawer's own width
   (round 4 review: at 1280 px the one-line row cut 29 of 115 area names) */
@container nd (max-width:479px){
  .nd .an{height:auto;min-height:22px;padding:2px 16px;grid-template-columns:26px minmax(0,1fr) auto}
  .nd .an .bd{grid-column:2;line-height:1.3}
  .nd .an .va{grid-column:3;line-height:1.3;justify-self:end}
  /* group rows have no activity or band: keep "show / fold" on the first line */
  .nd .an.grp .ac,.nd .an.grp .bd{display:none}
  .nd .an.sea{grid-template-columns:26px minmax(0,1fr) auto 16px}
}
@media (max-width:1599px){
  /* the map column is too narrow for toggles, replay controls and the scrubber in one row: toggles on top, play + track below */
  .mapfoot{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;height:auto;padding:6px 8px;gap:6px 12px}
  .toggles{grid-column:1/-1;flex-wrap:wrap;gap:6px 12px}
}
/* below 1680 px (a 1440 or 1536 px laptop included) the freshness chips wrap to a second line inside the 48 px header, at most 260 px wide, and
   the collection bar narrows; a third line would be clipped, so fitFresh switches to the "N late" button instead */
@media (min-width:768px) and (max-width:1679px){
  .state .grp.fresh{flex-wrap:wrap;row-gap:3px;align-content:center;max-height:44px;max-width:260px}
  .hbar{width:48px}
}
/* a narrow desktop (tablet landscape) keeps the collection share as a number only, so the reason chip stays readable */
@media (min-width:768px) and (max-width:1279px){
  .state .hbar{display:none}
}
/* short desktop viewports (a 1280x800 laptop): the indicator matrix is the primary display, so situations shrink to 200 px and tiles tighten */
@media (min-width:768px) and (max-height:899px){
  .col-l{grid-template-rows:minmax(0,1fr) fit-content(200px)}
  .tile{height:48px;min-height:48px;padding:6px 8px;row-gap:2px}
}

/* ---- phone: tabbed ---- */
@media (max-width:767px){
  body{overflow:auto}
  .app{height:auto;min-height:100dvh;display:block;padding:0 16px 72px}
  /* compact sticky header: brand line, then the state word with count chips (reasons and late feeds open the state drawer) */
  .top{display:flex;flex-direction:column;gap:6px;position:sticky;top:0;z-index:10;background:var(--bg);padding:10px 0 6px;margin-bottom:8px}
  .brand{padding:0;justify-content:space-between;min-height:20px}
  .state{flex-wrap:wrap;height:auto;padding:6px 8px;gap:6px 10px}
  .state .word{font-size:16px}
  .state .sep{display:none}
  .state .grp.reasons .r1,.state .grp.reasons .more,.state .grp.fresh .lt{display:none}
  .state .grp.reasons .rn,.state .grp.fresh .ln{display:inline-block}
  .hbar{display:none}
  .nav{display:none}
  .board,.cont{display:none}
  /* the tabs (2026-11-08): Reports (the feed), Map, Stories, News (the lanes), Signals (the indicators and the continuity row) */
  body[data-tab=board] .board,body[data-tab=stories] .board,body[data-tab=news] .board,body[data-tab=signals] .board{display:block}
  body[data-tab=board] .col-l,body[data-tab=board] .col-m{display:none}
  body[data-tab=board] .lane{display:none}
  body[data-tab=board] #p-feed{display:flex}
  body[data-tab=stories] .col-m,body[data-tab=stories] .col-r,body[data-tab=stories] #p-ind{display:none}
  body[data-tab=stories] #p-sit{display:flex}
  body[data-tab=news] .col-l,body[data-tab=news] .col-m,body[data-tab=news] #p-feed{display:none}
  body[data-tab=news] .lane{display:flex}
  body[data-tab=signals] .col-m,body[data-tab=signals] .col-r,body[data-tab=signals] #p-sit{display:none}
  body[data-tab=signals] #p-ind{display:flex}
  body[data-tab=signals] .cont{display:flex;flex-direction:column;margin-top:8px}
  .col-l{display:flex;flex-direction:column}
  .sit .pb{overflow:visible}
  .tiles{grid-auto-rows:auto}
  .tile{min-height:72px}
  .state .grp.reasons,.state .grp.fresh{flex:0 1 auto;gap:6px}
  .state .grp.reasons{flex:1 1 100%;order:5}
  .state .grp.reasons .sent{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
  .state .stime{margin-left:auto}
  body[data-tab=map] .board{display:block}
  body[data-tab=map] .col-l,body[data-tab=map] .col-r{display:none}
  /* map tab: header auto, map takes the rest above the tab bar and the live tag */
  body[data-tab=map]{overflow:hidden}
  body[data-tab=map] .app{display:flex;flex-direction:column;height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  body[data-tab=map] .top{position:static}
  body[data-tab=map] .board{display:flex;flex:1 1 auto;min-height:0}
  body[data-tab=map] .col-m{display:flex;flex:1 1 auto;min-height:0}
  #btn-key,#tilenote{display:none}
  .mapfoot{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;height:auto;padding:8px;gap:8px 12px}
  .rp .rpn{display:none}
  .toggles{grid-column:1/-1;flex-wrap:wrap;gap:8px 12px}
  .legend{display:none!important}
  .layers{width:200px}
  .hbox{width:100%}
  .hchart{height:240px}
  .col-r{display:flex;flex-direction:column}
  .lane .pb,.feed .pb{overflow:visible}
  .ev{flex:none;min-height:56px}
  .fc{flex:none}
  .off{grid-template-columns:36px 64px minmax(0,1fr)}
  .cont .cell{height:44px;flex-direction:row;align-items:center;justify-content:space-between;flex:none}
  .cpills,.cpills.two,.crow{display:flex;flex-direction:column;gap:8px;flex:none}
  .cont .crow .pill{flex:none;padding:0 8px}
  .livetag{bottom:56px}
  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;height:48px;background:var(--bg-1);border-top:1px solid var(--line);z-index:20;padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabs button{flex:1;border:0;border-radius:0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
  .tabs button.cur{color:var(--fg);box-shadow:inset 0 2px 0 var(--fg)}
  .drawer{width:100%}
  .kv{grid-template-columns:1fr 1fr}
  .tbl.c4{grid-template-columns:minmax(0,1fr) 64px}
  .tbl.c4 .w{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Indicator panel: the panel scrolls, the tile grid keeps its content height (fixes rows collapsing under a definite flex height). */
#p-ind{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-3) transparent}
#p-ind>.ph{position:sticky;top:0;z-index:2;background:var(--bg-2)}
#p-ind>.tiles{flex:0 0 auto;height:auto;min-height:0;max-height:none;overflow:visible}
/* provisional baseline (younger than a week): hollow dot and a small age tag; the state is shown but does not drive the board level */
.tile.prov .dot.red,.tile.prov .dot.amber,.tile.prov .dot.green{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.tile.prov .dot.red{color:var(--red)}.tile.prov .dot.amber{color:var(--amber)}.tile.prov .dot.green{color:var(--green)}
.yb{display:inline-block;font-family:var(--mono);font-size:9px;line-height:12px;color:var(--fg-3);border:1px dashed var(--line-3);border-radius:3px;padding:0 3px;margin-left:5px;vertical-align:middle;letter-spacing:.02em}
.pill.prov{border-style:dashed}
/* Airspace group rows (one per activity class) and folded lettered series */
.an.grp{background:var(--bg-3);cursor:pointer}
.an.grp .cd{color:var(--fg-2);font-weight:500}
.an.grp .va{color:var(--fg-3);text-align:right;letter-spacing:.04em;text-transform:uppercase;font-size:9px}
.an.grp:hover .va,.an.grp:focus .va{color:var(--fg)}
.an.grp.open{border-bottom-color:var(--line-2)}
.an.ser .ac{color:var(--fg-3)}
/* FIR filter chips above the Airspace list */
.airfir{display:flex;gap:4px;flex-wrap:wrap;padding:6px 8px;border-top:1px solid var(--line)}
.fchip{font-family:var(--mono);font-size:10px;letter-spacing:.04em;line-height:18px;padding:0 6px;border:1px solid var(--line-2);border-radius:3px;color:var(--fg-3);background:transparent;cursor:pointer}
.fchip:hover{color:var(--fg);border-color:var(--line-3)}
.fchip.on{color:var(--fg);border-color:#4fc3f7;background:rgba(79,195,247,.08)}

/* ---- sections (2026-10-04 board wave): every panel has a header band (a shade lighter than the panel, a 2 px cap in the section's accent, an
   uppercase label and a count), panels have a visible edge, and the page behind them is darker so the gaps read. Accents are muted and never a
   state colour: indicators violet, developing stories rose, map steel, Official blue, the NOTAM drawer cyan, Media light grey, Telegram & independent tan,
   Continuity teal ---- */
:root{--band:#141b24;--ac-ind:#9b8ae6;--ac-sit:#cf7ea9;--ac-map:#a9b6c6;--ac-off:#4a93dd;--ac-air:#4fc3f7;--ac-med:#c7d1de;--ac-dev:#c9924a;--ac-cont:#4fb3a0}
body{background:#06080b}
.app,.top,.board,.col{gap:10px}
.col-m{gap:0}
.panel{border-color:var(--line-2);background:var(--bg-1)}
.ph{background:var(--band);border-bottom-color:var(--line-2);box-shadow:inset 0 2px 0 var(--ac,var(--line-3));padding-top:2px}
.ph h2{color:var(--fg);letter-spacing:.12em}
#p-ind{--ac:var(--ac-ind)}#p-sit{--ac:var(--ac-sit)}#p-map{--ac:var(--ac-map)}#p-off{--ac:var(--ac-off)}#p-med{--ac:var(--ac-med)}#p-dev{--ac:var(--ac-dev)}
#p-ind>.ph{background:var(--band)}
.lane.dev{border-color:#3a3328}
.maphead .hl h2{margin:0 2px 0 0;flex:none}
.cont .cell{border-color:var(--line-2)}
.cont .csum{background:var(--band);box-shadow:inset 0 2px 0 var(--ac-cont)}
.cont .csum h2{margin:0;font-weight:500;color:var(--fg);letter-spacing:.12em}
.airsub{background:var(--band)}

/* the map's own stacking context: markers (incidents up to z 14) stay under the KEY, LAYERS and the hover readout; popups sit over the markers */
#map{z-index:0}
.maplibregl-popup{z-index:20}

/* ---- map header: incidents count chip, full-screen button ---- */
.maphead .sum .inc.on .val{color:#ff8a7c}
#btn-fs{min-width:36px}

/* ---- full-screen map: the map panel covers the viewport above the page and the phone tab bar; drawers and modals still open above it ---- */
.col-m.fs{position:fixed;inset:0;z-index:25;border-radius:0;border:0;display:flex!important;flex-direction:column;margin:0}
.col-m.fs .mapfoot{padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
body.mapfs{overflow:hidden}
body.mapfs .livetag{display:none}

/* ---- incidents: a circle badge with the kind's pictogram (svg from app.js incSvg), opacity set per marker from its heat ---- */
.maplibregl-marker.mkw-inc{z-index:5}
.mk-inc{display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:0}
.mk-inc svg{display:block;overflow:visible}
.mk-inc:hover{filter:brightness(1.25)}
.legend .sw.inc{width:18px;height:18px;border:0;display:flex;align-items:center;justify-content:center}
.legend .sw.inc svg{display:block}
.lane-sw.inc{width:9px;height:9px;border-radius:5px;background:#ff5a4a;box-shadow:0 0 0 1px #0a0d12;margin-left:-2px}
.pp .pinc{display:inline-flex;align-items:center;line-height:0;margin-right:2px}
.badge.disp{border-color:#ff5a4a;color:#ffa69c;background:linear-gradient(90deg,rgba(255,90,74,.28) 50%,transparent 50%)}
.badge.unsub{border-style:dotted;border-color:var(--fg-3);color:var(--fg-3)}
.badge.debunk{border-color:var(--line-3);color:var(--fg-3);text-decoration:line-through}
/* contract 3: the body (.inc-b) fades with the age of what happened, set per marker; a thin white ring (.inc-dev) marks a development in the
   last 48 h and keeps its own strength; hovering a faded marker lifts it to full */
.mk-inc{position:relative}
.mk-inc .inc-b{display:flex;align-items:center;justify-content:center;line-height:0}
.mk-inc:hover .inc-b{opacity:1!important}
.inc-dev{position:absolute;left:50%;top:50%;width:var(--s,24px);height:var(--s,24px);transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(238,242,247,.95);box-shadow:0 0 0 1px rgba(10,13,18,.7);pointer-events:none;box-sizing:border-box}
.mk-inc .inc-dev::after{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid rgba(238,242,247,.7);animation:incdev 2.4s ease-out 3;animation-delay:var(--dl,0s)}
.mk-inc .inc-dev.seen::after{animation:none;display:none}
@keyframes incdev{from{transform:scale(1);opacity:1}to{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.mk-inc .inc-dev::after{animation:none;display:none}}
/* the first day (2026-10-17, app.js incFresh): a wide halo in the severity colour (--c) around a fresh incident, its size (--h) shrinking to the
   badge over 24 h; a faint disc and a ring that pulses outward, dashed and fainter while not confirmed, still under reduced motion. Behind the
   badge, never catching a click */
.mk-inc .inc-b,.legend .sw.inc .inc-b{position:relative;z-index:1}
.inc-fresh{position:absolute;left:50%;top:50%;width:var(--h,40px);height:var(--h,40px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.inc-fresh::before,.inc-fresh::after{content:"";position:absolute;inset:0;border-radius:50%;box-sizing:border-box}
.inc-fresh::before{background:var(--c,#ff5a4a);opacity:.2;border:1px solid var(--c,#ff5a4a)}
.inc-fresh::after{border:2px solid var(--c,#ff5a4a);animation:incfresh 2.6s ease-out infinite}
.inc-fresh.nc::before{opacity:.1;border-style:dashed}
.inc-fresh.nc::after{border-style:dashed;border-width:1.5px}
@keyframes incfresh{from{transform:scale(.4);opacity:.95}to{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.inc-fresh::after{animation:none;opacity:.55}}
.legend .sw.inc{position:relative}
.legend .sw.inc .inc-b{display:flex;line-height:0}
.badge.resolved.outc{display:inline-block;max-width:100%;white-space:normal;line-height:14px;padding:1px 6px;text-align:left}
.badge.outc .on{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:11px;color:var(--fg-2)}
.pp .pdev{margin-top:6px;padding:4px 6px;border-left:2px solid var(--line-3);background:var(--bg-3);border-radius:0 var(--r) var(--r) 0;font-size:11px;line-height:1.45;color:var(--fg);word-break:break-word}
.pp .pdev.new{border-left-color:rgba(238,242,247,.9)}
.pp .pdev .k,.pp .psite .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-right:6px}
.pp .pdev .nw{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#eef2f7;border:1px solid rgba(238,242,247,.7);border-radius:2px;padding:0 3px;margin-right:6px;line-height:13px;display:inline-block}
.pp .pdev .d{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap}
.pp .psite{margin-top:6px;padding-top:5px;border-top:1px solid var(--line)}
.pp .psite .psh{display:flex;align-items:flex-start;min-width:0;line-height:16px}
.pp .psite .psh b{font-weight:500;font-size:12px;color:var(--fg);min-width:0;word-break:break-word}
.pp .psite .pinc-g{flex:none;width:16px;height:16px;margin-right:6px}
.pp .psite .psw{margin-top:3px;font-size:11px;line-height:1.45;color:var(--fg-2);word-break:break-word}
.tl .ti .orig{display:block;margin-top:2px;font-size:11px;color:var(--fg-2);font-style:italic}
.tl .m a.ext{font-family:var(--mono);font-size:10px;color:var(--blue)}
.dsec ul.rl.hist li{margin-bottom:4px}
.dsec ul.rl .g{color:var(--fg-2);font-size:11px}

/* ---- sensors: FIRMS new bright and larger, recurring medium, persistent a faint dot; seismic flagged strong with a halo, routine faint ---- */
.mk-fire.new{width:10px;height:10px;background:#ff7a1a;box-shadow:0 0 0 1px #0a0d12,0 0 0 3px rgba(255,122,26,.3)}
.mk-fire.rec{width:8px;height:8px;background:rgba(224,120,32,.72)}
.mk-fire.per{width:5px;height:5px;background:rgba(224,120,32,.42);box-shadow:0 0 0 1px rgba(10,13,18,.6)}
.mk-seis.flag{width:16px;height:16px}
.mk-seis.flag i{width:9px;height:9px;background:#b07cff;border:1.5px solid #e6d6ff;box-shadow:0 0 0 1px #0a0d12,0 0 0 3px rgba(176,124,255,.3)}
.mk-seis.big i{width:10px;height:10px}
.mk-seis.flag.big i{width:11px;height:11px}
.mk-seis.rout i{width:5px;height:5px;background:rgba(150,96,220,.45);border-color:rgba(180,140,255,.45);box-shadow:0 0 0 1px rgba(10,13,18,.6)}
.legend .sw.fire.new{width:10px;height:10px;border-radius:50%;margin:0 1px;background:#ff7a1a;box-shadow:0 0 0 1px #0a0d12,0 0 0 2.5px rgba(255,122,26,.3)}
.legend .sw.fire.rec{width:8px;height:8px;border-radius:50%;margin:0 2px;background:rgba(224,120,32,.72)}
.legend .sw.fire.per{width:5px;height:5px;border-radius:50%;margin:0 3.5px;background:rgba(224,120,32,.42)}
.legend .sw.seis.flag{width:9px;height:9px;margin:0 1.5px;background:#b07cff;border:1.5px solid #e6d6ff;box-shadow:0 0 0 2px rgba(176,124,255,.3)}
.legend .sw.seis.rout{width:5px;height:5px;margin:0 3.5px;background:rgba(150,96,220,.45);border-color:rgba(180,140,255,.45)}
.pp .pflags{margin-top:6px;padding:4px 6px;border:1px solid rgba(201,146,42,.45);border-radius:var(--r);font-size:11px;line-height:1.45;color:var(--fg)}
.pp .pflags .pfh{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.pp .pflags .pf::before{content:"";display:inline-block;width:4px;height:4px;margin:0 6px 2px 0;background:var(--amber);border-radius:2px}
.pp .pflags.rout{border-color:var(--line-2);color:var(--fg-2)}
.pp .pnote{margin-top:4px;font-size:10px;color:var(--fg-3)}

/* ---- GPS key: live cells are outlines whose strength follows the ratio and fades with the age of the last bad report ---- */
.legend .sw.hexr{background:none;border:1.5px solid rgba(217,72,78,.85)}
.legend .sw.hexa{background:none;border:1px solid rgba(201,146,42,.75)}
.legend .sw.hexfade{border:1px solid rgba(217,72,78,.25)}
.legend .sw.hexyr{border-color:rgba(217,72,78,.32)}

/* ---- KEY and LAYERS never leave the map box: a fixed width that fits the box, columns that wrap, internal scroll ---- */
.legend{left:auto;right:8px;width:min(500px,calc(100% - 16px));max-width:none;max-height:calc(100% - 16px);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 14px}
.legend .k{align-items:center;min-width:0}
.legend .k .kt{min-width:0;overflow-wrap:anywhere}
.legend .k.nt{max-width:none;line-height:1.4}
.legend .k.wide{grid-column:1/-1}
.legend .lg{white-space:normal}
.legend .sw.palsw{width:26px;height:12px;display:flex;padding:0;border:1px solid var(--line-3);overflow:hidden}
.legend .sw.palsw i{flex:1}
.legend .sw.palsw b{width:2px}
.legend .sw.palsw.on{outline:1px solid var(--fg);outline-offset:1px}
.layers{width:min(240px,calc(100% - 16px));max-height:calc(100% - 16px)}
.layers label{white-space:normal}

/* the map header gives way as the column narrows (fitMapHead in app.js measures it): the title truncates first, then the 24 h item count goes (c1),
   then the history count (c2), then the title (c3) and tighter buttons (c4); the MAP label, the clock, the counts of military aircraft, vessels,
   NOTAMs (round 4: it opens the NOTAM drawer, so it never goes) and incidents and the three buttons always stay */
.maphead .hl{flex:1 1 auto;min-width:96px}
.maphead .sum{flex:0 0 auto;min-width:0}
.maphead.c1 .sum .i24{display:none}
.maphead.c2 .sum .hst{display:none}
.maphead.c3 .hl .ti{display:none}
.maphead.c3 .hl{min-width:64px}
.maphead.c4 button{padding:0 6px}.maphead.c4 .sum{gap:6px}
.maphead.c5 .sum{gap:4px}.maphead.c5 .sum>span{gap:3px}.maphead.c5 .sum .lbl{letter-spacing:.02em}
.maphead.c6{height:auto;min-height:32px;flex-wrap:wrap;row-gap:4px;padding-top:6px;padding-bottom:5px}
/* c6 (round 4 review: one nowrap row of counts and buttons still overflowed a 1024 px header and cut the KEY button off): the counts box
   dissolves into the header, the three buttons join the title row on the right, a full-width break follows, and the counts take the next row,
   wrapping there if they must. The header never overflows and the buttons stay together */
.maphead.c6{justify-content:flex-start;column-gap:8px}
.maphead.c6 .sum{display:contents}
.maphead.c6 .sum>button{order:1}
.maphead.c6::after{content:"";order:2;flex-basis:100%;height:0}
.maphead.c6 .sum>span{order:3}
@media (max-width:767px){
  /* phone: the header wraps (label and clock, then counts and the three buttons); the KEY opens as a one-column sheet inside the map */
  .maphead{height:auto;min-height:32px;flex-wrap:wrap;row-gap:4px;padding:6px 8px 5px}
  .maphead .sum{width:100%;flex-wrap:wrap;row-gap:4px}
  .maphead .sum #btn-fs{margin-left:auto}
  #btn-key{display:inline-block}
  .legend{display:none}
  .legend.open{display:grid!important;width:calc(100% - 16px);grid-template-columns:minmax(0,1fr)}
}
@media (min-width:768px) and (max-height:899px){
  .app{gap:8px}.top,.board,.col{gap:8px}.col-m{gap:0}
}

/* ---- seismic near infrastructure only (context): between routine and flagged ---- */
.mk-seis.ctx i{width:8px;height:8px;background:rgba(150,96,220,.75);border:1px solid #cdb4ff}
.legend .sw.seis.ctx{width:8px;height:8px;margin:0 2px;background:rgba(150,96,220,.75);border-color:#cdb4ff}

/* ---- KEY swatches for the area lines follow the palette (applyPalette sets the variables); the monitored area is a faint dashed line ---- */
.legend .sw.aoi{border-color:var(--pal-aoi,rgba(255,255,255,.18))}
.legend .sw.cable{border-top-color:var(--pal-cable,rgba(255,255,255,.4))}
.legend .sw.region{height:0;border:0;border-top:1px dashed var(--pal-region,rgba(200,212,228,.3))}

/* lane cards never shrink below their content (min-height replaced the automatic minimum, so a full lane squeezed two-line titles under the
   source row); the lane scrolls instead */
@media (min-width:768px){.lane .pb>.ev{flex:1 0 auto}}

/* an open KEY or LAYERS sits above the zoom buttons and the hover readout */
.legend,.layers{z-index:5}
/* an incident known only by region: the badge at the area's centre in a small dashed halo of its severity colour (--c), a fixed size, never
   the region's extent (a red disc over an oblast read as a strike zone) */
.mk-inc.area .inc-area,.legend .sw.inc.area .inc-area{display:flex;align-items:center;justify-content:center;width:var(--d);height:var(--d);border-radius:50%;border:1.5px dashed var(--c,#ff9442);background:rgba(10,13,18,.35);box-sizing:border-box}
.ilrow{padding:8px 0;border-top:1px solid var(--line);display:grid;gap:4px}

/* ---- indicator indexes: one index tile per group (name, state dot, the one-line summary, the worst member's sparkline); a click unfolds it
   into one card across the row, its tile on top and its member tiles inside the same frame in the index's state colour ---- */
.tiles.grouped{grid-template-rows:none}
.tile.idx{grid-template-columns:7px minmax(0,1fr) 8px}
.tile.idx .nm{font-weight:500;color:var(--fg)}
.tile.idx.green .nm,.tile.idx.grey .nm{color:var(--fg)}
.tile.idx .chev{justify-self:end;width:0;height:0;border-left:4px solid var(--fg-3);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;transition:transform .12s ease}
.tile.idx:hover .chev,.tile.idx:focus-visible .chev{border-left-color:var(--fg)}
.tile.idx.open .chev{transform:rotate(90deg)}
/* the summary may take two lines; when it is still cut, the sparkline makes room (f2, set by fitValues) and the title keeps it whole */
.tile.idx{height:auto;min-height:56px}
.tile.idx .r2{align-items:flex-end}
.tile.idx .gs{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:10px;line-height:12px;letter-spacing:.02em;color:var(--fg-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.tile.idx svg{width:44px}
.tile.idx.f2 .r2>svg{display:none}
.tile.idx.amber .gs{color:var(--amber)}.tile.idx.red .gs{color:var(--red)}.tile.idx.grey .gs{color:var(--fg-3)}
.tile.idx.amber{border-color:rgba(201,146,42,.35)}
.tile.idx.open{background:var(--bg-3);border-color:var(--line-3)}
.tile.idx.open.red{border-color:rgba(217,72,78,.55)}.tile.idx.open.amber{border-color:rgba(201,146,42,.55)}
/* short desktop viewports (a 1280x800 laptop) tighten the index tiles with the member tiles; after the base rule, which it overrides */
@media (min-width:768px) and (max-height:899px){
  .tile.idx{min-height:48px}
}
.tile.idx.wide{grid-column:1/-1}
.icard{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);border:1px solid var(--line-3);border-radius:var(--r);background:var(--bg-1,var(--bg));min-width:0;overflow:hidden}
.icard.amber{border-color:rgba(201,146,42,.55)}.icard.red{border-color:rgba(217,72,78,.55)}
.icard>.tile.idx{border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--bg-3)}
.igrp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;min-width:0}
.igrp .empty{grid-column:1/-1;color:var(--fg-3);font-family:var(--mono);font-size:11px;padding:4px}

/* ---- past incidents (AOIs carrying an incident): a muted symbol on a small dark plaque, smaller and quieter than the coral live incidents
   (12 px against their 14 px minimum); reported ones dashed; the month-year label only from zoom 7 (.z7 on the map box).
   Context layers (past incidents, places, defence industry) sit under every live marker: z-index 0, and sinkMarkers puts them first in tree
   order, right after the map canvas, so items (z-index auto), sensors (1) and incidents (5) paint over them.
   2026-10-17: the pictogram alone in stone, no plaque (a dark halo keeps it legible), a dashed frame only when reported; below zoom 7 a small
   stone dot, so history never crowds the overview ---- */
.maplibregl-marker.mkw-pinc,.maplibregl-marker.mkw-place,.maplibregl-marker.mkw-def{z-index:0}
.mk-pinc{position:relative;display:flex;align-items:center;justify-content:center;width:12px;height:12px;cursor:pointer;line-height:0}
.mk-pinc .pig{display:flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:3px;box-sizing:border-box;background:transparent;border:1px solid transparent}
.mk-pinc.rep .pig{border:1px dashed rgba(178,168,156,.62);background:rgba(10,13,18,.45)}
.mk-pinc svg,.legend .sw.pinc svg,.pp .pinc-g svg{display:block;fill:none;stroke:#bdb2a5;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mk-pinc svg{filter:drop-shadow(0 0 1px #0a0d12) drop-shadow(0 0 1px #0a0d12)}
.mapbox:not(.z7) .mk-pinc{width:7px;height:7px}
.mapbox:not(.z7) .mk-pinc .pig{width:5px;height:5px;border-radius:50%;background:#a9a092;border:0;box-shadow:0 0 0 1px rgba(10,13,18,.8)}
.mapbox:not(.z7) .mk-pinc .pig svg{display:none}
.mk-pinc .pil{position:absolute;left:15px;top:0;font-family:var(--mono);font-size:9px;line-height:12px;letter-spacing:.02em;color:#aaa197;background:rgba(10,13,18,.72);padding:0 3px;border-radius:2px;white-space:nowrap;display:none}
.mapbox.z7 .mk-pinc .pil{display:block}
.mk-pinc.rep:hover .pig{border-color:#ddd2c4}.mk-pinc:hover svg{stroke:#e6ddd1}
/* the pictogram's strength follows the incident's age (app.js pincOpacity, set per marker); hovering lifts it to full */
.mk-pinc:hover{opacity:1!important}
.legend .sw.pinc{width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:3px;box-sizing:border-box;border:1px solid transparent}
.legend .sw.pinc.rep{border:1px dashed rgba(178,168,156,.62)}
.legend .sw.pdot{width:5px;height:5px;margin:0 4.5px;border:0;border-radius:50%;background:#a9a092}
.lane-sw.pinc{width:6px;height:6px;border-radius:50%;background:#a9a092;margin:0 1.5px}
.pp .pinc-g{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:3px;border:1px solid rgba(178,168,156,.62);background:rgba(10,13,18,.82);margin-right:2px}
.pp .pinc-g.rep{border-style:dashed}
.pp .ptx.lead{margin:0 0 6px;color:var(--fg)}

/* ---- places (2026-10-17): a muted slate tile with a pale pictogram; military airbases and naval bases with a brighter frame. Airports,
   airbases and naval bases from zoom 6 (.z6 on the map box), every other place (defence industry included) from zoom 7 ---- */
.mk-place{display:none;width:18px;height:18px;align-items:center;justify-content:center;cursor:pointer;line-height:0}
.mapbox.z6 .mk-place.av,.mapbox.z7 .mk-place{display:flex}
.mk-place svg,.legend .sw.place svg{display:block;overflow:visible}
.mk-place svg rect,.legend .sw.place svg rect{fill:rgba(36,44,56,.94);stroke:#56636f;stroke-width:1}
.mk-place.mil svg rect,.legend .sw.place.mil svg rect{stroke:#97aabd;stroke-width:1.6}
.mk-place svg g,.legend .sw.place svg g{fill:none;stroke:#c4d2e0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mk-place svg .fl,.legend .sw.place svg .fl{fill:#c4d2e0;stroke:none}
.mk-place:hover svg rect{stroke:#dfe8f1}.mk-place:hover svg g{stroke:#eef3f8}
/* place status (2026-10-17): a short bar under the tile, never a circle (circles are incidents); popup status block and hourly bars */
.mk-place svg rect.stb,.legend .sw.place svg rect.stb{stroke:none}
.mk-place svg rect.stb.green,.legend .sw.place svg rect.stb.green{fill:var(--green);opacity:.75}
.mk-place svg rect.stb.amber,.legend .sw.place svg rect.stb.amber{fill:var(--amber)}
.mk-place svg rect.stb.red,.legend .sw.place svg rect.stb.red{fill:var(--red)}
.pp .pst{margin:0 0 6px;padding:4px 7px;border-left:2px solid var(--fg-3);background:rgba(255,255,255,.03);font-size:11px;line-height:1.4;color:var(--fg);word-break:break-word}
.pp .pst b{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);margin-bottom:1px}
.pp .pst.green{border-left-color:var(--green);background:var(--green-bg)}.pp .pst.green b{color:var(--green)}
.pp .pst.amber{border-left-color:var(--amber);background:var(--amber-bg)}.pp .pst.amber b{color:var(--amber)}
.pp .pst.red{border-left-color:var(--red);background:var(--red-bg)}.pp .pst.red b{color:var(--red)}
.pp .pspkw{display:flex;align-items:flex-end;gap:6px;margin-top:6px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.pp .pspk{display:block;flex:none}.pp .pspk rect{fill:var(--fg-2)}.pp .pspk rect.z{fill:var(--fg-3);opacity:.6}
.legend .sw.place{width:18px;height:18px;border:0;display:flex;align-items:center;justify-content:center}
.lane-sw.place,.lane-sw.def{width:9px;height:9px;border-radius:2px;background:rgba(36,44,56,.94);border:1px solid #97aabd;box-sizing:border-box}

/* ---- sensor clusters below zoom 7: a count bubble per kind in the kind's colour (thermal orange, seismic violet, vessel events a grey ring) ---- */
.mk-sclu{display:flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;font-family:var(--mono);font-size:10px;line-height:1;cursor:pointer;box-shadow:0 0 0 1px #0a0d12;box-sizing:border-box}
.mk-sclu b{font-weight:500}
.mk-sclu.fire{background:rgba(224,120,32,.88);color:#1d0f03}
.mk-sclu.seis{background:rgba(150,96,220,.88);color:#120a1e}
.mk-sclu.gfw{background:rgba(10,13,18,.82);color:#c9d1dc;border:1.5px solid rgba(170,180,196,.85)}
.mk-sclu.n2{min-width:19px;height:19px;border-radius:10px}
.mk-sclu.n3{min-width:23px;height:23px;border-radius:12px;font-size:11px}
.mk-sclu:hover{filter:brightness(1.2)}
/* a bubble whose members are all faint singles stays faint: persistent heat only (flares, industry), routine blasts only */
.mk-sclu.fire.per{background:rgba(224,120,32,.35);color:#f0c8a0;box-shadow:0 0 0 1px rgba(10,13,18,.6)}
.mk-sclu.seis.rout{background:rgba(150,96,220,.35);color:#dccbff;box-shadow:0 0 0 1px rgba(10,13,18,.6)}
.legend .sw.sclu{width:auto;min-width:16px;height:14px;padding:0 3px;border:0;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#1d0f03;letter-spacing:0}
.legend .sw.sclu b{font-weight:500}
.legend .sw.sclu.fire{background:rgba(224,120,32,.88)}
.legend .sw.sclu.seis{background:rgba(150,96,220,.88);color:#120a1e}
/* the single-marker swatches .fire.per and .seis.rout are more specific than .sw.sclu, so the faint bubbles restate the bubble shape */
.legend .sw.sclu.fire.per,.legend .sw.sclu.seis.rout{width:auto;min-width:16px;height:14px;margin:0;padding:0 3px;border:0;box-shadow:none}
.legend .sw.sclu.fire.per{border-radius:7px;background:rgba(224,120,32,.35);color:#f0c8a0}
.legend .sw.sclu.seis.rout{border-radius:7px;background:rgba(150,96,220,.35);color:#dccbff}
.legend .sw.sclu.gfw{background:rgba(10,13,18,.82);color:#c9d1dc;border:1.5px solid rgba(170,180,196,.85)}

/* ---- alerts: a bell chip in the status band (the count of the last 24 h) and the list in the drawer ---- */
.state [hidden]{display:none!important}
.state .grp.alerts{flex:none}
.chip.bell{background:none;cursor:pointer;gap:5px;letter-spacing:0}
.chip.bell svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
.chip.bell b{font-weight:500}
.chip.bell:hover{background:var(--bg-3)}
.chip.bell.s0{color:var(--fg-3)}
.dsec.al{padding-top:0;padding-bottom:0}
.alrow{padding:10px 0;border-top:1px solid var(--line);display:grid;gap:5px;min-width:0}
.alrow:first-child{border-top:0}
.alrow .alh{display:flex;align-items:baseline;gap:8px;min-width:0}
.alrow .t{flex:none;font-family:var(--mono);font-size:10px;color:var(--fg-2);min-width:36px}
.alrow .badge{flex:none;align-self:center}
.alrow .ti{font-size:12px;font-weight:500;color:var(--fg);min-width:0;line-height:1.35}
.alrow .alb{margin:0;font-size:12px;color:var(--fg-2);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.alrow .alm{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.alrow .alm .chip{line-height:16px}
.alrow .pbtn{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:20px;color:var(--fg-2);margin-left:auto}
.alrow .pbtn:hover{color:var(--fg)}
.alrow .algone{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:20px;color:var(--fg-3);margin-left:auto;cursor:default}
.alrow.critical{box-shadow:inset 2px 0 0 var(--red);padding-left:8px}
.alrow.high{box-shadow:inset 2px 0 0 rgba(217,72,78,.6);padding-left:8px}
.alrow.medium{box-shadow:inset 2px 0 0 rgba(201,146,42,.6);padding-left:8px}
.alrow.low{padding-left:8px;box-shadow:inset 2px 0 0 var(--line-3)}
.alrow.wd{box-shadow:inset 2px 0 0 var(--line-3)}
.alrow.wd .ti{color:var(--fg-3);text-decoration:line-through;text-decoration-color:var(--fg-3)}
.alrow.wd .alb{color:var(--fg-3)}
.alrow.wd .badge.sev{opacity:.45}
.alrow .alwd{margin:0;font-size:12px;color:var(--fg-2);line-height:1.45}
.alrow .alwd b{font-weight:500;color:var(--fg)}
.badge.sev.critical{background:var(--red);color:#0a0d12;border-color:var(--red)}
.badge.sev.high{border-color:var(--red);color:var(--red);background:var(--red-bg)}
.badge.sev.medium{border-color:var(--amber);color:var(--amber);background:var(--amber-bg)}
.badge.sev.low{border-color:var(--line-3);color:var(--fg-2)}
@media (max-width:767px){
  .alrow .pbtn,.alrow .algone{margin-left:0}
}


/* ---- incident lifecycle (round 2): one object per real incident. Live, the badge at full strength; cooling, the badge fading with the heat
   (app.js lcOpacity, set per marker); history, the pictogram alone (.mk-pinc). At a past incident site the badge carries the site's own
   pictogram; a benign resolution is grey, hollow and smallest ---- */
.mk-pinc.ben{width:10px;height:10px}
.mk-pinc.ben .pig{width:10px;height:10px;background:transparent;border-color:transparent;box-shadow:none}
.mk-pinc.ben svg{stroke:#9aa1aa}
.mk-pinc.ben .pil{left:13px;color:#8d939b}
.legend .sw.inc.cool{opacity:1}
.legend .sw.pinc.ben svg{display:block;fill:none;stroke:#ece4d8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.legend .sw.pinc.ben{width:11px;height:11px;background:transparent;border-color:rgba(154,161,170,.55)}
.legend .sw.pinc.ben svg{stroke:#9aa1aa}
/* the phase badge and why: LIVE coral, COOLING sand, HISTORY stone, FADED grey */
.badge.lc{font-weight:500}
.badge.lc.live{background:#ff5a4a;border-color:#ff5a4a;color:#0a0d12}
.badge.lc.cooling{border-color:rgba(217,160,102,.75);color:#ecc9a3;background:rgba(217,160,102,.12)}
.badge.lc.historical{border-color:rgba(178,168,156,.62);color:#bdb2a5;background:var(--bg-3)}
.badge.lc.expired{border-color:var(--line-3);color:var(--fg-3);border-style:dashed}
.plc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;min-width:0}
.plc .lcr{font-size:11px;line-height:1.4;color:var(--fg-2);min-width:0;word-break:break-word}
.plc.live .lcr{color:var(--fg)}
.drawer .plc{margin:-2px 0 10px;padding:0 16px}
/* the dated timeline: when it happened, then each development; the newest marked new while a development re-heats it */
.ptl{margin-top:6px;padding:4px 0 2px 8px;border-left:2px solid var(--line-3);display:grid;gap:3px;font-size:11px;line-height:1.45;color:var(--fg);word-break:break-word}
.pp .ptl .k,.ptl>.k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.ptl .tlr{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr);gap:8px;align-items:baseline;min-width:0}
.ptl .tlr .d{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap}
.ptl .tlr:not(.dev) .tx{color:var(--fg-2)}
.ptl .tlr .dk{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);border:1px solid var(--line-3);border-radius:2px;padding:0 3px;margin-right:6px;line-height:13px;display:inline-block}
.ptl .tlr .nw{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#eef2f7;border:1px solid rgba(238,242,247,.7);border-radius:2px;padding:0 3px;margin-right:6px;line-height:13px;display:inline-block}
.ptl .tlr.new{border-left:2px solid rgba(238,242,247,.9);margin-left:-10px;padding-left:8px}
.dtl{margin-top:0}
@media (max-width:767px){.ptl .tlr{grid-template-columns:minmax(0,1fr);gap:0}}

/* ---- cleared reports (round 2b): confirmed harmless or debunked. A small grey check in a circle (app.js clrSvg), no coral, no family hue, no
   heat ring, no area ring, no ping; one size; under every live incident marker; hover lifts it. The grey CLEARED or DEBUNKED badge replaces the
   blue CONFIRMED one in the popup and the drawer; the map header shows a muted "1 cleared" beside the incidents count ---- */
.mk-clr{display:flex;align-items:center;justify-content:center;line-height:0;cursor:pointer}
.mk-clr .clr-b{display:flex;line-height:0}
.mk-clr svg{display:block;overflow:visible}
.mk-clr:hover .clr-b{opacity:1!important}
.legend .sw.clr{display:flex;align-items:center;justify-content:center}
.legend .sw.clr svg{display:block}
.pp .pinc.clr{margin-right:2px}
.badge.clr{border-color:var(--line-3);color:var(--fg-2);background:var(--bg-3)}
.badge.clr .ck{display:inline-block;width:5px;height:8px;margin:0 6px 2px 0;border:solid var(--fg-2);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.badge.clr.outc{display:inline-block;max-width:100%;white-space:normal;line-height:14px;padding:1px 6px;text-align:left}
.plc.cleared .lcr{color:var(--fg-3)}
/* the cleared note beside the incidents count: grey check, number, word; the word goes first (cx), then the note (cy), before the NOTAM and
   history counts (c2) */
.maphead .sum .inc .clr{font-family:var(--mono);font-size:10px;color:var(--fg-3);white-space:nowrap;gap:3px}
.maphead .sum .inc .clr svg{display:block;flex:none}
.maphead .sum .inc .clr .w{padding-left:3px}
.maphead.cx .sum .inc .clr .w,.maphead.cy .sum .inc .clr{display:none}

/* ---- round 3: stories by severity, item links, republished articles, an incident's articles ---- */
:root{--sev5:var(--red);--sev4:#ec7a5c;--sev3:var(--amber);--sev2:#8f98a6;--sev1:#3a4656}
/* Developing situations: the worst story first, marked by a left bar and "SEV n" (5 red, 4 coral, 3 amber, 2 muted, 1 or not rated grey) */
.srow{padding-left:11px;box-shadow:inset 3px 0 0 var(--sevc,var(--sev1))}
.srow.sv5{--sevc:var(--sev5)}.srow.sv4{--sevc:var(--sev4)}.srow.sv3{--sevc:var(--sev3)}.srow.sv2{--sevc:var(--sev2)}
.sev{display:inline-flex;align-items:center;flex:none;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.06em;line-height:14px;padding:0 4px;border:1px solid var(--line-2);border-radius:2px;color:var(--fg-3);white-space:nowrap}
.sev.sv5,.badge.sevb.sv5{color:var(--sev5);border-color:rgba(217,72,78,.6);background:var(--red-bg)}
.sev.sv4,.badge.sevb.sv4{color:var(--sev4);border-color:rgba(236,122,92,.55);background:rgba(236,122,92,.1)}
.sev.sv3,.badge.sevb.sv3{color:var(--sev3);border-color:rgba(201,146,42,.55);background:var(--amber-bg)}
.sev.sv2,.badge.sevb.sv2{color:var(--sev2);border-color:var(--line-3)}
.legend .sw.svk{width:3px;height:12px;margin:0 4.5px;border:0;background:var(--sev1)}
.legend .sw.svk.sv5{background:var(--sev5)}.legend .sw.svk.sv4{background:var(--sev4)}.legend .sw.svk.sv3{background:var(--sev3)}.legend .sw.svk.sv2{background:var(--sev2)}
/* lane cards: "story: <short title>" and "on map" (a pin) under the source line; a republished article is dimmed and says when it was first published */
.ev .rpb{grid-column:2/-1;min-width:0;font-family:var(--mono);font-size:10px;color:var(--fg-3);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* track R: a quiet note on a card without an English title while the daily AI budget pauses translation */
.ev .tp{grid-column:2/-1;min-width:0;font-family:var(--mono);font-size:10px;line-height:1.35;color:var(--fg-3);letter-spacing:.02em;overflow-wrap:anywhere}
.ev.rep{opacity:.6}
.ev.rep:hover,.ev.rep.open{opacity:.85}
.ev .lx{grid-column:2/-1;display:flex;gap:6px;align-items:center;min-width:0}
.ic{display:inline-block;flex:0 1 auto;min-width:0;max-width:100%;margin:0;padding:0 6px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--bg-2);font-family:var(--mono);font-size:10px;line-height:16px;letter-spacing:.02em;color:var(--fg-2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic:hover{color:var(--fg);border-color:var(--fg-3);background:var(--bg-3)}
.ic .w{color:var(--fg-3)}
.ic.onm{flex:none}
.ic svg{display:inline-block;width:9px;height:11px;margin-right:4px;vertical-align:-2px;fill:none;stroke:#ff8a7a;stroke-width:1.3}
.dlx{display:flex;flex-wrap:wrap;gap:6px}
.dlx .ic{white-space:normal;line-height:1.4;padding:2px 6px}
#drawer .rpd{margin:0 0 8px;font-family:var(--mono);font-size:10px;color:var(--fg-3);letter-spacing:.02em}
/* an incident's articles: the popup lists the newest few, the event drawer all it was served */
.parts{margin-top:6px;padding:4px 0 2px 8px;border-left:2px solid var(--line-3);display:grid;gap:4px;font-size:11px;line-height:1.4;color:var(--fg);min-width:0}
.pp .parts .k,.parts>.k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.parts .na{font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.par{display:grid;grid-template-columns:minmax(52px,auto) minmax(0,1fr);gap:8px;align-items:baseline;min-width:0}
.par .d{font-family:var(--mono);font-size:10px;color:var(--fg-2);white-space:nowrap}
.par .tx{min-width:0;word-break:break-word}
.par .tx a{color:var(--fg)}
.par .tx a:hover{text-decoration:underline}
.par .src,.par .rpb{display:block;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.par.rep{opacity:.65}
.parts .pmore{margin-top:0}
.dpa{margin-top:0}
@media (max-width:767px){.par{grid-template-columns:minmax(0,1fr);gap:0}}
/* the place outlasts the family when the SEV badge takes room in the first line: the family shrinks first, and on a phone a row with a
   SEV badge leaves it out (the drawer names it) */
.srow .r1 .fam{flex:0 50 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:767px){.srow .r1:has(.sev) .fam{display:none}}

/* ---- round 4 (2026-10-05): Baltic Monitor ---- */
/* the NOTAM count in the map header opens the NOTAM drawer: a quiet underline says it is a control */
.maphead .sum .ntm{cursor:pointer;border-radius:2px}
.maphead .sum .ntm .val{text-decoration:underline dotted var(--line-3);text-underline-offset:3px}
.maphead .sum .ntm:hover .val,.maphead .sum .ntm:focus-visible .val{color:#b5ecff;text-decoration-color:#4fc3f7}
/* the NOTAM drawer sits beside the map with no scrim (a shadow separates it), as wide as the right column it covers; a phone keeps the full width */
.drawer.side{width:clamp(420px,33.4vw,600px);box-shadow:-14px 0 28px rgba(0,0,0,.5)}
.drawer.side .dh{box-shadow:inset 0 2px 0 var(--ac-air)}
@media (max-width:767px){.drawer.side{width:100%;box-shadow:none}}
.nd{display:flex;flex-direction:column;min-width:0;container:nd/inline-size}
.ndh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px 6px;min-width:0}
.ndh .lbl{color:var(--fg-2)}
.ndh .n{margin-left:8px;font-size:12px;letter-spacing:0;color:var(--fg)}
.ndh .sum{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-family:var(--mono);font-size:10px;color:var(--fg-3);letter-spacing:.02em}
.nd .airnote{padding:0 16px 8px}
.nd .airfir{padding:8px 16px}
.nd .an{padding-left:16px;padding-right:16px}
.nd .airsub{padding:0 16px;margin-top:12px}
.nd .airlist .none{padding:12px 16px}
.ndsrc{margin:12px 0 16px;padding:0 16px;font-size:11px;line-height:1.45;color:var(--fg-3)}
/* the About link in the brand row is the phone's (its nav is hidden); on a phone the live tag gives way to an open drawer */
.brand .abm{display:none}
@media (max-width:767px){
  .brand .val{margin-left:auto}
  .brand .abm{display:inline;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
  .drawer.open~.livetag,.modal.open~.livetag{display:none}
}
/* a modal's one grid column is the viewport less its padding, so the box's max-width:100% holds on a phone (it measured 640 px before) */
.modal.open{grid-template-columns:minmax(0,1fr);justify-items:center}
/* the Telegram & independent lane header says lower reliability in words; the header's title explains the lane */
.lane .ph{cursor:help}
.lane .ph .hint{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);border:1px dashed var(--line-3);border-radius:3px;padding:0 4px;line-height:14px}
.lane .ph .hint:has(~.err:not([hidden])){display:none}
/* why here: one muted line under a lane card (the title holds all of it), a line under the badges in the item drawer, a line in the map popup */
.ev .why{grid-column:2/-1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.35;color:var(--fg-3)}
.ev .why .w,#drawer .dwhy .w{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);margin-right:2px}
#drawer .dwhy{margin:0;padding:8px 16px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--fg-2)}
.pp .pwhy{margin:0 0 6px;font-size:11px;line-height:1.45;color:var(--fg-3);word-break:break-word}
/* news roundups: a line of an outlet's roundup says so quietly, with a link to the roundup post (under the why line, in the drawer) */
.ev .rdn,.clrow .rdn{grid-column:2/-1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.35;color:var(--fg-3);font-style:italic}
.rdn a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:2px}
.rdn a:hover{color:var(--fg-2);text-decoration-color:currentColor}
#drawer .drdn{margin:0;padding:6px 16px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--fg-3);font-style:italic}
/* the history chart's way to the NOTAM drawer */
#h-badges .chip.nl{background:none;cursor:pointer;color:#4fc3f7;border-color:rgba(79,195,247,.45)}
#h-badges .chip.nl:hover{background:rgba(79,195,247,.08);color:#b5ecff}
/* ---- warnings (contract 4): the strip below the status band, the drawer, the KEY and LAYERS swatches ---- */
/* the strip is a second header row, shown only while a warning is in force (app.js sets .wb on .app): the allied banner (a button, its words carry
   the level) and the Russian side's muted chip, which never uses red. Text wraps; nothing scrolls sideways */
.wbar{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:stretch;min-width:0}
.wbar[hidden]{display:none}
.app.wb{grid-template-rows:auto minmax(0,1fr)}
body[data-tab=signals] .app.wb{grid-template-rows:auto minmax(0,1fr) 56px}
.app.wb .top{grid-template-rows:48px auto}
.wban{display:flex;align-items:center;gap:8px;flex:1 1 320px;min-width:0;text-align:left;white-space:normal;line-height:1.35;padding:4px 10px;border:1px solid rgba(201,146,42,.7);background:var(--amber-bg);color:var(--fg);font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.wban.red{border-color:rgba(217,72,78,.75);background:var(--red-bg)}
.wban:hover{background:rgba(201,146,42,.2);border-color:var(--amber)}
.wban.red:hover{background:rgba(217,72,78,.2);border-color:var(--red)}
.wban svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--amber);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.wban.red svg{stroke:var(--red)}
.wban .wt{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.wban .wlate{flex:none;font-size:10px;color:var(--fg-3)}
.wban .wgo{flex:none;margin-left:auto;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);border:1px solid var(--line-3);border-radius:3px;padding:0 5px;line-height:16px}
.wadv{flex:0 1 auto;min-width:0;text-align:left;white-space:normal;line-height:1.35;padding:4px 10px;border:1px dashed var(--line-3);background:var(--bg-2);color:var(--fg-2);font-family:var(--mono);font-size:11px;letter-spacing:.02em;overflow-wrap:anywhere}
.wadv:hover{color:var(--fg);border-color:var(--fg-3);background:var(--bg-3)}
@media (max-width:767px){
  .wban,.wadv{flex:1 1 100%;font-size:11px}
  /* every tab: the banner keeps to two lines and the chip to one, so the map keeps its height and the sticky header (Board, Items, Continuity)
     does not grow by the whole strip while the page scrolls (the full words are in the label, the title and the drawer the strip opens) */
  .wban .wt,.wadv .wt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .wadv .wt{-webkit-line-clamp:1}
}
/* the warnings drawer: an amber accent, the 30-day strip, one row per episode (a left bar: red declared, amber possible, grey ended or Russian side) */
.drawer.wk .dh{box-shadow:inset 0 2px 0 var(--amber)}
.wd .wgone{margin:0;padding:8px 16px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--amber)}
.wstrip svg{display:block;width:100%;height:44px}
.wstrip .ax{stroke:var(--line-3);stroke-width:1;vector-effect:non-scaling-stroke}
.wstrip .hit{fill:transparent}
.wstrip .al{fill:var(--amber)}
.wstrip .ad{fill:var(--fg-3)}
.wstrip .wsl,.wstrip .wsd{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;color:var(--fg-3);line-height:16px}
.wstrip .wsl .a{color:var(--amber)}
.weps{padding-left:0;padding-right:0;padding-bottom:0}
.weps h3{padding:0 16px}
.wep{padding:8px 16px 8px 18px;border-top:1px solid var(--line);display:grid;gap:3px;min-width:0;cursor:pointer;box-shadow:inset 3px 0 0 var(--line-3)}
.wep:hover,.wep:focus-visible{background:var(--bg-2)}
.wep.red{box-shadow:inset 3px 0 0 var(--red)}.wep.amber{box-shadow:inset 3px 0 0 var(--amber)}.wep.adv{box-shadow:inset 3px 0 0 var(--fg-3)}
.wep.focus{background:var(--bg-3)}
.wep.nofly{cursor:default}
.wep .wh{display:flex;align-items:center;gap:8px;min-width:0}
.wep .cc{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg-2);border:1px solid var(--line-3);border-radius:3px;padding:0 4px;line-height:15px}
.wep .ti{flex:1 1 auto;min-width:0;font-size:12px;font-weight:500;color:var(--fg);line-height:1.35;overflow-wrap:anywhere}
.wep.adv .ti,.wep.end .ti{color:var(--fg-2)}
.wep .badge{flex:none}
.wep .wm{font-family:var(--mono);font-size:10px;color:var(--fg-2);line-height:1.5;overflow-wrap:anywhere}
.wep .wm .lv.red{color:var(--red)}.wep .wm .lv.amber{color:var(--amber)}
.wep .wi{font-size:11px;color:var(--fg-3);line-height:1.4;overflow-wrap:anywhere}
.wep .wl{display:flex;flex-wrap:wrap;gap:4px 12px}
.wep .wl a{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.wep .wl a:hover{color:#8ec0f2}
/* the popup's links */
.pp .wlk a{color:var(--blue)}
.pp .wlk a:hover{color:#8ec0f2}
/* the ways into the drawer: the Warnings index card, the history chart's chip, the LAYERS entry */
.igb{grid-column:1/-1;justify-self:start;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);line-height:20px}
.igb:hover{color:var(--fg)}
#h-badges .chip.wl{background:none;cursor:pointer;color:var(--amber);border-color:rgba(201,146,42,.5)}
#h-badges .chip.wl:hover{background:var(--amber-bg)}
.layers .lpb{align-self:flex-start;margin-left:15px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2);line-height:18px;padding:0 6px}
.layers .lpb:hover{color:var(--fg)}
.lane-sw.warn{background:rgba(201,146,42,.3);border:1.5px solid #d9484e;border-radius:4px;box-sizing:border-box}
/* KEY swatches: the map's warning circles */
.legend .sw.wdec{background:rgba(217,72,78,.15);border:2px solid #d9484e;border-radius:6px}
.legend .sw.wpos{background:rgba(201,146,42,.15);border:2px solid #c9922a;border-radius:6px}
.legend .sw.wend{border:1px solid rgba(217,72,78,.45);border-radius:6px}
.legend .sw.wadv{border:1px dashed #c3c8cf;border-radius:6px}
.legend .sw.wap{width:10px;height:10px;border:1.3px solid #c3c8cf;border-radius:50%}

/* lane clusters (2026-10-06): a roll-up card (lead on top, "+N more", other sources, outlets, "first"), its member list, the new mark, the
   "also N in Media" chip and the drawer's Same news. A row in an opened card is at least 44 px high on a phone */
.ev .clx{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:3px 8px;align-items:center;min-width:0;font-family:var(--mono);font-size:10px;color:var(--fg-3);line-height:16px}
.ev .clmore{flex:none;margin:0;padding:0 6px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--bg-2);font-family:var(--mono);font-size:10px;line-height:16px;letter-spacing:.02em;color:var(--fg);cursor:pointer}
.ev .clmore:hover{background:var(--bg-3);border-color:var(--fg-3)}
.ev .clmore[aria-expanded="true"]{background:var(--bg-4);border-color:var(--fg-3)}
.ev .clsrc{flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-2)}
.ev .clsrc .bas{font-size:9px}
.ev .clsrc .badge{line-height:12px;padding:0 3px;font-size:9px}
.ev .clsrc .ck{color:var(--fg-3)}
.ev .clo,.ev .clf{flex:none;white-space:nowrap}
.ev .clo{cursor:help}
.ev .nw{flex:none;padding:0 4px;border-radius:2px;background:var(--blue);color:#0a0d12;font-size:9px;letter-spacing:.08em;text-transform:uppercase;line-height:14px}
.ev.cl.xo{background:var(--bg-2);cursor:default}
.ev.cl.xo:hover{background:var(--bg-2)}
.ev .clist{grid-column:1/-1;display:flex;flex-direction:column;margin:2px -8px -6px;border-top:1px dashed var(--line-3);background:var(--bg-1)}
.clrow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:3px 8px;align-content:center;padding:5px 8px 5px 10px;border-top:1px solid var(--line);cursor:pointer;box-shadow:inset 2px 0 0 var(--line-3)}
.clrow:first-child{border-top:0}
.clrow:hover{background:var(--bg-3)}
.clrow.open{background:var(--bg-3);box-shadow:inset 2px 0 0 var(--blue)}
.clrow.hl{box-shadow:inset 2px 0 0 var(--amber);background:var(--bg-3)}
.clrow.rep{opacity:.6}
.clrow .ld{display:inline-block;margin-right:6px;padding:0 4px;border:1px solid var(--line-3);border-radius:2px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;line-height:13px;color:var(--fg-2);vertical-align:1px}
.clrow .bd{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;align-self:start;max-width:150px}
.clrow .bd .badge{line-height:14px;padding:0 4px;font-size:9px}
.ev .clall{grid-column:1/-1;margin:0;border:0;border-top:1px dashed var(--line-3);border-radius:0;padding:0 10px;line-height:26px;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);background:var(--bg-2);cursor:pointer}
.ev .clall:hover{color:var(--fg);background:var(--bg-3)}
/* series cards (2026-10-07): one source's daily report rolled up across days ("daily report, N days"); opened, a heading per day ("Tue 06.10, 3
   reports", with the day's "also" chips), then that day's rows */
.ev .dly{flex:none;padding:0 4px;border:1px dashed var(--line-3);border-radius:2px;color:var(--fg-2);font-size:9px;letter-spacing:.08em;text-transform:uppercase;line-height:14px;cursor:help}
.ev .clist.ser .sday{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;padding:5px 8px 4px 10px;border-top:1px dashed var(--line-3);font-family:var(--mono);font-size:10px;letter-spacing:.04em;line-height:16px;color:var(--fg-3);background:var(--bg-2)}
.ev .clist.ser .sday:first-child{border-top:0}
.ev .clist.ser .sdh{color:var(--fg);text-transform:uppercase;letter-spacing:.08em}
.ev .clist.ser .sdn{margin-left:-6px}
.ev .clist.ser .sday .lx{display:inline-flex;gap:6px;margin-left:auto}
.ev .clist.ser .sday+.clrow{border-top:0}
.ic.also{flex:none}
.ic.also.plain{cursor:default;border-style:dashed}
.ic.also.plain:hover{color:var(--fg-2);border-color:var(--line-3);background:var(--bg-2)}
#d-id a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--fg-3)}
#d-id a:hover{color:var(--fg)}
#drawer .sn h4{margin:10px 0 4px;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
#drawer .snr{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;width:100%;margin:0 0 3px;padding:5px 8px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--bg-2);text-align:left;font-family:var(--mono);font-size:10px;color:var(--fg-2);cursor:pointer}
#drawer .snr:hover{background:var(--bg-3);border-color:var(--line-3)}
#drawer .snr.me{border-color:var(--blue)}
#drawer .snr .badge{line-height:14px;padding:0 4px;font-size:9px}
#drawer .snr .sti{flex:1 1 100%;font-family:var(--sans);font-size:12px;line-height:1.35;color:var(--fg)}
@media (max-width:767px){
  /* a card or row scrolled to (also chip, #item=) clears the sticky header and the tab bar */
  .ev,.clrow{scroll-margin-top:120px;scroll-margin-bottom:56px}
  .clrow{min-height:44px}
  .ev .clmore{line-height:22px;padding:0 8px}
  .ev .clsrc{flex-basis:100%;white-space:normal}
  .clrow .bd{max-width:110px}
  /* neutral wording (2026-10-07): the longer card badge (NOT USED TO CONFIRM, STATE MEDIA) wraps to two short lines, so a phone card's title keeps its width */
  .ev .badge.prop{white-space:normal;max-width:84px;text-align:center;line-height:1.2;padding-top:1px;padding-bottom:1px}
}
/* neutral wording (2026-10-07): the item drawer's ownership line under the badges: the documented owner of state media and the page that documents it */
#drawer p.own{margin:0;padding:8px 16px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--fg-2);white-space:normal}
#drawer p.own a.ext{color:var(--blue);font-family:var(--mono);font-size:11px;margin-left:4px}
/* the badge of a source not used to confirm may wrap in a member row's narrow badge column */
.clrow .bd .badge.prop{white-space:normal;text-align:right}


/* track W (2026-10-07): the official threat warnings and defence-site activity lists in the drawer (tlDrawer in app.js) */
.tleps{padding-left:0;padding-right:0;padding-bottom:0}
.tleps h3{padding:0 16px}
.tle{padding:8px 16px 8px 18px;border-top:1px solid var(--line);display:grid;gap:3px;min-width:0;box-shadow:inset 3px 0 0 var(--line-3)}
.tle.fact{box-shadow:inset 3px 0 0 var(--amber)}
.tle.old{opacity:.72}
.tle .tlh{display:flex;align-items:center;gap:8px;min-width:0}
.tle .cc{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg-2);border:1px solid var(--line-3);border-radius:3px;padding:0 4px;line-height:15px}
.tle .ti{flex:1 1 auto;min-width:0;font-size:12px;font-weight:500;color:var(--fg);line-height:1.35;overflow-wrap:anywhere}
.tle .tlm{font-family:var(--mono);font-size:10px;color:var(--fg-2);line-height:1.5;overflow-wrap:anywhere}
.tle .tlm .badge{margin-left:6px}
.tle .tlm .chip{font-size:10px;line-height:16px;padding:0 5px}
.tle .tltags{display:flex;flex-wrap:wrap;gap:4px}
.tle .tltags .tag{font-family:var(--mono);font-size:10px;padding:0 5px;border-radius:2px;background:var(--bg-3);color:var(--fg-2);line-height:16px}
.tle .tlr{padding:4px 0 2px;border-top:1px dashed var(--line);min-width:0}
.tle .tlt{font-size:12px;color:var(--fg);line-height:1.4;overflow-wrap:anywhere}
.tle .tlt a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:2px}
.tle .tlt a:hover{color:var(--blue);text-decoration-color:var(--blue)}
.tle .tlo{font-size:11px;color:var(--fg-3);line-height:1.4;overflow-wrap:anywhere}


/* ---- track A, 2026-10-07: the airspace chart by country and the new-today list (docs/api-contract.md "Airspace by country"). Country colours
   validated for colour-blind readers as drawn: opaque fills on the chart surface #0d1117 (dataviz validate_palette.py, dark: worst adjacent CVD
   delta E 15.0, normal vision 15.8, lightness band, chroma floor and 3:1 passed; with the Finland and Lithuania hatch averaged in, 10.4 and 16.2,
   all passed). Never translucent: a layer at half opacity composites to colours that fail the band, the chroma floor and 3:1 (review fix). None
   of the state colours, and never alone: Finland and Lithuania hatched, labels at the layers' right end, the legend. Reconstructed runs keep
   the same fills and draw their edges dotted, as the total line is dotted there ---- */
.hwrap,.nd{--fir-ee:#1f9e93;--fir-fi:#3987e5;--fir-lv:#d55181;--fir-lt:#9085e9}
.hchart .fs{stroke:var(--bg-1);stroke-width:1;stroke-linejoin:round}
.hchart .fs.ee{fill:var(--fir-ee)}.hchart .fs.lv{fill:var(--fir-lv)}
.hchart .fs.fi{fill:url(#fh-fi)}.hchart .fs.lt{fill:url(#fh-lt)}
.hchart .fhb.fi{fill:var(--fir-fi)}.hchart .fhb.lt{fill:var(--fir-lt)}
.hchart .fhl{stroke:rgba(10,13,18,.6);stroke-width:1.4}
.hchart .fs.rc{stroke:var(--fg-2);stroke-dasharray:1.5 3.5}
.hchart .fsl{fill:var(--fg);font-size:10px;letter-spacing:.04em;paint-order:stroke;stroke:var(--bg-1);stroke-width:3px;stroke-linejoin:round}
.hlegend .sw.cc{width:10px;height:10px;border:0;border-radius:2px}
.hlegend .sw.cc.ee{background:var(--fir-ee)}.hlegend .sw.cc.lv{background:var(--fir-lv)}
.hlegend .sw.cc.fi{background:repeating-linear-gradient(45deg,var(--fir-fi) 0 2.2px,rgba(10,13,18,.75) 2.2px 3.4px)}
.hlegend .sw.cc.lt{background:repeating-linear-gradient(135deg,var(--fir-lt) 0 2.2px,rgba(10,13,18,.75) 2.2px 3.4px)}
.hsplit{display:inline-flex;gap:2px;margin-right:6px}
.hsplit button{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:18px;padding:0 6px;color:var(--fg-2)}
.hsplit button.cur{color:var(--fg);background:var(--bg-4);border-color:var(--line-3)}
.hair{margin-top:8px;font-size:11px;line-height:1.4;color:var(--fg-2)}
.hair[hidden]{display:none}
.hair .hchg{margin:0 0 6px;color:var(--fg)}
.hair .hnt{margin:0}
.hair .hnt .lbl{display:block;margin-bottom:2px}
.hair .hnt ul{margin:0 0 6px;padding-left:16px}
.hair .hnt li{margin:0 0 2px}
.hair .nd0{margin:0 0 6px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
/* new today, above the notice list */
.ntd{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-bottom:6px}
.ntd:empty{display:none}
.ntd .nth{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 8px 4px}
.nd .ntd .nth{padding:8px 16px 4px}
.ntd .nth .lbl{color:var(--fg-2)}
.ntd .nth .n{margin-left:8px;font-size:11px;letter-spacing:0;color:var(--fg)}
.ntd .nth .ti{font-size:10px;color:var(--fg-3);text-align:right}
.ntd .ntfh{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);border-radius:0;padding:5px 8px 5px 22px;line-height:1.35;font-family:var(--sans);font-size:11px;white-space:normal;color:var(--fg);background:var(--bg-3);position:relative}
.nd .ntd .ntfh{padding-left:30px;padding-right:16px}
.ntd .ntfh::before{content:"";position:absolute;left:10px;top:10px;width:5px;height:5px;border:solid var(--fg-3);border-width:0 1.4px 1.4px 0;transform:rotate(-45deg)}
.nd .ntd .ntfh::before{left:16px}
.ntd .ntfh.open::before{transform:rotate(45deg);top:8px}
.ntd .ntfh:hover{background:var(--bg-4)}
.ntd .an.nt.ended{opacity:.6}
.ntd .an.nt.later .va{color:var(--fg-2)}
.ntd .an.nt .bd{color:var(--fg-3)}
.ntd .none{padding:6px 8px;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.nd .ntd .none{padding:6px 16px}
.ntd .ntq{margin:4px 0 0;padding:0 8px;font-size:10px;color:var(--fg-3)}
.nd .ntd .ntq{padding:0 16px}
/* source record (2026-10-07, contract "Source record"): the drawer's "Who reported first", the quiet note under a lane card, the record
   column of the sources drawer (wraps under its row on a phone) and the grey "record suggests" chip. Facts in plain grey, no colour */
.dsec.rec p.snip{line-height:1.6}
.dsec.rec .rsub{margin:8px 0 2px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.dsec.rec ul.rl{color:var(--fg-2)}
.dsec.rec .bas{margin-left:2px}
/* the note wraps (it runs to about 110 characters with a long source name); its title carries it whole, and the item popup shows it too */
.ev .recn{grid-column:2/-1;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:11px;line-height:1.35;color:var(--fg-3)}
.tbl.src{grid-template-columns:minmax(0,1fr) 28px 28px minmax(0,1.25fr) 64px 44px}
.tbl.src .rc{font-size:11px;line-height:1.4;color:var(--fg-2);min-width:0;white-space:normal}
.tbl.src .rc.na{color:var(--fg-3)}
.tbl.src .hd.rc{color:var(--fg-3);cursor:help}
.chip.sug{border-style:dashed;color:var(--fg-3);text-transform:none;letter-spacing:0;line-height:16px;margin-left:2px}
@media (max-width:767px){
  .tbl.src{grid-template-columns:minmax(0,1fr) 28px 28px 64px 44px;grid-auto-flow:row dense}
  .tbl.src .rc{grid-column:1/-1;margin:-2px 0 4px}
  .tbl.src .rc.na,.tbl.src .hd.rc{display:none}
}
/* ---- board clarity (2026-11-08, track Q4): who said what under a story, the "earlier" fold of quiet stories, reason links in the state
   drawer, the folded stage table of "How the board runs", alert groups (in force, earlier) ---- */
.srow .r3 .src.who{display:flex;align-items:center;gap:0;min-width:0;overflow:hidden;white-space:nowrap}
.srow .r3 .who .wh{display:inline-flex;align-items:center;gap:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-2)}
.srow .r3 .who .wh:first-child{flex:0 1 auto}
.srow .r3 .who .wk{color:var(--fg-3);flex:none}
.srow .r3 .who .wsep{color:var(--fg-3);flex:none;padding:0 2px}
.srow .r3 .who .badge{line-height:11px;padding:0 3px;font-size:8px;letter-spacing:.04em;flex:none}
.sfold{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px 6px 11px;border:0;border-top:1px solid var(--line);background:var(--bg-2);color:var(--fg-2);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:left}
.sfold:hover{background:var(--bg-3);color:var(--fg)}
.sfold .n{color:var(--fg);letter-spacing:0;font-size:11px}
.sfold .hint{margin-left:auto;text-transform:none;letter-spacing:0;color:var(--fg-3)}
.sfold::before{content:"";width:5px;height:5px;border:solid var(--fg-3);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin:0 3px 2px 0;flex:none}
.sfold[aria-expanded=true]::before{transform:rotate(-135deg);margin:2px 3px 0 0}
.sold .srow:first-child{border-top:1px solid var(--line)}
.dsec ul.rl button.rlk{background:none;border:0;padding:0;margin:0;color:var(--fg);font:inherit;line-height:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.dsec ul.rl button.rlk:hover{text-decoration-color:var(--fg-2)}
details.llmd{margin-top:6px}
details.llmd summary{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);cursor:pointer}
details.llmd .tbl{margin-top:6px}
.algrp{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);padding:10px 0 4px;border-bottom:1px solid var(--line)}
/* follow-up after Q2 and Q3 (2026-11-08): the filling bucket beside the tile value, an unread tile's "no data since" tag, the alert row's in-force chip, its no-longer-in-force line and its developments */
.tile .v .lv{flex:none;font-size:9px;font-weight:400;color:var(--fg-3);border-left:1px solid var(--line-3);padding-left:4px;margin-left:2px}
.tile.f1 .v .lv{display:none}
.tile .v .gy.ur{color:var(--fg-2)}
.chip.inf{border-color:rgba(201,146,42,.55);color:var(--amber)}
.alrow.rs .badge.sev{opacity:.6}
.alrs{margin:4px 0 0;font-size:11px;line-height:1.4;color:var(--fg-3)}
.alrs b{font-weight:500;color:var(--fg-2)}
.aldv{margin:4px 0 0;padding:0 0 0 10px;font-size:11px;line-height:1.45;color:var(--fg-2)}
.aldv li{margin:1px 0}
.aldv li .t{font-family:var(--mono);font-size:10px;color:var(--fg-3);margin-right:6px}
.aldv li.more{list-style:none;margin-left:-10px;color:var(--fg-3);font-family:var(--mono);font-size:10px}

/* ---- product face (2026-11-08, track P3; docs/api-contract.md "The board (P3)") ---- */
/* the status strip: the level button (word and ladder), the sentence, the time; the late chips always compact; "as of" in amber */
.state .stbtn{border:0;background:none;padding:0;cursor:pointer;flex:none;align-items:flex-start;text-align:left;border-radius:0}
.state .stbtn:hover .word{text-decoration:underline;text-decoration-color:var(--st-line);text-underline-offset:4px}
.state .grp.reasons .sent{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:none;border:0;padding:0;margin:0;text-align:left;font:12px/1.35 var(--sans);color:var(--fg);cursor:pointer;border-radius:0}
.state .grp.reasons .sent:hover{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.state .grp.reasons .sent.ok{color:var(--fg-2)}
.state .stime{flex:none;color:var(--fg-2)}
.state.asof .stime{color:var(--amber)}
.state.asof .word{opacity:.8}
.state .grp.fresh .lt{display:none}
.state .grp.fresh .ln{display:inline-block}
.state .grp.fresh .chip.ok{border-color:transparent;padding:0 2px}
/* the screens on a desktop: Reports = stories | map | Reports and rumours (no continuity row), Signals = indicators | map, with the continuity row,
   News = the three lanes side by side. The body attribute set by the nav or the phone tabs chooses; the map stays one element and resizes */
.app{grid-template-rows:48px minmax(0,1fr)}
body[data-tab=signals] .app{grid-template-rows:48px minmax(0,1fr) 56px}
@media (min-width:768px){
  .cont{display:none}
  body[data-tab=signals] .cont{display:grid}
  .col-l{grid-template-rows:minmax(0,1fr)}
  #p-ind{display:none}
  body[data-tab=signals] #p-ind{display:flex}
  body[data-tab=signals] #p-sit{display:none}
  body[data-tab=signals] .col-l{grid-column:span 5}
  body[data-tab=signals] .col-m{grid-column:span 7}
  body[data-tab=signals] .col-r{display:none}
  .col-r{grid-template-rows:minmax(0,1fr)}
  .lane{display:none}
  body[data-tab=news] .lane{display:flex}
  body[data-tab=news] #p-feed,body[data-tab=news] .col-l,body[data-tab=news] .col-m{display:none}
  body[data-tab=news] .col-r{grid-column:span 12;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
  /* a wider Signals panel holds three tiles a row */
  body[data-tab=signals] .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-tab=signals] .tile.idx.wide{grid-column:span 1}
}
.ph .phb{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;line-height:18px;padding:0 6px;color:var(--fg-2)}
/* Reports and rumours: the panel's two tabs, the places chips, one card per report */
.feed .ph{gap:6px}
.feed .ph h2{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ftabs{display:flex;gap:2px;margin-left:auto;flex:none}
.ftabs button{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;line-height:18px;padding:0 6px;color:var(--fg-3);border-color:transparent}
.ftabs button.cur{color:var(--fg);background:var(--bg-4);border-color:var(--line-3)}
.places{display:flex;flex-wrap:wrap;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);flex:none}
.places[hidden]{display:none}
.pch{font-family:var(--mono);font-size:10px;letter-spacing:.04em;line-height:18px;padding:0 7px;color:var(--fg-2);border-color:var(--line-2);border-radius:9px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pch.on{color:var(--fg);background:var(--bg-4);border-color:var(--fg-3)}
.pch.add,.pch.clr{color:var(--fg-3);border-style:dashed}
.padd{display:flex;flex-wrap:wrap;gap:4px;width:100%;align-items:center;margin-top:2px}
.padd input,.padd select{font:11px var(--mono);color:var(--fg);background:var(--bg-2);border:1px solid var(--line-3);border-radius:var(--r);padding:0 6px;line-height:20px;height:22px;min-width:0}
.padd input{flex:1 1 120px}
.padd .phint{font-family:var(--mono);font-size:10px;color:var(--fg-3);flex:1 1 100%}
.padd .psave{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;line-height:20px}
.feed .pb{display:flex;flex-direction:column}
.feed .pb[hidden]{display:none}
.feed .none,.fnote{padding:8px;font-family:var(--mono);font-size:10px;color:var(--fg-3);line-height:1.4}
.fnote{border-bottom:1px solid var(--line);flex:none}
.fc{display:grid;gap:3px;padding:7px 8px 8px;border-top:1px solid var(--line);cursor:pointer;min-width:0;box-shadow:inset 2px 0 0 var(--line-3)}
.fc:first-child,.fnote+.fc,.hgrp+.fc{border-top:0}
.fc:hover{background:var(--bg-2)}
.fc .fh{display:flex;align-items:center;gap:6px;min-width:0;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.fc .fw{text-transform:uppercase;letter-spacing:.06em;color:var(--fg-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc .fw .fpl{text-transform:none;letter-spacing:0;color:var(--fg)}
.fc .fsv{flex:none;font-size:9px;letter-spacing:.06em;color:var(--fg-3);border:1px solid var(--line-3);border-radius:2px;padding:0 3px;line-height:12px}
.fc .fsv.sv4,.fc .fsv.sv5{color:var(--red);border-color:rgba(217,72,78,.5)}
.fc .fsv.sv3{color:var(--amber);border-color:rgba(201,146,42,.5)}
.fc .t{margin-left:auto;flex:none;color:var(--fg-2)}
.fc .ti{font-size:12px;color:var(--fg);line-height:1.3;min-width:0}
.fc .fs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.stw{font-family:var(--mono);font-size:10px;letter-spacing:.04em}
/* the state as a coloured word: sand for a report, orange corroborated, red confirmed at severity 3 or more (plain below), grey denied, debunked or cleared */
.stw.rep,.fc.rep{--sc:#d4b483}
.stw.cor,.fc.cor{--sc:#e0892a}
.stw.con,.fc.con{--sc:#e05a52}
.stw.conl,.fc.conl{--sc:#d3d8e0}
.stw.off,.fc.off{--sc:#6b7280}
.stw{color:var(--sc)}
.fc{box-shadow:inset 2px 0 0 var(--sc,var(--line-3))}
.fc.off .ti{color:var(--fg-2)}
.fc .who{font-family:var(--mono);font-size:10px;color:var(--fg-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc .who .wk{color:var(--fg-3)}
.fc .who .wh{color:var(--fg-2)}
.fc .who .wt{color:var(--fg-3)}
.fc .who .wsep{color:var(--line-3);padding:0 2px}
.fc .fset,.fc .frec{font-size:11px;line-height:1.35;color:var(--fg-3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc .fset{font-style:italic}
.fc .frec{color:var(--fg-2)}
.fnew,.fmv{flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;line-height:14px;padding:0 5px;border-radius:7px}
.fnew{color:var(--fg);background:var(--bg-4)}
.fmv{color:#0a0d12;background:var(--sc,var(--fg-2))}
.fmv.conl{background:var(--fg-2)}
.fc.pulse{animation:fpulse 1.8s ease-out 1}
@keyframes fpulse{0%{background:rgba(212,180,131,.22)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.fc.pulse{animation:none}}
/* Did it hold up?: outcome groups */
.hgrp{display:flex;align-items:center;gap:8px;padding:8px 8px 4px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);flex:none}
.hgrp .hgn{color:var(--fg);letter-spacing:0;font-size:11px}
.hgrp.confirmed .hgw{color:#e05a52}.hgrp.corroborated .hgw{color:#e0892a}.hgrp.denied .hgw,.hgrp.debunked .hgw,.hgrp.cleared .hgw{color:var(--fg-3)}.hgrp.open .hgw{color:#d4b483}
/* the basis word beside a source (cards, rows, lists, drawers): muted; state media is a button that opens the owner fact */
.bas{font-family:var(--mono);font-size:10px;color:var(--fg-3);white-space:nowrap;flex:none;letter-spacing:0;text-transform:none}
.bas.in{display:inline}
button.bas{background:none;border:0;border-bottom:1px dotted var(--fg-3);border-radius:0;padding:0;margin:0;line-height:inherit;cursor:pointer;font-family:var(--mono);font-size:10px;color:var(--fg-3)}
button.bas:hover{color:var(--fg-2);border-bottom-color:var(--fg-2)}
.bfact{font-family:var(--sans);font-size:11px;color:var(--fg-2);white-space:normal;margin-left:4px}
.bfact a.ext{color:var(--blue);font-family:var(--mono);font-size:10px}
.ev .m .bas,.clrow .m .bas,.tl .m .bas{flex:none}
.badge.bsb{text-transform:none;letter-spacing:0;color:var(--fg-2)}
/* the Credits and Get alerts drawers */
.crl{margin:0;padding-left:16px;font-size:12px;color:var(--fg-2);line-height:1.55}
.crl li{margin:2px 0}
.crl a{color:var(--fg)}
.crl a:hover{color:var(--blue)}
.crl .lic{font-family:var(--mono);font-size:10px;color:var(--fg-3);white-space:nowrap;margin-left:4px}
.crl .cn{color:var(--fg-3);font-style:italic}
.chl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12px}
.chl li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:4px 0;border-top:1px solid var(--line)}
.chl li:first-child{border-top:0}
/* a planned channel: the word and the interest button in one cell (2026-11-08 evening, "Get alerts: interest") */
.chl .chx{display:flex;gap:8px;align-items:baseline;justify-content:flex-end;white-space:nowrap}
.chl .want{font:inherit;font-size:11px;letter-spacing:.02em;padding:2px 8px;border:1px solid var(--line-3);border-radius:3px;background:transparent;color:var(--fg);cursor:pointer}
.chl .want:hover{border-color:var(--fg-2)}
.chl .want.done{color:var(--fg-3);border-style:dashed;cursor:default}
.chl .chn{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.chl .chc{color:var(--fg);min-width:0}
.chl a.ext{font-family:var(--mono);font-size:11px;color:var(--blue);white-space:nowrap}
.chl .na{font-family:var(--mono);font-size:10px;color:var(--fg-3)}
.chl.atom li{grid-template-columns:110px minmax(0,1fr)}
@media (max-width:1439px) and (min-width:768px){.nav{gap:9px;letter-spacing:.02em}}
@media (max-width:767px){
  .chl li,.chl.atom li{grid-template-columns:minmax(0,1fr);gap:2px}
  .fc .who,.fc .fset,.fc .frec{white-space:normal}
}