/*
 * The map-first view (public/ops.js; user, 19 Oct; redrawn the same night: "professional, militarised but
 * news-minded, not gimmicky, totally different from the site's design"). Every rule here is under
 * html[data-view="ops"], so the classic site never sees one of them.
 *
 * The look follows operations rooms and newsroom desks: neutral greys, colour kept for meaning (who acted,
 * an alert, the reader's own tools), flat panels with hairline borders, no shadows or glow; IBM Plex Sans
 * to read, IBM Plex Mono for figures, times and places, Barlow Condensed for the labels. Night is a dark
 * operations room, Day a newsroom page; the reader's device picks unless they do.
 */
html[data-view="ops"] {
  --ops-lw: calc(var(--ops-rw) + 120px);
  --ops-rw: clamp(320px, 24vw, 400px);
  --ops-nav-w: 56px;
  --ops-strip-h: 26px;
  --ops-bar-h: 46px;
  --ops-r: 3px;
  --ops-ui: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ops-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ops-cond: "Barlow Condensed", "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  /* Night, an operations room (the default tokens; Day redefines them below). */
  --o-bg: #0b0e11; --o-panel: #11151a; --o-raised: #171c22; --o-hover: #1d232a; --o-line: #242a31; --o-line-2: #323a43;
  --o-text: #d7dce1; --o-dim: #8a939d; --o-faint: #5f6873; --o-strong: #f3f5f7;
  --o-sel: #e0a43c; --o-sel-ink: #17110a; --o-live: #ff5a4f; --o-ok: #46b37a; --o-tool: #e0a43c; --o-tool-2: #6fc3c9;
  --o-map-line: #48525d; --o-glass: rgba(14, 18, 22, .93);
}
html[data-view="ops"][data-theme="broadsheet-day"] {
  --o-bg: #eceee9; --o-panel: #fafaf8; --o-raised: #ffffff; --o-hover: #f0f1ed; --o-line: #d9dcd6; --o-line-2: #c3c8c1;
  --o-text: #1b1f24; --o-dim: #5c6570; --o-faint: #858d96; --o-strong: #0b0e11;
  --o-sel: #9a6100; --o-sel-ink: #ffffff; --o-live: #c62828; --o-ok: #2e7d32; --o-tool: #b26a00; --o-tool-2: #00838f;
  --o-map-line: #8f979e; --o-glass: rgba(250, 250, 248, .95);
}
/* The page's own parts (cards, the brief, the numbers) are drawn with the site's theme tokens: the view sets them. */
html[data-view="ops"][data-theme] {
  --bg: var(--o-bg); --panel: var(--o-panel); --line: var(--o-line); --text: var(--o-text); --muted: var(--o-dim);
  --accent: var(--o-sel); --accent-ui: var(--o-sel); --on-accent: var(--o-sel-ink);
  --t-bg: var(--o-bg); --t-surface-1: var(--o-panel); --t-surface-2: var(--o-raised); --t-surface-3: var(--o-hover); --t-surface-4: var(--o-line-2);
  --t-line-soft: var(--o-line); --t-line: var(--o-line); --t-line-strong: var(--o-line-2);
  --t-strong: var(--o-strong); --t-text: var(--o-text); --t-text-2: color-mix(in srgb, var(--o-text) 82%, var(--o-dim)); --t-muted: var(--o-dim); --t-faint: var(--o-faint); --t-link: var(--o-text); --t-on-light: var(--o-bg);
  --t-glass: var(--o-glass); --shadow-pop: 0 6px 20px rgba(0, 0, 0, .28);
  --ev-edge: var(--o-bg); --halo: var(--o-bg); --halo-ink: var(--o-text);
  --f-body: var(--ops-ui); --f-head: var(--ops-ui); --f-card: var(--ops-ui); --f-prose: var(--ops-ui);
  --r-card: var(--ops-r); --r-btn: var(--ops-r); --r-media: var(--ops-r);
}
html[data-view="ops"][data-theme="broadsheet-night"] { color-scheme: dark }
html[data-view="ops"][data-theme="broadsheet-day"] { color-scheme: light; --shadow-pop: 0 6px 18px rgba(20, 25, 30, .12) }
html[data-view="ops"] body { background: var(--o-bg); color: var(--o-text) }
html[data-view="ops"] body :not(svg, svg *, code, kbd, pre) { font-family: var(--ops-ui) !important }
html[data-view="ops"] :is(.ops-strip b, .ops-sf, .ops-log-l time, .ops-card h3, .ops-card dd, .ops-card dd *, .ops-coords, .ops-coords *, .ops-act-sel, .ops-mil b, .ops-mil em, .ops-rlabel span, .ops-ringlabel span, .ops-glab span, .ops-lt .clk, .ops-lb time, .ops-kpi dd, .ops-bars b, .ops-th-ev time, .ye-clock, .ye-clock *, kbd, .leaflet-control-scale-line, .ops-amx .tk) { font-family: var(--ops-mono) !important }
html[data-view="ops"] :is(.ops-ptitle, .ops-mlab, .ops-tabs button, .ops-seg button, .ops-nav button span, .ops-act-h b, .ops-mh b, .ops-mil p, .ops-ck, .ops-card dt, .ops-kpi dt, .ops-tag, .ops-live, .ops-strip small, .ops-day, .ops-ptabs button, .ops-left .ops-pane h2, .ops-dock .legend :is(.leg-sec, .leg-sub), .ops-th-go, .ops-classic) { font-family: var(--ops-cond) !important }
html[data-view="ops"] .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
/* Until the view has laid the page out, the page waits, saying so (20 Oct: a slow first load showed a blank page). */
html[data-view="ops"] #home-root:not(.ops-on) { visibility: hidden }
html[data-view="ops"] body:has(#home-root:not(.ops-on))::after {
  content: "Loading the map…"; position: fixed; inset: 0; display: grid; place-items: center; z-index: 50;
  background: var(--o-bg); color: var(--o-dim); font: 600 13px/1 var(--ops-cond); letter-spacing: .14em; text-transform: uppercase;
}
/* No stories on the All page in this view (user, 19 Oct). */
html[data-view="ops"] .ops-on > :is(#g-body, #chrome, #toolbar) { display: none !important }
html[data-view="ops"] body:has(.ops-on) .sec-nav { display: none !important }
html[data-view="ops"] .ops-on > .ops-stage > .stage { width: 100% }
html[data-view="ops"] .ops-on .rail-splitter { display: none !important }

/* ---------- The frame (wide screens) ---------- */
@media (min-width: 761px) {
  html[data-view="ops"] body:has(.ops-on) { overflow: hidden; height: 100dvh }
  html[data-view="ops"] .ops-on {
    display: grid;
    grid-template-columns: var(--ops-nav-w) var(--ops-lw) minmax(0, 1fr) var(--ops-rw);
    grid-template-rows: var(--ops-strip-h) var(--ops-bar-h) minmax(0, 1fr);
    height: 100dvh; background: var(--o-bg); color: var(--o-text);
  }
  html[data-view="ops"] .ops-on.ops-noleft { grid-template-columns: var(--ops-nav-w) 0 minmax(0, 1fr) var(--ops-rw) }
  html[data-view="ops"] .ops-on.ops-noright { grid-template-columns: var(--ops-nav-w) var(--ops-lw) minmax(0, 1fr) 0 }
  html[data-view="ops"] .ops-on.ops-noleft.ops-noright { grid-template-columns: var(--ops-nav-w) 0 minmax(0, 1fr) 0 }
  html[data-view="ops"] .ops-on.ops-noleft > .ops-left, html[data-view="ops"] .ops-on.ops-noright > .ops-right { visibility: hidden; overflow: hidden; border: 0 }
  html[data-view="ops"] .ops-on > .ops-strip { grid-column: 1 / -1; grid-row: 1 }
  html[data-view="ops"] .ops-on > .ops-bar { grid-column: 1 / -1; grid-row: 2 }
  html[data-view="ops"] .ops-on > .ops-nav { grid-column: 1; grid-row: 3 }
  html[data-view="ops"] .ops-on > .ops-left { grid-column: 2; grid-row: 3 }
  html[data-view="ops"] .ops-on > .ops-stage { grid-column: 3; grid-row: 3; min-height: 0; min-width: 0; display: flex }
  html[data-view="ops"] .ops-on > .ops-right { grid-column: 4; grid-row: 3 }
  html[data-view="ops"] .ops-on > .ops-ptabs { display: none }
  html[data-view="ops"] .ops-on main.stage { flex: 1; display: block !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; max-width: none !important }
  html[data-view="ops"] .ops-on .map-wrap { position: relative; height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important }
  html[data-view="ops"] .ops-on :is(#map, #h-map) { position: absolute; inset: 0 0 var(--dock-h, 0) 0; height: auto !important; border-radius: 0 !important }
  /* Folded, the strip keeps its time row with the arrow, so it opens again from where it closed (user, 21 Oct). */
  html[data-view="ops"] .ops-on.ops-nodock .ops-dock { height: auto !important; max-height: none }
  html[data-view="ops"] .ops-on.ops-nodock .ops-dock > .ops-drow:not(.ops-dtop) { display: none }
  html[data-view="ops"] .ops-on.ops-nodock .ops-fold-d svg { transform: rotate(180deg) }
  html[data-view="ops"] .ops-on .ops-fold-d { border-color: var(--o-line-2); color: var(--o-text) }
  html[data-view="ops"] .ops-on.ops-nodock .ops-fold-d { border-color: var(--o-sel); color: var(--o-sel); background: color-mix(in srgb, var(--o-sel) 14%, transparent) }
}
@media (min-width: 761px) and (max-width: 1180px) {
  html[data-view="ops"] { --ops-lw: 440px; --ops-rw: 320px; --ops-nav-w: 50px }
}
/* Handles to widen the side panels and raise the strip under the map (21 Oct). */
html[data-view="ops"] .ops-grip { display: none }
@media (min-width: 761px) {
  html[data-view="ops"] .ops-on > :is(.ops-left, .ops-right) { position: relative }
  html[data-view="ops"] .ops-grip { display: block; position: absolute; z-index: 950; touch-action: none }
  html[data-view="ops"] .ops-grip::after { content: ""; position: absolute; background: var(--o-sel); opacity: 0; transition: opacity .12s }
  html[data-view="ops"] .ops-grip:hover::after, html[data-view="ops"].ops-sizing .ops-grip::after { opacity: .7 }
  html[data-view="ops"] :is(.ops-grip-l, .ops-grip-r) { top: 0; bottom: 0; width: 8px; cursor: col-resize }
  html[data-view="ops"] .ops-grip-l { right: -4px }
  html[data-view="ops"] .ops-grip-r { left: -4px }
  html[data-view="ops"] :is(.ops-grip-l, .ops-grip-r)::after { top: 0; bottom: 0; left: 3px; width: 2px }
  html[data-view="ops"] .ops-grip-d { left: 0; right: 0; bottom: calc(var(--dock-h, 0px) - 4px); height: 7px; cursor: row-resize }
  html[data-view="ops"] .ops-nodock .ops-grip-d { display: none }
  html[data-view="ops"] .ops-grip-d::after { left: 0; right: 0; top: 2px; height: 2px }
  html[data-view="ops"] .ops-dock.ops-dock-sized { max-height: none; overflow-y: auto }
  html[data-view="ops"].ops-sizing, html[data-view="ops"].ops-sizing * { user-select: none !important }
  html[data-view="ops"].ops-sizing iframe { pointer-events: none }
}

/* ---------- The status strip ---------- */
html[data-view="ops"] .ops-strip {
  display: flex; align-items: center; gap: 0; min-width: 0; overflow: hidden; white-space: nowrap;
  padding: 0 12px 0 0; background: var(--o-bg); border-bottom: 1px solid var(--o-line); font-size: 11.5px; color: var(--o-dim);
}
html[data-view="ops"] .ops-live { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 14px 0 16px; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--o-strong); border-right: 1px solid var(--o-line) }
html[data-view="ops"] .ops-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--o-live); animation: ops-blink 2.4s ease-in-out infinite }
@keyframes ops-blink { 50% { opacity: .35 } }
html[data-view="ops"] .ops-sf { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 14px; border-right: 1px solid var(--o-line); line-height: 25px }
html[data-view="ops"] .ops-sf small { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--o-faint) }
html[data-view="ops"] .ops-sf b { font-size: 12px; font-weight: 500; color: var(--o-text); font-variant-numeric: tabular-nums; letter-spacing: .02em }
html[data-view="ops"] .ops-upd { min-width: 0; overflow: hidden; margin-left: auto; border-right: 0; border-left: 1px solid var(--o-line) }
html[data-view="ops"] .ops-upd .stamp { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; font: 500 11.5px var(--ops-mono); color: var(--o-dim) }
html[data-view="ops"] .ops-upd .stamp .ye-clock { display: none }
html[data-view="ops"] .ops-upd .stamp .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--o-ok); box-shadow: none; animation: none }
html[data-view="ops"] .ops-tag { margin-left: auto; padding: 1px 8px; border: 1px solid var(--o-line-2); border-radius: 2px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--o-dim) }

/* ---------- The bar: the name, the theatres, the view's buttons ---------- */
html[data-view="ops"] .ops-bar {
  display: flex; align-items: center; gap: 18px; min-width: 0;
  padding: 0 12px 0 0; background: var(--o-panel); border-bottom: 1px solid var(--o-line); position: relative; z-index: 1200;
}
html[data-view="ops"] .ops-bar .mast { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; border: 0; background: none; min-height: 0; height: 100%; flex: none; position: static }
html[data-view="ops"] .ops-bar .mast::before, html[data-view="ops"] .ops-bar .mast::after, html[data-view="ops"] .ops-bar .mast-end { display: none !important }
/* "Open-source intelligence", small and plain under the name (user, 22 Oct). */
html[data-view="ops"] .ops-bar .mast-line { display: block !important; position: static !important; margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font: 600 10px/1 var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--o-faint) !important; white-space: nowrap }
html[data-view="ops"] .ops-bar .mast-date { order: 0; position: static; transform: none; margin: 0; flex: none; width: var(--ops-nav-w); height: 100%; display: grid; place-items: center; border-right: 1px solid var(--o-line) }
html[data-view="ops"] .ops-bar .mast-menu { color: var(--o-text) }
html[data-view="ops"] .ops-bar .mast-mid { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: static; transform: none; margin: 0 0 0 16px; text-align: left }
html[data-view="ops"] .ops-bar .mast-name { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--o-strong) }
html[data-view="ops"] .ops-bar .mast-name::before { content: ""; width: 14px; height: 14px; flex: none; border: 2px solid var(--o-strong); transform: rotate(45deg) scale(.82); box-sizing: border-box; background: linear-gradient(var(--o-sel), var(--o-sel)) center / 4px 4px no-repeat }
html[data-view="ops"] .ops-bar .mast-name .mn { font: 700 15px var(--ops-cond) !important; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap }
html[data-view="ops"] .ops-bar header.top { display: flex; align-items: center; gap: 0; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; height: 100%; position: static }
html[data-view="ops"] .ops-bar header.top .brand { min-width: 0; height: 100% }
html[data-view="ops"] .ops-bar header.top h1 { margin: 0; height: 100%; display: flex; align-items: stretch; font-size: inherit }
html[data-view="ops"] .ops-bar .dt-label { display: none }
html[data-view="ops"] .ops-bar .dt-row { display: flex; align-items: stretch; gap: 0; height: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none }
html[data-view="ops"] .ops-bar header.top h1 { min-width: 0 }
/* The desks' tabs never run under the bar's buttons, at any width (user, 23 Oct): ops.js takes the other desks'
   names off when they do not fit, then the names of all. */
html[data-view="ops"] .ops-bar .dt-row.dt-tight .dt-btn:not([aria-current="page"]) .dt-name { display: none }
html[data-view="ops"] .ops-bar .dt-row.dt-tight .dt-btn:not([aria-current="page"]) { padding: 0 10px }
html[data-view="ops"] .ops-bar .dt-row.dt-tighter .dt-name { display: none }
html[data-view="ops"] .ops-bar .dt-row.dt-tighter .dt-btn { padding: 0 9px }
html[data-view="ops"] .ops-bar .dt-btn {
  height: 100%; padding: 0 16px; gap: 8px; border: 0; border-radius: 0; border-left: 1px solid var(--o-line); background: none; box-shadow: none; transform: none !important;
  color: var(--o-dim); font: 600 13px var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase; position: relative;
}
html[data-view="ops"] .ops-bar .dt-btn:last-child { border-right: 1px solid var(--o-line) }
html[data-view="ops"] .ops-bar .dt-btn::after { display: none }
html[data-view="ops"] .ops-bar .dt-btn .dt-name { font: inherit !important; font-size: inherit; letter-spacing: inherit }
html[data-view="ops"] .ops-bar .dt-btn .dt-flag { width: 16px; height: 16px; box-shadow: none; filter: saturate(.55); opacity: .85 }
html[data-view="ops"] .ops-bar .dt-btn .dt-globe { fill: none; stroke: currentColor; stroke-width: 1.6 }
html[data-view="ops"] .ops-bar .dt-btn:hover { color: var(--o-strong); background: var(--o-hover) }
html[data-view="ops"] .ops-bar .dt-btn[aria-current="page"] { color: var(--o-strong); background: var(--o-bg) }
html[data-view="ops"] .ops-bar .dt-btn[aria-current="page"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--o-sel) }
html[data-view="ops"] .ops-bar .dt-btn[aria-current="page"] .dt-flag { filter: none; opacity: 1 }
html[data-view="ops"] .ops-acts { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto }
html[data-view="ops"] .ops-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: none;
  color: var(--o-text); font: 600 12.5px var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
html[data-view="ops"] .ops-btn svg { width: 16px; height: 16px; flex: none }
html[data-view="ops"] .ops-btn.ops-ico { width: 32px; padding: 0; justify-content: center }
html[data-view="ops"] .ops-btn:hover { border-color: var(--o-dim); color: var(--o-strong); background: var(--o-hover) }
html[data-view="ops"] .ops-btn:is([aria-pressed="true"], [aria-expanded="true"]) { border-color: var(--o-sel); color: var(--o-strong); background: color-mix(in srgb, var(--o-sel) 14%, transparent) }
html[data-view="ops"] .ops-btn.on::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--o-ok) }
html[data-view="ops"] .ops-classic { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--o-faint); text-decoration: none; padding: 0 2px 0 8px; white-space: nowrap }
html[data-view="ops"] .ops-classic:hover { color: var(--o-text) }

/* ---------- The tool rail ---------- */
html[data-view="ops"] .ops-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; background: var(--o-panel); border-right: 1px solid var(--o-line); padding: 6px 0; min-height: 0 }
html[data-view="ops"] .ops-nav button {
  appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; border: 0; background: none; color: var(--o-dim); cursor: pointer;
}
html[data-view="ops"] .ops-nav button svg { width: 20px; height: 20px }
html[data-view="ops"] .ops-nav button span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1 }
html[data-view="ops"] .ops-nav button:hover { color: var(--o-strong); background: var(--o-hover) }
html[data-view="ops"] .ops-nav button:is([aria-pressed="true"], [aria-expanded="true"]) { color: var(--o-strong) }
html[data-view="ops"] .ops-nav button:is([aria-pressed="true"], [aria-expanded="true"])::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--o-sel) }
html[data-view="ops"] .ops-nav-sp { flex: 1 }

