/* Themes. Original is desk.css as built and is not touched here; everything below the switch
   applies only to Broadsheet Day and Broadsheet Night (html[data-set="broadsheet"]). */

/* The theme button, top right: the next look's icon in a turning arrow, three pips for where you are */
.theme-step{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:none;padding:3px 6px 4px;margin-inline-start:.5rem;background:transparent;border:1px solid var(--t-line-strong,#334155);border-radius:12px;color:var(--t-muted,#8fa0b4);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.theme-step:hover,.theme-step:focus-visible{color:var(--t-strong,#fff);border-color:var(--t-muted,#8fa0b4);outline:none}
.ts-ring{position:relative;display:grid;place-items:center;width:24px;height:24px}
.ts-ring>svg{position:absolute;inset:0;width:24px;height:24px;opacity:.75;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ts-ico{display:grid;place-items:center;width:12px;height:12px;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .25s}
.ts-ico svg{width:12px;height:12px}
.theme-step:hover .ts-ring>svg{transform:rotate(40deg)}
.theme-step.turn .ts-ring>svg{animation:ts-spin .55s cubic-bezier(.2,.7,.2,1)}
.theme-step.turn .ts-ico{animation:ts-pop .55s cubic-bezier(.2,.7,.2,1)}
@keyframes ts-spin{from{transform:rotate(-200deg)}to{transform:rotate(0)}}
@keyframes ts-pop{0%{transform:scale(.4) rotate(-90deg);opacity:0}100%{transform:none;opacity:1}}
.ts-pips{display:inline-flex;gap:3px}
.ts-pips i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .2s,transform .2s}
.ts-pips i.on{opacity:1;transform:scale(1.25)}
html[data-set="broadsheet"] .theme-step{border-radius:2px}
html[data-set="broadsheet"] .ts-pips i{border-radius:0}
html[data-set="broadsheet"] .ts-pips i.on{background:var(--accent-ui)}
/* Phone: the button ends the clock line, on its right; the headline keeps the full width. */
@media (max-width:720px){.top .stamp{align-self:stretch;flex-wrap:nowrap}.theme-step{margin-inline-start:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease}

/* The section menu: a labelled tab in its own left gutter (it covers nothing), a "Sections"
   small labelled pill at the bottom left that stays with the reader */
.sec-nav{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:1100;display:flex;align-items:center}
.sec-tab{display:flex;flex-direction:column;align-items:center;gap:9px;width:28px;padding:10px 0 12px;background:var(--t-surface-3,#1a2433);border:1px solid var(--t-line-strong,#2a3a4e);border-left:3px solid var(--accent-ui,var(--t-link,#7eb6ff));border-radius:0 8px 8px 0;color:var(--t-text,#d7e2ef);cursor:pointer;box-shadow:0 4px 14px #0005;transition:color .2s,background .2s}
.sec-tab:hover,.sec-tab:focus-visible,.sec-nav.open .sec-tab{color:var(--t-strong,#fff);background:var(--t-surface-2,var(--t-surface-3,#1a2433));outline:none}
.sec-word{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.sec-ticks{display:flex;flex-direction:column;gap:5px}
.sec-ticks i{display:block;width:7px;height:2px;border-radius:1px;background:currentColor;opacity:.7;transition:width .2s,opacity .2s}
.sec-ticks i.on{width:9px;opacity:1;background:var(--accent-ui,var(--t-link,#7eb6ff))}
.sec-list{list-style:none;margin:0 0 0 8px;padding:.35rem;min-width:13rem;background:var(--t-glass,rgba(8,12,18,.94));border:1px solid var(--t-line-strong,#2a3a4e);border-radius:10px;box-shadow:0 10px 30px #0007;opacity:0;visibility:hidden;transform:translateX(-8px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.sec-nav.open .sec-list{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s}
.sec-list a{display:block;padding:.42rem .7rem;border-radius:6px;color:var(--t-text,#d7e2ef);text-decoration:none;font-size:.8rem;white-space:nowrap;border-left:2px solid transparent}
.sec-list a:hover,.sec-list a:focus-visible{background:var(--t-surface-3,#1a2433);outline:none}
.sec-list a.on{color:var(--t-strong,#fff);border-left-color:var(--accent-ui,var(--t-link,#7eb6ff));font-weight:600}
html[data-set="broadsheet"] .sec-tab{border-radius:0 2px 2px 0}
html[data-set="broadsheet"] .sec-list{border-radius:2px}
html[data-set="broadsheet"] .sec-list a{border-radius:0;font-family:var(--f-body)}
/* The pill at the bottom left on every screen (PC too), so no left gutter is needed */
@media all{
  .sec-nav{top:auto;bottom:16px;left:12px;transform:none;flex-direction:column-reverse;align-items:flex-start;transition:transform .22s,opacity .22s}
  .sec-tab{flex-direction:row;width:auto;height:34px;padding:0 12px;gap:8px;border:1.5px solid var(--accent-ui,var(--t-link,#7eb6ff));border-radius:17px;background:var(--t-glass,rgba(8,12,18,.94));box-shadow:0 3px 12px #0006}
  .sec-word{writing-mode:horizontal-tb;transform:none;font-size:.68rem}
  .sec-ticks{flex-direction:row;align-items:center;gap:3px}
  .sec-ticks i{width:2px;height:7px}.sec-ticks i.on{width:2px;height:10px}
  html[data-set="broadsheet"] .sec-tab{border-radius:2px}
  .sec-list{margin:0 0 8px;transform:translateY(8px)}
}
@media (max-width:720px){.stamp{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.ts-ring>svg,.ts-ico,.sec-list{transition:none!important;animation:none!important}}

/* Broadsheet: section titles carry a short accent bar */
html[data-set="broadsheet"] :is(.rail-head h2,.sit-head>h2,.situation>h2,.fronts-wrap>h2,.cas-wrap>h2,.timeline-wrap>h2){position:relative;padding-top:.55rem}
html[data-set="broadsheet"] :is(.rail-head h2,.sit-head>h2,.situation>h2,.fronts-wrap>h2,.cas-wrap>h2,.timeline-wrap>h2)::before{content:"";position:absolute;left:0;top:0;width:28px;height:3px;background:var(--accent-ui)}
/* Broadsheet: buttons, pager, figures, NOW label */
html[data-set="broadsheet"] :is(.layers button,.ghost,.more,.time-filter button,.time-filter input[type="date"],.to-fronts,.front-map-btn,.card .meta .card-map){border-radius:var(--r-btn)!important}
html[data-set="broadsheet"] :is(.time-filter button.on,#time-filter button.on){background:var(--accent-ui)!important;border-color:var(--accent-ui)!important;color:var(--on-accent)!important;outline:0!important}
html[data-set="broadsheet"] .pg-arrow{width:30px;height:30px;margin-top:-15px;border-radius:var(--r-btn);background:var(--t-bg);border:1px solid var(--t-line-strong);color:var(--t-text)}
html[data-set="broadsheet"] :is(.pg-arrow:hover,.pg-arrow:focus-visible){background:var(--accent-ui);border-color:var(--accent-ui);color:var(--on-accent)}
html[data-set="broadsheet"] .pg-dots{gap:3px}
html[data-set="broadsheet"] .pg-dots button{padding:8px 2px}
html[data-set="broadsheet"] .pg-dots button::before{width:12px;height:2px;border-radius:0;background:var(--t-line-strong)}
html[data-set="broadsheet"] .pg-dots button:hover::before{background:var(--t-muted)}
html[data-set="broadsheet"] .pg-dots button.on::before{width:28px;height:2px;background:var(--accent-ui)}
html[data-set="broadsheet"] .now-tag{border-radius:2px;background:var(--accent-ui);color:var(--on-accent);letter-spacing:.1em;padding:.08rem .4rem}
html[data-set="broadsheet"] :is(.card time,#updated,.bar .pct,.tally-box.claims td,.tally-row strong){font-variant-numeric:tabular-nums lining-nums}
html[data-set="broadsheet"] :is(.cm .cm-still,.cm){border-radius:var(--r-media)!important}
html[data-set="broadsheet"] :is(.cm-dur,.cm-play){color:#fff!important}
html[data-set="broadsheet"] .cm-play svg{fill:#fff}
html[data-set="broadsheet"] body{font-family:var(--f-body)}
html[data-set="broadsheet"] :is(h1,.rail h2,.situation h2,.fronts-wrap h2,.cas-wrap h2,.timeline-wrap>h2){font-family:var(--f-head)}
html[data-set="broadsheet"] .card .headline{font-family:var(--f-card)}
html[data-set="broadsheet"] :is(.leaflet-popup-content-wrapper,.leaflet-popup-tip){background:var(--t-surface-1);color:var(--t-text);box-shadow:var(--shadow-pop)}
html[data-set="broadsheet"] .leaflet-popup-content{color:var(--t-text)}
/* The side swatches written into the page (by group: the Iran desk has its own six) */
html[data-theme="broadsheet-day"] .lean-f[data-lean="houthi"] .sw{background:#a8372a!important}
html[data-theme="broadsheet-day"] .lean-f[data-lean="gov"] .sw{background:#0d7680!important}
html[data-theme="broadsheet-day"] .lean-f[data-lean="indep"] .sw{background:#9c8f85!important}
html[data-theme="broadsheet-night"] .lean-f[data-lean="houthi"] .sw{background:#e2694f!important}
html[data-theme="broadsheet-night"] .lean-f[data-lean="gov"] .sw{background:#3fb0b3!important}
html[data-theme="broadsheet-night"] .lean-f[data-lean="indep"] .sw{background:#766b62!important}

/* ================= BROADSHEET: shared by Day and Night ================= */
html[data-set="broadsheet"]{
  --r-card:2px;--r-btn:2px;--r-media:2px;
  --f-body:"Libre Franklin","Heebo","Noto Sans Arabic",system-ui,sans-serif;--f-head:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;--f-card:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;--f-prose:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;
}
/* Day: FT paper, claret, teal and oxford blue */
html[data-theme="broadsheet-day"]{
  --bg:#fff1e5;--panel:#fff7ef;--line:#e6d2bf;--text:#33302e;--muted:#6f6660;
  --houthi:#a8372a;--plc:#0d7680;--saudi:#5f86ad;--contested:#b07d1a;--mixed:#7d6b99;--accent:#b3261e;
  --accent-ui:#990f3d;--on-accent:#fff;
  --t-bg:#fff1e5;--t-surface-1:#fff7ef;--t-surface-2:#f8e4d2;--t-surface-3:#f0d6c0;--t-surface-4:#e5c6ab;
  --t-line-soft:#f1dfce;--t-line:#e6d2bf;--t-line-strong:#c9ad94;
  --t-strong:#1a1817;--t-text:#33302e;--t-text-2:#4d4845;--t-muted:#6f6660;--t-faint:#9c8f85;--t-link:#990f3d;--t-on-light:#33302e;
  --t-glass:rgba(255,245,236,.96);--shadow-pop:0 6px 22px rgba(80,40,20,.18);
  --ink-fight:#c9962b;--ink-strike:#b3261e;--ink-vessel:#1d6fa3;--ink-port:#d46a1f;--ink-say:#7d4e9c;--ev-edge:#fff7ef;--halo:#fff1e5;--halo-ink:#3a2f28;
}
/* Night: warm charcoal, salmon, light teal */
html[data-theme="broadsheet-night"]{
  --bg:#1b1918;--panel:#221f1d;--line:#34302c;--text:#efe6dd;--muted:#a99d93;
  --houthi:#e2694f;--plc:#3fb0b3;--saudi:#7aa5d6;--contested:#d9aa45;--mixed:#a898c4;--accent:#ef6a5a;
  --accent-ui:#f4a58a;--on-accent:#1b1918;
  --t-bg:#1b1918;--t-surface-1:#211e1c;--t-surface-2:#282421;--t-surface-3:#312c29;--t-surface-4:#3d3733;
  --t-line-soft:#2a2623;--t-line:#35302c;--t-line-strong:#4a433d;
  --t-strong:#fff8f1;--t-text:#efe6dd;--t-text-2:#cfc3b8;--t-muted:#a99d93;--t-faint:#766b62;--t-link:#f4a58a;--t-on-light:#1b1918;
  --t-glass:rgba(27,25,24,.95);--shadow-pop:0 10px 30px rgba(0,0,0,.55);
  --ink-fight:#e3b64d;--ink-strike:#ef6a5a;--ink-vessel:#5fa8dc;--ink-port:#f0924a;--ink-say:#b58ad6;--ev-edge:#1b1918;--halo:#1b1918;--halo-ink:#efe6dd;
}
/* Masthead */
html[data-set="broadsheet"] .top{border-bottom:1px solid var(--t-strong);box-shadow:0 3px 0 -2px var(--t-strong);padding:.85rem 1rem .8rem}
html[data-set="broadsheet"] h1{font-size:1.75rem;font-weight:600;letter-spacing:-.012em;color:var(--t-strong)}
html[data-set="broadsheet"] .sub{font:italic 400 .86rem/1.3 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;color:var(--t-muted)}
html[data-set="broadsheet"] .stamp{font:500 .7rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted)}
html[data-set="broadsheet"] .pulse{background:var(--plc)}
/* Control shares: boxes like the Original, serif figures */
html[data-set="broadsheet"] .bars{border-bottom:1px solid var(--t-line-strong);gap:1.2rem;padding:.7rem 1rem .8rem}
html[data-set="broadsheet"] .bar{background:var(--t-surface-1);border:1px solid var(--t-line-strong);border-radius:4px;padding:.5rem .7rem .6rem}
html[data-set="broadsheet"] .bar h3{font:600 .66rem/1.2 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--t-text-2)}
html[data-set="broadsheet"] .bar .pct{font:600 1.9rem/1.05 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;letter-spacing:-.01em}
html[data-set="broadsheet"] .track{height:2px;border-radius:0;background:var(--t-line)}
/* Latest developments */
html[data-set="broadsheet"] .situation{background:var(--t-surface-1);padding:.8rem 1rem .9rem}
html[data-set="broadsheet"] .situation p,html[data-set="broadsheet"] .situation-window,html[data-set="broadsheet"] .front-sum,html[data-set="broadsheet"] .phase-sum,html[data-set="broadsheet"] .front-card .full,html[data-set="broadsheet"] .front-card .front-composed,html[data-set="broadsheet"] .phase-card .full p{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-size:1.02rem;line-height:1.55;color:var(--t-text)}
html[data-set="broadsheet"] .rail h2,html[data-set="broadsheet"] .situation h2,html[data-set="broadsheet"] .fronts-wrap h2,html[data-set="broadsheet"] .cas-wrap h2,html[data-set="broadsheet"] .timeline-wrap>h2{font-size:1.4rem;font-weight:600;letter-spacing:-.006em;color:var(--t-strong)}
html[data-set="broadsheet"] .cadence,html[data-set="broadsheet"] p.cadence{font:500 .66rem/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
html[data-set="broadsheet"] .to-fronts{background:transparent;border-color:var(--accent-ui);color:var(--accent-ui);text-transform:uppercase;letter-spacing:.08em;font-size:.64rem}
/* Live scan */
html[data-set="broadsheet"] .live-scan{background:transparent;border-bottom:1px solid var(--t-line-strong);padding:.2rem 1rem}
html[data-set="broadsheet"] .live-scan details{background:var(--t-surface-1);border:1px solid var(--t-line-strong);border-radius:4px;padding:.15rem .65rem .2rem}
html[data-set="broadsheet"] .live-scan summary::before{color:var(--accent-ui)}
html[data-set="broadsheet"] .live-scan .ls-title{font:600 .68rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
html[data-set="broadsheet"] .live-scan .ls-meta{font:italic .8rem "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif}
/* Toolbar */
html[data-set="broadsheet"] .toolbar{border-bottom:1px solid var(--t-line-strong)}
html[data-set="broadsheet"] .time-filter .tf-label{font:600 .64rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase}
html[data-set="broadsheet"] .time-filter button,html[data-set="broadsheet"] .ghost,html[data-set="broadsheet"] .more,html[data-set="broadsheet"] .layers button{background:transparent;border:1px solid var(--t-line-strong);color:var(--t-text);font:600 .66rem/1.2 var(--f-body);letter-spacing:.07em;text-transform:uppercase;padding:.36rem .62rem}
html[data-set="broadsheet"] .time-filter input[type="date"]{background:transparent;border-color:var(--t-line-strong);color:var(--t-text);font-family:var(--f-body)}
html[data-set="broadsheet"] .time-filter button:hover,html[data-set="broadsheet"] .ghost:hover,html[data-set="broadsheet"] .more:hover{border-color:var(--accent-ui);color:var(--accent-ui)}
/* Map */
html[data-theme="broadsheet-day"] .leaflet-tile-pane{filter:sepia(.42) saturate(1.15) hue-rotate(-12deg) brightness(1.02)}
html[data-theme="broadsheet-night"] .leaflet-tile-pane{filter:sepia(.3) brightness(.92)}
html[data-set="broadsheet"] .leaflet-container{background:var(--t-bg)}
html[data-set="broadsheet"] .legend,html[data-set="broadsheet"] .map-chip{background:var(--t-glass);border:1px solid var(--t-line-strong);border-radius:2px;box-shadow:var(--shadow-pop)}
html[data-set="broadsheet"] .legend .leg-title{font:600 .64rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--t-strong)}
html[data-set="broadsheet"] .legend .leg-sec{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-style:italic;font-weight:500;font-size:.7rem;letter-spacing:0}
html[data-set="broadsheet"] .map-chip{font:italic .78rem "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;color:var(--t-text-2)}
html[data-set="broadsheet"] .gov-name span{font:600 10.5px/1.1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--halo-ink);
  text-shadow:0 0 2px var(--halo),0 0 3px var(--halo),1px 1px 0 var(--halo),-1px -1px 0 var(--halo),1px -1px 0 var(--halo),-1px 1px 0 var(--halo)}
html[data-set="broadsheet"] .sa-city span{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-style:italic;color:var(--halo-ink);text-shadow:0 0 2px var(--halo),0 0 3px var(--halo),1px 1px 0 var(--halo),-1px -1px 0 var(--halo)}
html[data-set="broadsheet"] .sa-city i{background:var(--halo-ink);border-color:var(--halo)}
/* Event marks: rounded squares in the set's inks, edged in paper */
html[data-set="broadsheet"] .ev .ev-glyph{border-radius:7px;border:2px solid var(--ev-edge);color:#fff;box-shadow:0 4px 10px rgba(40,20,10,.35),0 0 0 1px rgba(40,20,10,.35)}
html[data-set="broadsheet"] .ev.combat,html[data-set="broadsheet"] .ev.clash,html[data-set="broadsheet"] .ev.capture,html[data-set="broadsheet"] .ev.redeploy,html[data-set="broadsheet"] .ev.military,html[data-set="broadsheet"] .ev.deployment,html[data-set="broadsheet"] .ev.position{--ev-ink:var(--ink-fight)}
html[data-set="broadsheet"] .ev.strike,html[data-set="broadsheet"] .ev.missile{--ev-ink:var(--ink-strike)}
html[data-set="broadsheet"] .ev.statement,html[data-set="broadsheet"] .ev.diplomacy,html[data-set="broadsheet"] .ev.intel,html[data-set="broadsheet"] .ev.humanitarian{--ev-ink:var(--ink-say)}
html[data-set="broadsheet"] .ev.vessel{--ev-ink:var(--ink-vessel)}
html[data-set="broadsheet"] .ev.port{--ev-ink:var(--ink-port)}
html[data-set="broadsheet"] .leg-ico{border-radius:3px;color:#fff}
html[data-set="broadsheet"] .leg-ico.combat{background:var(--ink-fight)}
html[data-set="broadsheet"] .leg-ico.strike{background:var(--ink-strike)}
html[data-set="broadsheet"] .leg-ico.vessel{background:var(--ink-vessel)}
html[data-set="broadsheet"] .leg-ico.port{background:var(--ink-port)}
/* Latest reports: boxed cards with the side colour on the left edge, as in the Original */
html[data-set="broadsheet"] .rail{background:var(--t-bg)}
html[data-set="broadsheet"] .feed-legend{font:italic .78rem "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;color:var(--t-muted)}
html[data-set="broadsheet"] .feed-legend .sw{border-radius:0;width:3px;height:12px}
html[data-set="broadsheet"] .card{background:var(--t-surface-1);border:1px solid var(--t-line-strong);border-inline-start:3px solid var(--t-faint);border-radius:4px;padding:.65rem .75rem .75rem}
html[data-set="broadsheet"] :is(.card.lean-south,.card.lean-indep,.card.lean-intl,.card.lean-other){border-inline-start-color:var(--t-faint)!important}
html[data-set="broadsheet"] .card.lean-houthi{border-inline-start-color:var(--houthi)!important}
html[data-set="broadsheet"] .card.lean-gov{border-inline-start-color:var(--plc)!important}
html[data-set="broadsheet"] .card.ir-axis{border-inline-start-color:#c45c26!important}
html[data-set="broadsheet"] .card.ir-opposition{border-inline-start-color:#a855f7!important}
html[data-set="broadsheet"] .card.ir-israel{border-inline-start-color:#3b82f6!important}
html[data-set="broadsheet"] .card.ir-us{border-inline-start-color:#ef4444!important}
html[data-set="broadsheet"] .card.ir-gulf{border-inline-start-color:#22c55e!important}
html[data-set="broadsheet"] .card.ir-intl{border-inline-start-color:var(--t-faint)!important}
html[data-set="broadsheet"] .card .headline{font-size:1.12rem;font-weight:500;line-height:1.28;color:var(--t-strong)}
html[data-set="broadsheet"] .card .lead,html[data-set="broadsheet"] .card .full{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-size:.92rem;line-height:1.5;color:var(--t-text-2)}
html[data-set="broadsheet"] .card time{font:600 .62rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--t-text-2)}
html[data-set="broadsheet"] .card .src{background:transparent;padding:0;font:600 .62rem/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase}
html[data-set="broadsheet"] .card .src a,html[data-set="broadsheet"] .card .src-wrap a{color:var(--accent-ui)}
html[data-set="broadsheet"] .card .lean-tag{background:transparent;padding:0;font:italic .74rem "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif}
html[data-set="broadsheet"] .card .actions button,html[data-set="broadsheet"] .card .actions a{color:var(--accent-ui);font:600 .64rem/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase}
html[data-set="broadsheet"] .card .meta .card-map{background:transparent;border:1px solid var(--t-line-strong);color:var(--t-text-2);font:600 .6rem/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase}
html[data-set="broadsheet"] .card .also{font:italic .78rem "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif}
html[data-set="broadsheet"] .card .reply-to{border-left-color:var(--accent-ui);background:var(--t-surface-2);font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-style:italic;font-size:.8rem}
/* Fronts, numbers, timeline: boxed pagers, as in the Original */
html[data-set="broadsheet"] .fronts-wrap,html[data-set="broadsheet"] .cas-wrap,html[data-set="broadsheet"] .timeline-wrap{background:transparent}
html[data-set="broadsheet"] .pager{background:var(--t-surface-1);border:1px solid var(--t-line-strong);border-radius:4px}
html[data-set="broadsheet"] .pager .front-card,html[data-set="broadsheet"] .pager .phase-card{padding:.9rem 2.8rem}
html[data-set="broadsheet"] .pager .tally-box{padding:.8rem 2.8rem .9rem}
html[data-set="broadsheet"] .front-card strong,html[data-set="broadsheet"] .phase-head strong{font:600 1.2rem/1.25 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;color:var(--t-strong)}
html[data-set="broadsheet"] .front-where,html[data-set="broadsheet"] .front-plain{font:italic .88rem/1.45 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;color:var(--t-muted)}
html[data-set="broadsheet"] .toggle-front,html[data-set="broadsheet"] .toggle-phase,html[data-set="broadsheet"] .toggle-sit{color:var(--accent-ui);font:600 .64rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
html[data-set="broadsheet"] .front-map-btn{background:transparent;border:1px solid var(--t-line-strong);color:var(--t-text-2);font:600 .6rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
html[data-set="broadsheet"] .tally-box h3{font:600 1.05rem/1.2 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;letter-spacing:0;text-transform:none;color:var(--t-strong)}
html[data-set="broadsheet"] .tally-box.claims table{font-size:.86rem}
html[data-set="broadsheet"] .tally-box.claims tr:first-child th{font:600 .6rem/1.2 var(--f-body);letter-spacing:.1em;border-bottom:1px solid var(--t-strong)}
html[data-set="broadsheet"] .tally-box.claims th[scope=row]{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-size:.95rem}
html[data-set="broadsheet"] .tally-box.claims td{font:600 .9rem var(--f-body)}
html[data-set="broadsheet"] .tally-box.claims .h{color:var(--houthi)}
html[data-set="broadsheet"] .tally-box.claims .g{color:var(--plc)}
html[data-set="broadsheet"] .tally-box.claims td .q{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-style:italic;font-weight:400}
/* Notes on the map */
html[data-set="broadsheet"] .leaflet-popup-content-wrapper{border-radius:2px;border-top:3px solid var(--accent-ui)}
html[data-set="broadsheet"] .leaflet-popup-content{font-family:var(--f-body)}
/* Light-page contrast fixes */
html[data-theme="broadsheet-day"] .bar .pct{filter:none}
html[data-theme="broadsheet-day"] .card .headline{font-weight:500}
/* Buttons that are white text on a coloured fill: --t-strong is dark on Day paper */
html[data-set="broadsheet"] .pin-sheet .front-float-go{background:var(--accent-ui);color:var(--on-accent)}
/* Night: map notes are dark, so the ink meant for a white note turns light */
html[data-theme="broadsheet-night"] :is(.leaflet-popup,.pin-sheet){--t-on-light:var(--t-text);--t-faint:var(--t-muted)}
html[data-theme="broadsheet-night"] .leaflet-popup-content :is(a,.pop-toggle){color:var(--t-link)}
html[data-theme="broadsheet-night"] .leaflet-popup-content .media-open{background:var(--t-surface-2)}
html[data-theme="broadsheet-night"] .leaflet-container a.leaflet-popup-close-button{color:var(--t-muted)}
html[data-theme="broadsheet-day"] .leaflet-popup-content :is(a,.pop-toggle){color:var(--t-link)}
html[data-set="broadsheet"] .leaflet-popup-content :is(a.src-link,.pop-src a){color:var(--t-link)!important;border-bottom-color:color-mix(in srgb,var(--t-link) 40%,transparent)}
html[data-theme="broadsheet-day"] .leaflet-popup-content .pop-meta{color:var(--t-muted)}
html[data-theme="broadsheet-night"] .leaflet-control-attribution{background:var(--t-glass)!important;color:var(--t-muted)}
html[data-theme="broadsheet-night"] .leaflet-control-attribution a{color:var(--t-link)}

/* R20: the menu reacts to its tab and open list only; the strip beside it lets clicks through. */
.sec-nav{pointer-events:none}
.sec-tab,.sec-nav.open .sec-list{pointer-events:auto}
/* A pin note's top rule takes its source's side colour, as the report cards' edge does. */
html[data-set="broadsheet"] .leaflet-popup.pop-lean-houthi .leaflet-popup-content-wrapper{border-top-color:var(--houthi)}
html[data-set="broadsheet"] .leaflet-popup.pop-lean-gov .leaflet-popup-content-wrapper{border-top-color:var(--plc)}
html[data-set="broadsheet"] .leaflet-popup.pop-lean-indep .leaflet-popup-content-wrapper{border-top-color:var(--t-faint)}
/* The Now tag sits at the middle of the title line, its word centred in the box. */
.phase-head strong{display:inline-flex;align-items:center;gap:.5rem}
.phase-head .now-tag{display:inline-flex;flex:none;align-items:center;justify-content:center;margin:0;line-height:1;vertical-align:middle}
html[data-set="broadsheet"] .phase-head .now-tag{padding:.24rem .4rem .2rem calc(.4rem + .1em)}
.phase-card.expandable{cursor:pointer}
/* Night: the map button's words a touch stronger on the salmon. */
html[data-theme="broadsheet-night"] .pin-sheet .front-float-go{color:#0d0b0a;font-weight:600;letter-spacing:.01em}
/* Phone: the headline often takes two lines; the Now tag sits on its first line, on the same baseline as the words, not between the lines. */
@media (max-width:720px){
  .phase-head strong{align-items:baseline}
  .phase-head .now-tag{align-self:baseline}
}

/* Main developments: "Show on map" at the top right of the box. */
.sit-head{align-items:center}
.sit-map-btn{flex:none;margin-left:auto;padding:.38rem .6rem;border:1px solid var(--t-line-strong,#2a3a4e);border-radius:var(--r-btn,4px);background:transparent;color:var(--t-text-2,#cbd5e1);font:600 .6rem/1 var(--f-body,inherit);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.sit-map-btn:hover,.sit-map-btn:focus-visible{background:var(--t-surface-3,#17273a);color:var(--t-strong,#fff)}
.pin-sheet.wide .pin-sheet-box{max-width:720px}
.pin-sheet.wide #pin-sheet-map{height:min(70vh,500px)}
.pin-sheet.as-pop.wide #pin-sheet-map{height:min(62vh,470px)}

/* A place lit on the map: its outline breathing, or a pulse at its spot (no pin). */
path.place-hl{animation:placeHl 1.8s ease-in-out infinite}
@keyframes placeHl{50%{fill-opacity:.4;stroke-width:3.4}}
.place-halo-wrap,.dev-wrap{background:none;border:0}
.place-halo{position:relative;display:block;width:60px;height:60px;pointer-events:none}
.place-halo.big{width:90px;height:90px}
.place-halo b{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 2.5px #fffc,0 0 14px 5px #fbbf2488}
.place-halo i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fbbf24;opacity:0;animation:placeRing 2s ease-out infinite}
.place-halo i+i{animation-delay:1s}
.place-halo.big i{border-width:2.5px}
@keyframes placeRing{0%{transform:scale(.6);opacity:.95}100%{transform:scale(4.2);opacity:0}}

/* The developments' pictures (app.js drawDevMarks): each fixed on its exact
   spot (the small white dot, drawn on top) at every zoom, scaled round it by
   --dvs as the map zooms out; in the colour of the side that acted. No notes:
   the key names each kind. District fills and flight paths are moved by the page
   on the same 4.2 s loop. */
.dv{overflow:visible}
.dv .dv-dot{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:#f8fafc;box-shadow:0 0 0 1.5px #0b1220;pointer-events:none}
.dv .dv-pic{position:absolute;left:0;top:0;pointer-events:none;transform:scale(var(--dvs,1));transform-origin:0 0}
.dv .dv-one{position:absolute;left:0;top:0;width:0;height:0}
.dv .dv-flip{transform:scaleX(-1)}
.dv .dv-lead{display:none;position:absolute;left:0;top:0;height:0;border-top:1.5px solid rgba(248,250,252,.75);transform-origin:0 0;pointer-events:none;filter:drop-shadow(0 0 1px #0b1220)}
html[data-theme="broadsheet-day"] .dv .dv-lead{border-top-color:rgba(28,25,23,.7);filter:none}
.dp{position:absolute;display:block;pointer-events:none}
.dp svg{display:block;width:100%;height:100%;overflow:visible}
.dp b,.dp em,.dp i{position:absolute;display:block}
.dp b,.dp-duel{filter:drop-shadow(0 0 1.2px #000) drop-shadow(0 1px 2px #0009)}
/* Air strike: a jet passes, drops a bomb, the spot bursts. */
.dp-air{left:-22px;top:-28px;width:44px;height:34px}
.dp-air b{left:7px;top:0;width:30px;height:19px;animation:devJet 2.4s linear infinite}
@keyframes devJet{0%{transform:translateX(-14px);opacity:0}10%,80%{opacity:1}100%{transform:translateX(14px);opacity:0}}
.dp-air em{left:19.5px;top:10px;width:5px;height:10px;opacity:0;animation:devBomb 2.4s ease-in infinite}
@keyframes devBomb{0%,40%{opacity:0;transform:translateY(0)}42%{opacity:1}66%{opacity:1;transform:translateY(12px)}68%,100%{opacity:0;transform:translateY(12px)}}
.dp-air i,.dp-dive i,.dp-hit i{width:10px;height:10px;border-radius:50%;border:2.5px solid #ef4444;opacity:0;animation:devBoom 2.4s ease-out infinite}
.dp-air i{left:17px;top:23px}
.dp-air i+i,.dp-dive i+i,.dp-hit i+i{border-color:#fbbf24;animation-delay:.12s}
@keyframes devBoom{0%,67%{transform:scale(.4);opacity:0}70%{opacity:1}100%{transform:scale(3.2);opacity:0}}
/* Shelling: a howitzer fires, the shell arcs over, bursts land. */
.dp-art{left:-42px;top:-22px;width:50px;height:30px}
.dp-art b{left:0;top:12px;width:26px;height:15px}
.dp-art .fl{animation:devMuzzle 2.1s steps(1,end) infinite}
@keyframes devMuzzle{0%{opacity:1}10%,100%{opacity:0}}
.dp-art em{left:21px;top:12px;width:5px;height:5px;border-radius:50%;background:#fde047;box-shadow:0 0 4px #f97316;opacity:0;animation:devShell 2.1s linear infinite}
@keyframes devShell{0%{opacity:1;transform:translate(0,0)}35%{transform:translate(8px,-8px)}70%{transform:translate(15px,-2px)}82%{opacity:1;transform:translate(18.5px,7.5px)}84%,100%{opacity:0;transform:translate(18.5px,7.5px)}}
.dp-art i{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,#f97316 55%,#dc262600 100%);opacity:0;animation:devPop 2.1s ease-out infinite}
.dp-art i:nth-of-type(1){left:42px;top:22px;animation-delay:1.72s}
.dp-art i:nth-of-type(2){left:45px;top:20px;animation-delay:1.85s}
.dp-art i:nth-of-type(3){left:39px;top:24px;animation-delay:1.98s}
@keyframes devPop{0%{transform:scale(.3);opacity:0}8%{transform:scale(1.7);opacity:1}30%,100%{transform:scale(2.2);opacity:0}}
/* Ground fighting: two riflemen trading fire. */
.dp-duel{left:-23px;top:-9px;width:46px;height:18px}
.dp-duel .fa,.dp-duel .fb{animation:devFlash .6s steps(1,end) infinite}
.dp-duel .fb{animation-delay:.3s}
@keyframes devFlash{0%{opacity:1}35%,100%{opacity:0}}
.dp-duel .ta{animation:devTrA .6s linear infinite}
.dp-duel .tb{animation:devTrB .6s linear infinite;animation-delay:.3s}
@keyframes devTrA{0%{transform:translateX(0);opacity:1}100%{transform:translateX(6px);opacity:0}}
@keyframes devTrB{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-6px);opacity:0}}
/* Attack repelled: the side that held keeps its shield on the spot (its colour);
   the attacker (his colour) runs into it, sparks fly, he falls back. */
.dp-shield{left:-32px;top:-13px;width:43px;height:26px}
.dp-shield b{left:21px;top:0;width:22px;height:26px;animation:devShield 2.1s ease-in-out infinite}
@keyframes devShield{0%,40%{transform:scale(1)}48%{transform:scale(1.14)}62%,100%{transform:scale(1)}}
.dp-shield em{left:-2px;top:7px;width:23px;height:12px;filter:drop-shadow(0 0 1.2px #000) drop-shadow(0 1px 2px #0009);animation:devRecoil 2.1s ease-in-out infinite}
@keyframes devRecoil{0%{transform:translateX(-4px)}40%{transform:translateX(3px)}48%{transform:translateX(0) rotate(-10deg)}70%,100%{transform:translateX(-5px) rotate(0)}}
.dp-shield i{left:19px;top:9px;width:6px;height:6px;border-radius:50%;background:#fde047;box-shadow:0 0 4px #f97316;opacity:0;animation:devSparkHit 2.1s ease-out infinite}
.dp-shield i+i{top:15px;left:18px;animation-delay:.08s}
@keyframes devSparkHit{0%,38%{opacity:0;transform:scale(.3)}44%{opacity:1;transform:scale(1.4)}62%,100%{opacity:0;transform:translate(-4px,0) scale(2)}}
/* Ground taken: the taker's flag is planted as the district changes colour. */
.dp-flag{left:-2px;top:-40px;width:44px;height:40px;opacity:0;animation:devPlant 4.2s ease-out infinite}
@keyframes devPlant{0%,26%{opacity:0;transform:translateY(-12px)}38%{opacity:1;transform:translateY(0)}92%{opacity:1}100%{opacity:0}}
.dp-flag>i{left:1px;bottom:0;width:2px;height:40px;background:#e5e7eb;box-shadow:0 0 2px #000a}
.dp-flag>span{position:absolute;left:3px;top:0;display:block;width:40px;height:27px;box-shadow:0 1px 3px #000a;animation:devWave 1.4s ease-in-out infinite;transform-origin:left center}
@keyframes devWave{50%{transform:skewY(-3deg) scaleX(.96)}}
/* Advance: an arrow in the advancing side's colour, its tip on the spot, turned
   towards the other side's nearest lines (--rot), pushing on; the district's edge pulses. */
.dp-adv{left:-34px;top:-8px;width:34px;height:16px;transform-origin:34px 8px;transform:rotate(var(--rot,0deg))}
.dp-adv b{left:0;top:0;width:32px;height:16px;animation:devPush 1.6s ease-in-out infinite}
@keyframes devPush{0%{transform:translateX(-7px);opacity:.25}55%{transform:translateX(0);opacity:1}85%{transform:translateX(0);opacity:1}100%{transform:translateX(-7px);opacity:.25}}
/* At sea: a ship, its wake in the colour of the side that acted. */
.dp-ship{left:-15px;top:-15px;width:30px;height:30px}
.dp-ship b{left:0;top:8px;width:30px;height:14px;animation:devBob 2.1s ease-in-out infinite}
.dp-ship i{left:0;top:12px;width:30px;height:12px;border-radius:50%;border:2.5px solid var(--dev,#06b6d4);opacity:0;animation:placeRing 2.1s ease-out infinite}
.dp-ship i+i{animation-delay:1.05s}
@keyframes devBob{50%{transform:translateY(-2px) rotate(-2deg)}}
/* A missile or drone diving onto its spot, or (its launch area known) the burst where its path ends. */
.dp-dive{left:-28px;top:-22px;width:36px;height:28px}
.dp-dive b{left:0;top:0;width:22px;height:9px;opacity:0;animation:devDive 2.4s ease-in infinite}
.dp-dive.is-drone b{left:1px;top:-3px;width:20px;height:15px}
/* In sight most of the loop: it dives, hits, and is back at the top a moment later. */
@keyframes devDive{0%{transform:translate(-10px,-1px) rotate(35deg);opacity:1}55%{transform:translate(8px,11.5px) rotate(35deg);opacity:1}59%{transform:translate(8px,11.5px) rotate(35deg);opacity:0}60%{transform:translate(-10px,-1px) rotate(35deg);opacity:0}70%,100%{transform:translate(-10px,-1px) rotate(35deg);opacity:1}}
.dp-dive i{left:23px;top:17px;animation-name:devBoomDive}
@keyframes devBoomDive{0%,53%{transform:scale(.4);opacity:0}57%{opacity:1}88%,100%{transform:scale(3.2);opacity:0}}
.dp-dive.dp-int i{border-color:#fde047}
.dp-hit{left:0;top:0;width:0;height:0}
.dp-hit i{left:-5px;top:-5px;animation:devHit 4.2s ease-out infinite}
.dp-hit.dp-int i{border-color:#fde047}
@keyframes devHit{0%,58%{transform:scale(.4);opacity:0}61%{opacity:1}85%,100%{transform:scale(3.2);opacity:0}}
.dp .pr,.dev-shot .pr{animation:devProp .14s linear infinite}
@keyframes devProp{50%{opacity:.2}}
/* A missile or drone in flight along its path, turned by the page. */
.dev-shot{position:relative;display:block;width:100%;height:100%;pointer-events:none}
.dev-shot i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.dev-shot svg{width:32px;height:14px;filter:drop-shadow(0 0 1.5px #000)}
.dev-shot.is-drone svg{width:30px;height:22px}
/* Day: the pictures stand on light, side-coloured ground, so each gets a white
   outline. */
html[data-theme="broadsheet-day"] .dp b,html[data-theme="broadsheet-day"] .dp-duel,html[data-theme="broadsheet-day"] .dp-shield em{filter:drop-shadow(0 0 .8px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 2px #0006)}
html[data-theme="broadsheet-day"] .dev-shot svg{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 1px 2px #0006)}
html[data-theme="broadsheet-day"] .dv .dv-dot{background:#fff;box-shadow:0 0 0 2px #1c1917,0 0 0 3.5px #fff}
/* Yemen or Saudi Arabia, at the top right of the latest developments' map. */
.pin-sheet-mapbox{position:relative}
.dev-switch{position:absolute;top:10px;right:10px;z-index:800;display:flex;border-radius:6px;overflow:hidden;box-shadow:0 1px 5px #000a}
.dev-switch button{padding:.45rem .7rem;border:0;background:#0f172aeb;color:#cbd5e1;font:600 .66rem/1 var(--f-body,inherit);letter-spacing:.04em;cursor:pointer}
.dev-switch button+button{border-left:1px solid #334155}
.dev-switch button.on{background:#f8fafc;color:#0b1220}
.dev-none{position:absolute;top:46px;right:10px;z-index:800;max-width:min(300px,70%);margin:0;padding:.45rem .6rem;border-radius:6px;background:#0f172aeb;color:#e2e8f0;font:500 .7rem/1.4 var(--f-body,inherit);box-shadow:0 1px 5px #000a}
.dev-none[hidden]{display:none}
.dev-step{position:absolute;top:10px;left:56px;right:10px;z-index:800;display:flex;align-items:stretch;justify-content:space-between;border-radius:8px;overflow:hidden;box-shadow:0 1px 6px #000b;background:#0f172af0;max-width:420px;margin:0 auto}
.dev-step button{flex:none;width:2.4rem;border:0;background:#f8fafc;color:#0b1220;font:700 1.35rem/1 var(--f-body,inherit);cursor:pointer}
.dev-step button:hover{background:#e2e8f0}
.dev-step button:focus-visible{outline:2px solid #38bdf8;outline-offset:-2px}
.dev-step-at{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;flex:1;min-width:0;padding:.4rem .5rem;color:#e2e8f0;font:500 .72rem/1.15 var(--f-body,inherit);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-step-at b{color:#f8fafc;font-weight:700;font-size:.8rem}
.dev-step-at small{color:#94a3b8;font-size:.62rem;letter-spacing:.04em}
.dev-key{margin-top:4px;opacity:.95}
.dev-key .dk{display:inline-block;width:26px;height:17px;margin-right:5px;vertical-align:-3px;color:var(--t-text-2,#cbd5e1)}
.dev-key .dk.wide{width:40px}
.dev-key .dk svg{width:100%;height:100%}
.dev-key .dk :is(.fl,.fa,.fb,.ta,.tb){display:none}
.dev-key .dk.wide2{width:30px}
/* The fronts' button is the same "Show on map" as the developments' one. */
.front-head .sit-map-btn.front-map-btn{padding:.38rem .6rem;border-radius:var(--r-btn,4px);background:transparent;color:var(--t-text-2,#cbd5e1);font:600 .6rem/1 var(--f-body,inherit);letter-spacing:.07em;text-transform:uppercase}
.front-head .sit-map-btn.front-map-btn:hover,.front-head .sit-map-btn.front-map-btn[aria-expanded="true"]{background:var(--t-surface-3,#17273a);color:var(--t-strong,#fff)}
@media (prefers-reduced-motion:reduce){
  path.place-hl,.place-halo i,.dp,.dp *,.dev-shot .pr{animation:none!important}
  .place-halo i,.dp-air i,.dp-ship i,.dp-hit i,.dp-energy i{opacity:.6;transform:scale(2)}
  .dp-art i,.dp-flag,.dp-dive b{opacity:.9}
}

/* Latest developments: short paragraphs with a line between them; the fuller
   account behind "Read more". On a phone only the first paragraph shows first. */
.situation .sit-body .situation-window{margin:0}
.situation .sit-body .situation-window+.situation-window,.situation .sit-body .sit-more{margin-top:.9em}
.situation .sit-more .situation-window:first-child{margin-top:0}
.situation:not(.sit-open) .sit-more{display:none}
.situation .toggle-sit{display:block}
.situation:not(.sit-open) .sit-rest{display:none}
/* Clicking the text opens and closes it, as a Timeline box does (app.js renderSituation). */
.sit-click .sit-body,.front-card.expandable{cursor:pointer}
/* A long report in short paragraphs; a closed card shows the first one's three lines. */
.card .lead.lead-multi{display:block;overflow:visible;-webkit-line-clamp:unset}
.card .lead.lead-multi p{margin:0}
.card .lead.lead-multi p+p{margin-top:.9em}
.card:not(.open) .lead.lead-multi p:first-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card:not(.open) .lead.lead-multi p+p{display:none}

/* Search and the alignment filters in the broadsheet themes. */
html[data-set="broadsheet"] .feed-search-btn{border-radius:0;color:var(--t-text-2)}
html[data-set="broadsheet"] .feed-search-btn:hover,html[data-set="broadsheet"] .feed-search-btn[aria-expanded="true"]{background:transparent;color:var(--t-strong)}
html[data-set="broadsheet"] .feed-search input{border-radius:0;background:var(--t-surface-1);color:var(--t-strong);font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-size:1rem}
html[data-set="broadsheet"] .feed-search input:focus{outline-color:var(--accent-ui)}
html[data-set="broadsheet"] .feed-search .fs-go{border-radius:0;background:var(--accent-ui);color:var(--on-accent);font:600 .62rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
html[data-set="broadsheet"] .feed-legend .lean-f{border-radius:0;padding:.26rem .55rem}
html[data-set="broadsheet"] .feed-legend .lean-f:hover,html[data-set="broadsheet"] .feed-legend .lean-f[aria-pressed="true"]{background:var(--t-surface-2);color:var(--t-strong)}
html[data-set="broadsheet"] .feed-note{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-size:.9rem;color:var(--t-text-2)}
html[data-set="broadsheet"] .feed-note button{color:var(--accent-ui);font:600 .62rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
html[data-set="broadsheet"] .fs-empty{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-size:.95rem}
/* Every "Show on map" lights up on hover as Latest developments' one does, in every theme. */
html .card .meta .card-map:is(:hover,:focus-visible),html[data-set] .card .meta .card-map:is(:hover,:focus-visible),
html .front-head .sit-map-btn.front-map-btn:is(:hover,:focus-visible),html[data-set] .front-head .sit-map-btn.front-map-btn:is(:hover,:focus-visible),
html .front-float-go:is(:hover,:focus-visible),html[data-set] .front-float-go:is(:hover,:focus-visible){background:var(--t-surface-3,#17273a);color:var(--t-strong,#fff)}
html .pin-sheet .front-float-go:is(:hover,:focus-visible),html[data-set] .pin-sheet .front-float-go:is(:hover,:focus-visible){filter:brightness(1.18);background:var(--accent-ui,#1d4ed8);color:var(--on-accent,#fff)}
html[data-theme="broadsheet-night"] .pin-sheet .front-float-go:is(:hover,:focus-visible){color:#0d0b0a}
/* The pop-up key on a phone: two even columns, each picture in a fixed-width slot so the names line up. */
@media (max-width:720px){
  .pin-sheet .pop-legend{display:grid!important;grid-template-columns:1fr 1fr;gap:5px 10px;align-items:center}
  .pin-sheet .pop-legend span{white-space:normal;line-height:1.2;min-width:0}
  .dev-key .dk,.dev-key .dk.wide{flex:none;width:34px;height:17px;margin-right:4px}
}
/* Sirens: a red siren on the dot, its sound rings spreading out. */
.dp-alert{left:-11px;top:-10px;width:22px;height:20px}
.dp-alert b{left:1px;top:0;width:20px;height:18px;animation:devSiren 1.4s ease-in-out infinite}
.dp-alert b .sw1{animation:devSirenWave .7s steps(2) infinite}
.dp-alert i{left:1px;top:0;width:20px;height:20px;border-radius:50%;border:2px solid #ef4444;opacity:0;animation:placeRing 2.1s ease-out infinite}
.dp-alert i+i{animation-delay:1.05s}
/* Energy site hit: a storage tank, its roof burning, rings in the attacker's colour */
.dp-energy{left:-12px;top:-14px;width:24px;height:26px}
.dp-energy b{left:1px;top:0;width:22px;height:22px}
.dp-energy b .fe{transform-origin:11px 8px;animation:devFlame .9s ease-in-out infinite alternate}
.dp-energy i{left:0;top:10px;width:24px;height:16px;border-radius:50%;border:2.5px solid var(--dev,#f97316);opacity:0;animation:placeRing 2.1s ease-out infinite}
.dp-energy i+i{animation-delay:1.05s}
@keyframes devFlame{0%{transform:scale(.9,.85)}100%{transform:scale(1.08,1.15)}}
@keyframes devSiren{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes devSirenWave{0%{opacity:1}100%{opacity:.15}}
.dev-key .dk .sw1{display:inline}
@media (prefers-reduced-motion:reduce){.dp-alert i{opacity:.6;transform:scale(1.6)}}
/* The pop-up key on a phone: light and tidy. Sides in one short row of small
   swatches; the pictures below in two even columns, small and muted, a thin
   line between the two. */
@media (max-width:720px){
  .pin-sheet .pop-legend{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;font-size:.62rem;font-weight:400;color:var(--t-text-3,#94a3b8);margin:6px 2px 0}
  .pin-sheet .pop-legend span{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;min-width:0}
  .pin-sheet .pop-legend .sw{width:.6rem;height:.6rem}
  .pin-sheet .pop-legend.dev-key{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px;padding-top:6px;border-top:1px solid var(--t-line,#ffffff1f);opacity:1}
  .dev-key .dk,.dev-key .dk.wide,.dev-key .dk.wide2{flex:none;width:24px;height:13px;margin:0;vertical-align:0}
}
html[data-set="broadsheet"] .ye-clock{border-inline-end-color:var(--t-line-strong,var(--line))}
html[data-set="broadsheet"] #ye-clock{font:600 .78rem/1 var(--f-body);letter-spacing:.04em;color:var(--t-strong)}
/* Phone: "Updated" first and the clock after it, so the ticking seconds never move "Updated" */
@media (max-width:720px){.stamp .pulse{order:1}.stamp #updated{order:2}.stamp .ye-clock{order:3;border-inline-end:0;padding-inline-end:0;margin-inline-end:0;border-inline-start:1px solid var(--t-line-strong,var(--line));padding-inline-start:.7rem;margin-inline-start:.3rem}}
/* Interception: the drone or missile is stopped in mid-air and a burst takes its place; nothing reaches the ground */
.dp-dive.dp-int b{animation-name:devIntFly}
@keyframes devIntFly{0%{transform:translate(-10px,-1px) rotate(35deg);opacity:1}42%{transform:translate(-1px,5px) rotate(35deg);opacity:1}45%,100%{transform:translate(-1px,5px) rotate(35deg);opacity:0}}
.dp-dive.dp-int em{left:4px;top:3px;width:14px;height:14px;opacity:0;animation:devIntBurst 2.4s ease-out infinite}
@keyframes devIntBurst{0%,42%{transform:scale(.3) rotate(0);opacity:0}47%{transform:scale(1.3) rotate(20deg);opacity:1}75%{transform:scale(1) rotate(35deg);opacity:1}90%,100%{transform:scale(.8) rotate(40deg);opacity:0}}
.dp-dive.dp-int i{left:6px;top:5px;animation-name:devIntRing}
@keyframes devIntRing{0%,43%{transform:scale(.4);opacity:0}47%{opacity:1}80%,100%{transform:scale(2.6);opacity:0}}
.dp-hit.dp-int em{left:-7px;top:-7px;width:14px;height:14px;opacity:0;animation:devIntHit 4.2s ease-out infinite}
@keyframes devIntHit{0%,57%{transform:scale(.3);opacity:0}62%{transform:scale(1.3) rotate(20deg);opacity:1}85%{transform:scale(1) rotate(35deg);opacity:1}95%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dp-int em{opacity:1!important}}
/* On a phone the pager has no side arrows, so its boxes need no room for them: even padding, the table centred */
@media (max-width:720px),(hover:none){html[data-set="broadsheet"] .pager .tally-box{padding:.8rem 1rem .9rem}html[data-set="broadsheet"] .pager .front-card,html[data-set="broadsheet"] .pager .phase-card{padding:.9rem 1.1rem}}

/* The numbers' category switch in the Broadsheet looks: square, the accent under the one shown */
html[data-set="broadsheet"] .num-cat{border-radius:2px;border-color:var(--t-line-strong)}
html[data-set="broadsheet"] .num-cat button{font:600 .64rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted);padding:.5rem .8rem}
html[data-set="broadsheet"] .num-cat button+button{border-left-color:var(--t-line-strong)}
html[data-set="broadsheet"] .num-cat button.on{background:var(--t-strong);color:var(--t-bg,var(--bg,#fff));box-shadow:inset 0 -3px 0 var(--accent-ui)}
html[data-set="broadsheet"] .tally-box.ledger td.src{font:400 .78rem/1.3 var(--f-body)}
html[data-set="broadsheet"] .tally-box.ledger th small,html[data-set="broadsheet"] .tally-box.ledger td small{font-family:var(--f-body);font-size:.7rem}
html[data-set="broadsheet"] .tally-box.ledger .l{font:400 .84rem/1.35 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif}
html[data-set="broadsheet"] .num-empty{font:italic 400 .9rem/1.4 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif}
html[data-set="broadsheet"] .num-note{font:italic 400 .78rem/1.4 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif}
html[data-set="broadsheet"] .st{border-radius:0}
html[data-set="broadsheet"] .tally-box.ledger .spark polyline{stroke:var(--t-strong)}
html[data-theme="broadsheet-day"] .st-working,html[data-theme="broadsheet-day"] .tally-box.ledger small.q.up{color:#15803d}
html[data-theme="broadsheet-day"] .tally-box.ledger small.claim,html[data-theme="broadsheet-day"] .num-note small.claim,html[data-theme="broadsheet-day"] .st-reduced,html[data-theme="broadsheet-day"] .tally-box.ledger small.q.down{color:#b45309}
html[data-theme="broadsheet-day"] .st-down{color:#b91c1c}
html[data-theme="broadsheet-day"] .tally-box.claims .tier.t-official{color:#15803d}
html[data-theme="broadsheet-day"] .tally-box.claims .tier.t-wire{color:#1d4ed8}
html[data-theme="broadsheet-day"] .tally-box.claims .tier.t-claim{color:#b45309}
html[data-theme="broadsheet-day"] .chart .s2,html[data-theme="broadsheet-day"] .chart-key i.s2{stroke:#1d4ed8;border-top-color:#1d4ed8}
html[data-theme="broadsheet-day"] .chart circle.s2{fill:#1d4ed8}
html[data-set="broadsheet"] .stat3 div{border-radius:2px}
html[data-set="broadsheet"] .stat3 b{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-weight:600}
html[data-set="broadsheet"] .chart-title{font-family:var(--f-body)}
html[data-theme="broadsheet-day"] .tally-box.claims .sl-unoff,html[data-theme="broadsheet-day"] .sl-key .sl-unoff{color:#b45309}
html[data-set="broadsheet"] .spot-pop{background:var(--t-surface-2,var(--paper,#fff));border-radius:2px}
html[data-set="broadsheet"] .tally-box h3 small.unit{font:400 .72rem/1 var(--f-body)}
/* Phones: the ship table's five columns fit the width */
@media (max-width:560px){
  .tally-box.ledger table.span5{table-layout:fixed}
  .tally-box.ledger table.span5 tr > :first-child{width:28%} /* room for "Bab al-Mandab" and its chart icon */
  html[data-set] .tally-box.ledger table.span5 th,html[data-set] .tally-box.ledger table.span5 td{padding-left:.12rem;padding-right:.12rem;font-size:.74rem;overflow-wrap:anywhere}
  html[data-set] .tally-box.ledger table.span5 tr:first-child th{font-size:.52rem;letter-spacing:0;overflow-wrap:normal}
  html[data-set] .tally-box.ledger table.span5 th small.span{font-size:.52rem}
  html[data-set] .tally-box.ledger table.span5 td small{font-size:.58rem;line-height:1.25}
  html[data-set] .tally-box.ledger table.span5 th[scope=row]{font-size:.8rem;line-height:1.2}
  html[data-set] .tally-box.ledger table.list td,html[data-set] .tally-box.ledger table.list th{font-size:.8rem}
}

/* Masthead (the whole site): the date, "The Situation Room" over "Open-source intelligence" between
   two accent lines, the theme button; the desk's own line follows under its rule. The name grows with
   the window and the line under it is set in em of the name, so the two keep one ratio at every width. */
.mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:.9rem 1rem .75rem;border-bottom:1px solid var(--t-line-strong)}
.mast-date{font:500 .7rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted)}
.mast-end{justify-self:end;display:flex}
.mast-end .theme-step{margin:0}
.mast-mid{display:flex;flex-direction:column;align-items:center;font-size:clamp(1.65rem,1.16rem + 2.1vw,2.6rem);gap:.173em}
.mast-name{display:flex;color:var(--t-strong);text-decoration:none;font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;white-space:nowrap}
.mast-name .mn{font-weight:600;font-size:1em;line-height:1;letter-spacing:-.018em}
.mast-line{display:flex;align-items:center;gap:.79em;font:700 .292em/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ui);white-space:nowrap}
.mast-line::before,.mast-line::after{content:"";width:2.3em;height:max(1px,.165em);background:var(--accent-ui)}
html[data-set] .top{border-bottom:1px solid var(--t-line-strong);box-shadow:none;padding:.6rem 1rem}
/* The desk's name, "Desk: Iran conflict", in serif capitals (the box is trimmed
   to their height; older browsers get padding for the empty space under them) */
html .top h1.desk-label{font:600 1.08rem/1.2 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;letter-spacing:.09em;text-transform:uppercase;color:var(--t-strong);position:relative;padding:.14em 0;text-box:trim-both cap alphabetic}
html .top h1.desk-label .dl-pre{color:var(--t-muted,#8b98a8);font-weight:500}
@supports not (text-box:trim-both cap alphabetic){html .top h1.desk-label{padding-top:.26em;padding-bottom:0}}
@media (max-width:720px){
  .mast{grid-template-columns:40px 1fr 40px;gap:.4rem;padding:.7rem .9rem .6rem}
  .mast-date{visibility:visible}
  .mast-mid{justify-self:center}
  html .top h1.desk-label{font-size:.95rem}
}

/* The map's full-screen button, top right on the map (was "Expand map" in the bar above);
   the events line sits to its left */
.map-full{position:absolute;z-index:800;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;background:var(--t-glass,rgba(8,12,18,.9));border:1px solid var(--t-line-strong,#2a3a4e);border-radius:4px;color:var(--t-strong,#fff);cursor:pointer;box-shadow:var(--shadow-pop,0 2px 8px #0006)}
html[data-set="broadsheet"] .map-full{border-radius:2px}
.map-full:hover,.map-full:focus-visible{background:var(--t-surface-3,#1a2433);outline:none;border-color:var(--accent-ui,#7eb6ff)}
.map-full svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.map-full .mf-close{display:none}
.map-full[aria-pressed="true"] .mf-open{display:none}
.map-full[aria-pressed="true"] .mf-close{display:inline}
html .map-wrap .map-chip{top:10px;right:50px;min-height:32px;box-sizing:border-box;display:flex;align-items:center;max-width:min(280px,calc(100% - 110px))}
html .map-wrap .map-chip.chip-hl{max-width:min(420px,calc(100% - 110px))}
@media (max-width:720px){
  .map-full{top:8px;right:8px}
  html .map-wrap .map-chip{top:8px;right:46px;max-width:calc(100% - 100px)}
  html .map-wrap .map-chip.chip-hl{max-width:calc(100% - 100px)}
}

/* PC: the clock's digits in equal cells (set in app.js), so "Yemen" before it stays put */
@media (min-width:721px){#ye-clock .dg{display:inline-block;width:var(--dw,auto);text-align:center}}
/* The live page's footer: the map credit, centred, with room below so the
   Sections pill (bottom left) never sits on them */
#yemen-desk-root footer,body>footer{align-items:center;text-align:center}
@media (max-width:720px){#yemen-desk-root footer,body>footer{padding-bottom:calc(3.7rem + env(safe-area-inset-bottom,0px))}}


/* The masthead's menu (three lines, where the date was) and its side panel */
.mast-date{display:flex;align-items:center}
.mast-menu{display:grid;place-items:center;width:34px;height:34px;padding:0;background:transparent;border:1px solid var(--t-line-strong,#334155);border-radius:2px;color:var(--t-muted,#8fa0b4);cursor:pointer;transition:color .2s,border-color .2s}
.mast-menu:hover,.mast-menu:focus-visible,.mast-menu[aria-expanded="true"]{color:var(--t-strong,#fff);border-color:var(--t-muted,#8fa0b4);outline:none}
.mast-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.site-menu{position:fixed;inset:0;z-index:5000}
.site-menu .sm-back{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.site-menu .sm-panel{position:absolute;top:0;bottom:0;left:0;width:min(300px,86vw);background:var(--t-bg,#1b1918);border-right:1px solid var(--t-line-strong,#334155);box-shadow:var(--shadow-pop,0 8px 30px #0008);transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.7,.2,1);overflow-y:auto;padding:.9rem 1rem 1.5rem}
.site-menu.open .sm-back{opacity:1}
.site-menu.open .sm-panel{transform:none}
.sm-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-bottom:.6rem;border-bottom:1px solid var(--t-line-strong,#334155)}
.sm-name{font:600 1.15rem/1.1 "Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;color:var(--t-strong,#fff);letter-spacing:-.01em}
.sm-x{display:grid;place-items:center;width:30px;height:30px;padding:0;background:transparent;border:0;color:var(--t-muted,#8fa0b4);cursor:pointer}
.sm-x:hover,.sm-x:focus-visible{color:var(--t-strong,#fff);outline:none}
.sm-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.sm-date{margin:.6rem 0 .4rem;font:500 .64rem/1.3 var(--f-body,inherit);letter-spacing:.07em;text-transform:uppercase;color:var(--t-muted,#8fa0b4)}
.site-menu ul{list-style:none;margin:0;padding:0}
.site-menu li a{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 0 .7rem .7rem;border-bottom:1px solid var(--t-line,#1e2a38);border-left:3px solid transparent;color:var(--t-text,#e2e8f0);text-decoration:none}
.site-menu li a b{font:600 .95rem/1.2 var(--f-body,inherit)}
.site-menu li a small{font-size:.7rem;color:var(--t-muted,#8fa0b4)}
.site-menu li a:hover,.site-menu li a:focus-visible{outline:none;border-left-color:var(--accent-ui,#7eb6ff);background:var(--t-surface-2,transparent)}
.site-menu li a[aria-current="page"]{border-left-color:var(--t-strong,#fff)}
@media (prefers-reduced-motion:reduce){.site-menu .sm-panel,.site-menu .sm-back{transition:none}}
/* A desk's own pages under it, and Dark | Light at the panel's foot (user, 2 Oct). */
.site-menu .sm-panel{display:flex;flex-direction:column}
.site-menu .sm-sub li a{padding:.5rem 0 .5rem calc(.7rem + 24px + .65rem);font:500 .84rem/1.2 var(--f-body,inherit);color:var(--t-text-2,var(--t-text,#e2e8f0))}
.sm-theme{display:grid;grid-template-columns:1fr 1fr;margin-top:auto;padding-top:1.4rem;gap:0}
.sm-theme button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem .5rem;background:transparent;border:1px solid var(--t-line-strong,#334155);color:var(--t-muted,#8fa0b4);font:600 .7rem/1 var(--f-body,inherit);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:color .15s,background .15s}
.sm-theme button+button{border-inline-start:0}
.sm-theme button svg{width:15px;height:15px;flex:none}
.sm-theme button:hover,.sm-theme button:focus-visible{color:var(--t-strong,#fff);outline:none}
.sm-theme button[aria-pressed="true"]{background:var(--t-strong,#fff);border-color:var(--t-strong,#fff);color:var(--t-bg,#1b1918)}
/* The Methodology page: the three texts as sections. */
.meth-part{padding:1.1rem 0 1.2rem;border-bottom:1px solid var(--t-line,#35302c);font:400 .95rem/1.6 var(--f-body,inherit);color:var(--t-text,#efe6dd)}
.meth-part h3{margin:0 0 .5rem;font:600 1.3rem/1.25 "Newsreader",Georgia,serif;color:var(--t-strong,#fff)}
.meth-part ul{margin:.3rem 0;padding-inline-start:1.2rem}
.meth-part ul ul{list-style:"– ";padding-inline-start:1.1rem}
.meth-part li{margin:.3rem 0}
.meth-part b{color:var(--t-strong,#fff);font-weight:600}
.meth-part .rel-foot{margin-top:.7rem;color:var(--t-muted,#a99d93);font-size:.85rem}
.meth-part .rel-foot a{color:var(--t-link,#f4a58a);font-weight:600;text-decoration:none}
.meth-part .to-map-meth{vertical-align:baseline;padding:0;margin-inline-start:.2rem}
.meth-desk{margin:0 0 1.6rem;scroll-margin-top:1rem}
.meth-desk-h{margin:1.4rem 0 0;padding:0 0 .45rem;border-bottom:2px solid var(--accent-ui);font:700 .78rem/1.2 var(--f-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--t-strong,#fff)}
.meth-part{scroll-margin-top:1rem}

/* "Sources reliability methodology": the link under the side buttons and its pop-up (1 Oct) */
.feed-rel{margin:-.1rem 0 .55rem}
.rel-btn{display:inline-flex;align-items:center;gap:.32rem;padding:.15rem 0;border:0;background:none;color:var(--t-muted,#a99d93);font:600 .62rem/1.2 var(--f-body,inherit);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.rel-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;flex:none}
.rel-btn:hover,.rel-btn:focus-visible,.rel-btn[aria-expanded="true"]{color:var(--t-strong,#fff)}
.rel-pop{position:fixed;z-index:1200;width:min(25rem,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:.95rem 1.1rem .85rem;background:var(--t-surface-1,#211e1c);color:var(--t-text,#efe6dd);border:1px solid var(--t-line-strong,#4a433d);box-shadow:var(--shadow-pop,0 10px 30px rgba(0,0,0,.5));font:400 .8rem/1.5 var(--f-body,inherit)}
.rel-pop[hidden]{display:none}
.rel-pop h3{margin:0 1.6rem .45rem 0;font:600 1.02rem/1.25 "Newsreader","Frank Ruhl Libre",Georgia,serif;color:var(--t-strong,#fff)}
.rel-pop p{margin:.3rem 0}
.rel-pop ul{margin:.3rem 0;padding-inline-start:1.05rem}
.rel-pop ul ul{margin:.2rem 0 .1rem;padding-inline-start:1rem;list-style:"– "}
.rel-pop li{margin:.22rem 0}
.rel-pop b{color:var(--t-strong,#fff);font-weight:600}
.rel-pop .rel-foot{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--t-line,#35302c);color:var(--t-muted,#a99d93);font-size:.74rem}
.rel-pop .rel-foot a{color:var(--t-link,#f4a58a);font-weight:600;text-decoration:none;white-space:nowrap}
.rel-pop .rel-foot a:hover,.rel-pop .rel-foot a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.rel-x{position:absolute;top:.55rem;inset-inline-end:.55rem;width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--t-muted,#a99d93);cursor:pointer}
.rel-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.rel-x:hover{color:var(--t-strong,#fff)}
.rel-pop.sheet{left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-height:82vh;border-width:1px 0 0;padding:1.05rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom,0px));font-size:.86rem;animation:relUp .2s ease-out}
@keyframes relUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.rel-pop.sheet{animation:none}}
@media (max-width:720px){.rel-btn{padding:.4rem 0}}
/* Control share methodology under the bars; Map methodology above the map's top right
   (user, 2 Oct): on a PC it keeps to the map's right edge however wide the report column
   is (--rail-w), and drops under the Map line, as on a phone, when they no longer fit. */
.bars-meth{grid-column:1/-1;flex-basis:100%;width:100%;margin-top:-.2rem;line-height:1}
.rel-pop .to-map-meth{vertical-align:baseline;padding:0;margin-inline-start:.2rem}
/* On one row it sits at the right; once it drops under the Map line it starts at the left
   (user, 2 Oct): a growing spacer before it stays on the first row and takes the free room. */
.toolbar .map-meth{white-space:nowrap;order:2}
@media (min-width:701px){.toolbar::after{content:"";order:1;flex:1 1 0;min-width:0;height:0}}
@media (min-width:701px){
  .toolbar{container-type:inline-size}
  .toolbar .time-filter{flex-wrap:nowrap}
  @container (max-width:640px){.time-filter .tf-long{display:none}.time-filter .tf-short{display:inline}}
  @container (max-width:430px){.time-filter .day-nav-txt{display:none}}
}
@media (min-width:701px){.toolbar{padding-inline-end:calc(var(--rail-w,360px) + 8px + .55rem)}body.map-focus .toolbar{padding-inline-end:1rem}}
@media (max-width:700px){.toolbar .map-meth{align-self:flex-start;margin-top:-.3rem}}

/* Every scroll bar on the site: thin, in the theme's own lines (2 Oct; everywhere, user 18 Oct). Bars hidden on purpose keep their own rule. */
*{scrollbar-width:thin;scrollbar-color:var(--t-line-strong,#4a433d) transparent}
*:hover{scrollbar-color:var(--t-muted,#a99d93) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--t-line-strong,#4a433d);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--t-muted,#a99d93)}

/* The desk's own pages (the Sources list) */
.doc-root{min-height:100vh;background:var(--t-bg,var(--bg));color:var(--t-text,var(--text))}
.doc-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.doc-top .desk-label-link{text-decoration:none;color:inherit}
.doc{max-width:46rem;margin:0 auto;padding:1.4rem 1rem 3rem;font-size:1rem;line-height:1.62}
.doc-title{font:600 clamp(1.7rem,4vw,2.3rem)/1.1 "Newsreader",Georgia,serif;color:var(--t-strong,#fff);margin:.4rem 0 .6rem;letter-spacing:-.01em}
.doc-lede{font:400 1.12rem/1.5 "Newsreader",Georgia,serif;color:var(--t-text-2,#cbd5e1);margin:0 0 1.2rem}
.doc a{color:var(--accent-ui,#7eb6ff)}
.doc-foot{max-width:46rem;margin:0 auto;padding:1rem 1rem 2rem;border-top:1px solid var(--t-line,#1e2a38);font-size:.8rem;color:var(--t-muted,#9aabbc)}
.doc-foot a{color:inherit}
.sr-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--t-line-strong,#4a433d)}
.sr-stamp{margin:0;font:500 .66rem/1.3 var(--f-body,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted,#a99d93)}
.sr-all{flex:none;padding:.3rem .75rem;background:transparent;border:1px solid var(--t-line-strong,#4a433d);border-radius:999px;font:600 .62rem/1.2 var(--f-body,inherit);letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted,#a99d93);cursor:pointer;transition:color .2s,border-color .2s}
.sr-all:hover,.sr-all:focus-visible{color:var(--t-strong,#fff);border-color:var(--t-muted,#a99d93);outline:none}
.sr-group{margin:0;border-bottom:1px solid var(--t-line,#35302c)}
.sr-group h3{margin:0;font:600 1.25rem/1.25 "Newsreader",Georgia,serif;color:var(--t-strong,#fff)}
.sr-head{display:flex;align-items:center;gap:.6rem;width:100%;padding:.85rem 0;background:none;border:0;font:inherit;color:inherit;text-align:start;cursor:pointer}
.sr-head:focus-visible{outline:2px solid var(--accent-ui,#7eb6ff);outline-offset:2px}
.sr-head .sw{flex:none;width:4px;height:1em;background:var(--t-faint,#766b62)}
.sr-name{flex:1}
.sr-count{font:500 .7rem/1 var(--f-body,inherit);letter-spacing:.06em;color:var(--t-muted,#a99d93);font-variant-numeric:tabular-nums}
.sr-chev{flex:none;width:18px;height:18px;fill:none;stroke:var(--t-muted,#a99d93);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s cubic-bezier(.2,.7,.2,1),stroke .2s}
.sr-head:hover .sr-chev{stroke:var(--t-strong,#fff)}
.sr-group.open .sr-chev{transform:rotate(180deg)}
.sr-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s cubic-bezier(.2,.7,.2,1),opacity .24s ease}
.sr-body>div{min-height:0;overflow:hidden}
.sr-group.open .sr-body{grid-template-rows:1fr;opacity:1}
.sr-group.open .sr-body>div{padding-bottom:1.1rem}
@media (prefers-reduced-motion:reduce){.sr-body,.sr-chev{transition:none}}
.sr-houthi .sw{background:var(--houthi)}
.sr-gov .sw{background:var(--plc)}
/* The Iran desk's groups, in its cards' colours (desk.css). */
.sr-axis .sw{background:#c45c26}.sr-opposition .sw{background:#a855f7}.sr-israel .sw{background:#3b82f6}.sr-us .sw{background:#ef4444}.sr-gulf .sw{background:#22c55e}.sr-intl .sw{background:#94a3b8}
.sr-table{width:100%;border-collapse:collapse;font:400 .9rem/1.35 var(--f-body,inherit)}
.sr-table th{padding:.35rem 0;border-bottom:1px solid var(--t-line-strong,#4a433d);font:600 .6rem/1.2 var(--f-body,inherit);letter-spacing:.1em;text-transform:uppercase;color:var(--t-muted,#a99d93);text-align:start}
.sr-table th:last-child,.sr-table td.sr-rate{text-align:end;width:9.5rem}
.sr-table td{padding:.5rem 0;border-bottom:1px solid var(--t-line,#35302c);vertical-align:middle}
.doc .sr-table a{color:var(--t-text,inherit);text-decoration:none}
.doc .sr-table a:hover,.doc .sr-table a:focus-visible{color:var(--accent-ui);text-decoration:underline;text-underline-offset:3px}
.sr-rate{white-space:nowrap}
.sr-rate b{display:inline-block;min-width:2.1em;font-weight:600;font-variant-numeric:tabular-nums;color:var(--t-strong,#fff)}
.sr-dots{display:inline-flex;gap:3px;margin-inline-start:.45rem;vertical-align:-1px}
.sr-dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(90deg,var(--t-strong,#fff) var(--f),var(--t-line-strong,#4a433d) var(--f))}
.sr-empty{color:var(--t-muted)}
@media (max-width:720px){.doc{font-size:.97rem}.sr-table th:last-child,.sr-table td.sr-rate{width:7.8rem}.sr-dot{width:8px;height:8px}}

/* Round 30: the desks. The desk's name opens a list of the desks, each a small flag then its name;
   in the side menu each desk's line is its flag's stripes (user, 8 Oct). */
/* (user, 12 Oct) Each desk's own small flag, always shown: a thin strip could not show Iran's emblem. */
.site-menu li a.sm-desk{flex-direction:row;align-items:center;gap:.65rem}
.site-menu li a.sm-desk .flag{flex:none;width:24px;height:auto;color:var(--t-line-strong,#555)}
.site-menu li a.sm-desk .sm-t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.sm-logo{display:block;line-height:0;border-radius:6px}
.sm-logo img{width:34px;height:34px;display:block}
/* Night: the dark square gets a light edge, as the day one has its red edge (user, 12 Oct: it blended in). */
.sm-logo .sm-logo-n{border-radius:6px;box-shadow:0 0 0 1.5px rgba(243,238,227,.6)}
.sm-logo .sm-logo-d,html[data-theme="broadsheet-day"] .sm-logo .sm-logo-n{display:none}
html[data-theme="broadsheet-day"] .sm-logo .sm-logo-d{display:block}
.sm-logo:focus-visible{outline:1px solid var(--accent-ui,#7eb6ff);outline-offset:3px}
.top .brand{position:relative}
.desk-pick{all:unset;display:inline-flex;align-items:center;gap:.45em;cursor:pointer}
.desk-pick:focus-visible{outline:1px solid var(--accent-ui,#7eb6ff);outline-offset:3px}
.desk-pick .dp-car{width:.72em;height:.72em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.desk-pick[aria-expanded="true"] .dp-car{transform:rotate(180deg)}
.desk-list{position:absolute;top:calc(100% + .45rem);left:0;z-index:1500;min-width:250px;margin:0;padding:.25rem 0;list-style:none;background:var(--t-bg,#1b1918);border:1px solid var(--t-line-strong,#334155);box-shadow:var(--shadow-pop,0 8px 30px #0008)}
.desk-list a{display:flex;align-items:center;gap:.65rem;padding:.6rem .85rem;color:var(--t-text,#e2e8f0);text-decoration:none;font:600 .8rem/1.2 var(--f-body,inherit);letter-spacing:.07em;text-transform:uppercase}
.desk-list a:hover,.desk-list a:focus-visible{background:var(--t-surface-2,#222);color:var(--t-strong,#fff);outline:none}
.desk-list a[aria-current="page"]{color:var(--t-strong,#fff)}
.desk-list a[aria-current="page"]::after{content:"";margin-inline-start:auto;width:6px;height:6px;border-radius:50%;background:var(--accent-ui,#7eb6ff)}
.desk-list .flag{flex:none;width:21px;height:14px;color:var(--t-text,#e2e8f0)}
.desk-list .flag-iran{height:12px}
html.desk-leaving body{opacity:0;transition:opacity .18s ease-out}
@media (prefers-reduced-motion:reduce){html.desk-leaving body{transition:none}}
/* A desk's parts still being built */
.soon{margin:.15rem 0 .55rem;font-size:.84rem;font-style:italic;color:var(--t-muted,#8fa0b4)}
dl.soon-list{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.1rem;margin:.3rem 0 0;font-size:.84rem;line-height:1.4}
dl.soon-list dt{font-weight:600;color:var(--t-strong,#fff)}
dl.soon-list dd{margin:0;color:var(--t-text-2,var(--t-text,#cbd5e1))}
ul.soon-list{columns:2 240px;margin:.3rem 0 0;padding-inline-start:1.1rem;font-size:.84rem;line-height:1.6;color:var(--t-text,#d7e2ef)}
@media (max-width:720px){dl.soon-list{grid-template-columns:1fr;gap:.1rem}dl.soon-list dd{margin-bottom:.45rem}}
.trump-pin{margin:.6rem 0 .5rem;padding:.55rem .6rem .6rem;border:1px solid var(--t-line-strong,#334155);border-inline-start:3px solid #b91c1c;background:var(--t-surface-2,transparent);border-radius:10px}
.trump-pin .tp-head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin:0 0 .45rem}
.trump-pin .tp-head b{font:700 .66rem/1.2 var(--f-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--t-strong,#fff)}
.trump-pin .soon{margin:.25rem 0 0}
.trump-pin .card{margin:0}
.tp-all{display:block;margin:.5rem 0 0 auto;padding:.3rem .1rem;border:0;background:none;font:600 .74rem/1.2 var(--f-body,inherit);color:var(--accent-ui,#7eb6ff);cursor:pointer}
.tp-all:hover{text-decoration:underline}
html.tp-open{overflow:hidden}
.tp-pop{position:fixed;inset:0;z-index:2000;display:grid;place-items:center}
.tp-pop[hidden]{display:none}
.tp-back{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.tp-sheet{position:relative;width:min(620px,calc(100vw - 32px));max-height:min(86vh,900px);display:flex;flex-direction:column;background:var(--t-bg,#1b1918);border:1px solid var(--t-line-strong,#334155);border-top:3px solid #b91c1c;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.tp-sheet-head{position:relative;padding:.85rem 2.6rem .7rem 1rem;border-bottom:1px solid var(--line,#2a3442)}
.tp-sheet-head h3{margin:0;font:700 .8rem/1.2 var(--f-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--t-strong,#fff)}
.tp-list{overflow-y:auto;padding:.75rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.tp-list .more{align-self:center}
@media (max-width:720px){.tp-pop{place-items:end stretch}.tp-sheet{width:100%;max-height:92vh;border-radius:12px 12px 0 0}}
.lean-f[disabled]{cursor:default}
/* Trump's latest: his words open on Read more only; a pin opposite the title (user, 9 Oct) */
.trump-st:not(.open) .lead{display:none}
.trump-pin .tp-head .tp-pin-ico{margin-inline-start:auto;width:15px;height:15px;fill:#b91c1c;transform:rotate(35deg);flex:none;align-self:center}
/* Numbered points with references (user, 9 Oct): Latest developments, fronts, arenas */
.pts{list-style:decimal outside;margin:.15rem 0 0;padding-inline-start:1.4em;font-size:.8rem;line-height:1.5;color:var(--t-text,#c9d4e0)}
.pts li{display:list-item;margin:0;padding-inline-start:.2em}
.pts li+li{margin-top:.5em}
.pts li::marker{font-weight:700;color:var(--t-muted,#8b98a8)}
html[data-set="broadsheet"] .pts{font-family:"Newsreader","Frank Ruhl Libre","Noto Naskh Arabic",Georgia,serif;font-size:1.02rem;line-height:1.55;color:var(--t-text)}
.situation:not(.sit-open) .pt-rest,.front-card:not(.open) .pt-rest{display:none}
.ref-n{font-size:.66em;line-height:0;vertical-align:super;margin-inline-start:.1em;white-space:nowrap;color:var(--t-link,#60a5fa)}
.ref-n .ref-btn{all:unset;cursor:pointer;color:var(--t-link,#60a5fa);font-weight:700;font-family:var(--f-body,system-ui,sans-serif);padding:0 .08em}
.ref-n .ref-btn:hover,.ref-n .ref-btn:focus-visible{text-decoration:underline}
.refs{list-style:none;margin:.7rem 0 0;padding:.5rem 0 0;border-top:1px solid var(--t-line,#2a3442);display:flex;flex-direction:column;gap:.2rem}
.refs .ref-line{all:unset;cursor:pointer;font:400 .7rem/1.35 var(--f-body,system-ui,sans-serif);color:var(--t-muted,#8b98a8)}
.refs .ref-line:hover,.refs .ref-line:focus-visible{color:var(--t-text,#c9d4e0);text-decoration:underline}
.refs .ref-num{display:inline-block;min-width:1.5em;font-weight:700;color:var(--t-link,#60a5fa)}
.front-card .front-pts{margin-top:.35rem}
.ref-sheet{border-top-color:var(--t-line-strong,#334155)}
/* References (user, 9 Oct): the first one, an arrow for the rest; the pop-up turns through them */
.refs-box:not(.open) .ref-rest{display:none}
/* Closed, a box shows its first point and Read more only; the references come with the rest (user, 9 Oct) */
.situation:not(.sit-open):has(.toggle-sit) .refs-box,.front-card:not(.open):has(.toggle-front) .refs-box{display:none}
.refs li:first-child{display:flex;align-items:center;gap:.35rem}
.ref-more{all:unset;cursor:pointer;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:var(--t-muted,#8b98a8);border:1px solid var(--t-line,#2a3442)}
.ref-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ref-more:hover,.ref-more:focus-visible{color:var(--t-text,#c9d4e0);border-color:var(--t-line-strong,#334155)}
.refs-box.open .ref-more svg{transform:rotate(180deg)}
.ref-list .pager{border:0;background:transparent;overflow:visible}
.ref-list .pager .card{margin:0}
@media (hover:hover) and (min-width:721px){.ref-list .pager.many{padding:0 2.3rem}.ref-list .pg-prev{left:0}.ref-list .pg-next{right:0}}
/* Phone (user, 12 Oct): Trump's statements open as a sheet from the bottom, the page still showing (and closing it) above, the page behind them still. (Not overflow-x:clip on html or body: on the root it stops the page scrolling.) */
@media (max-width:720px){
  .tp-pop{place-items:end stretch;overscroll-behavior:contain}
  .tp-sheet{width:100%;height:82vh;height:82dvh;max-height:none;border-radius:12px 12px 0 0;border-left:0;border-right:0;border-bottom:0}
  .tp-list{flex:1;min-height:0;overscroll-behavior:contain;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
  html.tp-open,html.tp-open body{overflow:hidden}
  /* A brief's reference (user, 27 Oct): only as tall as its report card, no empty sheet under it. */
  .tp-sheet.ref-sheet{height:auto;max-height:82dvh}
  .ref-sheet .tp-list{flex:0 1 auto}
}
/* Iran map (user, 12 Oct): provinces, districts and towns in the coloured countries, smaller than the Yemen map's governorates. */
.gov-name.ir-adm1 span{font-size:9.5px;opacity:.85}
.gov-name.ir-adm2 span{font-size:8.5px;letter-spacing:.06em;opacity:.75}
.ir-city.t3 span{font-size:10px}
.ir-city:has(span.lbl-collide) i{display:none}
/* Iran map (user, 12 Oct): a period from one day to another, under the day buttons; and Land / Sea in the legend. */
.tf-range{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;flex-basis:100%;padding:.15rem 0 .1rem}
.tf-range[hidden]{display:none}
.tf-range label{display:inline-flex;align-items:center;gap:.4rem;font:600 .64rem/1 var(--f-body,inherit);letter-spacing:.07em;text-transform:uppercase;color:var(--t-muted,#8fa0b4)}
.tf-range input[type="date"]{font:inherit;font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--t-text,#eaf0f6);background:transparent;border:1px solid var(--t-line-strong,#2a3a4e);border-radius:var(--r-btn,6px);padding:.25rem .4rem}
.legend .leg-sub{margin:.35rem 0 .15rem;padding-top:.3rem;border-top:1px solid var(--t-line,#1c2836);font:600 .58rem/1 var(--f-body,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted,#8fa3b6)}
.legend .leg-sub.leg-who{border-top:0;padding-top:0}
/* The legend opens from anywhere on it, closes from its head (user, 18 Oct). */
.legend .leg-head,.legend.collapsed{cursor:pointer}
/* On a phone the map's day row stays on one line and scrolls sideways, on both desks (user, 17 Oct). */
/* A legend taller than the map scrolls instead of losing its bottom rows (user, 17 Oct: the Iran legend was cut). */
.legend{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.legend:not(.collapsed) .leg-body{max-height:none}
@media (max-width:720px){.legend .leg-hint{display:none}}

/* Latest developments as the other sections (user, 17 Oct): the title and the update line above,
   the points in a box like the fronts' and the numbers'. */
html[data-set="broadsheet"] .situation{background:transparent;padding:.75rem 1rem 1rem}
html[data-set="broadsheet"] .situation .sit-body{background:var(--t-surface-1);border:1px solid var(--t-line-strong);border-radius:4px;padding:.8rem 1rem .9rem;margin-top:.45rem}

/* The header: "Desks:" and a button per desk by its country, its real flag faded behind the name
   (user, 17 Oct); more than fit scroll sideways. */
html .top h1.desk-tabs{display:flex;align-items:center;gap:.65rem;min-width:0;padding:0;text-box:none}
.top .brand:has(.desk-tabs){min-width:0;flex:1 1 auto}
.desk-tabs .dt-label{flex:none;color:var(--t-muted,#8b98a8);font-weight:500;text-decoration:none}
.desk-tabs a.dt-label:hover,.desk-tabs a.dt-label:focus-visible{color:var(--t-strong);outline:none;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.desk-tabs .dt-row{display:flex;gap:.45rem;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px;scroll-snap-type:x proximity}
.desk-tabs .dt-row::-webkit-scrollbar{display:none}
/* Desk buttons as pills (user, 17 Oct: the faded flags looked old): a round flag, the name, a lift and an arrow on hover; the open desk filled */
.dt-btn{flex:none;display:inline-flex;align-items:center;gap:.5rem;height:2.1rem;padding:0 .85rem 0 .3rem;border:1px solid var(--t-line-strong,#334155);border-radius:999px;background:color-mix(in srgb,var(--t-strong,#e5e7eb) 4%,transparent);color:var(--t-strong);text-decoration:none;scroll-snap-align:start;cursor:pointer;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.dt-btn .dt-flag{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;box-shadow:0 0 0 1px color-mix(in srgb,var(--t-strong,#e5e7eb) 22%,transparent);transition:transform .2s}
.dt-btn .dt-name{font:inherit;font-size:.8em;letter-spacing:.09em}
.dt-btn::after{content:"→";font-size:.85em;margin-inline-start:-.15rem;opacity:.45;transition:opacity .15s,transform .15s}
.dt-btn:hover,.dt-btn:focus-visible{border-color:var(--accent-ui);background:color-mix(in srgb,var(--accent-ui) 12%,transparent);transform:translateY(-1px);box-shadow:0 3px 10px -4px color-mix(in srgb,var(--accent-ui) 60%,transparent)}
.dt-btn:hover::after,.dt-btn:focus-visible::after{opacity:1;transform:translateX(2px)}
.dt-btn:hover .dt-flag{transform:scale(1.08)}
.dt-btn:active{transform:translateY(0)}
.dt-btn:focus-visible{outline:2px solid var(--accent-ui);outline-offset:2px}
.dt-btn[aria-current="page"]{border-color:var(--accent-ui);background:var(--accent-ui);color:var(--t-bg,#1b1918);cursor:default;transform:none;box-shadow:none}
.dt-btn[aria-current="page"]::after{content:none}
.dt-btn .dt-globe{padding:.12rem;fill:none;stroke:currentColor;stroke-width:1.6;box-shadow:none;background:color-mix(in srgb,var(--t-strong,#e5e7eb) 10%,transparent)}
.dt-btn[aria-current="page"] .dt-globe{background:color-mix(in srgb,var(--t-bg,#1b1918) 14%,transparent)}
.dt-btn[aria-current="page"] .dt-name{font-weight:700}
@media (max-width:720px){.dt-btn{height:1.9rem;gap:.4rem;padding:0 .65rem 0 .25rem}.dt-btn .dt-flag{width:1.3rem;height:1.3rem}.dt-btn::after{display:none}html .top h1.desk-tabs{gap:.45rem}}

/* Going between desks: the map flies, the rest of the page steps back (app.js deskGo). */
/* Going between desks: a short cross-fade, the map held in place; the new page's map then flies to its part (user, 17 Oct) */
::view-transition-group(deskmap){animation-duration:.3s;animation-timing-function:ease}
::view-transition-old(deskmap),::view-transition-new(deskmap){animation-duration:.3s;height:100%;object-fit:cover}
.map-wrap{view-transition-name:deskmap}
/* With the side menu open the map is part of the page's own snapshot, so it never shows over the menu while the theme changes (user, 18 Oct). */
html:has(.site-menu.open) .map-wrap,html:has(.site-menu.open) .mast{view-transition-name:none}

/* Every map's legend at the bottom left (user, 17 Oct), lifted just clear of the Sections button
   when that button is over the map's corner (app.js liftLegend). */
html .map-wrap .legend{top:auto;bottom:calc(12px + var(--leg-lift,0px))}
/* Below Trump's box, a line that says the reports follow (user, 18 Oct: it was not clear there were more below). */
.feed-sub{display:flex;align-items:center;gap:.6rem;margin:.9rem 0 .55rem;font:700 .66rem/1.2 var(--f-body,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--t-strong,#fff)}
.feed-sub::after{content:"";flex:1;height:1px;background:var(--t-line-strong,#334155)}
.feed-sub small{order:3;font:500 .62rem/1.2 var(--f-body,inherit);letter-spacing:.04em;text-transform:none;color:var(--t-muted,#8fa0b4)}
body:has(#feed-search:not([hidden])) .feed-sub{display:none}
.sr-top{flex-wrap:wrap}.sr-stamp.sr-discl{flex-basis:100%;order:9;text-transform:none;letter-spacing:0;font-style:italic;opacity:.85}
img.dt-flag{object-fit:cover;display:inline-block}
/* New since the last visit (app.js seenMarks) */
.new-mark{display:inline-block;margin-right:.4em;padding:0 .35em;border-radius:3px;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;vertical-align:.1em;color:#0b1220;background:#f5b941}
li.is-new>.new-mark{margin-right:.45em}
.new-mark.box-new{margin:0 0 0 .5em;vertical-align:.15em}
.pg-dots button.has-new::before{background:#f5b941}
.ye-dist-off path.ye-dist{stroke-opacity:0!important}