:root{
    --ink:#16181d; --ink-2:#3c4149; --mut:#6b7280; --line:#e6e8ec; --line-2:#f1f3f6;
    --bg:#ffffff; --bg-2:#fafbfc; --bg-3:#f4f6f8;
    --brand:#1f4d3a;
    --breaking:#b3261e; --military:#3f4a5a; --humanitarian:#6a1b9a;
    --diplomatic:#00695c; --analysis:#b45309; --scholars:#2e6b34; --general:#7c8794;
    --pending-bg:#fdf4e3; --pending-line:#f0e0be; --pending-ink:#8a6d3b;
    --ar:"SF Arabic","Noto Naskh Arabic","Geeza Pro","Traditional Arabic",serif;
    --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    --radius:10px; --hdr-bg:rgba(255,255,255,.92); --map-bg:#f7f9fc;
    --chip-on:#16181d; --chip-on-ink:#ffffff;
  }
  /* Dark theme. Tag colours are lifted (they were picked for a white ground and
     lose contrast on near-black), and the "pending" amber is warmed up. */
  html[data-theme="dark"]{
    --ink:#e6e9ee; --ink-2:#aeb6c0; --mut:#8b939e; --line:#2b323b; --line-2:#232a32;
    --bg:#14181d; --bg-2:#0f1318; --bg-3:#1c2128;
    --brand:#7fc9a5;
    --breaking:#e0554a; --military:#8b9aad; --humanitarian:#b57edc;
    --diplomatic:#4db6ac; --analysis:#e0913f; --scholars:#6fbf73; --general:#8b939e;
    --pending-bg:#2e2718; --pending-line:#4a3d22; --pending-ink:#d9b56b;
    --hdr-bg:rgba(20,24,29,.92); --map-bg:#14181d;
    --chip-on:#e6e9ee; --chip-on-ink:#14181d;
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:var(--bg-2);color:var(--ink);font:16px/1.6 var(--ui);
    -webkit-font-smoothing:antialiased}

  header{position:sticky;top:0;z-index:30;background:var(--hdr-bg);
    backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
  .hwrap{max-width:1180px;margin:0 auto;padding:0 20px;height:58px;display:flex;align-items:center;gap:20px}
  .brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.01em;white-space:nowrap}
  .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--breaking);
    box-shadow:0 0 0 3px rgba(179,38,30,.14)}
  nav.views{display:flex;gap:2px;background:var(--bg-3);padding:3px;border-radius:8px}
  nav.views button{border:0;background:none;font:inherit;font-size:14px;font-weight:550;
    color:var(--mut);padding:5px 14px;border-radius:6px;cursor:pointer}
  nav.views button[aria-selected="true"]{background:var(--bg);color:var(--ink);
    box-shadow:0 1px 2px rgba(16,24,40,.09)}
  .spacer{flex:1}
  .langtoggle{display:flex;background:var(--bg-3);padding:3px;border-radius:8px;font-size:13.5px}
  .langtoggle button{border:0;background:none;font:inherit;font-weight:600;color:var(--mut);
    padding:4px 12px;border-radius:6px;cursor:pointer;min-width:52px}
  .langtoggle button[aria-selected="true"]{background:var(--bg);color:var(--ink);
    box-shadow:0 1px 2px rgba(16,24,40,.09)}

  .themetoggle{display:flex;background:var(--bg-3);padding:3px;border-radius:8px;font-size:13.5px}
  .themetoggle button{border:0;background:none;font:inherit;font-weight:600;color:var(--mut);
    padding:4px 10px;border-radius:6px;cursor:pointer;min-width:34px}
  .themetoggle button[aria-selected="true"]{background:var(--bg);color:var(--ink);
    box-shadow:0 1px 2px rgba(16,24,40,.09)}

  .filters{max-width:1180px;margin:0 auto;padding:14px 20px 0;display:flex;flex-wrap:wrap;gap:7px}
  .chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;font:inherit;
    font-size:13px;font-weight:550;color:var(--ink-2);padding:4px 12px;cursor:pointer;
    display:inline-flex;align-items:center;gap:6px}
  .chip .sw{width:7px;height:7px;border-radius:50%}
    /* the selected chip inverts; both sides must come from the theme or the
     text vanishes when --ink flips to a light value in dark mode */
  .chip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink);
    border-color:var(--chip-on)}
  .chip.ghost{color:var(--mut)}
  .filters .sep{width:1px;background:var(--line);margin:2px 4px}

  main{max-width:1180px;margin:0 auto;padding:6px 20px 90px}
  .daystamp{display:flex;align-items:center;gap:14px;margin:30px 0 14px;color:var(--mut);
    font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
  .daystamp::after{content:"";flex:1;height:1px;background:var(--line)}

  .card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
    padding:16px 18px;margin-bottom:12px;transition:border-color .12s,box-shadow .12s}
  .card:hover{border-color:#d5d9df;box-shadow:0 2px 10px rgba(16,24,40,.05)}
  .card.is-breaking{border-left:3px solid var(--breaking);padding-left:15px}
  .card.compact{margin-bottom:9px;padding:12px 14px;border-radius:9px}
  .card.compact .en,.card.compact .ar{font-size:14px;line-height:1.6}
  .card.compact .ar{font-size:15.5px;line-height:1.9}

  .meta{display:flex;align-items:center;gap:9px;margin-bottom:11px;font-size:12.5px;color:var(--mut)}
  .tag{font-size:10.5px;font-weight:700;letter-spacing:.055em;padding:2px 7px;border-radius:4px;color:#fff}
  /* Channel names are Arabic (often with emoji) sitting in an LTR meta line.
     unicode-bidi:isolate + dir="auto" stop them reordering the time and tags. */
  .src{font-weight:600;color:var(--ink-2);unicode-bidi:isolate;
    max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .meta .spacer{flex:1}
  .ref{font-variant-numeric:tabular-nums;color:#a3aab5}
  .pending{font-size:10.5px;font-weight:650;color:var(--pending-ink);background:var(--pending-bg);
    border:1px solid var(--pending-line);border-radius:4px;padding:1px 6px}

  .body{display:flex;gap:16px}
  .thumb{flex:0 0 116px;height:150px;border-radius:8px;overflow:hidden;background:var(--bg-3);
    position:relative;border:1px solid var(--line)}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .thumb .badge{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.62);color:#fff;
    font-size:10.5px;padding:2px 6px;border-radius:4px;font-weight:600}
  .thumb .ph{display:flex;align-items:center;justify-content:center;height:100%;color:#9aa2ad;
    font-size:11px;font-weight:600;letter-spacing:.04em}
  .card.compact .thumb{flex:0 0 74px;height:96px}

  .text{flex:1;min-width:0}
  .en{font-size:16px;line-height:1.62;color:var(--ink);white-space:pre-wrap;word-wrap:break-word}
  .ar{direction:rtl;text-align:right;font-family:var(--ar);font-size:18.5px;line-height:2.05;
    color:var(--ink);white-space:pre-wrap;word-wrap:break-word}
  .hidden{display:none}

  .foot{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:11px;
    border-top:1px solid var(--line-2);font-size:12.5px;color:var(--mut)}
  .foot .place{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);
    background:var(--bg-3);padding:2px 9px;border-radius:6px;font-weight:550}
  .foot .spacer{flex:1}
  .perlang{border:1px solid var(--line);background:var(--bg);border-radius:7px;font:inherit;
    font-size:12.5px;font-weight:600;color:var(--ink-2);padding:3px 11px;cursor:pointer}
  .perlang:hover{background:var(--bg-3)}

  /* ---------- map view (inlined, not an iframe) ---------- */
  #mapview{display:none}
  #mapview.on{display:block}
  #feedview.off{display:none}
  body.mapmode .filters{display:none}
  .mapshell{display:grid;grid-template-columns:1fr 400px;
    height:calc(100vh - 58px);border-top:1px solid var(--line)}
  /* #map must fill its positioned parent; a bare div has no height of its own,
     so MapLibre would size its canvas to 0 and paint nothing. */
  #map{position:absolute;inset:0;background:var(--map-bg)}
  .mapside{background:var(--bg);border-left:1px solid var(--line);display:flex;flex-direction:column;
    min-width:0;min-height:0}
  .mapside .hd{padding:14px 16px;border-bottom:1px solid var(--line)}
  .mapside h1{font-size:16px;margin:0 0 3px}
  .mapside .sub{color:var(--mut);font-size:12.5px}
  .mapside #placeposts{overflow:auto;flex:1;min-height:0;padding:12px}
  .mapside .placeholder{padding:40px 20px;color:var(--mut);font-size:13.5px;text-align:center}
  .mapbadge{position:absolute;top:14px;left:14px;z-index:5;background:var(--bg);border:1px solid var(--line);
    border-radius:6px;padding:5px 10px;font-size:12px;color:var(--mut)}
  .legend{position:absolute;bottom:26px;left:14px;z-index:5;background:var(--bg);border:1px solid var(--line);
    border-radius:8px;padding:10px 12px;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
  .legend div{display:flex;align-items:center;gap:6px;margin:3px 0}
  .dot2{width:9px;height:9px;border-radius:50%}

  .notes{max-width:1180px;margin:26px auto 0;padding:0 20px}
  .notes details{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px}
  .notes summary{cursor:pointer;font-weight:650;font-size:14px}
  .notes ul{margin:12px 0 0;padding-left:20px;color:var(--ink-2);font-size:14px}
  .notes li{margin:6px 0}
  .notes code{background:var(--bg-3);padding:1px 5px;border-radius:4px;font-size:12.5px}

  @media (max-width:900px){
    .hwrap{height:auto;padding:10px 16px;flex-wrap:wrap;gap:10px}
    .body{flex-direction:column;gap:12px}
    .thumb{flex:none;width:100%;height:170px}
    main,.filters,.notes{padding-left:16px;padding-right:16px}
    .ar{font-size:17.5px;line-height:1.95}
    .mapshell{grid-template-columns:1fr;grid-template-rows:52vh 48vh;height:auto}
    .mapside{border-left:0;border-top:1px solid var(--line);height:48vh}
    .legend{display:none}
  }

/* ---- pre-rendered site additions ---------------------------------------- */
/* Both languages are baked into the HTML. The toggle is a class on <html>,
   so switching is instant and needs no fetch and no JSON. */
html[data-lang="en"] .ar { display: none; }
html[data-lang="ar"] .en { display: none; }
html[data-lang="ar"] .en-only { display: none; }

/* per-post language override, independent of the global default */
.post[data-show="ar"] .en { display: none; }
.post[data-show="ar"] .ar { display: block; }
.post[data-show="en"] .ar { display: none; }
.post[data-show="en"] .en { display: block; }

/* media in the feed */
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* pager */
.pager { display: flex; gap: 10px; justify-content: center; margin: 28px 0 10px; }
.pager a { padding: 7px 16px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 600;
  background: var(--bg); }
.pager a:hover { border-color: #c8cdd4; }
.pager a.off { opacity: .4; pointer-events: none; }

/* a post page is the same card, given room */
.postpage { max-width: 760px; margin: 0 auto; }
.postpage .card { padding: 22px 24px; }
.postpage .en, .postpage .ar { font-size: 17.5px; }
.postpage .ar { font-size: 20px; line-height: 2.1; }

/* footer */
footer { max-width: 1180px; margin: 0 auto; padding: 30px 20px 60px;
  color: var(--mut); font-size: 12.5px; border-top: 1px solid var(--line); }

@media print {
  header, .filters, .pager, footer, .perlang { display: none !important; }
  .card { border: 0; padding: 0; }
}

/* ---- brand: Yemen Brief · موجز اليمن ---------------------------------- */
/* The mark is inline SVG so it needs no request, and two variants are shipped
   so the hairline sits on the band that would otherwise vanish:
   on light the WHITE band needs it, on dark the BLACK band does. */
.brand { display:flex; align-items:center; gap:10px; text-decoration:none;
  color:inherit; white-space:nowrap; }
.brand .markwrap { display:inline-flex; flex:0 0 auto; }
.brand svg.mark { display:block; }
.wordmark { display:flex; flex-direction:column; line-height:1.12; }
.wm-en { font-size:16px; font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.wm-ar { font-family:var(--ar); font-size:13.5px; color:var(--mut); line-height:1.5; }

/* which mark shows is driven by the theme, not the language — the mark has no
   language, so switching it with the language toggle would be noise. */
html[data-theme="light"] .dark-only { display:none; }
html[data-theme="dark"]  .light-only { display:none; }

@media (max-width:520px){
  .wm-ar { display:none; }        /* the mark still identifies the site */
  .wm-en { font-size:15px; }
}

/* ---- view tabs --------------------------------------------------------- */
.sitenav { display:flex; gap:2px; background:var(--bg-3); padding:3px; border-radius:8px; }
.sitenav a { font-size:14px; font-weight:550; color:var(--mut); padding:5px 14px;
  border-radius:6px; text-decoration:none; }
.sitenav a.on { background:var(--bg); color:var(--ink);
  box-shadow:0 1px 2px rgba(16,24,40,.09); }
@media (max-width:520px){ .sitenav a { padding:5px 10px; font-size:13px; } }

/* ---- source block: the chain of narration ------------------------------ */
.sourcebox { margin-top:22px; padding:16px 18px; background:var(--bg-3);
  border:1px solid var(--line); border-radius:10px; }
.sourcebox .lab { font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--mut); margin-bottom:6px; }
.sourcebox p { margin:0; font-size:14.5px; }
.sourcebox a { color:var(--ink); text-decoration:none; font-weight:600;
  border-bottom:1px solid var(--line); }
.sourcebox a:hover { border-bottom-color:var(--ink); }
a.src { color:var(--ink-2); text-decoration:none; }
a.src:hover { text-decoration:underline; }