/* ---------- The panels, left and right ---------- */
html[data-view="ops"] :is(.ops-left, .ops-right) { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--o-panel); overflow: hidden }
html[data-view="ops"] .ops-left { border-right: 1px solid var(--o-line) }
html[data-view="ops"] .ops-right { border-left: 1px solid var(--o-line) }
html[data-view="ops"] .ops-phead { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--o-line); flex: none }
html[data-view="ops"] .ops-ptitle { flex: 1; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--o-strong) }
html[data-view="ops"] .ops-rtabs { padding-left: 8px }
html[data-view="ops"] .ops-tabs { display: flex; align-items: stretch; gap: 0; flex: 1; min-width: 0; height: 100%; overflow-x: auto; scrollbar-width: none }
html[data-view="ops"] .ops-tabs button {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0 10px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font-size: 13.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o-dim); white-space: nowrap;
}
html[data-view="ops"] .ops-tabs button small { font: 500 11px var(--ops-mono) !important; color: var(--o-faint); letter-spacing: 0; margin-left: 3px }
html[data-view="ops"] .ops-tabs button:hover { color: var(--o-text) }
html[data-view="ops"] .ops-tabs button[aria-selected="true"] { color: var(--o-strong); border-bottom-color: var(--o-sel) }
html[data-view="ops"] .ops-fold { appearance: none; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--ops-r); background: none; color: var(--o-faint); cursor: pointer }
html[data-view="ops"] .ops-fold svg { width: 15px; height: 15px }
html[data-view="ops"] .ops-fold:hover { color: var(--o-text); border-color: var(--o-line-2) }
html[data-view="ops"] .ops-panes { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--o-line-2) transparent }
html[data-view="ops"] .ops-pane { display: none !important; margin: 0 !important; padding: 14px 16px 22px !important; border: 0 !important; max-width: none !important; background: none !important; box-shadow: none !important }
html[data-view="ops"] .ops-pane.on { display: block !important }
html[data-view="ops"] .ops-left .ops-pane > h2:first-child { display: none }
html[data-view="ops"] .ops-left .ops-pane h2, html[data-view="ops"] .ops-left .ops-pane h3 { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--o-dim); margin: 18px 0 8px }
html[data-view="ops"] .ops-left footer { padding: 12px 16px 18px; border-top: 1px solid var(--o-line); font-size: 11px; color: var(--o-faint) }
html[data-view="ops"] .ops-left :is(.cas-grid, .num-grid, .tally-grid, .boxes) { grid-template-columns: 1fr !important }
html[data-view="ops"] .ops-left table { font-size: 12px }
html[data-view="ops"] .ops-left .cadence { font: 500 11px var(--ops-mono) !important; letter-spacing: 0 !important; color: var(--o-faint) !important; text-transform: none !important; margin: 0 0 12px !important }
html[data-view="ops"] .ops-on :is(.situation, .fronts-wrap) :is(p, li, .pts li) { font-size: 14px; line-height: 1.55 }
html[data-view="ops"] .ops-rpane { display: none; flex: 1; min-height: 0; flex-direction: column }
html[data-view="ops"] .ops-on[data-ops-rtab="rep"] .ops-rp-rep, html[data-view="ops"] .ops-on[data-ops-rtab="ev"] .ops-rp-ev { display: flex }
/* The desk's own reports column, as it is, inside the panel. */
html[data-view="ops"] .ops-rp-rep > .rail { flex: 1; min-height: 0; overflow: auto; position: relative; height: auto !important; max-height: none !important; width: auto !important; margin: 0 !important; padding: 12px 14px 18px !important; border: 0 !important; background: none !important; box-shadow: none !important; scrollbar-width: thin; scrollbar-color: var(--o-line-2) transparent }
html[data-view="ops"] .ops-rp-rep > .rail .rail-head h2 { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o-dim); font-family: var(--ops-cond) !important }
/* The same look as the side sub-menus (Arenas, Numbers, Timeline; user, 29 Oct): no box, small condensed capitals,
   the chosen one on the panel colour with the accent bar, here along its foot as the menu runs across. */
html[data-view="ops"] .ops-seg { display: flex; gap: 0; margin: 0 0 10px; border: 0; border-bottom: 1px solid var(--o-line); border-radius: 0; overflow: hidden }
html[data-view="ops"] .ops-seg button { appearance: none; position: relative; flex: 1; height: auto; padding: 10px 6px 9px; border: 0; background: none; color: var(--o-dim); font: 600 10.5px/1.2 var(--ops-cond); letter-spacing: .1em; text-transform: uppercase; cursor: pointer }
html[data-view="ops"] .ops-seg button:hover { background: var(--o-hover); color: var(--o-strong) }
html[data-view="ops"] .ops-seg button[aria-selected="true"] { background: var(--o-raised); color: var(--o-strong) }
html[data-view="ops"] .ops-seg button[aria-selected="true"]::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px; background: var(--o-sel) }
html[data-view="ops"] .ops-q {
  width: 100%; box-sizing: border-box; height: 32px; margin: 0 0 10px; padding: 0 10px;
  border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: var(--o-bg); color: var(--o-text); font: 13px var(--ops-ui);
}
html[data-view="ops"] .ops-q::placeholder { color: var(--o-faint) }
html[data-view="ops"] .ops-q:focus { outline: 1px solid var(--o-sel); outline-offset: 0; border-color: var(--o-sel) }
html[data-view="ops"] .ops-empty { color: var(--o-dim); font-size: 13px; list-style: none; padding: 10px 2px }

/* ---------- Report cards, flat ---------- */
html[data-view="ops"] .ops-on .card { border-radius: var(--ops-r) !important; box-shadow: none !important; background: var(--o-raised) !important; border: 1px solid var(--o-line) !important }
html[data-view="ops"] .ops-on .card:hover { border-color: var(--o-line-2) !important }
html[data-view="ops"] .ops-on .card .headline { font-size: 14.5px; font-weight: 600; line-height: 1.38; letter-spacing: -.003em; color: var(--o-strong) }
html[data-view="ops"] .ops-on .card :is(.lead, .full, .body) { font-size: 13.5px; line-height: 1.5; color: var(--t-text-2) }
html[data-view="ops"] .ops-on .card :is(time, .when, .meta, .src, .card-meta) { font-family: var(--ops-mono) !important; font-size: 11.5px }
html[data-view="ops"] .leaflet-popup-content .pop-h { font-size: 14px; font-weight: 600; line-height: 1.35 }
html[data-view="ops"] .ops-on .leaflet-popup-content-wrapper { border-radius: var(--ops-r); box-shadow: var(--shadow-pop); background: var(--o-raised); color: var(--o-text); border: 1px solid var(--o-line-2) }
html[data-view="ops"] .ops-on .leaflet-popup-tip { background: var(--o-raised) }

