@font-face{font-family:Inter;src:url(/admin/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/admin/fonts/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/admin/fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url(/admin/fonts/roboto-mono-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url(/admin/fonts/noto-sans-arabic-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url(/admin/fonts/noto-sans-arabic-700.woff2) format("woff2");font-weight:600 700;font-display:swap}

:root{
  --bg:#f5f6f8;--panel:#fff;--ink:#14171c;--muted:#5d6573;--line:#e2e5ea;--soft:#eef0f3;
  --accent:#c2410c;--accent-ink:#fff;--ok:#15803d;--warn:#b45309;--bad:#b91c1c;--focus:#2563eb;
  --radius:10px;--shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1115;--panel:#171a20;--ink:#e8eaee;--muted:#9aa3b2;--line:#2a2f38;--soft:#1f232b;
  --accent:#f97316;--accent-ink:#1a0d03;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--focus:#60a5fa;--shadow:none}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:14px/1.5 Inter,"Noto Sans Arabic",system-ui,sans-serif}
:lang(ja) body,html:lang(ja) body{font-family:Inter,"Yu Gothic UI","Yu Gothic","Meiryo","Hiragino Sans","Noto Sans JP",system-ui,sans-serif}
html:lang(ko) body{font-family:Inter,"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif}
:lang(ar) body,[dir=rtl] body{font-family:"Noto Sans Arabic",Inter,system-ui,sans-serif}
.mono,code{font-family:"Roboto Mono",ui-monospace,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.content{min-width:0}
.side{background:var(--panel);border-inline-end:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;font-weight:700}
.brand .dot{width:12px;height:12px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.nav{all:unset;cursor:pointer;padding:8px 10px;border-radius:8px;color:var(--muted);display:block}
.nav:hover{background:var(--soft);color:var(--ink)}
.nav[aria-current=page]{background:var(--soft);color:var(--ink);font-weight:600}
.side .grow{flex:1}
.side .foot{display:flex;flex-direction:column;gap:6px;padding:8px;font-size:12px;color:var(--muted)}
main{padding:24px 28px;max-width:1200px;width:100%}
h1{font-size:20px;margin:0 0 4px}
.lead{color:var(--muted);margin:0 0 20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.panel h2{font-size:15px;margin:0 0 12px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.tile .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.tile .k{color:var(--muted);font-size:12.5px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600;background:var(--soft)}
tr:last-child td{border-bottom:0}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;border:1px solid currentColor}
.b-ok{color:var(--ok)}.b-warn{color:var(--warn)}.b-bad{color:var(--bad)}.b-muted{color:var(--muted)}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 12px;cursor:pointer}
.btn:hover{background:var(--soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.btn.small{padding:3px 9px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
form.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;align-items:end}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
label.f input,label.f select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
fieldset{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:0}
legend{font-size:12.5px;color:var(--muted);padding:0 4px}
.chk{display:inline-flex;gap:6px;align-items:center;margin-inline-end:12px;font-size:13px}
.err{color:var(--bad);font-size:13px;min-height:1.2em}
.note{color:var(--muted);font-size:12.5px}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .panel{width:min(440px,100%);padding:24px}
.secret{display:flex;gap:8px;align-items:center;background:var(--soft);border:1px dashed var(--line);border-radius:8px;padding:10px;word-break:break-all}
dialog{border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);padding:20px;width:min(520px,calc(100% - 32px))}
dialog::backdrop{background:rgba(0,0,0,.45)}
.toast{position:fixed;inset-inline-end:16px;bottom:16px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;box-shadow:var(--shadow)}
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;border-inline-end:0;border-bottom:1px solid var(--line);padding:10px}
  .brand{padding:4px 8px}.side .grow{display:none}.side .foot{flex-direction:row;padding:4px 8px}
  main{padding:16px}
}
.nav .count{display:inline-block;min-width:20px;margin-inline-start:8px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;text-align:center}
h2.sub{font-size:15px;margin:20px 0 8px}
code.note{white-space:pre-wrap;word-break:break-all}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:2px 10px;margin:6px 0 0;font-size:12.5px}dl.kv dt{color:var(--muted)}dl.kv dd{margin:0;word-break:break-word}
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:16px 28px 0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 10%,var(--panel));border-radius:var(--radius)}
details.alt{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
details.alt summary{cursor:pointer;color:var(--muted);font-size:13px}
.login .btn.primary{width:100%;padding:10px 12px}
.secret span{white-space:pre-wrap}
select.lang{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:12.5px}
ul.steps{margin:4px 0 0;padding-inline-start:18px;font-size:13px;color:var(--muted)}
form.stack{display:flex;flex-direction:column;gap:12px;max-width:640px}
form.stack textarea,form.stack input{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.sc-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:6px 0;font-size:14px}
.btn.danger{border-color:var(--bad);color:var(--bad)}
a.btn{text-decoration:none;display:inline-flex;align-items:center}
.map{height:380px;border:1px solid var(--line);border-radius:10px;margin:10px 0;z-index:0}
.maptools{margin-top:12px}
.preview{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.preview h2{grid-column:1/-1;margin:6px 0 0}
.pv{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.btn.big{padding:12px 20px;font-size:15px}
.panel.ok{border-color:var(--ok)}
.leaflet-container{font:inherit}
.maptools select,.maptools input{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);color-scheme:dark}
.maptools input:disabled{opacity:.5}
.maptools select option{background:var(--panel);color:var(--ink)}

/* incidents: zones, active incident cards */
.pvs{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.zones{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.zone{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.zone.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.zone label.f{min-width:120px;flex:1}
.zone .sw{width:14px;height:14px;border-radius:50%;align-self:center;flex:none}
.zone input,.zone select{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);color-scheme:dark}
.zone input:disabled{opacity:.45}
.incs{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-bottom:8px}
.inc{border:1px solid var(--line);border-left:4px solid var(--bad);border-radius:10px;padding:12px 14px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.inc-h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pill{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted);white-space:nowrap}
.inc-z{display:flex;flex-wrap:wrap;gap:6px}
.zchip{font-size:12.5px;border:1px solid;border-radius:999px;padding:2px 9px}
.warnbox{border-color:var(--warn);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* severity colours (classes: the console CSP allows no inline styles) */
.sev-critical{background:#d0201a}.sev-warning{background:#e8711a}.sev-advisory{background:#d6b21c}
.sevl-critical{border-left:4px solid #d0201a}.sevl-warning{border-left:4px solid #e8711a}.sevl-advisory{border-left:4px solid #d6b21c}
.sevb-critical{border-color:#d0201a}.sevb-warning{border-color:#e8711a}.sevb-advisory{border-color:#d6b21c}

/* send alert: form on the left, the alerts that were sent on the right */
main:has(.dsp){max-width:1640px}
.dsp{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.dsp-side{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px}
.dsp-side h2.sub{margin-top:0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.sents{display:flex;flex-direction:column;gap:10px}
.sent{display:flex;gap:10px;border:1px solid var(--line);border-left:4px solid var(--bad);border-radius:10px;padding:10px 12px;animation:sentIn .45s ease-out}
.sent .tick{flex:none;width:28px;height:28px;border-radius:6px;background:var(--ok);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px}
.sent-b{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.sent-h{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.sent-h b{overflow:hidden;text-overflow:ellipsis}
.sent .row{gap:6px;flex-wrap:wrap}
@keyframes sentIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sent{animation:none}}
@media (max-width:1100px){.dsp{grid-template-columns:1fr}.dsp-side{position:static;max-height:none}}

/* location search above the dispatch map */
.geo{margin-top:14px}
.geo-row{flex-wrap:nowrap}
.geo-row input{flex:1;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);color-scheme:dark;font-size:14px}
.geo-row input:focus{outline:2px solid var(--focus);outline-offset:1px}
.geo-list{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.geo-hit{display:flex;justify-content:space-between;gap:12px;text-align:start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
.geo-hit:hover,.geo-hit:focus-visible{border-color:var(--focus)}
.geo-info{margin-top:8px}
.geo-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.geo-grids{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;color:var(--muted)}
.geo-grids i{font-style:normal;color:var(--ink);opacity:.7;margin-inline-end:2px}
@media (max-width:640px){.geo-row{flex-wrap:wrap}}

/* drag on the dispatch map: ✥ moves the whole incident, the blue pin marks the searched spot */
.inc-handle{display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#111;border:2px solid #d0201a;font-size:18px;line-height:1;cursor:grab;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.inc-handle:hover{transform-origin:center;border-width:3px}
.dragging-inc,.dragging-inc .inc-handle,.dragging-inc .ring-drag{cursor:grabbing !important}
.ring-drag{cursor:grab}
.geo-pin{border-radius:50%;background:#2f81f7;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:grab}

/* archive + clear screen */
.side-tools{gap:6px;margin:4px 0 8px}
.hid-note{margin-bottom:8px}
.linkish{background:none;border:0;padding:0;color:var(--focus);cursor:pointer;font:inherit;text-decoration:underline}
.ar-tools{flex-wrap:wrap;gap:8px}
.ar-tools input,.ar-tools select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.ar-tools input[type=search]{flex:1;min-width:220px}
.f.inl{display:inline-flex;align-items:center;gap:6px}
.ar-row{cursor:pointer}
.ar-row:hover td,.ar-row:focus-visible td{background:color-mix(in srgb,var(--focus) 8%,transparent)}
.ar-det td{background:var(--soft,transparent)}
.ar-pre{max-height:360px;overflow:auto;white-space:pre;font-size:12px;padding:10px;border:1px solid var(--line);border-radius:8px}
.seal{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-weight:600}
.seal.ok{color:var(--ok);border-color:var(--ok)}
.seal.bad{color:var(--bad);border-color:var(--bad)}
.ev-end{color:var(--ok)}
.ev-update{color:var(--warn)}
.ev-create,.ev-dispatch{color:var(--bad)}

/* ongoing alerts: time left, extend, end with a reason */
.left{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:13px;font-weight:600;color:var(--ok)}
.left-bar{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.left-bar i{display:block;height:100%;width:100%;background:currentColor;transition:width .6s}
.left.soon{color:var(--warn)}
.left.soon .left-t{animation:soonPulse 1.6s ease-in-out infinite}
@keyframes soonPulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.left.soon .left-t{animation:none}.left-bar i{transition:none}}
.ext{flex-wrap:wrap;gap:8px;margin:10px 0}
.reasons{display:grid;gap:8px;margin:12px 0}
.reason{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.reason .note{grid-column:2}
.reason:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.reason input{grid-row:span 2;accent-color:var(--accent)}
.ar-why{color:var(--ink);opacity:.85}

/* incidents named by place; the menu lists the ongoing ones */
.place-f{grid-column:1/-1}
/* the fleet: a vehicle's one-time enrolment QR (black on white, whatever the theme — cameras need the contrast) */
.qr-box{display:flex;justify-content:center;padding:12px;background:#fff;border-radius:10px;margin:8px 0}
.qr-box .qr{width:240px;height:240px;image-rendering:pixelated}
/* missions: the fleet's real vehicles on the map, and per incident the ones sent to it */
.fleet-veh{background:none;border:0}
.fleet-veh div{display:flex;align-items:center;gap:4px;white-space:nowrap}
.fleet-veh .aid-ic{font-size:20px;filter:drop-shadow(0 0 2px #000)}
.fleet-veh .aid-lb{font:600 11px/1.2 Inter,system-ui,sans-serif;background:#0b1220e6;color:#fff;border-radius:6px;padding:2px 6px}
.fleet-veh.on-mission .aid-lb{background:#b91c1c}
.fleet-veh.s-on-scene .aid-lb{background:#15803d}
.fleet-list{margin-top:6px}
.fleet-list .ms-on-scene b{color:#16a34a}
.fleet-list .ms-left b{opacity:.8}
tr.busy td{opacity:.7}
.pending-row td{background:color-mix(in srgb,var(--warn,#e8711a) 10%,transparent)}
.place-row{flex-wrap:nowrap;gap:6px}
.place-row input{flex:1;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);color-scheme:dark;font-size:14px}
.place-row input:focus{outline:2px solid var(--focus);outline-offset:1px;background:var(--bg);color:var(--ink)}
.place-row input::placeholder{color:var(--muted,#8a8f98);opacity:1}
.place-info{margin-top:4px;display:flex;flex-wrap:wrap;gap:0 4px}
.sent-place{font-weight:700;font-size:15px;margin-bottom:2px}
.coords{font-size:12px;opacity:.85}
.sent.focus{box-shadow:0 0 0 2px var(--focus);animation:focusPulse 1.2s ease-in-out 2}
@keyframes focusPulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--focus) 40%,transparent)}}
.nav-live{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.nav-live:empty{display:none}
.nav-live-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px;padding:0 10px 4px}
.nav-live-i{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:start;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.nav-live-i:hover,.nav-live-i:focus-visible{border-color:var(--focus)}
.nav-live-t{line-height:1.3;overflow-wrap:anywhere}
.tick.sm{flex:none;width:18px;height:18px;border-radius:4px;background:var(--ok);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}
@media (prefers-reduced-motion:reduce){.sent.focus{animation:none}}

/* settings: alert languages */
.lang-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.lang-chip{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:inherit;cursor:pointer}
.lang-chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--panel));font-weight:700}
.lang-chip:disabled{opacity:.45;cursor:not-allowed}
.lang-chip:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* earthquake: size of the affected region */
.maptools .big-km { display: inline-flex; gap: 6px; align-items: center; margin: 0 8px; }


/* shelters view; age of a missing person */
.sh-map { height: 360px; margin: 10px 0; }
.sh-form { margin-top: 6px; }
.age-f input { max-width: 110px; }


/* several provinces in one alert */
.regions { display: grid; gap: 8px; margin: 8px 0; padding: 10px; border: 1px dashed #7a8494; border-radius: 10px; }
.regions .region { align-items: center; gap: 10px; flex-wrap: wrap; }
.regions .warn { color: #e8711a; }


/* missing information: a red notice that lists each gap and points at its field; the field is outlined red; nothing is sent until it is complete */
.gaps{border:2px solid var(--bad);background:color-mix(in srgb,var(--bad) 9%,var(--panel));color:var(--bad);border-radius:10px;padding:10px 14px;margin:10px 0;font-size:14px}
.gaps ul{margin:6px 0 0;padding-inline-start:18px}
.gaps li{margin:3px 0}
.gaps .linkish{color:var(--bad);text-decoration:underline;font-weight:600;text-align:start}
.gap-bad>input,.gap-bad>select,label.gap-bad input,label.gap-bad select{border-color:var(--bad)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 25%,transparent)}
label.gap-bad>span:first-child,label.gap-bad{color:var(--bad)}
.map.gap-bad{outline:3px solid var(--bad);outline-offset:2px}
tr.gap-bad td{background:color-mix(in srgb,var(--bad) 9%,transparent)}
tr.gap-bad input{border-color:var(--bad)}
.btn.big:disabled{opacity:.45;cursor:not-allowed}

/* the place of a live alert on the map: a dot that grows a little and shrinks, with a ring spreading out — to draw the eye */
.inc-pulse{background:none;border:0}
.inc-pulse i,.inc-pulse b{position:absolute;inset:0;border-radius:50%}
.inc-pulse i{background:var(--c);box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.45);animation:incDot 1.4s ease-in-out infinite}
.inc-pulse b{border:3px solid var(--c);animation:incRing 1.4s ease-out infinite}
@keyframes incDot{0%,100%{transform:scale(.8)}50%{transform:scale(1.2)}}
@keyframes incRing{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.inc-pulse i,.inc-pulse b{animation:none}.inc-pulse b{transform:scale(1.6);opacity:.5}}

/* …and its colour alternates: the dot and ring between the severity colour and white, the zone outline between grey and the severity colour */
.inc-pulse i{animation:incDot 1.4s ease-in-out infinite,incDotC 1.4s steps(1) infinite}
.inc-pulse b{animation:incRing 1.4s ease-out infinite,incRingC 1.4s steps(1) infinite}
@keyframes incDotC{0%{background:var(--c);box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.45)}50%{background:#fff;box-shadow:0 0 0 3px var(--c),0 1px 4px rgba(0,0,0,.45)}}
@keyframes incRingC{0%{border-color:var(--c)}50%{border-color:#fff}}
.inc-zone{animation:incZone 1.4s steps(1) infinite}
.sevz-critical{--zc:#d0201a}.sevz-warning{--zc:#e8711a}.sevz-advisory{--zc:#d6b21c}
@keyframes incZone{0%{stroke:#7a8494;fill:#7a8494}50%{stroke:var(--zc);fill:var(--zc)}}
@media (prefers-reduced-motion:reduce){.inc-zone{animation:none}}

/* mutual aid: the units on their way — a fire engine with its name and time of arrival; own service blue, neighbouring services purple */
.aid-unit{background:none;border:0}
.aid-unit>div{position:relative;width:30px;height:30px}
.aid-unit .aid-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid #2563eb;font-size:16px;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.aid-unit.mutual .aid-ic{border-color:#7c3aed}
.aid-unit.here .aid-ic{border-color:#15803d}
.aid-unit .aid-lb{position:absolute;left:34px;top:4px;white-space:nowrap;font:600 11px/1.3 Inter,system-ui,sans-serif;color:#fff;background:#2563eb;padding:2px 6px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.aid-unit.mutual .aid-lb{background:#7c3aed}
.aid-unit.here .aid-lb{background:#15803d}
.aid-list{display:flex;flex-direction:column;gap:3px}
.aid-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;font-size:13px;border-inline-start:3px solid #2563eb;padding-inline-start:6px}
.aid-row.mutual{border-color:#7c3aed}
.aid-row.here b{color:var(--ok)}
.aid-btn{border-color:#7c3aed;color:#7c3aed;font-weight:600}
.pill.aid-own{background:color-mix(in srgb,#2563eb 15%,transparent);color:#2563eb}
.pill.aid-mut{background:color-mix(in srgb,#7c3aed 15%,transparent);color:#7c3aed}
tr.muted{opacity:.5}
.st-add{flex-wrap:wrap;align-items:flex-end}

/* the neighbour chain: my rescue service + watched incidents of neighbours (dashed on the map, eye in the lists) */
.wt-me{align-items:flex-end;gap:12px}
.sent.watch{border-left-color:#0e7490;background:color-mix(in srgb,#0e7490 5%,var(--panel))}
.sent.watch.w2{border-left-style:dashed}
.wt-badge{display:inline-block;font-size:12px;font-weight:600;color:#0e7490;background:color-mix(in srgb,#0e7490 12%,transparent);border-radius:6px;padding:2px 7px;margin-bottom:2px}
.wt-h{margin-top:14px}
.tick.watch{background:#0e7490}
.chain-links{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chain-link{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px}
.chain-sug{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}

tr.sep td{padding-top:10px;border-top:2px solid var(--line)}

/* "Request help": the side button and its window */
.aid-side{width:100%;margin:6px 0 10px;font-size:15px}
.aid-kinds{gap:14px;align-items:flex-end;flex-wrap:wrap}
.aid-kind{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:600}
.aid-kind:has(input:checked){border-color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.aid-all input{transform:scale(1.2)}

/* one line per unit in the card */
.aid-row{grid-template-columns:1fr auto;white-space:nowrap}
.aid-row .aid-n{overflow:hidden;text-overflow:ellipsis}

/* sections / stations of the console's organisation */
.sec-badge{display:inline-block;font-size:12px;font-weight:700;color:#94a3b8;background:color-mix(in srgb,#64748b 18%,transparent);border-radius:6px;padding:2px 7px;margin-bottom:2px}
.sec-badge.other{color:#0e7490;background:color-mix(in srgb,#0e7490 14%,transparent)}
.sec-row{gap:6px;flex-wrap:nowrap}.sec-in{width:90px}
.org-f .org-name{display:block;padding:8px 0;font-size:15px}

/* a zone with more than one action: main ＋ extra ✕ */
.acts-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.acts-plus{font-weight:800;color:var(--muted)}
.acts-x{color:var(--bad);padding:0 4px}
.acts-add{min-width:34px;font-weight:800}
select.gap-bad{border-color:var(--bad)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 25%,transparent)}

/* on scene: fire engines, ambulances, police — counted as they arrive */
.os-box{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:4px 0;display:flex;flex-direction:column;gap:3px}
.os-h{font-weight:800;font-size:13px}
.os-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.os-row.yes{color:var(--ok);font-weight:700}
.aid-unit.police .aid-ic{border-color:#1e3a8a}
.aid-unit.police .aid-lb{background:#1e3a8a}

/* the incident's pinned place (double-click on the circle) */
.inc-pin { background: none; border: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }


/* radio channels (Settings) */
.radio-rows { display: grid; gap: 8px; margin: 8px 0; }
.radio-row input:first-child { flex: 0 0 200px; }
.radio-row input.mono { flex: 1; min-width: 220px; }


/* volunteers (for discussion): one box per kind of call-out */
.vol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 10px 0; }
.vol-k { border: 1px solid var(--line, #d0d4d9); border-radius: 10px; padding: 8px 12px; margin: 0; }
.vol-k legend { font-weight: 700; padding: 0 4px; }
.vol-n { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.pill.disc { display: inline-block; background: #fff4d6; color: #7a5300; }
.vol-names { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.vol-line { display: flex; gap: 8px; flex-wrap: wrap; }
.vol-h { font-weight: 700; margin-top: 8px; }
.vol-nn { flex: 1; }
.vol-lvl { width: auto; }
.vol-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.vol-off { opacity: .55; }
.vc-icon { width: 4em; }