:root{
  --bg:#0f1113; --panel:#171a1d; --panel2:#1e2226; --line:#2b3136;
  --fg:#e8e6e3; --dim:#9aa0a6; --faint:#6b7177;
  --ok:#4a9d6f; --watch:#c9973f; --alert:#c05a4a; --info:#5c8ca8;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
body{padding-bottom:5rem}
a{color:var(--info)}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.15rem;font-weight:600;letter-spacing:.01em}
h2{font-size:1.05rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
h4{font-size:.85rem;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-top:1rem}

/* header */
header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);
  padding:.7rem 1rem .6rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.brand{font-weight:600;letter-spacing:.12em;font-size:.8rem;text-transform:uppercase;color:var(--dim)}
.loc{font-size:.85rem;color:var(--fg);font-variant-numeric:tabular-nums}
.loc button{margin-left:.4rem}

main{padding:1rem;max-width:44rem;margin:0 auto}
section[hidden]{display:none}

/* age ladder */
.age{font-family:var(--mono);font-size:.7rem;padding:.15rem .45rem;border-radius:.2rem;
  border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.age.live{color:var(--ok);border-color:#2c4a39}
.age.recent{color:var(--info);border-color:#2b3f4c}
.age.stale{color:var(--watch);border-color:#4a3c24}
.age.cold{color:var(--alert);border-color:#4a2e28;background:#241a18}

/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:.5rem;padding:1rem;margin:0 0 .85rem}
.card.tight{padding:.75rem}
.row{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.muted{color:var(--dim);font-size:.85rem}
.faint{color:var(--faint);font-size:.78rem}
.big{font-size:2.1rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;font-family:var(--mono)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* verdict banner */
.verdict{border-radius:.5rem;padding:1rem;margin-bottom:.85rem;border:1px solid}
.verdict .vtitle{font-size:1.25rem;font-weight:600;margin-bottom:.2rem}
.v-clear{background:#131d17;border-color:#2c4a39}
.v-clear .vtitle{color:var(--ok)}
.v-corridor{background:#241a18;border-color:#5a342c}
.v-corridor .vtitle{color:var(--alert)}
.v-unknown{background:var(--panel2);border-color:var(--line)}
.v-unknown .vtitle{color:var(--dim)}

/* compass */
.compass{display:flex;align-items:center;gap:1rem;margin:.5rem 0}
svg.rose{flex:0 0 auto}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
tr.hit td{background:#241a18}

/* controls */
button,select,input{font:inherit;color:var(--fg);background:var(--panel2);
  border:1px solid var(--line);border-radius:.35rem;padding:.45rem .7rem}
button{cursor:pointer}
button:hover{border-color:#3d454b}
button.primary{background:#2a3a46;border-color:#3c5566}
button.danger{background:#3a221e;border-color:#5a342c;color:#e8b5ab}
button.big-action{width:100%;padding:.9rem;font-size:1rem;font-weight:600;margin-top:.5rem}
input[type=text],input[type=datetime-local],input[type=number],select{width:100%;margin:.25rem 0 .6rem}
label{display:block;font-size:.8rem;color:var(--dim);margin-top:.5rem}
.check{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0;border-bottom:1px solid var(--line);
  font-size:.88rem;cursor:pointer}
.check input{margin-top:.2rem;flex:0 0 auto;width:auto}
.check .h{margin-left:auto;color:var(--faint);font-family:var(--mono);font-size:.72rem;white-space:nowrap}

/* nav */
nav{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;background:var(--panel);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;border:0;border-radius:0;background:transparent;padding:.7rem .2rem .8rem;
  font-size:.7rem;color:var(--dim);letter-spacing:.03em;display:flex;flex-direction:column;
  align-items:center;gap:.2rem}
nav button .ico{font-size:1.05rem;line-height:1}
nav button{padding:.7rem .1rem .8rem;font-size:.65rem}
nav button[aria-current=true]{color:var(--fg);box-shadow:inset 0 2px 0 var(--info)}

details{border-bottom:1px solid var(--line);padding:.3rem 0}
details summary{cursor:pointer;padding:.5rem 0;font-weight:600;font-size:.92rem}
details[open] summary{color:var(--info)}
details .gbody{font-size:.9rem;color:#d6d3cf}
details .gbody ul,details .gbody ol{padding-left:1.2rem}
details .gbody li{margin:.3rem 0}
.urgent summary::after{content:' — read first';color:var(--watch);font-weight:400;font-size:.8rem}

.note{border-left:2px solid var(--line);padding:.1rem 0 .1rem .75rem;color:var(--dim);font-size:.83rem;margin:.6rem 0}
.nodata{color:var(--watch)}
.watchstate{color:var(--watch)}
.alertstate{color:var(--alert);font-weight:600}
.banner{background:#241a18;border:1px solid #5a342c;border-radius:.4rem;padding:.6rem .75rem;
  font-size:.85rem;margin-bottom:.85rem}

@media print{
  :root{--bg:#fff;--panel:#fff;--panel2:#fff;--fg:#000;--dim:#333;--faint:#555;--line:#bbb}
  body{padding:0;font-size:9.5pt} header,nav,.noprint{display:none!important}
  main{max-width:none;padding:0} .card{page-break-inside:avoid;border:1px solid #bbb;margin-bottom:.5rem}
  /* print ONLY the card, never every section at once */
  main > section{display:none!important} main > section#v-card{display:block!important}
  h2{font-size:11pt;margin-top:.2rem} .note{font-size:8.5pt} table{font-size:8.5pt}
}

/* ── map ── */
svg.map{display:block;width:100%;height:auto;background:#0c0e10;border-radius:.4rem;touch-action:manipulation}
.map .coast{fill:none;stroke:#39424a;stroke-width:2.2;stroke-linejoin:round}
.map .ring{fill:none;stroke:#252b30;stroke-width:2;stroke-dasharray:7 9}
.map .ringlbl{fill:#5a6168;font:19px var(--mono)}
.map .cardinal{fill:#6b7177;font:22px var(--mono);text-anchor:middle}
.map .wedge{fill:rgba(192,90,74,.15);stroke:rgba(192,90,74,.5);stroke-width:2}
.map .tvec{stroke:var(--watch);stroke-width:4;opacity:.9}
.map .tvechead{fill:var(--watch)}
.map .tlbl{fill:var(--watch);font:21px var(--mono);text-anchor:middle}
.map .here{fill:#e8e6e3;stroke:#0c0e10;stroke-width:3}
.map .herering{fill:none;stroke:#e8e6e3;stroke-width:2;opacity:.35}
.map .site{stroke:#0c0e10;stroke-width:2;cursor:pointer}
.map .site.hit{stroke:#e8e6e3;stroke-width:3}
.map .sitelbl{fill:#9aa0a6;font:20px var(--sans)}
.map .sitelbl.hit{fill:#e8b5ab;font-weight:600}
.map .c-deterrent{fill:#c05a4a}
.map .c-submarine{fill:#a8604f}
.map .c-fuel_waste{fill:#c9973f}
.map .c-reactor_live{fill:#c9973f}
.map .c-reactor_shut{fill:#7d7256}
.map .c-airfield{fill:#5c8ca8}
.map .c-c2{fill:#7a6fa8}
.map .c-munitions{fill:#6b7177}
.map .c-city{fill:#4a5a63}
.map .c-comah{fill:#b07a3c}

/* ── hazard strip ── */
.hazstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.4rem;margin-top:.6rem}
.haz{display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;padding:.5rem .55rem;
  background:var(--panel2);border:1px solid var(--line);border-radius:.35rem;text-align:left}
.haz .hl{font-size:.8rem;font-weight:600;color:var(--fg)}
.haz .hs{font-size:.68rem;font-family:var(--mono);color:var(--dim);letter-spacing:.02em}
.haz .hn{font-size:.62rem;font-family:var(--mono);color:var(--faint)}
.haz.ok .hs{color:var(--ok)}
.haz.nodata .hs{color:var(--watch)}
.haz.faintstate .hs{color:var(--faint)}
.haz.watchstate{border-color:#4a3c24}.haz.watchstate .hs{color:var(--watch)}
.haz.alertstate{border-color:#5a342c;background:#241a18}.haz.alertstate .hs{color:var(--alert);font-weight:600}
.hazdetail{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line)}

/* ── forecast timeline ── */
svg.tl{display:block;width:100%;height:112px;background:#0c0e10;border-radius:.4rem}
.tl .tlcell.clear{fill:#172a20}
.tl .tlcell.open{fill:#4a2019}
.tl .tltick{stroke:#2b3136;stroke-width:1}
.tl .tllbl{fill:#6b7177;font:11px var(--mono)}
.tl .tltrace{fill:none;stroke:var(--watch);stroke-width:1.5;opacity:.85}

/* ── accessibility ── */
.skip{position:absolute;left:-9999px;top:0;background:var(--panel2);color:var(--fg);
  padding:.6rem 1rem;border:1px solid var(--info);border-radius:0 0 .3rem 0;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--info);outline-offset:2px;border-radius:.2rem}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--info);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Light mode. An emergency tool should be readable in direct sunlight, which is
   exactly when a dark theme is worst. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f7f6f4; --panel:#fff; --panel2:#f0eeeb; --line:#d6d2cc;
    --fg:#1b1d1f; --dim:#5a6168; --faint:#7d838a;
    --ok:#1f6b45; --watch:#8a5f13; --alert:#a5352a; --info:#1f5d7a;
  }
  :root:not([data-theme="dark"]) svg.map,
  :root:not([data-theme="dark"]) svg.tl{background:#eceae6}
  :root:not([data-theme="dark"]) .map .coast{stroke:#9aa0a6}
  :root:not([data-theme="dark"]) .map .ring{stroke:#cfcac3}
  :root:not([data-theme="dark"]) .map .here{fill:#1b1d1f;stroke:#fff}
  :root:not([data-theme="dark"]) .tl .tlcell.clear{fill:#d8e8de}
  :root:not([data-theme="dark"]) .tl .tlcell.open{fill:#f0cdc6}
  :root:not([data-theme="dark"]) .v-clear{background:#e6f2ea}
  :root:not([data-theme="dark"]) .v-corridor{background:#fbe9e5}
  :root:not([data-theme="dark"]) .banner{background:#fbe9e5;border-color:#e0b4aa}
  :root:not([data-theme="dark"]) .haz.alertstate{background:#fbe9e5}
}