/* ---------- The events list (right) ---------- */
html[data-view="ops"] .ops-evf { display: flex; flex-direction: column; gap: 0; padding: 12px 14px 0; flex: none }
html[data-view="ops"] .ops-evf .ops-q { margin-bottom: 6px }
html[data-view="ops"] .ops-evf .ops-log-n { font: 500 11px var(--ops-mono); color: var(--o-faint); padding: 0 2px 8px }
html[data-view="ops"] .ops-log-l { list-style: none; margin: 0; padding: 0 8px 18px; overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--o-line-2) transparent }
html[data-view="ops"] .ops-day { position: sticky; top: 0; z-index: 1; padding: 8px 8px 4px; background: var(--o-panel); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o-faint); border-bottom: 1px solid var(--o-line) }
html[data-view="ops"] .ops-log-l button {
  appearance: none; width: 100%; display: grid; grid-template-columns: 42px 20px minmax(0, 1fr) 20px; align-items: start; gap: 8px; padding: 8px 8px 8px 6px;
  border: 0; border-left: 2px solid var(--c); border-bottom: 1px solid var(--o-line); border-radius: 0; background: none; color: var(--o-text); font: 13px/1.35 var(--ops-ui); text-align: left; cursor: pointer;
}
html[data-view="ops"] .ops-log-l button:hover { background: var(--o-hover) }
html[data-view="ops"] .ops-log-l time { font-size: 11.5px; font-weight: 500; color: var(--o-dim); padding-top: 2px }
html[data-view="ops"] .ops-log-l .t { min-width: 0 }
html[data-view="ops"] .ops-log-l .t b { display: block; font-weight: 500; color: var(--o-strong) }
html[data-view="ops"] .ops-log-l .t small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--o-dim) }
html[data-view="ops"] .ops-log-l .t small i { font-style: normal; color: var(--o-faint) }
html[data-view="ops"] :is(.ops-log-l, .ops-toast) .k { width: 20px; height: 20px; border-radius: 2px; background: var(--c); display: grid; place-items: center; color: #fff; flex: none }
html[data-view="ops"] :is(.ops-log-l, .ops-toast) .k svg { width: 12px; height: 12px }

/* ---------- The All page: each theatre at a glance ---------- */
html[data-view="ops"] .ops-th { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--o-line) }
html[data-view="ops"] .ops-th header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
html[data-view="ops"] .ops-th h3 { margin: 0 !important; font-size: 20px !important; font-weight: 700; letter-spacing: .14em !important; text-transform: uppercase; color: var(--o-strong) !important; font-family: var(--ops-cond) !important }
html[data-view="ops"] .ops-th h3 a { color: inherit; text-decoration: none }
html[data-view="ops"] .ops-th-go { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--o-dim); text-decoration: none }
html[data-view="ops"] .ops-th-go svg { width: 12px; height: 12px }
html[data-view="ops"] .ops-th-go:hover { color: var(--o-sel) }
html[data-view="ops"] .ops-th-sub { margin: 2px 0 12px; font-size: 12.5px; color: var(--o-dim) }
html[data-view="ops"] .ops-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 12px; border: 1px solid var(--o-line); border-radius: var(--ops-r) }
html[data-view="ops"] .ops-kpi div { padding: 8px 10px; min-width: 0 }
html[data-view="ops"] .ops-kpi div + div { border-left: 1px solid var(--o-line) }
html[data-view="ops"] .ops-kpi dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--o-faint) }
html[data-view="ops"] .ops-kpi dd { margin: 2px 0 0; font-size: 18px; font-weight: 500; color: var(--o-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
html[data-view="ops"] .ops-bars { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px }
html[data-view="ops"] .ops-bars li { display: grid; grid-template-columns: 112px 1fr 30px; align-items: center; gap: 8px; font-size: 12px; color: var(--o-text) }
html[data-view="ops"] .ops-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
html[data-view="ops"] .ops-bars i { height: 8px; background: linear-gradient(var(--c), var(--c)) left / var(--w) 100% no-repeat, var(--o-hover); border-radius: 1px }
html[data-view="ops"] .ops-bars b { font-size: 12px; font-weight: 500; text-align: right; color: var(--o-strong) }
html[data-view="ops"] .ops-th-ev { list-style: none; margin: 0; padding: 0 }
html[data-view="ops"] .ops-th-ev button { appearance: none; width: 100%; display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 6px 4px; border: 0; border-top: 1px solid var(--o-line); background: none; color: var(--o-text); font: 12.5px/1.35 var(--ops-ui); text-align: left; cursor: pointer }
html[data-view="ops"] .ops-th-ev button:hover { background: var(--o-hover) }
html[data-view="ops"] .ops-th-ev time { font-size: 11.5px; color: var(--o-dim) }
html[data-view="ops"] .ops-th-note { font-size: 12px; color: var(--o-faint); line-height: 1.5 }

/* ---------- Closed panels: a tab on the map's edge opens them again ---------- */
html[data-view="ops"] .ops-unfold { display: none; position: absolute; z-index: 900; top: 50%; transform: translateY(-50%); width: 18px; height: 52px; padding: 0; border: 1px solid var(--o-line-2); background: var(--o-glass); color: var(--o-dim); cursor: pointer; place-items: center }
html[data-view="ops"] .ops-unfold svg { width: 13px; height: 13px }
html[data-view="ops"] .ops-unfold-left { left: 0; border-left: 0; border-radius: 0 var(--ops-r) var(--ops-r) 0 }
html[data-view="ops"] .ops-unfold-right { right: 0; border-right: 0; border-radius: var(--ops-r) 0 0 var(--ops-r) }
html[data-view="ops"] .ops-unfold-dock { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); width: auto; height: 24px; padding: 0 14px; border-bottom: 0; border-radius: var(--ops-r) var(--ops-r) 0 0; font: 600 11.5px var(--ops-cond); letter-spacing: .12em; text-transform: uppercase }
@media (min-width: 761px) {
  html[data-view="ops"] .ops-noleft .ops-unfold-left, html[data-view="ops"] .ops-noright .ops-unfold-right { display: grid }
  html[data-view="ops"] .ops-nodock .ops-unfold-dock { display: none }
}

/* ---------- The strip under the map: time, Who and What, the last 48 hours ---------- */
html[data-view="ops"] .ops-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 800; display: flex; flex-direction: column; background: var(--o-panel); border-top: 1px solid var(--o-line-2); max-height: 40%; overflow: hidden }
html[data-view="ops"] .ops-drow { display: flex; align-items: center; gap: 10px; padding: 5px 12px; min-width: 0 }
html[data-view="ops"] .ops-drow + .ops-drow { border-top: 1px solid var(--o-line) }
html[data-view="ops"] .ops-time { flex: 1; min-width: 0 }
html[data-view="ops"] .ops-fold-d { margin: 0 }
html[data-view="ops"] .ops-dock .toolbar { position: static !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 0; top: auto }
html[data-view="ops"] .ops-dock .time-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px }
html[data-view="ops"] .ops-dock .time-filter .tf-label { font: 700 12px var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--o-faint) }
html[data-view="ops"] .ops-dock .time-filter :is(button, input) { height: 28px; font-size: 12.5px; border-radius: var(--ops-r) !important; border: 1px solid var(--o-line-2) !important; background: none !important; color: var(--o-text) !important; box-shadow: none !important }
html[data-view="ops"] .ops-dock .time-filter input { font-family: var(--ops-mono) !important; font-size: 12px; background: var(--o-bg) !important }
html[data-view="ops"] .ops-dock .time-filter button:hover { border-color: var(--o-dim) !important; background: var(--o-hover) !important }
html[data-view="ops"] .ops-dock .time-filter button:is(.on, [aria-pressed="true"]) { border-color: var(--o-sel) !important; background: color-mix(in srgb, var(--o-sel) 16%, transparent) !important; color: var(--o-strong) !important }
html[data-view="ops"] .ops-who { padding-top: 4px; padding-bottom: 4px }
html[data-view="ops"] .ops-dock .legend {
  position: static !important; inset: auto !important; transform: none !important; width: auto !important; max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; backdrop-filter: none !important; overflow: visible !important; flex: 1; min-width: 0;
}
html[data-view="ops"] .ops-dock .legend .leg-head, html[data-view="ops"] .ops-dock .legend .leg-hint { display: none !important }
html[data-view="ops"] .ops-dock .legend .leg-body { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 3px; max-height: none !important; overflow: visible !important; padding: 0 !important }
html[data-view="ops"] .ops-dock .legend :is(.leg-sec, .leg-sub) { margin: 0 6px 0 12px !important; padding: 0 !important; border: 0 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--o-faint) !important; width: auto !important; flex: none }
html[data-view="ops"] .ops-dock .legend :is(.leg-sec, .leg-sub):first-of-type { margin-left: 0 !important }
html[data-view="ops"] .ops-dock .legend .leg-item { width: auto !important; margin: 0 !important; padding: 2px 8px 2px 3px !important; border-radius: 2px !important; font-size: 12px !important; gap: 6px; white-space: nowrap; border: 1px solid transparent; background: none !important; color: var(--o-text) !important }
html[data-view="ops"] .ops-dock .legend .leg-item:hover { background: var(--o-hover) !important; border-color: var(--o-line-2) }
html[data-view="ops"] .ops-dock .legend .leg-item:not(.on) { opacity: .45 }
html[data-view="ops"] .ops-dock .legend .sw { border-radius: 2px !important }
html[data-view="ops"] .ops-dock .h-leg-pick { display: inline-flex; gap: 4px; margin: 0 8px 0 0 }
html[data-view="ops"] .ops-dock .legend :is(.leg-break, hr) { display: none }
html[data-view="ops"] .ops-mx { align-items: stretch; gap: 14px; padding-top: 6px; padding-bottom: 6px }
html[data-view="ops"] .ops-act { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column }
html[data-view="ops"] .ops-act-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 3px; white-space: nowrap; min-width: 0 }
html[data-view="ops"] .ops-act-h b { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o-faint) }
html[data-view="ops"] .ops-act-h small { color: var(--o-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis }
html[data-view="ops"] .ops-act-sel { display: inline-flex; align-items: center; gap: 4px; padding: 0 3px 0 8px; border-radius: 2px; background: color-mix(in srgb, var(--o-sel) 22%, transparent); color: var(--o-strong); font-size: 11.5px; font-weight: 600 }
html[data-view="ops"] .ops-act-sel button { appearance: none; border: 0; background: none; color: inherit; width: 18px; height: 18px; padding: 2px; cursor: pointer; display: grid; place-items: center }
html[data-view="ops"] .ops-act-sel svg { width: 12px; height: 12px }
html[data-view="ops"] .ops-amx { width: 100%; display: block; max-height: 130px; user-select: none; touch-action: none }
html[data-view="ops"] .ops-amx .lab { font: 500 11px var(--ops-ui); fill: var(--o-dim) }
html[data-view="ops"] .ops-amx .tk { font-size: 10.5px; fill: var(--o-faint) }
html[data-view="ops"] .ops-amx .tk.now, html[data-view="ops"] .ops-amx .tk.day { fill: var(--o-text) }
html[data-view="ops"] .ops-amx .g { stroke: var(--o-line); stroke-width: 1 }
html[data-view="ops"] .ops-amx .g.d { stroke: var(--o-line-2); stroke-dasharray: 2 3 }
html[data-view="ops"] .ops-amx .row { stroke: var(--o-line); stroke-width: 1 }
html[data-view="ops"] .ops-amx .nowl { stroke: var(--o-live); stroke-width: 1 }
html[data-view="ops"] .ops-amx .sel { fill: color-mix(in srgb, var(--o-sel) 16%, transparent); stroke: var(--o-sel); stroke-width: 1 }
html[data-view="ops"] .ops-amx .hit { fill: transparent; cursor: crosshair }
html[data-view="ops"] .ops-amx .cell { pointer-events: none }

/* ---------- The map itself: no country colours, thin borders ---------- */
html[data-view="ops"] .ops-on .leaflet-container { background: var(--o-bg); font-family: var(--ops-ui) }
html[data-view="ops"]:not(.ops-fills) .ops-on :is(.leaflet-overlay-pane, .leaflet-hCtrl-pane, .leaflet-irCountries-pane, .leaflet-islands-pane, .leaflet-irAdm-pane) path:not(.place-hl, .gov-hl, .gov-hl-pulse, .front-mv) {
  fill-opacity: 0 !important; stroke: var(--o-map-line) !important; stroke-opacity: .9 !important; stroke-width: .7px !important;
}
html[data-view="ops"].ops-fills .ops-on :is(.leaflet-overlay-pane > svg, .leaflet-hCtrl-pane, .leaflet-irCountries-pane, .leaflet-islands-pane) { opacity: .62 }
html[data-view="ops"][data-theme="broadsheet-night"] .ops-on .leaflet-tile-pane { filter: saturate(.6) brightness(.92) }
html[data-view="ops"][data-theme="broadsheet-day"] .ops-on .leaflet-tile-pane { filter: saturate(.5) }
html[data-view="ops"].ops-base-sat .ops-on .leaflet-tile-pane { filter: saturate(.75) brightness(.8) }
html[data-view="ops"][data-theme="broadsheet-day"].ops-base-sat .ops-on .leaflet-tile-pane { filter: saturate(.85) brightness(.95) }
html[data-view="ops"] .ops-on .leaflet-opsNames-pane { opacity: .9 }
html[data-view="ops"] .ops-on .ops-gl { stroke: var(--o-text); stroke-opacity: .16 }
html[data-view="ops"] .ops-glab span { position: absolute; white-space: nowrap; font-size: 10px; font-weight: 500; color: var(--o-dim); text-shadow: 0 0 3px var(--o-bg), 0 0 3px var(--o-bg) }
html[data-view="ops"] .ops-glab.w span { transform: translate(4px, -100%) }
html[data-view="ops"] .ops-glab.n span { transform: translate(3px, 2px) }
html[data-view="ops"] .ops-on .leaflet-control-zoom { border: 1px solid var(--o-line-2) !important; border-radius: var(--ops-r) !important; box-shadow: none !important; overflow: hidden }
html[data-view="ops"] .ops-on .leaflet-control-zoom a { width: 32px !important; height: 32px !important; line-height: 32px !important; background: var(--o-glass) !important; color: var(--o-text) !important; border-color: var(--o-line) !important; border-radius: 0 !important }
html[data-view="ops"] .ops-on .leaflet-control-zoom a:hover { background: var(--o-hover) !important }
html[data-view="ops"] .ops-on .leaflet-control-attribution { background: color-mix(in srgb, var(--o-bg) 70%, transparent) !important; color: var(--o-faint) !important; font-size: 10px }
html[data-view="ops"] .ops-on .leaflet-control-attribution a { color: var(--o-dim) !important }
html[data-view="ops"] .ops-on .map-chip { top: 10px; right: 10px; font-size: 12px; border-radius: var(--ops-r); background: var(--o-glass); border: 1px solid var(--o-line-2); color: var(--o-text); box-shadow: none }
html[data-view="ops"] .ops-on .map-full { display: none !important }

/* ---------- On the map: tools, place, scale, overview ---------- */
html[data-view="ops"] .ops-hud { position: absolute; inset: 0 0 var(--dock-h, 0) 0; pointer-events: none; z-index: 850 }
html[data-view="ops"] .ops-hud > * { pointer-events: auto }
html[data-view="ops"] .ops-on .leaflet-top.leaflet-left { top: 2px }
html[data-view="ops"] .ops-tools { position: absolute; left: 10px; top: 86px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: var(--o-glass) }
html[data-view="ops"] .ops-tools button { appearance: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-bottom: 1px solid var(--o-line); background: none; color: var(--o-text); cursor: pointer; position: relative }
html[data-view="ops"] .ops-tools button:last-child { border-bottom: 0 }
html[data-view="ops"] .ops-tools button svg { width: 17px; height: 17px }
html[data-view="ops"] .ops-tools button:hover { background: var(--o-hover); color: var(--o-strong) }
html[data-view="ops"] .ops-tools button[aria-pressed="true"] { color: var(--o-sel-ink); background: var(--o-tool) }
html[data-view="ops"] :is(.ops-tools button, .ops-coords).tipped::after { content: attr(data-tip); position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 3px 8px; border-radius: 2px; background: var(--o-strong); color: var(--o-bg); font: 600 11px var(--ops-ui); white-space: nowrap }
html[data-view="ops"] .ops-coords.tipped::after { left: 0; top: auto; bottom: calc(100% + 6px); transform: none }
html[data-view="ops"] .ops-tooltip { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 6px 12px; border-radius: 2px; background: var(--o-strong); color: var(--o-bg); font: 600 12px var(--ops-ui) }
html[data-view="ops"] .ops-coords {
  position: absolute; left: 10px; bottom: 34px; display: flex; flex-direction: column; gap: 1px; cursor: copy;
  padding: 5px 9px; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: var(--o-glass); font-size: 11.5px; font-weight: 500; color: var(--o-text); font-variant-numeric: tabular-nums;
}
html[data-view="ops"] .ops-coords .ops-mgrs { color: var(--o-dim); font-size: 11px }
html[data-view="ops"] .ops-on .leaflet-control-scale { margin-left: 10px !important; margin-bottom: 10px !important }
html[data-view="ops"] .ops-on .leaflet-control-scale-line { background: var(--o-glass); border-color: var(--o-text); color: var(--o-text); font-size: 10.5px }
html[data-view="ops"] .ops-mini { position: absolute; right: 10px; top: 52px; width: 168px; height: 112px; overflow: hidden; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: var(--o-bg) }
html[data-view="ops"] .ops-mini-map { position: absolute; inset: 0; cursor: pointer; background: var(--o-bg) }
html[data-view="ops"] .ops-crosshair { cursor: crosshair !important }
html[data-view="ops"] .ops-crosshair :is(.leaflet-marker-pane, .leaflet-overlay-pane, .leaflet-interactive) { pointer-events: none !important }
html[data-view="ops"] .ops-rlabel span, html[data-view="ops"] .ops-ringlabel span { position: absolute; transform: translate(10px, -50%); white-space: nowrap; padding: 3px 7px; border-radius: 2px; background: rgba(8, 11, 14, .88); color: #ffd99a; font-size: 11.5px; font-weight: 600; display: flex; flex-direction: column; line-height: 1.25 }
html[data-view="ops"] .ops-rlabel small { color: #c9b48d; font-weight: 500; font-size: 10.5px }
html[data-view="ops"] .ops-ringlabel span { transform: translate(-50%, -120%); color: #bfeef1; font-size: 10.5px; padding: 1px 5px }
html[data-view="ops"] .ev.ops-dim { opacity: .14; filter: grayscale(.8) }
html[data-view="ops"] .ops-pulse .ev { animation: ops-pulse 1.2s ease-out 2 }
@keyframes ops-pulse { 0% { filter: drop-shadow(0 0 0 var(--o-sel)) } 50% { filter: drop-shadow(0 0 8px var(--o-sel)) brightness(1.2) } 100% { filter: drop-shadow(0 0 0 transparent) } }
html[data-view="ops"] .ops-ping span { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border: 2px solid var(--c); animation: ops-ring 1.2s ease-out 3 forwards }
@keyframes ops-ring { 0% { transform: scale(.6) rotate(45deg); opacity: 1 } 100% { transform: scale(2.4) rotate(45deg); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { html[data-view="ops"] :is(.ops-ping span, .ops-pulse .ev, .ops-live i) { animation: none } }
/* New events as they come in: a flash line at the top of the map. */
html[data-view="ops"] .ops-toasts { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; width: min(460px, calc(100% - 140px)); pointer-events: none }
html[data-view="ops"] .ops-toast {
  pointer-events: auto; appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--o-line-2); border-left: 3px solid var(--o-live); border-radius: var(--ops-r); background: var(--o-glass); color: var(--o-strong);
  font: 500 13px/1.3 var(--ops-ui); animation: ops-in .2s ease-out; transition: opacity .4s, transform .4s;
}
html[data-view="ops"] .ops-toast.out { opacity: 0; transform: translateY(-6px) }
html[data-view="ops"] .ops-toast small { display: block; color: var(--o-live); font: 700 11px var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px }
@keyframes ops-in { from { opacity: 0; transform: translateY(-8px) } }

/* ---------- Panels on the map: layers, a picked aircraft or ship ---------- */
html[data-view="ops"] :is(.ops-menu, .ops-card) {
  position: absolute; top: 10px; right: 10px; width: 300px; max-height: calc(100% - 160px); overflow: auto; box-sizing: border-box; scrollbar-width: thin;
  padding: 10px 12px 12px; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: var(--o-glass); color: var(--o-text); font: 13px/1.4 var(--ops-ui);
}
html[data-view="ops"] .ops-menu { left: 52px; right: auto; top: 10px }
html[data-view="ops"] .ops-card { top: 10px; right: 10px }
html[data-view="ops"] .ops-hud:has(.ops-card:not([hidden])) .ops-mini { display: none }
html[data-view="ops"] :is(.ops-mh, .ops-ch) { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px }
html[data-view="ops"] .ops-mh b { font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--o-strong) }
html[data-view="ops"] .ops-mlab { margin: 10px 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o-faint) }
html[data-view="ops"] .ops-bases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px }
html[data-view="ops"] .ops-bases button { appearance: none; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: none; color: var(--o-text); font: 600 12px var(--ops-cond) !important; letter-spacing: .1em; text-transform: uppercase; cursor: pointer }
html[data-view="ops"] .ops-bases button[aria-pressed="true"] { border-color: var(--o-sel); box-shadow: inset 0 0 0 1px var(--o-sel) }
html[data-view="ops"] .ops-bthumb { height: 34px; border-radius: 2px; background: linear-gradient(135deg, #2a3038 0 40%, #1b2026 40% 100%) }
html[data-view="ops"][data-theme="broadsheet-day"] .ops-bthumb.auto { background: linear-gradient(135deg, #d8dbd6 0 40%, #f3f3f1 40% 100%) }
html[data-view="ops"] .ops-bthumb.sat { background: radial-gradient(circle at 30% 40%, #6b6a4e, transparent 45%), radial-gradient(circle at 70% 70%, #2b4a5c, transparent 50%), linear-gradient(135deg, #8c7a56, #3b4a40) }
html[data-view="ops"] .ops-bthumb.relief { background: repeating-linear-gradient(120deg, #4a5058 0 3px, #2d3238 3px 8px) }
html[data-view="ops"] .ops-x { appearance: none; width: 26px; height: 26px; padding: 4px; border: 0; border-radius: 2px; background: none; color: var(--o-dim); cursor: pointer; display: grid; place-items: center }
html[data-view="ops"] .ops-x svg { width: 15px; height: 15px }
html[data-view="ops"] .ops-x:hover { background: var(--o-hover); color: var(--o-strong) }
html[data-view="ops"] .ops-sw { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--o-line); cursor: pointer }
html[data-view="ops"] .ops-sw.sub { padding-left: 24px; border-top: 0; padding-top: 0 }
html[data-view="ops"] .ops-sw.off { opacity: .55; cursor: default }
html[data-view="ops"] .ops-sw input { width: 15px; height: 15px; margin: 0; accent-color: var(--o-sel) }
html[data-view="ops"] .ops-sw > span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--o-strong) }
html[data-view="ops"] .ops-sw > span svg { width: 15px; height: 15px; color: var(--o-dim) }
html[data-view="ops"] .ops-sw small { grid-column: 2; color: var(--o-dim); font-size: 11.5px }
html[data-view="ops"] .ops-sw small b { font: 600 11.5px var(--ops-mono); color: var(--o-strong) }
html[data-view="ops"] .ops-mil { border-top: 1px solid var(--o-line); padding-top: 6px; margin-top: 2px }
html[data-view="ops"] .ops-mil p { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o-faint) }
html[data-view="ops"] .ops-mil ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto }
html[data-view="ops"] .ops-mil button { appearance: none; width: 100%; display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; padding: 4px 6px; border: 0; border-radius: 2px; background: none; color: var(--o-text); font: 12px var(--ops-ui); text-align: left; cursor: pointer }
html[data-view="ops"] .ops-mil button:hover { background: var(--o-hover) }
html[data-view="ops"] .ops-mil b { color: var(--o-tool); font-size: 11.5px }
html[data-view="ops"] .ops-mil span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
html[data-view="ops"] .ops-mil em { font-style: normal; font-size: 11px; color: var(--o-faint) }
html[data-view="ops"] .ops-src { margin: 8px 0 0; font-size: 11px; color: var(--o-faint); line-height: 1.45 }
html[data-view="ops"] :is(.ops-src, .ops-clinks) a { color: var(--o-text) }
html[data-view="ops"] .ops-ck { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--o-dim) }
html[data-view="ops"] .ops-ck svg { width: 14px; height: 14px }
html[data-view="ops"] .ops-ck.mil { color: var(--o-tool) }
html[data-view="ops"] .ops-card h3 { margin: 0; font-size: 19px; font-weight: 600; color: var(--o-strong); letter-spacing: .03em }
html[data-view="ops"] .ops-csub { margin: 2px 0 8px; color: var(--o-dim); font-size: 12.5px }
html[data-view="ops"] .ops-route { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 8px; padding: 6px 8px; border-radius: 2px; background: var(--o-hover); font-size: 12.5px }
html[data-view="ops"] .ops-route small { flex-basis: 100%; color: var(--o-faint); font-size: 10.5px }
html[data-view="ops"] .ops-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0 }
html[data-view="ops"] .ops-card dl div { min-width: 0 }
html[data-view="ops"] .ops-card dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--o-faint) }
html[data-view="ops"] .ops-card dd { margin: 1px 0 0; font-size: 12.5px; font-weight: 500; color: var(--o-text); overflow-wrap: anywhere }
html[data-view="ops"] .ops-card dd .emg { color: var(--o-live) }
html[data-view="ops"] .ops-clinks { margin: 10px 0 0; font-size: 12px }
html[data-view="ops"] .ops-clinks a { display: inline-flex; align-items: center; gap: 4px }

/* ---------- The keys ---------- */
html[data-view="ops"] .ops-keys { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: rgba(0, 0, 0, .5) }
html[data-view="ops"] .ops-keys[hidden] { display: none }
html[data-view="ops"] .ops-kbox { width: min(440px, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: var(--o-panel); color: var(--o-text); font: 13px var(--ops-ui) }
html[data-view="ops"] .ops-kbox .ops-mh b { font-family: var(--ops-cond) !important }
html[data-view="ops"] .ops-kbox dl { margin: 0; display: grid; gap: 7px }
html[data-view="ops"] .ops-kbox dl div { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px }
html[data-view="ops"] .ops-kbox dd { margin: 0; color: var(--o-text) }
html[data-view="ops"] kbd { display: inline-block; min-width: 18px; padding: 1px 6px; border: 1px solid var(--o-line-2); border-bottom-width: 2px; border-radius: 2px; background: var(--o-raised); font-size: 11.5px; font-weight: 600; text-align: center; color: var(--o-strong) }

/* ---------- Broadcast mode: the map alone, with a news lower third ---------- */
html[data-view="ops"].ops-cast .ops-on { grid-template-columns: 0 0 minmax(0, 1fr) 0 !important; grid-template-rows: 0 0 minmax(0, 1fr) !important }
html[data-view="ops"].ops-cast .ops-on > :is(.ops-strip, .ops-bar, .ops-nav, .ops-left, .ops-right) { visibility: hidden; overflow: hidden }
html[data-view="ops"].ops-cast .ops-on :is(.ops-dock, .ops-tools, .ops-coords, .ops-unfold, .map-chip, .leaflet-control-zoom, .ops-menu) { display: none !important }
html[data-view="ops"].ops-cast .ops-on .map-wrap { --dock-h: 0px !important }
html[data-view="ops"].ops-cast .ops-on .ev-wrap .ev { transform: scale(1.18); transform-origin: 50% 100% }
html[data-view="ops"] .ops-lower { position: absolute; left: 32px; bottom: 32px; right: 220px; display: flex; flex-direction: column; pointer-events: none }
html[data-view="ops"] .ops-lt { display: flex; align-items: center; gap: 14px; padding: 9px 16px; background: #0b0e11; color: #fff; font-size: 22px; align-self: flex-start }
html[data-view="ops"] .ops-lt .live { font: 700 13px var(--ops-cond) !important; letter-spacing: .18em; text-transform: uppercase; padding: 4px 9px; background: #d32f2f }
html[data-view="ops"] .ops-lt b { font: 700 24px var(--ops-cond) !important; letter-spacing: .1em; text-transform: uppercase }
html[data-view="ops"] .ops-lt .clk { font-size: 15px; font-weight: 600; color: #c9d1d9 }
html[data-view="ops"] .ops-lt .brand { font: 700 13px var(--ops-cond) !important; letter-spacing: .2em; text-transform: uppercase; color: #8a939d; margin-left: 12px }
html[data-view="ops"] .ops-lb { padding: 10px 16px; background: rgba(247, 248, 245, .97); color: #0b0e11; font: 600 20px/1.3 var(--ops-ui); max-width: 1000px; border-left: 4px solid #d32f2f }
html[data-view="ops"] .ops-lb time { font-size: 15px; font-weight: 700; color: #b71c1c; margin-right: 12px }

/* ---------- Phones: the map first, a tab for each part ---------- */
@media (max-width: 760px) {
  html[data-view="ops"] .ops-on { display: flex; flex-direction: column; background: var(--o-bg) }
  html[data-view="ops"] .ops-strip { order: 0; height: 24px; flex: none; overflow-x: auto; scrollbar-width: none }
  html[data-view="ops"] .ops-strip :is(.ops-cnt, .ops-tag, .ops-upd) { display: none }
  html[data-view="ops"] .ops-bar .mast-line { display: none !important }
  html[data-view="ops"] .ops-bar { height: 46px; flex: none; gap: 8px; padding-right: 8px }
  html[data-view="ops"] .ops-bar .mast-date { width: 44px }
  html[data-view="ops"] .ops-bar .mast-mid { margin-left: 10px }
  html[data-view="ops"] .ops-bar .mast-name .mn { font-size: 13px !important; letter-spacing: .14em }
  html[data-view="ops"] .ops-bar .mast-name::before { display: none }
  html[data-view="ops"] .ops-bar header.top { display: none }
  html[data-view="ops"] .ops-btn > span:not(.sr), html[data-view="ops"] [data-op="keys"] { display: none !important }
  html[data-view="ops"] .ops-btn { width: 32px; padding: 0; justify-content: center }
  html[data-view="ops"] .ops-classic { font-size: 11px; padding: 0 2px }
  html[data-view="ops"] .ops-nav { display: none }
  html[data-view="ops"] .ops-ptabs { position: sticky; top: 0; z-index: 1100; display: flex; overflow-x: auto; scrollbar-width: none; background: var(--o-panel); border-bottom: 1px solid var(--o-line); flex: none }
  html[data-view="ops"] .ops-ptabs button { appearance: none; flex: 1 0 auto; padding: 11px 12px 9px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--o-dim); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
  html[data-view="ops"] .ops-ptabs button[aria-selected="true"] { color: var(--o-strong); border-bottom-color: var(--o-sel) }
  html[data-view="ops"] .ops-on > :is(.ops-left, .ops-right) { display: none; border: 0 }
  html[data-view="ops"] .ops-on:not([data-ops-ptab="map"]):not([data-ops-ptab="rail"]):not([data-ops-ptab="events"]):not([data-ops-ptab="mood"]) > .ops-left { display: flex }
  html[data-view="ops"] .ops-on:is([data-ops-ptab="rail"], [data-ops-ptab="events"], [data-ops-ptab="mood"]) > .ops-right { display: flex }
  html[data-view="ops"] .ops-phead { display: none }
  html[data-view="ops"] .ops-on:not([data-ops-ptab="map"]) > .ops-stage { display: none }
  html[data-view="ops"] .ops-on main.stage { display: block !important; height: auto !important; margin: 0 !important; padding: 0 !important }
  html[data-view="ops"] .ops-on .map-wrap { height: auto !important; min-height: 0 !important; display: flex; flex-direction: column; position: relative; border: 0 !important; margin: 0 !important; border-radius: 0 !important }
  /* The map leaves room for the strip under it, so the What line is on the first screen of a phone (user, 31 Oct): never taller than before, shorter on a short screen. */
  html[data-view="ops"] { --ops-map-h: clamp(300px, calc(100svh - 272px), 64svh) }
  html[data-view="ops"] .ops-on :is(#map, #h-map) { position: relative !important; inset: auto !important; height: var(--ops-map-h) !important; flex: none; border-radius: 0 !important }
  html[data-view="ops"] .ops-hud { inset: 0 0 auto 0; height: var(--ops-map-h) }
  html[data-view="ops"] .ops-dock { position: static; max-height: none; border-top: 1px solid var(--o-line-2) }
  html[data-view="ops"] .ops-log-l { max-height: none; overflow: visible }
  html[data-view="ops"] .ops-panes, html[data-view="ops"] .ops-rp-rep > .rail { overflow: visible }
  html[data-view="ops"] :is(.ops-fold, .ops-unfold, .ops-mini, .ops-act-h small) { display: none !important }
  html[data-view="ops"] .ops-tools { top: 80px }
  html[data-view="ops"] .ops-coords { bottom: 30px; font-size: 10.5px }
  html[data-view="ops"] :is(.ops-menu, .ops-card) { left: 8px; right: 8px; width: auto; top: 8px; bottom: auto; max-height: calc(64svh - 20px) }
  html[data-view="ops"] .ops-toasts { width: calc(100% - 24px) }
  html[data-view="ops"] .ops-pane { padding: 12px 14px 24px !important }
  html[data-view="ops"] .ops-lower { left: 8px; right: 8px; bottom: 8px }
  html[data-view="ops"] .ops-lt { font-size: 15px; padding: 7px 10px }
  html[data-view="ops"] .ops-lt b { font-size: 17px !important }
  html[data-view="ops"] .ops-lb { font-size: 14px }
}
/* The quick periods, before the page's own time filter. */
html[data-view="ops"] .ops-quick { display: flex; align-items: center; gap: 0; flex: none; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); overflow: hidden; height: 28px }
html[data-view="ops"] .ops-quick span { padding: 0 8px; font: 700 12px var(--ops-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--o-faint); border-right: 1px solid var(--o-line-2); line-height: 26px }
html[data-view="ops"] .ops-quick button { appearance: none; height: 100%; padding: 0 10px; border: 0; background: none; color: var(--o-text); font: 500 12px var(--ops-mono); cursor: pointer }
html[data-view="ops"] .ops-quick button + button { border-left: 1px solid var(--o-line) }
html[data-view="ops"] .ops-quick button:hover { background: var(--o-hover) }
html[data-view="ops"] .ops-quick button[aria-pressed="true"] { background: color-mix(in srgb, var(--o-sel) 18%, transparent); color: var(--o-strong); box-shadow: inset 0 -2px 0 var(--o-sel) }
html[data-view="ops"] .ops-dock .time-filter .tf-label { display: none }
/* The time row in one line: arrows without words, the boxes narrow; it scrolls sideways if the map is narrow. */
html[data-view="ops"] .ops-dtop { gap: 8px }
html[data-view="ops"] .ops-dock .time-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px }
html[data-view="ops"] .ops-dock .time-filter :is(.day-nav-txt, .tf-sep) { display: none }
html[data-view="ops"] .ops-dock .time-filter button { padding: 0 9px; flex: none; font-weight: 600 }
html[data-view="ops"] .ops-dock .time-filter input { width: 118px; padding: 0 4px; flex: none }
html[data-view="ops"] .ops-dock .time-filter .tf-range { display: inline-flex; align-items: center; gap: 5px; flex: none }
html[data-view="ops"] .ops-dock .time-filter .tf-long { display: none }
html[data-view="ops"] .ops-dock .time-filter .tf-short { display: inline !important }
/* The numbers, fitted to the panel: their tabs in a full row, the control bars one under the other. */
html[data-view="ops"] .ops-left .num-cat { display: flex; flex-wrap: wrap; max-width: 100% }
html[data-view="ops"] .ops-left .num-cat button { flex: 1 1 auto }
html[data-view="ops"] .ops-left .bars { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; max-width: 100% }
html[data-view="ops"] .ops-left .bars .bar { width: auto !important; min-width: 0 !important; margin: 0 !important }
html[data-view="ops"] .ops-left .bars .bar h3 { font-size: 12px !important; letter-spacing: .08em !important; margin: 0 0 4px !important }
/* Clipped, not a box of its own that scrolls (that kept the panels' side menu from staying in view, 21 Oct). */
html[data-view="ops"] .ops-pane { overflow-x: clip }
html[data-view="ops"] .ops-sw > span, html[data-view="ops"] .ops-sw small { font-style: normal }
html[data-view="ops"] .ops-quick span { display: none }
html[data-view="ops"] .ops-dock .time-filter input { width: 112px }

/* ==========================================================================
   20 Oct, round 2 (user's list): the mark and the bar, one place for each button, round pins, the panels'
   own boxes, the traffic panel, settings, broadcast, and no colour or shape left from the classic design.
   ========================================================================== */
/* The classic site's side menu is gone in this view; the mark takes its corner. */
html[data-view="ops"] :is(.mast-menu, #site-menu, .site-menu, .ops-classic) { display: none !important }
html[data-view="ops"] .ops-bar .mast-date { display: none !important }
html[data-view="ops"] .ops-bar .mast-name::before { content: none !important; display: none !important }
html[data-view="ops"] .ops-bar .mast-mid { margin-left: 12px }
html[data-view="ops"] .ops-home { flex: none; width: var(--ops-nav-w); height: 100%; display: grid; place-items: center; border-right: 1px solid var(--o-line); color: var(--o-strong); text-decoration: none }
html[data-view="ops"] .ops-home:hover { background: var(--o-hover) }
html[data-view="ops"] .ops-logo { width: 28px; height: 28px; display: block; color: inherit }
html[data-view="ops"] .ops-logo .sw { fill: var(--o-sel); opacity: .9 }
html[data-view="ops"] .ops-logo .bl { fill: var(--o-live) }
html[data-view="ops"] .ops-strip #ops-date { font-weight: 600; color: var(--o-strong) }

/* The All page's map: no desk banners on it (20 Oct). */
html[data-view="ops"] .ops-on .h-co-wrap { display: none !important }

/* Every pin a disc on its point, as the whole war's marks are (20 Oct: "need to be unity"). Event maps in the
   news and in monitoring (ACLED, Liveuamap, Crisis Group) mark events with discs: a disc sits on its point,
   reads the same at every size and stacks cleanly; the colour says who, the mark inside what. */
html[data-view="ops"] { --pin-d: 22px }
html[data-view="ops"][data-ops-pin="s"] { --pin-d: 17px }
html[data-view="ops"][data-ops-pin="l"] { --pin-d: 28px }
html[data-view="ops"] .ops-on .ev-wrap .ev { animation: none !important; will-change: auto }
html[data-view="ops"] :is(.ops-on, #pin-sheet) .ev .ev-glyph {
  position: absolute; left: calc(17px - var(--pin-d) / 2); top: calc(40px - var(--pin-d) / 2); width: var(--pin-d); height: var(--pin-d); box-sizing: border-box;
  border-radius: 50% !important; border: 1.5px solid rgba(255, 255, 255, .92) !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 5px rgba(0, 0, 0, .35) !important
}
html[data-view="ops"][data-theme="broadsheet-day"] :is(.ops-on, #pin-sheet) .ev .ev-glyph { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .25) !important }
html[data-view="ops"] :is(.ops-on, #pin-sheet) .ev .ev-glyph svg { width: calc(var(--pin-d) * .58); height: calc(var(--pin-d) * .58) }
html[data-view="ops"] :is(.ops-on, #pin-sheet) .ev .ev-stem { display: none }
html[data-view="ops"] :is(.ops-on, #pin-sheet) .ev::after { display: none }
html[data-view="ops"] :is(.ops-on, #pin-sheet) .ev:hover .ev-glyph { transform: scale(1.15) }
html[data-view="ops"] :is(.ops-on, #pin-sheet) .ev .ev-count { top: calc(40px - var(--pin-d) / 2 - 8px); right: calc(17px - var(--pin-d) / 2 - 10px) }
html[data-view="ops"] :is(.ops-on, #pin-sheet) .ev.fresh .ev-glyph { animation: ops-fresh 2.4s ease-out infinite }
html[data-view="ops"] #pin-sheet .ev.pin-pulse { transform-origin: 17px 40px }
@keyframes ops-fresh { 0% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 0 color-mix(in srgb, var(--ev-ink) 70%, transparent) } 70% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 9px transparent } 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 0 transparent } }
html[data-view="ops"].ops-cast .ops-on .ev-wrap .ev { transform: scale(1.2); transform-origin: 17px 40px }
html[data-view="ops"] .ops-ping span { left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; animation-name: ops-ring2 }
@keyframes ops-ring2 { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(2.6); opacity: 0 } }

/* New pins: a small note, bottom right, over the map (20 Oct). */
html[data-view="ops"] .ops-toasts { top: auto; left: auto; right: 10px; bottom: 30px; transform: none; width: min(300px, calc(100% - 80px)); flex-direction: column-reverse; gap: 5px }
html[data-view="ops"] .ops-toast { padding: 6px 9px; gap: 8px; font-size: 12px; line-height: 1.3; border-left-width: 2px; animation: ops-up .2s ease-out }
html[data-view="ops"] .ops-toast small { font-size: 10.5px !important; letter-spacing: .12em; margin-bottom: 1px }
html[data-view="ops"] .ops-toast .k { width: 18px; height: 18px; border-radius: 50% }
html[data-view="ops"] .ops-toast.out { transform: translateY(6px) }
@keyframes ops-up { from { opacity: 0; transform: translateY(8px) } }
html[data-view="ops"] .ops-hud:has(.ops-card:not([hidden])) .ops-toasts { display: none }
html[data-view="ops"] .ops-log-l .k { border-radius: 50% }

/* Layers on the left, by the tools; Traffic on the right, under its button; a picked aircraft beside it. */
html[data-view="ops"] .ops-lyr { left: 52px; right: auto; top: 10px }
html[data-view="ops"] .ops-trf { right: 10px; left: auto; top: 10px }
html[data-view="ops"] .ops-hud:has(.ops-trf:not([hidden])) .ops-mini { display: none }
html[data-view="ops"] .ops-hud:has(.ops-trf:not([hidden])) .ops-card { right: 320px }
html[data-view="ops"] .ops-mini[hidden] { display: none }
html[data-view="ops"] .ops-tools .ops-ph { display: none }
html[data-view="ops"] .leaflet-container.ops-over-trf, html[data-view="ops"] .ops-over-trf .leaflet-grab { cursor: pointer !important }
html[data-view="ops"] .ops-photo:empty { display: none }
html[data-view="ops"] .ops-photo a { display: block; margin: 10px 0 0; text-decoration: none }
html[data-view="ops"] .ops-photo img { display: block; width: 100%; height: auto; border-radius: 2px; border: 1px solid var(--o-line) }
html[data-view="ops"] .ops-photo small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--o-faint) }
html[data-view="ops"] .ops-clinks { display: flex; flex-wrap: wrap; gap: 4px 14px }

/* A closed panel's tab on the map's edge, named and easy to see (20 Oct). */
html[data-view="ops"] .ops-unfold { width: 28px; height: auto; padding: 10px 0; gap: 8px; align-content: center; justify-items: center; background: var(--o-panel); color: var(--o-strong); border-color: var(--o-line-2) }
html[data-view="ops"] .ops-unfold span { writing-mode: vertical-rl; font: 700 12px var(--ops-cond); letter-spacing: .16em; text-transform: uppercase }
html[data-view="ops"] .ops-unfold-left span { transform: rotate(180deg) }
html[data-view="ops"] .ops-unfold-left { border-left: 0; box-shadow: inset 2px 0 0 var(--o-sel), 0 2px 10px rgba(0, 0, 0, .25) }
html[data-view="ops"] .ops-unfold-right { border-right: 0; box-shadow: inset -2px 0 0 var(--o-sel), 0 2px 10px rgba(0, 0, 0, .25) }
html[data-view="ops"] .ops-unfold svg { width: 14px; height: 14px; color: var(--o-sel) }
html[data-view="ops"] .ops-unfold:hover { background: var(--o-hover) }
html[data-view="ops"] .ops-unfold-dock { padding: 0 16px; width: auto; height: 26px; color: var(--o-strong); box-shadow: inset 0 2px 0 var(--o-sel) }

/* Who and What, a line each. */
html[data-view="ops"] .ops-dock .legend .ops-br { flex-basis: 100%; height: 0; margin: 2px 0 }
html[data-view="ops"] .ops-dock .legend :is(.leg-sec, .leg-sub) { min-width: 40px }

/* The panels' text size, as set; motion, as set. */
html[data-view="ops"] :is(.ops-left .ops-panes, .ops-right .ops-rpane) { zoom: var(--ops-zoom, 1) }
html[data-view="ops"].ops-still *, html[data-view="ops"].ops-still *::before, html[data-view="ops"].ops-still *::after { animation: none !important; transition: none !important }

/* ---------- The brief: Latest developments open, in its box; every front or arena in its own box ---------- */
html[data-view="ops"] .ops-left :is(.toggle-sit, .toggle-front, .pg-arrow, .pg-dots) { display: none !important }
html[data-view="ops"] .ops-left .situation .sit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 4px }
html[data-view="ops"] .ops-left .situation .sit-head h2 { display: block !important; margin: 0 !important; font: 700 15px var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--o-strong) !important }
html[data-view="ops"] .ops-left .situation .sit-body, html[data-view="ops"] .ops-left .front-card {
  margin: 0 !important; padding: 0 !important; border: 1px solid var(--o-line) !important; border-radius: var(--ops-r) !important; background: var(--o-raised) !important; box-shadow: none !important; overflow: hidden
}
html[data-view="ops"] .ops-left :is(.situation, .front-card) .pts { list-style: none; margin: 0 !important; padding: 0 !important; counter-reset: pt }
html[data-view="ops"] .ops-left :is(.situation, .front-card) .pts > li {
  display: block !important; position: relative; margin: 0 !important; padding: 10px 12px 10px 40px !important; border-top: 1px solid var(--o-line); counter-increment: pt;
  font-size: 13.5px !important; line-height: 1.5 !important; color: var(--o-text)
}
html[data-view="ops"] .ops-left :is(.situation, .front-card) .pts > li:first-child { border-top: 0 }
html[data-view="ops"] .ops-left :is(.situation, .front-card) .pts > li::before { content: counter(pt, decimal-leading-zero); position: absolute; left: 12px; top: 12px; font: 600 11px/1.5 var(--ops-mono); color: var(--o-sel) }
html[data-view="ops"] .ops-left .refs-box { margin: 0 !important; padding: 6px 12px 8px !important; border-top: 1px solid var(--o-line); background: var(--o-panel) }
html[data-view="ops"] .ops-left .refs-box .refs { margin: 0; padding: 0; list-style: none }
html[data-view="ops"] .ops-left .refs-box .ref-line { font: 500 11.5px var(--ops-ui) !important; color: var(--o-dim) !important; background: none !important; border: 0 !important; padding: 2px 0 !important }
html[data-view="ops"] .ops-left .ref-num { font-family: var(--ops-mono) !important; color: var(--o-sel) !important; background: none !important; border: 1px solid var(--o-line-2) !important; border-radius: 2px !important }
html[data-view="ops"] .ops-on sup.ref-n .ref-btn { font: 600 10px var(--ops-mono) !important; color: var(--o-sel) !important; background: none !important; border: 0 !important; padding: 0 1px !important }
html[data-view="ops"] .ops-left .pager .pg-track { display: flex !important; flex-direction: column; gap: 10px; transform: none !important }
html[data-view="ops"] .ops-left .pager .pg-slide { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important }
html[data-view="ops"] .ops-left .pager { padding: 0 !important }
html[data-view="ops"] .ops-left .front-card .front-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px 2px; margin: 0 !important; background: none !important; border: 0 !important }
html[data-view="ops"] .ops-left .front-card .front-head strong { font: 700 14px var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--o-strong) }
html[data-view="ops"] .ops-left .front-card .front-where { margin: 0 !important; padding: 0 12px 8px; font-size: 12px !important; color: var(--o-dim) !important; border-bottom: 1px solid var(--o-line) }
html[data-view="ops"] .ops-left .front-card .front-pts { margin: 0 !important; padding: 0 !important }
html[data-view="ops"] .ops-left .cadence { margin: 0 0 8px !important }
html[data-view="ops"] .ops-on .prose-pin { color: inherit !important; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--o-sel) 55%, transparent); text-underline-offset: 2px; text-decoration-thickness: 1px; background: none !important }
html[data-view="ops"] .ops-on .prose-pin:hover { text-decoration-color: var(--o-sel) }

/* The page's small buttons, in this view's style (no pills, no colours of the classic site). */
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map, .more, .x-desk) {
  appearance: none; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px !important; border: 1px solid var(--o-line-2) !important; border-radius: 2px !important;
  background: none !important; color: var(--o-dim) !important; font: 700 11px var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase; text-decoration: none !important; box-shadow: none !important; cursor: pointer
}
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map, .more, .x-desk):hover { color: var(--o-strong) !important; border-color: var(--o-dim) !important; background: var(--o-hover) !important }
html[data-view="ops"] .ops-on .card .x-desk { margin-top: 8px; color: var(--o-sel) !important; border-color: color-mix(in srgb, var(--o-sel) 45%, transparent) !important }
html[data-view="ops"] .ops-on .more { width: 100%; justify-content: center; height: 32px; margin-top: 8px }
/* The report cards' top line: time, source, desk, map. */
html[data-view="ops"] .ops-on .card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--o-faint) }
html[data-view="ops"] .ops-on .card .meta time { color: var(--o-dim) !important }
html[data-view="ops"] .ops-on .card .src-link { color: var(--o-text) !important; font: 600 11.5px var(--ops-ui) !important; text-decoration: none !important; background: none !important; border: 0 !important; padding: 0 !important }
html[data-view="ops"] .ops-on .card .src-go { color: var(--o-faint) !important }
html[data-view="ops"] .ops-on .card :is(.also, .reply-to) { font-size: 12px !important; color: var(--o-dim) !important }
html[data-view="ops"] .ops-on .card :is(.also, .reply-to) a { color: var(--o-text) !important }
html[data-view="ops"] .ops-on .h-tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border: 1px solid var(--o-line-2) !important; border-radius: 2px !important; background: none !important; color: var(--o-dim) !important; font: 700 10.5px var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: none !important }
html[data-view="ops"] .ops-on .card { border-left-width: 1px !important; padding: 10px 12px !important }
html[data-view="ops"] .ops-on .card::before { display: none !important }

