:root{
  --navy:#1E2A78; --navy-deep:#141C52; --gold:#F5C400;
  --ink:#171A21; --ink-soft:#5A6270; --line:#DFE3EA; --bg:#FFFFFF; --panel:#F6F7FA;
  --green-ink:#2F7C2A; --green-bg:#E4F2E1;
  --orange-ink:#B85A10; --orange-bg:#FCEBD8;
  --red-ink:#96201B; --red-bg:#FBE0DE;
  --unknown-ink:#5A6270; --unknown-bg:#E8EAED;
  --ui:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EEF0F4; --ink-soft:#A6AEBD; --line:#2C3242; --bg:#12141B; --panel:#1A1E28;
    --green-bg:#1B2E1A; --orange-bg:#33230F; --red-bg:#341615; --unknown-bg:#23262E;
    --green-ink:#8FD98A; --orange-ink:#F0A65C; --red-ink:#F09189; --unknown-ink:#A6AEBD;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--ui)}
h1{font-size:1.5rem;margin:.1rem 0 0}
h2{font-size:1rem;letter-spacing:.02em;margin:1.4rem 0 .4rem}
a{color:var(--navy)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) a{color:#9DB2FF}}

.mast{background:var(--navy-deep);color:#fff;border-bottom:4px solid var(--gold)}
.mastin{max-width:1180px;margin:0 auto;padding:1rem 1.1rem;display:flex;gap:.9rem;align-items:center}
.mastin .seal{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
.eyebrow{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold)}
.pagasa{margin-left:auto;color:#fff;font-size:.85rem;font-weight:600;text-decoration:none;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:.35rem .8rem;white-space:nowrap}
.pagasa:hover{background:rgba(255,255,255,.12)}
.claim{margin:0;background:var(--navy);color:#EDEFF7;font-size:.8rem;
  padding:.45rem 1.1rem;text-align:center}

.status{max-width:1180px;margin:0 auto;padding:.6rem 1.1rem;display:flex;gap:.6rem;
  align-items:center;font-size:.9rem;font-weight:600}
.status .dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--unknown-ink);flex:0 0 auto}
body[data-state="fresh"] .status{color:var(--green-ink)} body[data-state="fresh"] .dot{background:var(--green-ink)}
body[data-state="stale"] .status{color:var(--orange-ink);background:var(--orange-bg)}
body[data-state="stale"] .dot{background:var(--orange-ink)}
body[data-state="dark"] .status{color:var(--red-ink);background:var(--red-bg)}
body[data-state="dark"] .dot{background:var(--red-ink)}

main{max-width:1180px;margin:0 auto;padding:0 1.1rem 2rem}
.metrics{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 .9rem}
.metrics button{font:600 .85rem var(--ui);padding:.45rem .9rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.metrics button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

.layout{display:grid;grid-template-columns:1fr 300px;gap:1rem;align-items:start}
@media (max-width:860px){.layout{grid-template-columns:1fr}}
.map{height:460px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.mapnote{font-size:.78rem;color:var(--ink-soft);margin:.4rem 0 0}
.side{position:sticky;top:.6rem;display:grid;gap:.8rem}
.legend,.detail{border:1px solid var(--line);border-radius:8px;padding:.8rem;background:var(--panel)}
.legend h3,.detail h3{margin:0 0 .5rem;font-size:.9rem}
.key{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.18rem 0}
.sw{width:1rem;height:1rem;border-radius:3px;flex:0 0 auto;border:1px solid rgba(0,0,0,.15)}
.src{font-size:.72rem;color:var(--ink-soft);margin:.6rem 0 0;line-height:1.4}
.muted{color:var(--ink-soft)}
.dl{margin:0;font-size:.85rem} .dl div{display:flex;justify-content:space-between;gap:.6rem;
  padding:.22rem 0;border-bottom:1px solid var(--line)} .dl div:last-child{border-bottom:0}
.dl dt{color:var(--ink-soft)} .dl dd{margin:0;font-family:var(--mono)}

.filterbar{display:flex;gap:.6rem;align-items:center;margin:1.4rem 0 .5rem;flex-wrap:wrap}
.filterbar label{font-size:.8rem;color:var(--ink-soft)}
.filterbar input{font:1rem var(--ui);padding:.4rem .6rem;border:1px solid var(--line);
  border-radius:6px;background:var(--bg);color:var(--ink);min-width:14rem}
.count{font-size:.8rem;color:var(--ink-soft)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{background:var(--navy);color:#fff;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.07em;position:sticky;top:0}
tbody tr:hover{background:var(--panel)} tbody tr.on{outline:2px solid var(--gold);outline-offset:-2px}
td.num{font-family:var(--mono)} td.from{white-space:normal;font-size:.78rem;color:var(--ink-soft)}

.pill{display:inline-block;font:600 .72rem var(--ui);text-transform:uppercase;letter-spacing:.06em;
  padding:.15rem .55rem;border-radius:999px}
.b-green{background:var(--green-bg);color:var(--green-ink)}
.b-orange{background:var(--orange-bg);color:var(--orange-ink)}
.b-red{background:var(--red-bg);color:var(--red-ink)}
.b-unknown{background:var(--unknown-bg);color:var(--unknown-ink)}

.callout{border-left:4px solid var(--gold);background:var(--panel);padding:.7rem .9rem;
  margin:1rem 0;font-size:.9rem}
.snap{margin-top:.6rem}
.snap caption{text-align:left;font-size:.8rem;color:var(--ink-soft);padding-bottom:.3rem}

.foot{background:var(--navy-deep);color:#DDE1EE;margin-top:2rem;padding:1.6rem 1.1rem}
.foot>*{max-width:1180px;margin-left:auto;margin-right:auto}
.foot h2{color:var(--gold);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}
.foot p,.foot li{font-size:.85rem;line-height:1.6}
.foot a{color:#fff} .fine{color:#9AA3C0;font-size:.75rem}

/* When the feed is dark the numbers are hidden rather than shown as current.
   Grey is the honest colour for "nobody knows"; green would be a lie. */
body[data-state="dark"] .num-live{visibility:hidden}
body[data-state="dark"] .pill{background:var(--unknown-bg);color:var(--unknown-ink)}
@media print{.metrics,.filterbar,.side{display:none}.map{display:none}}