/* ---------- Settings ---------- */
html[data-view="ops"] .ops-set { position: fixed; inset: 0; z-index: 3100; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 9, .6) }
html[data-view="ops"] .ops-set[hidden] { display: none }
html[data-view="ops"] .ops-sbox { width: min(760px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: var(--o-panel); color: var(--o-text); font: 13px/1.45 var(--ops-ui); box-shadow: 0 18px 50px rgba(0, 0, 0, .45) }
html[data-view="ops"] .ops-sbox header, html[data-view="ops"] .ops-sbox footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; flex: none }
html[data-view="ops"] .ops-sbox header { border-bottom: 1px solid var(--o-line) }
html[data-view="ops"] .ops-sbox footer { border-top: 1px solid var(--o-line) }
html[data-view="ops"] .ops-sh { display: inline-flex; align-items: center; gap: 10px; color: var(--o-strong) }
html[data-view="ops"] .ops-sh .ops-logo { width: 22px; height: 22px }
html[data-view="ops"] .ops-sh b { font: 700 16px var(--ops-cond) !important; letter-spacing: .18em; text-transform: uppercase }
html[data-view="ops"] .ops-sbody { overflow: auto; padding: 4px 16px 16px; scrollbar-width: thin; scrollbar-color: var(--o-line-2) transparent }
html[data-view="ops"] .ops-sbody section { padding: 12px 0 4px; border-bottom: 1px solid var(--o-line) }
html[data-view="ops"] .ops-sbody section:last-child { border-bottom: 0 }
html[data-view="ops"] .ops-sbody h3 { margin: 0 0 6px; font: 700 12.5px var(--ops-cond) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--o-sel) }
html[data-view="ops"] .ops-srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 7px 0 }
html[data-view="ops"] .ops-sl b { display: block; font-weight: 600; color: var(--o-strong) }
html[data-view="ops"] .ops-sl small { display: block; color: var(--o-dim); font-size: 12px }
html[data-view="ops"] .ops-sopts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); overflow: hidden }
html[data-view="ops"] .ops-sopts button { appearance: none; min-height: 28px; padding: 0 10px; border: 0; border-left: 1px solid var(--o-line-2); background: none; color: var(--o-dim); font: 600 12px var(--ops-ui); cursor: pointer; white-space: nowrap }
html[data-view="ops"] .ops-sopts button:first-child { border-left: 0 }
html[data-view="ops"] .ops-sopts button:hover { color: var(--o-strong); background: var(--o-hover) }
html[data-view="ops"] .ops-sopts button[aria-pressed="true"] { color: var(--o-strong); background: color-mix(in srgb, var(--o-sel) 18%, transparent); box-shadow: inset 0 -2px 0 var(--o-sel) }
html[data-view="ops"] .ops-sabout p { margin: 0 0 8px; color: var(--o-dim); max-width: 64ch }
html[data-view="ops"] .ops-sabout a { color: var(--o-text) }
html[data-view="ops"] .ops-sdone { border-color: var(--o-sel); color: var(--o-strong) }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-set { padding: 0; place-items: stretch }
  html[data-view="ops"] .ops-sbox { width: 100%; max-height: none; height: 100dvh; border: 0; border-radius: 0 }
  html[data-view="ops"] .ops-srow { grid-template-columns: 1fr }
  html[data-view="ops"] .ops-sopts { justify-content: flex-start; justify-self: start }
}

/* ---------- Broadcast mode ---------- */
html[data-view="ops"] .ops-lower { left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; display: block }
html[data-view="ops"] .ops-lower[hidden] { display: none }
html[data-view="ops"] .ops-lower > * { pointer-events: none }
html[data-view="ops"] .ops-cbar { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--ops-r); background: rgba(8, 11, 14, .86); color: #e8ecef; pointer-events: auto; transition: opacity .4s }
html[data-view="ops"] .ops-cbar button { appearance: none; height: 32px; min-width: 32px; display: grid; place-items: center; padding: 0 8px; border: 0; border-radius: 2px; background: none; color: inherit; cursor: pointer; font: 700 12px var(--ops-cond); letter-spacing: .14em; text-transform: uppercase }
html[data-view="ops"] .ops-cbar button svg { width: 18px; height: 18px }
html[data-view="ops"] .ops-cbar button:hover { background: rgba(255, 255, 255, .1) }
html[data-view="ops"] .ops-cbar span { padding: 0 8px; font: 500 12px var(--ops-mono); color: #9aa5b0 }
html[data-view="ops"] .ops-cbar .ops-cexit { border: 1px solid rgba(255, 255, 255, .2) }
html[data-view="ops"].ops-cast-idle .ops-cbar { opacity: 0 }
html[data-view="ops"].ops-cast-idle .ops-on .leaflet-control-zoom { opacity: 0 }
html[data-view="ops"] .ops-ckpi { position: absolute; top: 16px; right: 16px; padding: 8px 14px; background: rgba(8, 11, 14, .86); color: #fff; border-top: 2px solid #d32f2f; text-align: right }
html[data-view="ops"] .ops-ckpi small { display: block; font: 700 11px var(--ops-cond); letter-spacing: .16em; text-transform: uppercase; color: #9aa5b0 }
html[data-view="ops"] .ops-ckpi b { font: 600 30px/1.1 var(--ops-mono) }
html[data-view="ops"] .ops-cleg { position: absolute; top: 16px; left: 16px; margin: 0; padding: 8px 12px; list-style: none; display: grid; gap: 4px; background: rgba(8, 11, 14, .86); color: #e8ecef; font: 600 13px var(--ops-ui) }
html[data-view="ops"] .ops-cleg li { display: flex; align-items: center; gap: 8px }
html[data-view="ops"] .ops-cleg li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85) }
html[data-view="ops"] .ops-l3 { position: absolute; left: 32px; right: 32px; bottom: 64px; display: flex; flex-direction: column; align-items: flex-start; max-width: 1100px }
html[data-view="ops"] .ops-lt { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: #0b0e11; color: #fff }
html[data-view="ops"] .ops-lt .brand { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding-left: 14px; border-left: 1px solid #2c333b; color: #c9d1d9 }
html[data-view="ops"] .ops-lt .brand .ops-logo { width: 20px; height: 20px; color: #fff }
html[data-view="ops"] .ops-lb { display: flex; align-items: flex-start; gap: 14px; padding: 12px 18px; background: rgba(247, 248, 245, .97); color: #0b0e11; border-left: 5px solid var(--c, #d32f2f); max-width: 100%; box-sizing: border-box; font: inherit; animation: ops-up .35s ease-out }
html[data-view="ops"] .ops-lb .k { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c); display: grid; place-items: center; color: #0b0e11; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .3) }
html[data-view="ops"] .ops-lb .k svg { width: 20px; height: 20px }
html[data-view="ops"] .ops-lb small { display: block; font: 700 13px var(--ops-cond); letter-spacing: .12em; text-transform: uppercase; color: #5c6570 }
html[data-view="ops"] .ops-lb p { margin: 2px 0 0; font: 600 24px/1.25 var(--ops-ui); text-wrap: balance }
html[data-view="ops"] .ops-tickh { position: absolute; left: 0; right: 0; bottom: 0 }
html[data-view="ops"] .ops-tick { display: flex; align-items: stretch; height: 40px; background: #0b0e11; color: #e8ecef; border-top: 1px solid #2c333b }
html[data-view="ops"] .ops-tick > b { flex: none; display: grid; place-items: center; padding: 0 16px; background: #d32f2f; color: #fff; font: 700 14px var(--ops-cond); letter-spacing: .18em; text-transform: uppercase }
html[data-view="ops"] .ops-tick-in { flex: 1; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent) }
html[data-view="ops"] .ops-tick-run { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; white-space: nowrap; animation: ops-crawl var(--d, 60s) linear infinite }
html[data-view="ops"] .ops-tick-run span { display: inline-flex; align-items: baseline; gap: 10px; padding: 0 28px 0 0; font: 500 16px var(--ops-ui) }
html[data-view="ops"] .ops-tick-run span::after { content: "■"; margin-left: 18px; font-size: 8px; color: #d32f2f; align-self: center }
html[data-view="ops"] .ops-tick-run time { font: 600 14px var(--ops-mono); color: #ffb547 }
@keyframes ops-crawl { from { transform: translateX(0) } to { transform: translateX(-50%) } }
html[data-view="ops"].ops-cast .ops-on :is(.ops-mini, .ops-toasts, .ops-trf, .ops-lyr, .leaflet-control-scale, .leaflet-control-attribution) { display: none !important }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-l3 { left: 8px; right: 8px; bottom: 48px }
  html[data-view="ops"] .ops-lb p { font-size: 16px }
  html[data-view="ops"] .ops-lt .brand, html[data-view="ops"] .ops-cleg { display: none }
  html[data-view="ops"] .ops-tick { height: 34px }
  html[data-view="ops"] .ops-tick-run span { font-size: 13px }
}

/* Phones: Layers from the map's own tools (the rail is not shown there). */
@media (max-width: 760px) {
  html[data-view="ops"] .ops-home { width: 44px }
  html[data-view="ops"] .ops-logo { width: 24px; height: 24px }
  html[data-view="ops"] .ops-toasts { right: 8px; bottom: 26px; width: calc(100% - 70px) }
  html[data-view="ops"] .ops-hud:has(.ops-trf:not([hidden])) .ops-card { right: 8px }
}

/* The rest of the classic site's look, redrawn: the legend's swatches as the pins' discs, the toggles, the
   Trump box, the source filter, the search (20 Oct: "don't leave colours or designs from the previous design"). */
html[data-view="ops"] .ops-on .legend .sw { width: 14px !important; height: 14px !important; border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) !important; border: 0 !important; display: inline-grid; place-items: center }
html[data-view="ops"] .ops-on .legend .sw .tick { font-size: 9px; line-height: 1; color: var(--o-bg) }
html[data-view="ops"] .ops-on .legend .leg-item:not(.on) .sw { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--o-dim) !important }
html[data-view="ops"] .ops-on .legend .leg-item:not(.on) .sw .tick { visibility: hidden }
html[data-view="ops"] .ops-on :is(.card .actions .toggle, .pop-toggle, .toggle-phase) {
  appearance: none; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--o-sel) !important;
  font: 700 11px var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase; cursor: pointer
}
html[data-view="ops"] .ops-on :is(.card .actions .toggle, .pop-toggle, .toggle-phase):hover { color: var(--o-strong) !important; text-decoration: underline }
html[data-view="ops"] .ops-on .trump-pin { border: 1px solid var(--o-line) !important; border-left: 2px solid var(--o-sel) !important; border-radius: var(--ops-r) !important; background: var(--o-raised) !important; box-shadow: none !important }
html[data-view="ops"] .ops-on .trump-pin .tp-head b { font: 700 12px var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--o-strong) !important }
html[data-view="ops"] .ops-on :is(.feed-sub, .rail-head) :is(span, h2, small) { font-family: var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--o-dim) !important }
html[data-view="ops"] .ops-on .lf-btn { border-radius: 2px !important; border: 1px solid var(--o-line-2) !important; background: none !important; color: var(--o-text) !important; box-shadow: none !important; font: 600 12px var(--ops-ui) !important }
html[data-view="ops"] .ops-on .lf-btn .sw, html[data-view="ops"] .ops-on .lf-menu .sw { border-radius: 50% !important }
html[data-view="ops"] .ops-on .lf-menu { border-radius: var(--ops-r) !important; background: var(--o-raised) !important; border: 1px solid var(--o-line-2) !important; box-shadow: var(--shadow-pop) !important }
html[data-view="ops"] .ops-on .lf-menu button { border-radius: 2px !important; color: var(--o-text) !important; background: none !important }
html[data-view="ops"] .ops-on .lf-menu button[aria-pressed="true"] { background: color-mix(in srgb, var(--o-sel) 16%, transparent) !important }
html[data-view="ops"] .ops-on .feed-search-btn { border: 0 !important; background: none !important; color: var(--o-dim) !important; box-shadow: none !important }
html[data-view="ops"] .ops-on .feed-search :is(input, .fs-go) { border-radius: 2px !important; border: 1px solid var(--o-line-2) !important; background: var(--o-bg) !important; color: var(--o-text) !important; box-shadow: none !important; font: 13px var(--ops-ui) !important }
html[data-view="ops"] .ops-on .feed-search .fs-go { background: none !important; font: 700 11px var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase }
html[data-view="ops"] .ops-on .card[class*="lean-"] { border-left: 1px solid var(--o-line) !important }
/* The notes that open on the map, in this view's style. */
html[data-view="ops"] .ops-on .leaflet-popup-content { font: 13px/1.45 var(--ops-ui); color: var(--o-text) }
html[data-view="ops"] .ops-on .leaflet-popup-content :is(.pop-meta, .pop-when, time) { font-family: var(--ops-mono) !important; color: var(--o-dim) !important; font-size: 11.5px }
html[data-view="ops"] .ops-on .leaflet-popup-content a { color: var(--o-text) }
html[data-view="ops"] .ops-on .leaflet-popup-close-button { color: var(--o-dim) !important }

/* 20 Oct, round 3 (user's list). Traffic on: the whole button lit, no dot. */
html[data-view="ops"] .ops-btn.on::after { content: none; display: none }
html[data-view="ops"] .ops-btn.on { background: var(--o-sel); border-color: var(--o-sel); color: var(--o-sel-ink) }
html[data-view="ops"] .ops-btn.on:hover { background: color-mix(in srgb, var(--o-sel) 85%, var(--o-strong)); color: var(--o-sel-ink) }
/* The column's header already says Brief: no second heading over Latest developments. */
html[data-view="ops"] .ops-left .situation .sit-head h2 { display: none !important }
html[data-view="ops"] .ops-left .situation .sit-head { justify-content: flex-end }

/* The All page's brief: each desk's latest developments, in its box. */
html[data-view="ops"] .ops-th { padding: 0 0 18px; margin: 0 0 18px }
html[data-view="ops"] .ops-th-sub { margin: 2px 0 10px; font: 500 11.5px var(--ops-mono) !important; color: var(--o-faint) }
html[data-view="ops"] .ops-th-pts { list-style: none; margin: 0; padding: 0; counter-reset: pt; border: 1px solid var(--o-line); border-radius: var(--ops-r); background: var(--o-raised) }
html[data-view="ops"] .ops-th-pts li { position: relative; padding: 10px 12px 10px 40px; border-top: 1px solid var(--o-line); counter-increment: pt; font-size: 13.5px; line-height: 1.5; color: var(--o-text) }
html[data-view="ops"] .ops-th-pts li:first-child { border-top: 0 }
html[data-view="ops"] .ops-th-pts li::before { content: counter(pt, decimal-leading-zero); position: absolute; left: 12px; top: 12px; font: 600 11px/1.5 var(--ops-mono); color: var(--o-sel) }
html[data-view="ops"] .ops-th-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font: 700 11.5px var(--ops-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--o-sel); text-decoration: none }
html[data-view="ops"] .ops-th-more svg { width: 12px; height: 12px }
html[data-view="ops"] .ops-th-more:hover { color: var(--o-strong) }

/* On the way to another desk: a thin line runs under the bar, the map dims a little. */
html[data-view="ops"].ops-going .ops-bar::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 40%; background: var(--o-sel); animation: ops-go 1s ease-in-out infinite }
@keyframes ops-go { 0% { transform: translateX(-100%) } 100% { transform: translateX(250%) } }
html[data-view="ops"].ops-going .ops-on .leaflet-container { filter: brightness(.8); transition: filter .2s }
/* The page after it fades in: the frame stays put, only what changes cross-fades. */
html[data-view="ops"] .ops-strip { view-transition-name: ops-strip }
html[data-view="ops"] .ops-nav { view-transition-name: ops-nav }
html[data-view="ops"] .ops-acts { view-transition-name: ops-acts }

/* Phones: the desks in the bar (20 Oct: no way to switch desks); each tab shows only its own part. */
@media (max-width: 760px) {
  html[data-view="ops"] .ops-bar .mast { display: none }
  html[data-view="ops"] .ops-bar header.top { display: flex !important; flex: 1 1 auto; min-width: 0; height: 100% }
  html[data-view="ops"] .ops-bar .dt-row { overflow-x: auto; scrollbar-width: none }
  html[data-view="ops"] .ops-bar .dt-btn { padding: 0 11px; gap: 6px; font-size: 12px !important; letter-spacing: .1em }
  html[data-view="ops"] .ops-bar { gap: 0; padding-right: 6px }
  html[data-view="ops"] .ops-acts { gap: 4px; margin-left: 6px }
  html[data-view="ops"] .ops-acts :is([data-op="theme"]) { display: none !important }
  html[data-view="ops"] .ops-on:not([data-ops-ptab="map"]) .ops-dock { display: none }
  html[data-view="ops"] .ops-on > :is(.ops-left, .ops-right) { min-height: calc(100svh - 120px) }
}

/* ==========================================================================
   20 Oct, round 4 (user's list).
   ========================================================================== */
/* Phones: the desks beside the mark, as on a computer; every tab but Map shows only its own part, never the map. */
@media (max-width: 760px) {
  html[data-view="ops"] .ops-bar header.top { justify-content: flex-start !important }
  html[data-view="ops"] .ops-bar header.top .brand { margin: 0 !important }
  html[data-view="ops"] .ops-on:not([data-ops-ptab="map"]) > .ops-stage { display: none !important }
}

/* Traffic: the button turns it on and off; the arrow beside it opens its options. */
html[data-view="ops"] .ops-trfw { display: inline-flex; align-items: stretch }
html[data-view="ops"] .ops-trfw [data-op="traffic"] { border-top-right-radius: 0; border-bottom-right-radius: 0 }
html[data-view="ops"] .ops-trfw .ops-trfm { width: 24px !important; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0 }
html[data-view="ops"] .ops-trfw .ops-trfm svg { width: 13px; height: 13px }
html[data-view="ops"] .ops-trfw [data-op="traffic"].on + .ops-trfm { border-color: var(--o-sel) }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-trfw .ops-trfm { display: inline-flex !important; width: 22px !important }
}

/* An aircraft or a ship: one screen, no scrolling. */
html[data-view="ops"] .ops-card { width: 320px; max-height: none; overflow: visible }
html[data-view="ops"] .ops-chead { display: flex; align-items: center; gap: 10px; margin: 0 0 8px }
html[data-view="ops"] .ops-chead > div:last-child { min-width: 0 }
html[data-view="ops"] .ops-chead .ops-photo { flex: none; width: 104px }
html[data-view="ops"] .ops-chead .ops-photo:empty { display: none }
html[data-view="ops"] .ops-chead .ops-photo a { margin: 0 }
html[data-view="ops"] .ops-chead .ops-photo img { aspect-ratio: 3 / 2; object-fit: cover }
html[data-view="ops"] .ops-chead .ops-photo small { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
html[data-view="ops"] .ops-chead .ops-csub { margin: 2px 0 0 }
html[data-view="ops"] .ops-card .ops-route { display: block; margin: 0 0 8px; padding: 7px 9px; background: var(--o-hover); border-radius: 2px }
html[data-view="ops"] .ops-rline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin: 0 }
html[data-view="ops"] .ops-rline > i { color: var(--o-sel); display: grid }
html[data-view="ops"] .ops-rline > i svg { width: 15px; height: 15px }
html[data-view="ops"] .ops-rp { display: flex; flex-direction: column; min-width: 0 }
html[data-view="ops"] .ops-rp:last-child { text-align: right }
html[data-view="ops"] .ops-rp b { font: 600 15px var(--ops-mono); color: var(--o-strong) }
html[data-view="ops"] .ops-rp span { font-size: 11.5px; color: var(--o-dim); overflow-wrap: anywhere }
html[data-view="ops"] .ops-rwait { grid-column: 1 / -1; font-size: 12px; color: var(--o-faint) }
html[data-view="ops"] .ops-rbtn { appearance: none; width: 100%; margin-top: 7px; height: 28px; border: 1px solid var(--o-sel); border-radius: 2px; background: none; color: var(--o-strong); font: 700 11.5px var(--ops-cond); letter-spacing: .12em; text-transform: uppercase; cursor: pointer }
html[data-view="ops"] .ops-rbtn[aria-pressed="true"] { background: var(--o-sel); color: var(--o-sel-ink) }
html[data-view="ops"] .ops-card .ops-route small { display: block; margin-top: 5px; font-size: 10.5px; color: var(--o-faint); flex-basis: auto }
html[data-view="ops"] .ops-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 10px }
html[data-view="ops"] .ops-card .ops-clinks { margin-top: 8px }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-card { max-height: none; width: auto }
  html[data-view="ops"] .ops-chead .ops-photo { width: 84px }
  html[data-view="ops"] .ops-card h3 { font-size: 17px }
}

/* The numbers' long lists: a plain button to open the whole list (20 Oct: no sign it could be opened). */
html[data-view="ops"] .ops-left :is(.led-tog, .rows-tog, .ir-clamp-tog) {
  display: flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 30px; margin: 10px 0 0 !important; padding: 0 10px !important;
  border: 1px solid var(--o-line-2) !important; border-radius: 2px !important; background: var(--o-panel) !important; color: var(--o-sel) !important;
  font: 700 11.5px var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: none !important
}
html[data-view="ops"] .ops-left :is(.led-tog, .rows-tog, .ir-clamp-tog)::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg) }
html[data-view="ops"] .ops-left :is(.led-more.open .led-tog, .open > .rows-tog, .open > .ir-clamp-tog)::after { transform: translateY(2px) rotate(-135deg) }
html[data-view="ops"] .ops-left :is(.led-tog, .rows-tog, .ir-clamp-tog):hover { border-color: var(--o-sel) !important; color: var(--o-strong) !important }

/* No text cut anywhere in the panels: words wrap inside their box at every width. */
html[data-view="ops"] .ops-left :is(.tally-box, .led-more, .front-card, .situation) { min-width: 0; max-width: 100% }
html[data-view="ops"] .ops-left .tally-box table { width: 100%; table-layout: auto }
html[data-view="ops"] .ops-left .tally-box :is(td, th) { overflow-wrap: anywhere; word-break: normal; white-space: normal }
html[data-view="ops"] .ops-left .tally-box .sl { white-space: normal }
html[data-view="ops"] .ops-left .tally-box table.list { display: block; overflow-x: auto; scrollbar-width: thin }
html[data-view="ops"] .ops-left .tally-box h3 { white-space: normal; overflow: visible; text-overflow: clip }
html[data-view="ops"] .ops-left .stat3 > div { min-width: 0 }
html[data-view="ops"] .ops-left .stat3 b { font-size: 1.35rem; overflow-wrap: anywhere }
html[data-view="ops"] .ops-left .stat3 span { white-space: normal }
html[data-view="ops"] .ops-left .num-cat button { white-space: nowrap; min-width: 0 }

/* The events: the next page comes as the reader reaches the end. */
html[data-view="ops"] .ops-log-more { padding: 6px 4px 10px }
html[data-view="ops"] .ops-log-more .more { margin: 0 }
html[data-view="ops"] .ops-evf .ops-log-n:empty { display: none }

/* The hours under the map: zoom on a phone. */
html[data-view="ops"] .ops-amx-sc { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin }
html[data-view="ops"] .ops-mz { display: inline-flex; margin-left: auto; flex: none; gap: 0; border: 1px solid var(--o-line-2); border-radius: 2px; overflow: hidden }
html[data-view="ops"] .ops-mz button { appearance: none; width: 34px; height: 28px; border: 0; background: none; color: var(--o-strong); font: 600 17px var(--ops-mono); cursor: pointer }
html[data-view="ops"] .ops-mz button + button { border-left: 1px solid var(--o-line-2) }
html[data-view="ops"] .ops-mz button:disabled { opacity: .35; cursor: default }
html[data-view="ops"] .ops-amx .labs-bg { fill: var(--o-panel, var(--o-bg)) }
html[data-view="ops"] .ops-amx .tk.dn { font-size: 9.5px }
@media (min-width: 761px) { html[data-view="ops"] .ops-mz button { width: 24px; height: 20px; font-size: 14px; line-height: 1 } }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-mz { display: inline-flex }
  html[data-view="ops"] .ops-act-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
  html[data-view="ops"] .ops-amx { touch-action: pan-y; max-height: none }
  html[data-view="ops"] .ops-amx .lab { font-size: 12px }
  html[data-view="ops"] .ops-amx .tk { font-size: 11.5px }
}

/* Broadcast: In the region, the two clocks, a light legend, the time lapse. */
html[data-view="ops"] .ops-lt .clk { display: inline-flex; flex-direction: column; gap: 0; line-height: 1.15; font-size: 15px }
html[data-view="ops"] .ops-lt .clk > span { display: inline-flex; gap: 8px; justify-content: space-between }
html[data-view="ops"] .ops-lt .clk small { font: 700 11px var(--ops-cond); letter-spacing: .14em; text-transform: uppercase; color: #8a939d }
html[data-view="ops"] .ops-lb .k { display: none }
html[data-view="ops"] .ops-lb { border-left-width: 5px }
html[data-view="ops"] .ops-clegh { position: absolute; top: 16px; left: 16px; max-width: min(340px, 36vw); pointer-events: none }
html[data-view="ops"] .ops-clegh .ops-cleg { position: static; display: block; padding: 8px 10px; background: rgba(8, 11, 14, .62); border-radius: 2px; font: 500 12px var(--ops-ui); color: #dfe5ea }
html[data-view="ops"] .ops-cleg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 12px }
html[data-view="ops"] .ops-cleg ul + ul { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12) }
html[data-view="ops"] .ops-cleg li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
html[data-view="ops"] .ops-cleg ul:first-child li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7) }
html[data-view="ops"] .ops-cleg .kinds li::before { content: none }
html[data-view="ops"] .ops-cleg .g { display: inline-grid; width: 13px; height: 13px; color: #dfe5ea }
html[data-view="ops"] .ops-cleg .g svg { width: 13px; height: 13px }
html[data-view="ops"] .ops-cbar { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 32px) }
html[data-view="ops"] .ops-cbar button { gap: 6px; display: inline-flex; align-items: center }
html[data-view="ops"] .ops-cbar button[aria-pressed="true"] { background: #e0a43c; color: #17110a }
/* The button's own word takes the button's colour, not the dim one of the bar's labels (21 Oct: "Traffic" unclear). */
html[data-view="ops"] .ops-cbar button span { padding: 0; color: inherit; font: inherit }
html[data-view="ops"] .ops-cbar button[data-cast="traffic"] { border: 1px solid rgba(255, 255, 255, .28) }
/* A ship's or an aircraft's card shows in broadcast too (21 Oct), clear of the bar at the top. */
html[data-view="ops"].ops-cast .ops-on .ops-card { top: 64px }
html[data-view="ops"] .ops-csel select { height: 32px; max-width: 250px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; background: #0b0e11; color: #e8ecef; font: 600 12.5px var(--ops-ui) }
html[data-view="ops"] .ops-lapse { position: absolute; left: 32px; bottom: 32px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 18px; padding: 12px 16px; background: rgba(8, 11, 14, .88); color: #fff; border-left: 4px solid #e0a43c; pointer-events: auto }
html[data-view="ops"] .ops-lapse b { grid-column: 1 / -1; font: 700 13px var(--ops-cond); letter-spacing: .16em; text-transform: uppercase; color: #e0a43c }
html[data-view="ops"] .ops-lapse time { font: 600 26px var(--ops-mono) }
html[data-view="ops"] .ops-lapse small { font: 500 14px var(--ops-mono); color: #c9d1d9; text-align: right }
html[data-view="ops"] .ops-lbar { grid-column: 1 / -1; height: 3px; background: rgba(255, 255, 255, .15); margin-top: 6px }
html[data-view="ops"] .ops-lbar i { display: block; height: 100%; width: 0; background: #e0a43c }
html[data-view="ops"] .ops-lapse button { grid-column: 1 / -1; justify-self: start; margin-top: 8px; appearance: none; height: 26px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 2px; background: none; color: #fff; font: 700 11.5px var(--ops-cond); letter-spacing: .12em; text-transform: uppercase; cursor: pointer }
html[data-view="ops"].ops-lapsing .ops-on .leaflet-marker-pane > *, html[data-view="ops"].ops-lapsing .ops-on .leaflet-overlay-pane canvas { visibility: hidden }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-clegh { display: none }
  html[data-view="ops"] .ops-lapse { left: 8px; right: 8px; bottom: 8px }
  html[data-view="ops"] .ops-lapse time { font-size: 18px }
  html[data-view="ops"] .ops-csel select { max-width: 180px }
}
html[data-view="ops"] .ops-hud > :is(.ops-card, .ops-menu) { z-index: 1100 }
/* The map fades in once it is in its place, not while the frame settles round it. */
html[data-view="ops"] .ops-on:not(.ops-ready) :is(#map, #h-map) .leaflet-map-pane { opacity: 0 }
html[data-view="ops"] .ops-on :is(#map, #h-map) .leaflet-map-pane { transition: opacity .25s ease-out }
/* A box name with its chart button wraps like any title; a reply line wraps rather than ending in dots (20 Oct: nothing cut). */
html[data-view="ops"] .ops-on .tally-box h3 .spot { white-space: normal !important; max-width: 100%; text-align: left; display: inline !important; height: auto; padding: 0 !important }
html[data-view="ops"] .ops-on .tally-box h3 .spot .spot-end { white-space: nowrap }
html[data-view="ops"] .ops-on .card .reply-to { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: block; max-width: 100% }
html[data-view="ops"] .ops-on .card .meta .src-link { overflow-wrap: anywhere }
html[data-view="ops"] .ops-act-h small { white-space: normal; overflow: visible; text-overflow: clip }
/* The numbers' lists in the narrow panel: each row a short block, its date beside it, each figure named. */
html[data-view="ops"] .ops-left .tally-box table.list[data-ops-l] { display: block !important; overflow: visible !important; width: 100% }
html[data-view="ops"] .ops-left table.list[data-ops-l] tbody { display: block }
html[data-view="ops"] .ops-left table.list[data-ops-l] tr:first-child { display: none }
html[data-view="ops"] .ops-left table.list[data-ops-l] tr { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--o-line) }
html[data-view="ops"] .ops-left .led-more:not(.open) table.list[data-ops-l] tr.led-rest { display: none }
html[data-view="ops"] .ops-left table.list[data-ops-l] td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0 }
html[data-view="ops"] .ops-left table.list[data-ops-l] td:first-child { grid-row: span 6 }
html[data-view="ops"] .ops-left table.list[data-ops-l] td:nth-child(2) { font-weight: 600; color: var(--o-strong) }
html[data-view="ops"] .ops-left table.list[data-ops-l] td[data-h]::before { content: attr(data-h) ": "; color: var(--o-faint); font-size: .92em }
/* A picked aircraft or ship: the map zoom buttons step aside for its card. */
html[data-view="ops"] .map-wrap:has(.ops-card:not([hidden])) .leaflet-control-zoom { visibility: hidden }
html[data-view="ops"] .ops-est { margin: 0 0 8px; padding: 5px 8px; border-left: 2px solid var(--o-sel); background: var(--o-hover); font-size: 11.5px; color: var(--o-dim) }

/* 21 Oct (user: the note's text blended into its background in light mode): the notes and pin sheets take the
   view's own text colour in both themes; the token they used is the page's background in this view. */
html[data-view="ops"] :is(.leaflet-popup, .pin-sheet) { --t-on-light: var(--o-text) }
html[data-view="ops"] .leaflet-popup-content .pop-h { color: var(--o-strong) }
/* 21 Oct: more on each aircraft and ship (flags, the flight number as sold, airframe and owner, times on the route). */
html[data-view="ops"] .ops-flag { display: inline-block; width: 16px; height: 12px; margin: 0 5px 0 0; vertical-align: -1px; border-radius: 1px; box-shadow: 0 0 0 1px var(--o-line); object-fit: cover }
html[data-view="ops"] .ops-card h3 small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--o-dim); letter-spacing: .04em }
html[data-view="ops"] .ops-card dl.ops-wide { grid-template-columns: minmax(0, 1fr); margin-top: 6px }
html[data-view="ops"] .ops-card dl.ops-wide dd { white-space: normal; overflow-wrap: anywhere }
html[data-view="ops"] .ops-card .ops-rtimes { margin: 5px 0 0; font: 500 11.5px var(--ops-mono); color: var(--o-dim) }

/* ---------- A side menu inside the panel (user, 21 Oct: "an inside side menu to separate the categories, like the
   side menu on the left, a sub side menu; for the timelines too"): the arenas or fronts, the numbers' categories,
   the timeline's eras and the All page's desks are listed down the panel's left edge; the one picked shows beside. ---------- */
/* 21 Oct, later (user: "the sub side menu should look like the main side menu to its left, and show the main
   menu's category it comes out of"): a second rail down the panel's whole left edge, in the main rail's look,
   headed by the main item's icon and name; a notch on the main item points into it. */
/* 21 Oct, later (user: "more scrolling space than needed"; "the sub side menu should not scroll down with the column"):
   the rail spans every row of the grid, the room it needs going to the last row only (a span of 40 rows grew each of
   them), and it stays in view as the panel scrolls; its stripe is the panel's own, down the panel's whole height. */
html[data-view="ops"] .ops-left .ops-pane.on:has(:is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav)) {
  display: grid !important; grid-template-columns: var(--ops-sub-w, 92px) minmax(0, 1fr); grid-template-rows: repeat(39, auto) 1fr; column-gap: 14px; align-content: start; align-items: start;
  padding: 0 14px 22px 0 !important
}
html[data-view="ops"] .ops-left .ops-panes:has(> .ops-pane.on :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav)) {
  background: linear-gradient(to right, var(--o-bg) 0 var(--ops-sub-w, 92px), var(--o-line) var(--ops-sub-w, 92px) calc(var(--ops-sub-w, 92px) + 1px), transparent 0) var(--o-panel)
}
html[data-view="ops"] .ops-left .ops-panes > footer { position: relative; background: var(--o-panel) }
html[data-view="ops"] .ops-left .ops-pane.on:has(:is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav))::before { content: ""; grid-column: 2; height: 14px }
html[data-view="ops"] .ops-left .ops-pane :is(:has(> .pager-fronts), :has(> .pager-timeline), :has(> .num-cat), .ops-subwrap) { display: contents !important }
html[data-view="ops"] .ops-left .ops-pane.on:has(:is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav)) :is(> *, :is(:has(> .pager-fronts), :has(> .pager-timeline), :has(> .num-cat), .ops-subwrap) > *) { grid-column: 2; min-width: 0 }
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) {
  grid-column: 1 !important; grid-row: 1 / -1; position: sticky; top: 0; align-self: start;
  max-height: calc(100dvh - var(--ops-strip-h) - var(--ops-bar-h) - 41px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: 0; width: auto; max-width: none;
  margin: 0 !important; padding: 6px 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important
}
/* 26 Oct (user: "in timeline … you cant scroll in the side sub menu down to the last one"): the rail is as tall as the
   panel it sits in, not the window less a guess, so its last item scrolls into view. */
@media (min-width: 761px) {
  html[data-view="ops"] .ops-left .ops-panes { container-type: size }
  html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) { max-height: 100cqh }
}
/* No head on the rail: the main rail beside it names it (user, 21 Oct). */
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button {
  appearance: none; position: relative; display: block; width: 100%; min-width: 0; height: auto; flex: none; margin: 0 !important;
  padding: 10px 6px 9px !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: var(--o-dim) !important; text-align: center !important;
  font: 600 10.5px/1.2 var(--ops-cond) !important; letter-spacing: .1em !important; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; cursor: pointer
}
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button::after { content: none !important }
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button::before { content: none !important }
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button:hover { background: var(--o-hover) !important; color: var(--o-strong) !important }
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button:is(.on, [aria-pressed="true"], [aria-selected="true"]) { color: var(--o-strong) !important; background: var(--o-panel) !important }
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button:is(.on, [aria-pressed="true"], [aria-selected="true"])::before {
  content: "" !important; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--o-sel)
}
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button:focus-visible { outline: 2px solid var(--o-sel); outline-offset: -2px }
/* The main item the rail comes out of: a notch on its edge, pointing in. */
@media (min-width: 761px) {
  html[data-view="ops"] .ops-on:not(.ops-noleft):has(.ops-left .ops-pane.on :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav)) .ops-nav button[aria-pressed="true"]::after {
    content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-right: 0; border-left: 6px solid var(--o-sel)
  }
}
html[data-view="ops"] .ops-left :is(.pager-fronts, .pager-timeline) ~ .pg-dots .pg-name { display: inline !important }
html[data-view="ops"] .ops-left :is(.pager-fronts, .pager-timeline) .pg-slide:not(.on) { display: none !important }
html[data-view="ops"] .ops-th[data-th]:not(.on) { display: none }
html[data-view="ops"] .ops-subwrap .ops-th { border-bottom: 0; margin-bottom: 0 }
@media (max-width: 760px) { html[data-view="ops"] { --ops-sub-w: 84px } }
/* The All page's Layers sit on the map at its bottom right (user, 21 Oct); the menu opens above the button. */
html[data-view="ops"] .ops-lyrbtn {
  position: absolute; right: 10px; bottom: 28px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  border: 1px solid var(--o-line-2); border-radius: var(--ops-r); background: var(--o-glass); color: var(--o-text); cursor: pointer;
  font: 700 11.5px var(--ops-cond); letter-spacing: .12em; text-transform: uppercase
}
html[data-view="ops"] .ops-lyrbtn svg { width: 17px; height: 17px }
html[data-view="ops"] .ops-lyrbtn:hover, html[data-view="ops"] .ops-lyrbtn[aria-expanded="true"] { border-color: var(--o-sel); color: var(--o-strong) }
html[data-view="ops"] .ops-hud:has(.ops-lyrbtn) .ops-lyr { left: auto; right: 10px; top: auto; bottom: 68px }
html[data-view="ops"].ops-cast .ops-lyrbtn { display: none }
/* Beside the side menu the numbers' boxes keep their room for the figures. */
html[data-view="ops"] .ops-left :has(> .num-cat) .tally-box { padding-left: 12px !important; padding-right: 12px !important }
html[data-view="ops"] .ops-left :has(> .num-cat) .tally-box table { width: 100% }
html[data-view="ops"] .ops-left :has(> .num-cat) .tally-box th { white-space: nowrap; letter-spacing: .04em !important }
@media (max-width: 760px) { html[data-view="ops"] { --ops-sub-w: 78px } html[data-view="ops"] .ops-left :has(> .num-cat) .tally-box { padding-left: 8px !important; padding-right: 8px !important } }
/* The side menu names the arena, the era and the desk, so the box beside it does not say it again (user, 21 Oct). */
html[data-view="ops"] .ops-left .pager-fronts .front-card .front-head strong,
html[data-view="ops"] .ops-left .pager-timeline .phase-head > strong,
html[data-view="ops"] .ops-subwrap .ops-th header h3 { display: none !important }
html[data-view="ops"] .ops-subwrap .ops-th header { justify-content: flex-end }
html[data-view="ops"] .ops-left .pager-fronts .front-card .front-head:not(:has(> :not(strong))) { display: none !important }
/* One box, in the brief's look, in every panel (user, 21 Oct: "the border of the boxes like the brief's"): no frame
   round the frame; each card, table or era is the brief's raised box. */
html[data-view="ops"] .ops-left :is(.pager-fronts, .pager-numbers, .pager-timeline) { border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important }
html[data-view="ops"] .ops-left :is(.pager-numbers .tally-box, .pager-timeline .phase-card, .num-grid > *, .tally:not(:has(.pager)) .tally-box) {
  margin: 0 !important; border: 1px solid var(--o-line) !important; border-radius: var(--ops-r) !important; background: var(--o-raised) !important; box-shadow: none !important
}
html[data-view="ops"] .ops-left .pager-timeline .phase-card { padding: 12px !important }
html[data-view="ops"] .ops-left .pager-numbers .tally-box { padding-top: 12px !important; padding-bottom: 12px !important }
/* A timeline era is read whole: no Read more or Show less (user, 21 Oct). */
html[data-view="ops"] .ops-left .phase-card .full { display: block !important }
html[data-view="ops"] .ops-left .phase-card .toggle-phase { display: none !important }
html[data-view="ops"] .ops-left .phase-card.expandable { cursor: auto }
html[data-view="ops"] .ops-left .phase-card .full p { font-size: inherit; line-height: 1.5 }

/* ==========================================================================
   21 Oct, round 5 (user's list).
   ========================================================================== */
/* The main rail is its icons only while a panel with its own side menu is open. */
@media (min-width: 761px) {
  html[data-view="ops"] .ops-on.ops-slim { --ops-nav-w: 44px }
  html[data-view="ops"] .ops-on.ops-slim .ops-nav button { padding: 11px 0 }
  html[data-view="ops"] .ops-on.ops-slim .ops-nav button span { display: none }
}
/* A box's name over its box. */
html[data-view="ops"] .ops-left h3.ops-boxhead { margin: 0 0 7px !important; padding: 0 2px; font: 700 13px/1.3 var(--ops-cond) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--o-dim) !important; white-space: normal; border: 0 !important; background: none !important }
html[data-view="ops"] .ops-left h3.ops-boxhead .spot { white-space: normal !important; max-width: 100%; text-align: left; display: inline !important; height: auto; padding: 0 !important; font: inherit !important; letter-spacing: inherit !important; color: inherit !important }
html[data-view="ops"] .ops-left h3.ops-boxhead .spot .spot-end { white-space: nowrap }
html[data-view="ops"] .ops-left h3.ops-boxhead small { font: 500 11px var(--ops-ui) !important; letter-spacing: 0 !important; text-transform: none; color: var(--o-faint) }
html[data-view="ops"] .ops-left .tally-box + h3.ops-boxhead { margin-top: 18px !important }
html[data-view="ops"] .ops-on .x-desk { height: auto !important; min-height: 24px; padding: 4px 8px !important; white-space: normal; line-height: 1.3; text-align: left }
/* The side menu's names break between syllables, not anywhere in a word ("INTERVEN TION"). */
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button { overflow-wrap: break-word !important; hyphens: auto; font-size: 10px !important; letter-spacing: 0 !important; padding-left: 2px !important; padding-right: 2px !important }
/* The timeline in the brief's size; its sources folded under "Sources", opened on a click. */
html[data-view="ops"] .ops-left .phase-card { font-size: 14px }
html[data-view="ops"] .ops-left .phase-card :is(.phase-sum, .full p) { font-size: 14px !important; line-height: 1.55 }
html[data-view="ops"] .ops-left .phase-card .srcs { margin-top: 8px; font-size: 12px; color: var(--o-dim) }
html[data-view="ops"] .ops-left .phase-card .src-list summary { color: var(--o-sel); font: 700 11.5px var(--ops-cond); letter-spacing: .12em; text-transform: uppercase }
html[data-view="ops"] .ops-left .phase-card .src-list > p { margin: 6px 0 0; line-height: 1.6 }
/* A box with a list or rows that open: the hand over it says so. */
html[data-view="ops"] .ops-on .tally-box.expandable { cursor: pointer }

/* No figure cut at the panel's edge: the tables share the box's width, the heads wrap, the figures stay whole. */
html[data-view="ops"] .ops-left .tally-box { overflow: hidden; box-sizing: border-box; max-width: 100% }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) { width: 100% !important; min-width: 0 !important; table-layout: auto; border-collapse: collapse }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) :is(th, td) { white-space: normal !important; overflow-wrap: normal; word-break: normal; padding-left: 4px !important; padding-right: 4px !important }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) th[scope="col"] { font: 700 11.5px/1.15 var(--ops-cond) !important; letter-spacing: .06em !important; vertical-align: bottom }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) tr > :first-child { padding-left: 0 !important }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) tr > :last-child { padding-right: 0 !important }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) td :is(a, b, span) { white-space: normal !important }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) td small.q { display: block; line-height: 1.15 }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) th[scope="row"] { font-size: 12px !important; overflow-wrap: normal; word-break: keep-all; hyphens: manual }
html[data-view="ops"] .ops-left .tally-box table:not([data-ops-l]) td { font-size: 13px }
@media (min-width: 761px) { html[data-view="ops"] { --ops-sub-w: 80px } }
html[data-view="ops"] .ops-left :has(> .num-cat) .tally-box { padding-left: 10px !important; padding-right: 10px !important }
html[data-view="ops"] .ops-left :has(> .num-cat) .tally-box th { white-space: normal !important }
html[data-view="ops"] .ops-left .stat3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
html[data-view="ops"] .ops-left .stat3 > div { min-width: 0; padding-left: 6px !important; padding-right: 6px !important }

/* A list's row: each line under the other, on the left; the status under the weapon. */
html[data-view="ops"] .ops-left table.list[data-ops-l] td { text-align: left !important; justify-self: start }
html[data-view="ops"] .ops-left table.list[data-ops-l] td:empty { display: none }

/* The place's pin, after its name: opens the small map. */
html[data-view="ops"] .ops-rowpin { appearance: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: -2px 0 0 5px; padding: 0; vertical-align: middle; border: 1px solid var(--o-line-2); border-radius: 50%; background: none; color: var(--o-sel); cursor: pointer }
html[data-view="ops"] .ops-rowpin svg { width: 12px; height: 12px }
/* Every event is on the map: its pin beside it, as on the reports (user, 22 Oct); the row's click shows it. */
html[data-view="ops"] .ops-evpin { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--o-line-2); border-radius: 50%; color: var(--o-sel) }
html[data-view="ops"] .ops-evpin svg { width: 12px; height: 12px }
html[data-view="ops"] .ops-log-l button:hover .ops-evpin { background: var(--o-sel); border-color: var(--o-sel); color: var(--o-sel-ink) }
html[data-view="ops"] .ops-rowpin:hover { background: var(--o-sel); border-color: var(--o-sel); color: var(--o-sel-ink) }
html[data-view="ops"] .ops-rowpin:focus-visible { outline: 2px solid var(--o-sel); outline-offset: 1px }
/* Every Show on map on the page in the same look: the pin before the words. */
html[data-view="ops"] { --ops-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5a7 7 0 0 0-7 7c0 5.1 6.1 11.4 6.4 11.7a.8.8 0 0 0 1.2 0c.3-.3 6.4-6.6 6.4-11.7a7 7 0 0 0-7-7zm0 9.7a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4z'/%3E%3C/svg%3E") }
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map)::before { content: ""; width: 11px; height: 11px; flex: none; background: currentColor; -webkit-mask: var(--ops-pin) center / contain no-repeat; mask: var(--ops-pin) center / contain no-repeat }
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map) { color: var(--o-sel) !important }

/* Who and What: a line each, the name fixed at the start, the marks sliding sideways. */
html[data-view="ops"] .ops-dock .legend .leg-body { display: flex !important; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px }
html[data-view="ops"] .ops-lrow { display: flex; align-items: center; gap: 4px; min-width: 0 }
html[data-view="ops"] .ops-dock .legend .ops-lrow > :is(.leg-sec, .leg-sub) { flex: none; width: 42px; min-width: 0; margin: 0 !important }
html[data-view="ops"] .ops-lchips { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain }
html[data-view="ops"] .ops-lchips::-webkit-scrollbar { display: none }
html[data-view="ops"] .ops-lchips > .leg-item { flex: none }
html[data-view="ops"] .ops-lchips.ops-fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent) }
html[data-view="ops"] .ops-lchips.ops-fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px) }
html[data-view="ops"] .ops-lchips.ops-fade-l.ops-fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent) }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-who { padding: 6px 10px }
  html[data-view="ops"] .ops-dock .legend .ops-lrow > :is(.leg-sec, .leg-sub) { width: 38px; font-size: 11px !important }
  html[data-view="ops"] .ops-dock .legend .leg-item { font-size: 12px !important; padding: 4px 8px 4px 4px !important; border: 1px solid var(--o-line) !important }
  html[data-view="ops"] .ops-lchips { gap: 4px }
}

/* Layers: the map's own button at its bottom right, on every page and on a phone; the new-pin notes above it. */
html[data-view="ops"] .ops-lyrbtn { width: 32px; padding: 0; justify-content: center }
html[data-view="ops"] .ops-hud .ops-lyr { left: auto; right: 10px; top: auto; bottom: 68px }
html[data-view="ops"] .ops-toasts { bottom: 70px }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-lyrbtn { right: 8px; bottom: 22px }
  html[data-view="ops"] .ops-hud .ops-lyr { left: 8px; right: 8px; bottom: 62px; top: auto; max-height: calc(64svh - 76px) }
  html[data-view="ops"] .ops-toasts { bottom: 62px }
}

/* Phones: the side menu stays in view under the tabs; Broadcast and Full screen in the bar. */
@media (max-width: 760px) {
  html[data-view="ops"] .ops-on > .ops-left { overflow: clip }
  html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) { top: 41px; max-height: calc(100svh - 41px) }
  html[data-view="ops"] .ops-acts [data-op="cast"] { display: inline-flex !important }
  html[data-view="ops"] .ops-acts { gap: 3px }
  html[data-view="ops"] .ops-acts .ops-btn.ops-ico { width: 30px }
  /* The other desks by their flag only, so the bar's buttons fit beside them. */
  html[data-view="ops"] .ops-bar .dt-btn { padding: 0 9px }
  html[data-view="ops"] .ops-bar .dt-btn:not([aria-current="page"]) .dt-name { display: none }
  html[data-view="ops"] .ops-bar .dt-btn:not([aria-current="page"]) { padding: 0 10px }
}
/* Broadcast on a phone: the map, the whole screen. */
@media (max-width: 760px) {
  html[data-view="ops"].ops-cast .ops-on > :is(.ops-strip, .ops-bar, .ops-ptabs, .ops-left, .ops-right) { display: none !important }
  html[data-view="ops"].ops-cast .ops-on > .ops-stage { display: block !important }
  html[data-view="ops"].ops-cast .ops-on :is(#map, #h-map) { height: 100svh !important }
  html[data-view="ops"].ops-cast .ops-hud { height: 100svh }
  html[data-view="ops"].ops-cast body { overflow: hidden }
}
/* Broadcast: Breaking, the brief, the last 24 hours. */
html[data-view="ops"] .ops-lbreak { border-left-color: #d32f2f !important; background: #fff }
html[data-view="ops"] .ops-lbreak .brk { display: inline-block; margin-right: 8px; padding: 1px 7px; background: #d32f2f; color: #fff; font: 700 12px var(--ops-cond); letter-spacing: .16em; text-transform: uppercase; animation: ops-blink 1.2s ease-in-out 4 }
html[data-view="ops"] .ops-lbrief { border-left-color: #e0a43c !important }
html[data-view="ops"] .ops-lbrief ol { list-style: decimal; margin: 4px 0 0; padding: 0 0 0 26px; display: grid; gap: 4px; font: 600 18px/1.3 var(--ops-ui) }
html[data-view="ops"] .ops-lbrief li::marker { font: 700 15px var(--ops-mono); color: #9a6100 }
html[data-view="ops"] .ops-lbrief li i { font: 700 12px var(--ops-cond); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #5c6570; margin-right: 4px }
html[data-view="ops"] .ops-cboard { position: absolute; top: 16px; right: 16px; width: 230px; padding: 10px 14px 12px; background: rgba(8, 11, 14, .86); color: #fff; border-top: 2px solid #d32f2f; pointer-events: none }
html[data-view="ops"] .ops-cboard small { display: block; font: 700 11px var(--ops-cond); letter-spacing: .16em; text-transform: uppercase; color: #9aa5b0 }
html[data-view="ops"] .ops-cboard > b { display: inline-block; margin-top: 2px; font: 600 32px/1.05 var(--ops-mono) }
html[data-view="ops"] .ops-cboard > span { margin-left: 8px; font: 500 12px var(--ops-ui); color: #c9d1d9 }
html[data-view="ops"] .ops-cboard ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px }
html[data-view="ops"] .ops-cboard li { display: grid; grid-template-columns: 92px 1fr 30px; align-items: center; gap: 6px; font: 500 12px var(--ops-ui); color: #dfe5ea }
html[data-view="ops"] .ops-cboard li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
html[data-view="ops"] .ops-cboard li i { height: 6px; background: linear-gradient(var(--c), var(--c)) left / var(--w) 100% no-repeat, rgba(255, 255, 255, .1) }
html[data-view="ops"] .ops-cboard li em { font: 600 12px var(--ops-mono); font-style: normal; text-align: right }
html[data-view="ops"].ops-cast .ops-hud:has(.ops-card:not([hidden])) .ops-cboard { display: none }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-cboard { top: 56px; right: 8px; width: auto; padding: 6px 10px }
  html[data-view="ops"] .ops-cboard > b { font-size: 20px }
  html[data-view="ops"] .ops-cboard > span { display: block; margin: 0; font-size: 11px }
  html[data-view="ops"] .ops-cboard ul { display: none }
  html[data-view="ops"] .ops-lbrief ol { font-size: 14px }
  html[data-view="ops"] .ops-lbrief li:nth-child(n + 3) { display: none }
  html[data-view="ops"] .ops-cbar { top: 8px; max-width: calc(100% - 16px); gap: 2px }
  html[data-view="ops"] .ops-cbar button span { display: none }
}

/* ---------- Round 6 (user, 22 Oct) ---------- */
/* The Traffic button: an aircraft and a ship, the ship tucked under the wing. */
html[data-view="ops"] .ops-trfi { position: relative; display: inline-block; width: 22px; height: 16px; flex: none; font-style: normal }
html[data-view="ops"] .ops-btn .ops-trfi svg { position: absolute; width: 14px; height: 14px }
html[data-view="ops"] .ops-btn .ops-trfi svg:first-child { left: 0; top: -1px; transform: rotate(45deg) }
html[data-view="ops"] .ops-btn .ops-trfi svg:last-child { right: 0; bottom: -2px; width: 13px; height: 13px; opacity: .85 }
/* Phones: the side menu is a row under the tabs, not a column beside the panel; a notch points up at its tab. */
@media (max-width: 760px) {
  html[data-view="ops"] .ops-left .ops-panes:has(> .ops-pane.on :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav)) { background: var(--o-panel) }
  html[data-view="ops"] .ops-left .ops-pane.on:has(:is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav)) { display: flex !important; flex-direction: column; align-items: stretch; padding: 0 14px 22px !important }
  html[data-view="ops"] .ops-left .ops-pane.on:has(:is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav))::before { order: -1 }
  html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) {
    order: -2; grid-row: auto; position: sticky; top: 41px; z-index: 6; align-self: stretch; width: calc(100% + 28px) !important; max-width: none !important; box-sizing: border-box;
    flex-direction: row !important; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; max-height: none;
    margin: 0 -14px !important; padding: 5px 6px 0 !important; border-bottom: 1px solid var(--o-line) !important;
    background:
      linear-gradient(to bottom left, var(--o-sel) 50%, transparent 50%) calc(var(--ops-nx, 50%) - 6px) 0 / 6px 5px no-repeat,
      linear-gradient(to bottom right, var(--o-sel) 50%, transparent 50%) var(--ops-nx, 50%) 0 / 6px 5px no-repeat,
      var(--o-bg) !important
  }
  html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button {
    width: auto; flex: 1 0 auto; padding: 8px 10px 8px !important; font-size: 11px !important; letter-spacing: .08em !important; white-space: nowrap; overflow-wrap: normal !important; hyphens: none
  }
  html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button:is(.on, [aria-pressed="true"], [aria-selected="true"]) { background: none !important }
  html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) button:is(.on, [aria-pressed="true"], [aria-selected="true"])::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 2px }
}
/* Every "Show on map" is its pin only, in a small ring, as the attack rows' (user, 22 Oct). */
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map) {
  display: inline-grid !important; place-items: center; flex: none; width: 22px !important; min-width: 0 !important; height: 22px !important; padding: 0 !important; gap: 0 !important;
  border: 1px solid var(--o-line-2) !important; border-radius: 50% !important; background: none !important; font-size: 0 !important; letter-spacing: 0 !important; line-height: 0 !important; overflow: hidden
}
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map)::before { width: 12px; height: 12px }
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map):is(:hover, [aria-expanded="true"]) { background: var(--o-sel) !important; border-color: var(--o-sel) !important; color: var(--o-sel-ink) !important }
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map) > * { display: none !important }
/* The All page's cards: the desk as its flag in a circle, as in the bar, the pin to its left. */
html[data-view="ops"] .ops-on .card .meta .card-map { margin-inline-start: auto !important }
html[data-view="ops"] .ops-on .card .meta .card-map + :is(.h-tag, .h-tags) { margin-inline-start: 0 !important }
html[data-view="ops"] .ops-on .card .meta .h-tags { gap: 3px }
html[data-view="ops"] .ops-on .card .meta .h-tag { width: 22px; height: 22px; padding: 0 !important; justify-content: center; border-radius: 50% !important; overflow: hidden }
html[data-view="ops"] .ops-on .card .meta .h-tag > span { display: none }
html[data-view="ops"] .ops-on .card .meta .h-tag svg { width: 16px !important; height: 16px !important; border-radius: 50%; box-shadow: none }
html[data-view="ops"] .ops-on .card .meta .h-tag:hover { border-color: var(--o-dim) !important }
/* ---------- The site's own pages (the Sources list) in this view's look: a slim bar, the desks as in the map
   view's bar, the text in a panel (user, 22 Oct). ---------- */
html[data-view="ops"] .doc-root { background: var(--o-bg); color: var(--o-text) }
html[data-view="ops"] .doc-root .mast { display: flex; align-items: center; gap: 14px; height: 46px; padding: 0 16px; border-bottom: 1px solid var(--o-line); background: var(--o-panel) }
html[data-view="ops"] .doc-root .mast-date { order: 2; margin-left: auto; font: 500 12px var(--ops-mono) !important; letter-spacing: .04em; text-transform: none; color: var(--o-dim) }
html[data-view="ops"] .doc-root .mast-mid { display: flex !important; flex-direction: row !important; align-items: baseline; gap: 12px; font-size: 1rem }
html[data-view="ops"] .doc-root .mast-name .mn { font: 700 15px var(--ops-cond) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--o-strong) }
html[data-view="ops"] .doc-root .mast-line { font: 600 11px var(--ops-cond) !important; letter-spacing: .14em; color: var(--o-dim) }
html[data-view="ops"] .doc-root .mast-line::before, html[data-view="ops"] .doc-root .mast-line::after { display: none }
html[data-view="ops"] .doc-root .mast-end:empty { display: none }
html[data-view="ops"] .doc-root .doc-top { height: 42px; padding: 0 16px 0 0; margin: 0; border-bottom: 1px solid var(--o-line); background: var(--o-panel) }
html[data-view="ops"] .doc-root .doc-top .brand, html[data-view="ops"] .doc-root .doc-top h1 { height: 100%; margin: 0; display: flex; align-items: stretch; font-size: inherit }
html[data-view="ops"] .doc-root .doc-top :is(.dl-pre, .dt-label) { display: none }
html[data-view="ops"] .doc-root .doc-top .dt-row { display: flex; align-items: stretch; gap: 0; height: 100%; padding: 0; overflow-x: auto }
html[data-view="ops"] .doc-root .doc-top .dt-btn {
  position: relative; height: 100%; padding: 0 16px; gap: 8px; border: 0; border-radius: 0; border-right: 1px solid var(--o-line); background: none; box-shadow: none; transform: none !important;
  color: var(--o-dim); font: 600 13px var(--ops-cond) !important; letter-spacing: .14em; text-transform: uppercase
}
html[data-view="ops"] .doc-root .doc-top .dt-btn::after { display: none }
html[data-view="ops"] .doc-root .doc-top .dt-btn .dt-name { font: inherit !important }
html[data-view="ops"] .doc-root .doc-top .dt-btn .dt-flag { width: 16px; height: 16px; box-shadow: none }
html[data-view="ops"] .doc-root .doc-top .dt-btn .dt-globe { fill: none; stroke: currentColor; stroke-width: 1.6 }
html[data-view="ops"] .doc-root .doc-top .dt-btn:hover { color: var(--o-strong); background: var(--o-hover) }
html[data-view="ops"] .doc-root main.doc { max-width: 44rem; margin: 24px auto 32px; padding: 20px 24px 12px; background: var(--o-panel); border: 1px solid var(--o-line); border-radius: var(--ops-r) }
html[data-view="ops"] .doc-root .doc-title { margin: 0 0 6px; font: 700 26px/1.1 var(--ops-cond) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--o-strong) }
html[data-view="ops"] .doc-root .doc-lede { font: 400 15px/1.5 var(--ops-ui) !important; color: var(--o-text) }
html[data-view="ops"] .doc-root .sr-top { border-color: var(--o-line) }
html[data-view="ops"] .doc-root :is(.sr-stamp, .sr-all, .sr-count, .sr-table th) { font-family: var(--ops-cond) !important; letter-spacing: .12em; color: var(--o-dim) }
html[data-view="ops"] .doc-root .sr-stamp { font-size: 12px }
html[data-view="ops"] .doc-root .sr-all { height: 26px; padding: 0 10px; border: 1px solid var(--o-line-2); border-radius: var(--ops-r); font-size: 11.5px; font-weight: 700 }
html[data-view="ops"] .doc-root .sr-all:hover { color: var(--o-strong); background: var(--o-hover) }
html[data-view="ops"] .doc-root .sr-group { border-color: var(--o-line) }
html[data-view="ops"] .doc-root :is(.sr-group h3, .sr-head, .sr-name) { font: 700 16px/1.2 var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--o-strong) }
html[data-view="ops"] .doc-root .sr-head { padding: 12px 0 }
html[data-view="ops"] .doc-root .sr-head .sw { width: 3px; height: 16px }
html[data-view="ops"] .doc-root .sr-count { font: 600 12px var(--ops-mono) !important; letter-spacing: 0 }
html[data-view="ops"] .doc-root .sr-chev { stroke: var(--o-dim) }
html[data-view="ops"] .doc-root .sr-table { font: 400 14px/1.35 var(--ops-ui) !important }
html[data-view="ops"] .doc-root .sr-table th { font-size: 11px; font-weight: 700; border-color: var(--o-line-2) }
html[data-view="ops"] .doc-root .sr-table td { border-color: var(--o-line) }
html[data-view="ops"] .doc-root .sr-table tr:hover td { background: var(--o-hover) }
html[data-view="ops"] .doc-root .sr-table a:hover { color: var(--o-sel) }
html[data-view="ops"] .doc-root .sr-rate b { font: 600 13px var(--ops-mono) !important; color: var(--o-strong) }
html[data-view="ops"] .doc-root .sr-dot { border-radius: 1px; width: 8px; height: 8px; background: linear-gradient(90deg, var(--o-sel) var(--f), var(--o-line-2) var(--f)) }
html[data-view="ops"] .doc-root .doc-foot { max-width: 44rem; border: 0; padding: 0 0 32px; font: 600 12px var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase }
html[data-view="ops"] .doc-root .doc-foot a { color: var(--o-sel); text-decoration: none }
html[data-view="ops"] .doc-root .doc-foot a::before { content: "← " }
@media (max-width: 760px) {
  html[data-view="ops"] .doc-root .mast-line { display: none }
  html[data-view="ops"] .doc-root main.doc { margin: 12px 8px 20px; padding: 14px 14px 6px }
  html[data-view="ops"] .doc-root .doc-foot { padding: 0 16px 28px }
}
html[data-view="ops"] #feed-legend:has(.ops-srclink) { display: flex !important; align-items: center; gap: 8px }
html[data-view="ops"] .ops-srclink { margin-left: auto; flex: none; font: 600 11px var(--ops-cond) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--o-faint) !important; text-decoration: none !important }
html[data-view="ops"] .ops-srclink:hover { color: var(--o-sel) !important }
/* The box names over their boxes keep what they had inside them (22 Oct: the chart icon beside a name, its
   size and its stroke set only inside the box, showed as a big black shape over the Economy boxes). */
html[data-view="ops"] h3.ops-boxhead .spot svg { display: inline-block; width: 13px; height: 13px; margin-left: 5px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8 }
html[data-view="ops"] h3.ops-boxhead .spot { background: none !important; border: 0 !important; cursor: pointer }
html[data-view="ops"] h3.ops-boxhead .spot-name { border-bottom: 1px dotted var(--o-faint) }
html[data-view="ops"] h3.ops-boxhead .spot:is(:hover, [aria-expanded="true"]) { color: var(--o-strong) !important }
html[data-view="ops"] h3.ops-boxhead small.unit { margin-left: 4px }
html[data-view="ops"] h3.ops-boxhead small.unit-why { display: block; margin-top: 2px }
html[data-view="ops"] h3.ops-boxhead svg:not([width]):not([class]) { max-width: 16px; max-height: 16px }
/* The sides' colours everywhere are the map's (user, 22 Oct: the Houthi sources were red in the numbers, orange
   on the map; Saudi Arabia blue beside its purple pins): the tables, the cards' edges, the sources filter, the
   notes on the map and the Sources list (app.js THEME_SIDES). */
html[data-view="ops"][data-theme="broadsheet-night"] { --houthi: #f08c2e; --plc: #3fb0b3; --saudi: #a855f7; --contested: #d9aa45; --mixed: #a898c4 }
html[data-view="ops"][data-theme="broadsheet-day"] { --houthi: #e8761f; --plc: #0d7680; --saudi: #9b4dea; --contested: #b07d1a; --mixed: #7d6b99 }
html[data-view="ops"] .lean-f[data-lean="houthi"] .sw { background: var(--houthi) !important }
html[data-view="ops"] .lean-f[data-lean="gov"] .sw { background: var(--plc) !important }
/* Round on every page (the theme's square buttons are more particular than the rule above). */
html[data-view="ops"] .ops-on :is(.sit-map-btn, .card-map):not(#_) { border-radius: 50% !important }
/* An aircraft's or a ship's card stays inside the map, scrolling when it is taller (user, 22 Oct: it ran over the timeline). */
html[data-view="ops"] .ops-hud > .ops-card:not(#_) { max-height: calc(100% - 20px); overflow-y: auto; overscroll-behavior: contain }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-hud > .ops-card:not(#_) { max-height: calc(100% - 16px) }
}

/* The name and "Open-source intelligence" sit together in the middle of the bar, not one at its top and one at its bottom (user, 23 Oct). */
html[data-view="ops"] .ops-bar .mast-mid:not(#_) { gap: 0; row-gap: 0; align-self: center; height: auto; justify-content: center }
html[data-view="ops"] .ops-bar .mast-name:not(#_), html[data-view="ops"] .ops-bar .mast-name .mn:not(#_) { line-height: 1 !important }
html[data-view="ops"] .ops-bar .mast-line:not(#_) { margin: 5px 0 0 !important; line-height: 1 !important }

/* The All page's one brief, from every desk: each point marked with its desk's flag in a circle (user, 23 Oct). */
html[data-view="ops"] .ops-th-one { border-bottom: 0 !important; margin-bottom: 0 !important }
html[data-view="ops"] .ops-th-flag { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0 7px 0 0; vertical-align: -3px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--o-line-2) }
html[data-view="ops"] .ops-th-flag svg { width: 16px !important; height: 16px !important; display: block }
html[data-view="ops"] .ops-th-links { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0 }
html[data-view="ops"] .ops-th-links .ops-th-more { margin-top: 0 }
html[data-view="ops"] .ops-phead > .ops-ptitle:not(#_) { flex: 0 1 auto }
html[data-view="ops"] .ops-phead > .ops-fold:not(#_) { margin-left: auto }
html[data-view="ops"] .ops-phead > .ops-headpin { margin: 0 0 0 2px }

/* The Yemen desk's numbers boxes as the Iran desk's (user, 23 Oct): a site's state is its linked words, coloured by
   who says it (official or not), not a coloured badge; the state's column reads from the left as the others. */
html[data-view="ops"] .ops-on .tally-box.ledger .st:not(#_) { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none }
html[data-view="ops"] .ops-on .tally-box.ledger table.list :is(td, th).t:not(#_) { width: auto; text-align: left }

/* A phone folds the part under the map too, with the same arrow as a computer (user, 23 Oct): folded, the time row
   stays under the map and the map takes the room. */
@media (max-width: 760px) {
  html[data-view="ops"] .ops-on .ops-fold-d:not(#_) { display: inline-grid !important; flex: none }
  html[data-view="ops"] .ops-on.ops-nodock .ops-dock > .ops-drow:not(.ops-dtop) { display: none }
  html[data-view="ops"] .ops-on.ops-nodock .ops-fold-d svg { transform: rotate(180deg) }
  html[data-view="ops"] .ops-on.ops-nodock .ops-fold-d { border-color: var(--o-sel); color: var(--o-sel); background: color-mix(in srgb, var(--o-sel) 14%, transparent) }
  html[data-view="ops"] .ops-on.ops-nodock :is(#map, #h-map):not(#_) { height: calc(100svh - 190px) !important }
  html[data-view="ops"] .ops-on.ops-nodock .ops-hud:not(#_) { height: calc(100svh - 190px) }
}

/* "New on the map" notes sit on the left, between the coordinates and the map's tools: the first just above the
   coordinates, the next ones building up from it (user, 23 Oct). */
html[data-view="ops"] .ops-toasts:not(#_) { top: auto; right: auto; left: 10px; bottom: 86px; transform: none; width: min(300px, calc(100% - 80px)); flex-direction: column-reverse; justify-content: flex-start; max-height: calc(100% - 320px); overflow: hidden }
html[data-view="ops"] .ops-toast:not(#_) { animation: ops-up .2s ease-out }
@media (max-width: 760px) { html[data-view="ops"] .ops-toasts:not(#_) { bottom: 80px; width: calc(100% - 70px); max-height: calc(100% - 300px) } }

/* Yemen's Territory box as the other numbers boxes (user, 23 Oct): one bar split by side, a row a side. */
html[data-view="ops"] .ctrl-box .ctrl-stack { display: flex; height: 10px; margin: 4px 0 12px; border-radius: 2px; overflow: hidden; background: var(--o-line) }
html[data-view="ops"] .ctrl-box .ctrl-stack i { display: block; height: 100%; min-width: 2px }
html[data-view="ops"] .ctrl-box .ctrl-stack i + i { box-shadow: -1px 0 0 var(--o-panel) }
html[data-view="ops"] .ctrl-box table.ctrl-rows { width: 100% }
html[data-view="ops"] .ctrl-box table.ctrl-rows th { text-align: left; font-weight: 500 }
html[data-view="ops"] .ctrl-box table.ctrl-rows th[scope="col"] { text-align: right }
html[data-view="ops"] .ctrl-box table.ctrl-rows td { text-align: right; font-family: var(--ops-mono) !important; font-weight: 600; color: var(--o-strong) }
html[data-view="ops"] .ctrl-box .sw { display: inline-block; width: 10px; height: 10px; margin: 0 8px 0 0; border-radius: 2px; vertical-align: -1px }
/* The explainers' categories (26 Oct): several cards in a category, so each shows its title and summary, Read more
   for the rest. */
html[data-view="ops"] .ops-left .ex-list .phase-head > strong { display: block !important; font-size: 15px !important; line-height: 1.3 !important }
html[data-view="ops"] .ops-left .ex-list .phase-card:not(.open) .full { display: none !important }
html[data-view="ops"] .ops-left .ex-list .phase-card .toggle-phase { display: inline-block !important }
html[data-view="ops"] .ops-left .ex-list .phase-card.expandable { cursor: pointer }

/* ---------- 26 Oct (user: "the explainer in the sub menu … much more nice to look at — clear colours, diagrams …
   very professional; the timeline too"): the explainers' cards in their category's colour (desk.css .ex-card), the
   categories' icons in the side menu, and the Timeline's eras as a line of dated markers. ---------- */
html[data-view="ops"] .ops-left .ex-list .phase-card.ex-card { padding: 14px 14px 13px !important; border-left: 3px solid var(--ex-c) !important; background: var(--o-raised) !important }
html[data-view="ops"] .ops-left .ex-list .phase-card.ex-guide { background: linear-gradient(180deg, color-mix(in srgb, var(--ex-c) 10%, var(--o-raised)), var(--o-raised) 60%) !important }
html[data-view="ops"] .ops-left .ex-card .ex-title { color: var(--o-strong); font-family: var(--ops-ui) }
html[data-view="ops"] .ops-left .ex-card .phase-sum { font-size: 13.5px !important; color: var(--o-text) }
html[data-view="ops"] .ops-left .ex-chip { color: var(--o-text) !important; background: var(--o-panel); border-color: var(--o-line-2) }
html[data-view="ops"] .ops-left :is(.ex-chip-tl, .ex-chip-ex) { border-color: color-mix(in srgb, var(--o-sel) 45%, var(--o-line-2)); background: color-mix(in srgb, var(--o-sel) 8%, var(--o-panel)) }
html[data-view="ops"] .ops-left .ex-chip .ex-svg { color: var(--o-sel) }
html[data-view="ops"] .ops-left .ex-g-fig { color: var(--o-strong); border-color: var(--o-line); background-color: var(--o-panel) }
html[data-view="ops"] .ops-left .ex-read { color: color-mix(in srgb, var(--ex-c, var(--o-sel)) 72%, var(--o-strong)) !important }
html[data-view="ops"] .ops-left .ex-all { margin: 2px 0 0 !important }
/* The categories in the side menu: each its icon in its colour over its name. */
html[data-view="ops"] .ops-left .ex-cats button { display: block !important }
html[data-view="ops"] .ops-left .ex-cats button .ex-svg { display: block; width: 18px; height: 18px; margin: 0 auto 5px; color: var(--ex-c) }
html[data-view="ops"] .ops-left .ex-cats button:not(.on) .ex-svg { opacity: .75 }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-left .ex-cats button .ex-svg { display: inline-block; width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -3px }
}
/* An era: its dates large in the highlight colour, its place in the run at the right; Now edged in that colour. */
html[data-view="ops"] .ops-left .tl-card .tl-head { display: block !important }
html[data-view="ops"] .ops-left .tl-card .tl-when { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 0 9px; margin: 0 0 9px; border-bottom: 1px solid var(--o-line) }
html[data-view="ops"] .ops-left .tl-card .tl-dates { font: 600 14px/1.2 var(--ops-mono); color: var(--o-sel); letter-spacing: .01em }
html[data-view="ops"] .ops-left .tl-card .tl-dates { flex: 1 1 auto; min-width: 0 }
html[data-view="ops"] .ops-left .tl-card .tl-n { flex: none; align-self: flex-start; margin-left: auto; padding-top: 2px; font: 500 11px var(--ops-mono); color: var(--o-faint); white-space: nowrap }
html[data-view="ops"] .ops-left .tl-card .tl-now2 { display: inline-block; margin: 0 }
html[data-view="ops"] .ops-left .pager-timeline .phase-card.tl-card { border-left: 3px solid var(--o-line-2) !important }
html[data-view="ops"] .ops-left .pager-timeline .phase-card.tl-card.now { border-left-color: var(--o-sel) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--o-sel) 7%, var(--o-raised)), var(--o-raised) 140px) !important }
html[data-view="ops"] .ops-left .tl-card .phase-sum { font-weight: 500; color: var(--o-strong) !important; font-size: 14.5px !important }
html[data-view="ops"] .ops-left .tl-card .tl-map { background: var(--o-panel); border-left-color: var(--o-line-2) }
html[data-view="ops"] .ops-left .tl-card .srcs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 10px; border-top: 1px dashed var(--o-line-2) }
html[data-view="ops"] .ops-left .tl-card .src-list { flex-basis: 100% }
html[data-view="ops"] .ops-left .tl-card .src-list li { border-color: var(--o-line) }
html[data-view="ops"] .ops-left .tl-card .src-list a { color: var(--o-text) }
html[data-view="ops"] .ops-left .tl-card .src-list a:hover { color: var(--o-sel) }
html[data-view="ops"] .ops-left .now-tag { background: var(--o-sel); color: var(--o-sel-ink); border-radius: 2px; font: 700 10.5px/1.5 var(--ops-cond); letter-spacing: .14em; padding: 0 6px }
/* The eras' side menu as a line of markers: the start year over each name, the open era filled, the latest ringed. */
@media (min-width: 761px) {
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.tl-dot {
    text-align: left !important; padding: 9px 4px 10px 21px !important;
    background: linear-gradient(var(--o-line-2), var(--o-line-2)) 9px 0 / 1px 100% no-repeat !important
  }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.tl-dot:first-child { background-position: 9px 15px !important }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.tl-dot:last-child { background-size: 1px 15px !important }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.tl-dot:is(.on, :hover) { background-color: var(--o-panel) !important }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.tl-dot::after {
    content: "" !important; position: absolute; left: 6px; top: 12px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--o-bg); box-shadow: 0 0 0 1.5px var(--o-dim)
  }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.tl-dot.tl-isnow::after { box-shadow: 0 0 0 1.5px var(--o-sel), 0 0 0 4px color-mix(in srgb, var(--o-sel) 22%, transparent) }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.tl-dot.on::after { background: var(--o-sel); box-shadow: 0 0 0 1.5px var(--o-sel), 0 0 0 4px color-mix(in srgb, var(--o-sel) 25%, transparent) }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.tl-dot.on::before { display: none }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots .tl-yr { display: block; margin: 0 0 2px; font: 500 10px/1.1 var(--ops-mono); letter-spacing: 0; text-transform: none; color: var(--o-faint) }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.on .tl-yr { color: var(--o-sel) }
}
@media (max-width: 760px) {
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots .tl-yr { display: inline; margin-right: 5px; font: 500 10px var(--ops-mono); letter-spacing: 0; color: var(--o-faint) }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots button.on .tl-yr { color: var(--o-sel) }
}

/* ---------- 26 Oct, evening (user's list). ---------- */
/* A timeline era shows its summary only, Read more for the rest (user: "show only the summary that's in bold and have
   the read more for the whole thing"); this undoes "read whole" of 21 Oct. */
html[data-view="ops"] .ops-left .pager-timeline .phase-card:not(.open) .full { display: none !important }
html[data-view="ops"] .ops-left .pager-timeline .phase-card .toggle-phase { display: inline-block !important; margin-top: 8px }
html[data-view="ops"] .ops-left .pager-timeline .phase-card.expandable { cursor: pointer }
html[data-view="ops"] .ops-left .pager-timeline .tl-card .phase-sum { margin-bottom: 0 }
/* No blank space under the map credit (user: "remove blank space … under the openstreetmap contributors"): the credit
   sits at the panel's foot, the room above it, and keeps only a little room under it. */
html[data-view="ops"] .ops-left .ops-panes { display: flex; flex-direction: column }
html[data-view="ops"] .ops-left .ops-panes > * { flex: none }
html[data-view="ops"] .ops-left .ops-panes > footer:not(#_) { margin-top: auto; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) }
@media (max-width: 760px) { html[data-view="ops"] .ops-on > .ops-left .ops-panes { flex: 1 0 auto } }
/* The numbers in the explainers' look (user: "same style but clear and not heavy on the eyes"): the categories' icons
   in their colours in the side menu (the .ex-cats rules), each box edged in its category's colour, its name marked. */
html[data-view="ops"] .ops-left .nc-boxes :is(.tally-box, .ctrl-box):not(#_) { border-left: 3px solid color-mix(in srgb, var(--ex-c) 75%, var(--o-line)) !important }
html[data-view="ops"] .ops-left .nc-boxes h3.ops-boxhead::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 0 1px; border-radius: 2px; background: var(--ex-c); vertical-align: 1px }
html[data-view="ops"] .ops-left .nc-boxes .spot svg { color: var(--ex-c) }
html[data-view="ops"] .ops-left .nc-boxes .stat3 b { color: var(--o-strong) }
html[data-view="ops"] .ops-left .nc-cats button.on { color: var(--o-strong) !important }
/* 26 Oct (user: the dot sat alone above the title): the title is a button, which wraps whole, so the square goes inside it. */
html[data-view="ops"] .ops-left .nc-boxes h3.ops-boxhead:has(> .spot)::before { content: none }
html[data-view="ops"] .ops-left .nc-boxes h3.ops-boxhead > .spot::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 0 1px; border-radius: 2px; background: var(--ex-c); vertical-align: 1px }
/* 26 Oct (user: "i cant scroll up here"): a centred column that overflows hides its top out of reach; auto margins
   centre a short list and let a long one scroll from its first item. */
html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) { justify-content: flex-start !important }
@media (min-width: 761px) {
  html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) > :first-child { margin-top: auto !important }
  html[data-view="ops"] .ops-left :is(.pager-fronts ~ .pg-dots, .pager-timeline ~ .pg-dots, .num-cat, .ops-subnav) > :last-child { margin-bottom: auto !important }
}
/* 26 Oct (user: "many places in the left column … cut in the side"): a table of four columns or more stacks in a narrow
   box: the row's name on its own line, its figures in a row under it, a column of words on a whole line below. */
/* The panel's scroll area is the container (its rail and gaps take ~125px); a phone has no rail. */
@container (max-width: 505px) {
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7), html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) > tbody { display: block !important; width: 100% !important }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) tr { display: grid !important; grid-template-columns: repeat(var(--nc, 3), minmax(0, 1fr)); column-gap: 8px; align-items: end }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) tr + tr { border-top: 1px solid var(--o-line) }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) :is(td, th) { border: 0 !important; min-width: 0; overflow-wrap: anywhere }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) :is(td, th):is(.l, .txt) { grid-column: 1 / -1; text-align: left !important }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) td.l { padding-bottom: 0 !important }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) th:is(.l:empty, .txt), html[data-view="ops"] .ops-left table.span3 td.txt.none { display: none !important }
  html[data-view="ops"] .ops-left table.span3 td.txt { padding-top: 0 !important; font-size: 12.5px }
  html[data-view="ops"] .ops-left table.span3 td.txt::before { content: attr(data-h) ": "; color: var(--o-faint) }
}
@media (max-width: 760px) {
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7), html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) > tbody { display: block !important; width: 100% !important }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) tr { display: grid !important; grid-template-columns: repeat(var(--nc, 3), minmax(0, 1fr)); column-gap: 8px; align-items: end }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) tr + tr { border-top: 1px solid var(--o-line) }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) :is(td, th) { border: 0 !important; min-width: 0; overflow-wrap: anywhere }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) :is(td, th):is(.l, .txt) { grid-column: 1 / -1; text-align: left !important }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) td.l { padding-bottom: 0 !important }
  html[data-view="ops"] .ops-left table.span3:is(.tc4, .tc5, .tc6, .tc7) th:is(.l:empty, .txt), html[data-view="ops"] .ops-left table.span3 td.txt.none { display: none !important }
  html[data-view="ops"] .ops-left table.span3 td.txt { padding-top: 0 !important; font-size: 12.5px }
  html[data-view="ops"] .ops-left table.span3 td.txt::before { content: attr(data-h) ": "; color: var(--o-faint) }
}
/* A list's lines take the whole width beside the date: the table's 40% cap squeezed "Who" (Iran's Sanctions, 26 Oct). */
html[data-view="ops"] .ops-left table.list[data-ops-l] td:not(:first-child) { max-width: none !important }
/* Figures with long captions (Gaza's Judea and Samaria, Sanctions, 26 Oct): one to a line in the side panel, the
   figure beside its words, not three tall columns of capitals. */
html[data-view="ops"] .ops-left .stat3.long { grid-template-columns: 1fr !important; gap: 4px !important }
html[data-view="ops"] .ops-left .stat3.long > div { display: grid !important; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); align-items: center; column-gap: 12px; text-align: left !important; padding: 8px 12px !important }
html[data-view="ops"] .ops-left .stat3.long > div > b { text-align: right }
html[data-view="ops"] .ops-left .stat3.long > div > span { text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; line-height: 1.35 !important; margin: 0 !important }
/* A folded panel's tab on the map's edge covers nothing (user, 27 Oct): the map's own buttons and boxes on that side move in past it. */
@media (min-width: 761px) {
  html[data-view="ops"] .ops-noleft :is(.leaflet-left, .ops-tools, .ops-coords, .ops-toasts) { translate: 32px 0 }
  html[data-view="ops"] .ops-noright :is(.leaflet-right, .map-chip, .ops-lyrbtn) { translate: -32px 0 }
}
/* The credits keep to the right, clear of the coordinates and the IDF-held box at the left (27 Oct). */
@media (min-width: 761px) { html[data-view="ops"] .ops-on .leaflet-bottom.leaflet-right .leaflet-control-attribution { max-width: min(560px, 58%); margin-left: auto; line-height: 1.3; text-align: right; white-space: normal } }
/* The map's note: the first line under the map, on every screen (27 Oct). */
html[data-view="ops"] .ops-discl-m { display: block; margin: 0 0 6px; font-size: 12px; line-height: 1.35; font-style: italic; color: var(--o-dim, var(--o-faint)) }
@media (max-width: 760px) { html[data-view="ops"] .ops-discl-m { padding: 0 14px; margin-bottom: 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } }
html[data-view="ops"] .doc-root .sr-stamp.sr-discl { font-family: inherit !important; letter-spacing: 0; text-transform: none; font-size: 11.5px; color: var(--o-faint) }

/* The Gaza desk's Mood tab (27 Oct): each big event's reactions, read from the Palestinian channels. */
html[data-view="ops"] .ops-on-areas { display: flex; border: 1px solid var(--o-line); border-radius: 4px; overflow: hidden }
html[data-view="ops"] .ops-on-areas button { flex: 1; padding: 6px 6px; border: 0; background: none; color: var(--o-dim); font: 600 11.5px var(--ops-cond); letter-spacing: .1em; text-transform: uppercase; cursor: pointer }
html[data-view="ops"] .ops-on-areas button + button { border-left: 1px solid var(--o-line) }
html[data-view="ops"] .ops-on-areas button[aria-pressed="true"] { background: var(--o-raised); color: var(--o-strong); box-shadow: inset 0 -2px 0 var(--o-sel) }

/* The All page: a report's country flag (27 Oct), and the desk line under each brief point. */
html[data-view="ops"] .h-cflag { display: inline-flex; flex: none }
html[data-view="ops"] .h-cflag .dt-flag { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--o-line-2) }
html[data-view="ops"] .ops-th-p { display: inline }
html[data-view="ops"] .ops-th-flag .h-cflag .dt-flag { width: 16px; height: 16px; box-shadow: none }
html[data-view="ops"] .ops-th-p .x-desk { display: table; margin-top: 5px; font-size: 11.5px }
/* Timeline eras on a phone (user, 27 Oct): short names, so the next ones show beside the chosen one; the full name in its tooltip and on the card. */
html[data-view="ops"] .pg-dots .pg-short { display: none }
@media (max-width: 760px) {
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots .tl-dot:has(.pg-short) .pg-name { display: none !important }
  html[data-view="ops"] .ops-left .pager-timeline ~ .pg-dots .pg-short { display: inline }
  html[data-view="ops"] .ops-left :is(.pager-fronts, .pager-timeline) ~ .pg-dots button { max-width: 62vw }
  html[data-view="ops"] .ops-left :is(.pager-fronts, .pager-timeline) ~ .pg-dots .pg-name { overflow: hidden; text-overflow: ellipsis }
}
/* A box with a Read more opens on a click anywhere in it (27 Oct). */