:root{--ink:#16181a;--paper:#f3efe4;--blaze:#c2410c;--card:#fffdf6;--line:#d8d2c0;--mute:#6b6a62;--ok:#2f7d32;--bad:#b3261e;--warn:#b45309;
  --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--f-head:'Barlow Condensed','Arial Narrow',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font:16px/1.4 var(--f-body);-webkit-text-size-adjust:100%}
#app{display:flex;flex-direction:column;height:100dvh;max-width:980px;margin:0 auto;background:var(--paper)}
#top{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:calc(8px + env(safe-area-inset-top)) 14px 8px}
#top .brand{font:700 20px var(--f-head);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
#top .brand i{width:12px;height:12px;border-radius:50%;background:#f97316;display:inline-block}
#top .grow{flex:1}
#top .clock{font:600 14px var(--f-head);opacity:.85;letter-spacing:.05em}
#top .st{font:700 12px var(--f-head);padding:2px 8px;border-radius:3px;background:#444;text-transform:uppercase;letter-spacing:.08em}
#top .st.live{background:var(--blaze)}
#banner{background:var(--blaze);color:#fff;padding:8px 14px;font-weight:600}
main{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0}
#mapwrap{position:absolute;inset:0}
#map{position:absolute;inset:0;background:#222}
#maptools{position:absolute;left:10px;top:10px;z-index:500;display:flex;flex-direction:column;gap:6px}
#view{flex:1;overflow:auto;padding:14px;-webkit-overflow-scrolling:touch}
#app:not(.split) #mapwrap:not([hidden])~#view,#editwrap:not([hidden])~#view{display:none}
#nav{display:flex;background:var(--ink);padding-bottom:env(safe-area-inset-bottom);overflow-x:auto}
#nav button{flex:1 0 auto;min-width:64px;background:none;border:0;color:#b9b6aa;font:600 13px var(--f-head);letter-spacing:.07em;text-transform:uppercase;padding:11px 10px;cursor:pointer;border-top:3px solid transparent}
#nav button.on{color:#fff;border-top-color:var(--blaze)}
#nav .dot{display:inline-block;min-width:16px;padding:0 4px;border-radius:8px;background:var(--blaze);color:#fff;font-size:11px;margin-left:4px}
h1,h2,h3{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
h1{font-size:30px}h2{font-size:22px;margin-top:20px}h3{font-size:17px}
.card{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--ink);border-radius:4px;padding:12px;margin:0 0 10px}
.card.accent{border-left-color:var(--blaze)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1}.mute{color:var(--mute)}.small{font-size:13px}.right{margin-left:auto}
label{display:block;font:600 13px var(--f-head);letter-spacing:.06em;text-transform:uppercase;margin:10px 0 3px}
input,select,textarea{width:100%;font:inherit;padding:10px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;color:var(--ink)}
textarea{min-height:70px}
input[type=checkbox]{width:auto}
button.b,a.b{display:inline-block;font:700 15px var(--f-head);letter-spacing:.07em;text-transform:uppercase;padding:10px 16px;border:2px solid var(--ink);border-radius:3px;background:var(--ink);color:#fff;cursor:pointer;text-decoration:none}
button.b.o{background:var(--blaze);border-color:var(--blaze)}
button.b.g{background:transparent;color:var(--ink)}
button.b.s{padding:5px 10px;font-size:13px}
button.b.bad{background:var(--bad);border-color:var(--bad)}
button.b.ok{background:var(--ok);border-color:var(--ok)}
button.b:disabled{opacity:.45}
.chip{display:inline-block;font:700 12px var(--f-head);letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:3px;background:var(--line);color:var(--ink)}
.chip.o{background:var(--blaze);color:#fff}.chip.ok{background:var(--ok);color:#fff}.chip.bad{background:var(--bad);color:#fff}.chip.warn{background:var(--warn);color:#fff}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs button{flex:1}
.timer{font:700 28px var(--f-head);letter-spacing:.04em}
.timer.low{color:var(--bad)}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 12px var(--f-head);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.score{font:700 34px var(--f-head)}
.bar{height:10px;background:var(--line);border-radius:2px;overflow:hidden}.bar i{display:block;height:100%;background:var(--blaze)}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:4px;z-index:2000;max-width:90vw;font-weight:600}
#toast.err{background:var(--bad)}
.pin{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;border:2px solid #fff;font:700 13px/22px var(--f-head);text-align:center;box-shadow:0 1px 4px #0008}
.pin.med{background:#fff;color:#c00;border-color:#c00;font-size:18px}
.pin.rad{background:#7cb342;color:#111}
.pl{width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #0007}
.pl.me{width:20px;height:20px;box-shadow:0 0 0 3px #f97316}
.pl.stale{opacity:.45}
.leaflet-tooltip{font:600 12px var(--f-body)}
.hero{text-align:center;padding:24px 0 8px}.hero svg{width:86px;height:86px}
.hero h1{font-size:40px;margin-top:8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:2px 12px}

#maptools .b{background:var(--paper);color:var(--ink);border-color:var(--ink);box-shadow:0 1px 4px #0006}
#maptools .b.o{background:var(--blaze);color:#fff;border-color:var(--blaze)}
.logo{width:44px;height:44px;border-radius:6px;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.logo.ph{display:inline-flex;align-items:center;justify-content:center;color:#fff;font:700 15px var(--f-head);letter-spacing:.04em;border:0}
details>summary{cursor:pointer;padding:4px 0}

/* ---- fit every screen: cover screen of a foldable (320-380px), phones, unfolded inner screen, tablets ---- */
html,body{overflow-x:hidden}
#app{width:100%;min-width:0}
#view{overflow-x:hidden;overflow-wrap:anywhere;min-width:0}
.row>*{min-width:0}
img,select,input,textarea{max-width:100%}
#view>.hero,#view>h1,#view>h2,#view>.card,#view>form{max-width:720px}
@media (max-width:480px){
  .row>div[style*="width:"]{width:auto!important;flex:1 1 90px}
  #view{padding:12px}
}
@media (max-width:380px){          /* foldable cover screen / small phones */
  body{font-size:15px}
  #view{padding:10px}
  h1{font-size:25px}h2{font-size:19px}h3{font-size:16px}
  .card{padding:10px;margin-bottom:8px}
  .score{font-size:28px}.timer{font-size:25px}
  button.b{padding:9px 12px;font-size:14px}
  button.b.s{padding:5px 8px;font-size:12px}
  #top{padding-left:10px;padding-right:10px;gap:6px}
  #top .brand{font-size:17px;letter-spacing:.04em}
  #top .clock{display:none}
  #nav button{min-width:54px;padding:10px 6px;font-size:12px;letter-spacing:.04em}
  td,th{padding:6px 2px}
  .hero svg,.hero img{width:64px;height:64px}.hero h1{font-size:30px}
  #toast{bottom:70px}
}
@media (min-width:640px){          /* unfolded inner screen / tablet: map on the left, panel on the right */
  #app{max-width:none}
  #app.split main{flex-direction:row}
  #app.split #mapwrap{position:relative;inset:auto;flex:1.15 1 0;min-width:0;border-right:3px solid var(--ink)}
  #app.split #view{flex:1 1 0;min-width:0;max-width:none;padding:16px}
  #app:not(.split) #view{max-width:760px;margin:0 auto;width:100%}
  #nav{justify-content:center}
  #nav button{flex:0 1 auto;min-width:92px}
}
@media (min-width:1100px){ #app.split #mapwrap{flex:1.6 1 0} #app.split #view{padding:20px} }
@media (max-height:480px) and (orientation:landscape){ #top{padding-top:4px;padding-bottom:4px} #nav button{padding:7px 10px} }

/* ---- event picker, event pages, results ---- */
.evcard{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--blaze);border-radius:4px;padding:14px;margin:0 0 10px;font:inherit;color:inherit;cursor:pointer}
.evcard>span{display:block}.evcard .row2{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.evcard .evname{font:700 28px var(--f-head);letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.evcard .evgo{margin-top:8px;font:700 15px var(--f-head);letter-spacing:.07em;text-transform:uppercase}
.evcard.ended{background:#e8e4d6;border-color:#cfc9b6;border-left-color:#8a887d;color:#3d3c36}
.evcard.sel{border:2px solid var(--ink);border-left-width:6px}
.evhead{margin:-14px -14px 14px;padding:14px 14px 18px;color:#fff;border-bottom:6px solid var(--blaze)}
.evhead h1{color:#fff;margin:4px 0 0;font-size:42px;line-height:1}
.choice{display:block;width:100%;text-align:left;background:var(--card);border:2px solid var(--ink);border-radius:4px;padding:14px;margin:0 0 10px;font:inherit;color:inherit;cursor:pointer}
.choice .chtitle{display:block;font:700 22px var(--f-head);letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.sect{font:600 14px var(--f-head);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px;margin:14px 0 8px}.sect:after{content:'';flex:1;height:1px;background:var(--line)}
@media (min-width:640px){
  #app:not(.split) #view:has(.evlayout){max-width:none;padding:0}
  .evlayout{display:flex;min-height:100%}
  .evlist{width:300px;flex:none;border-right:3px solid var(--ink);padding:14px;overflow:auto}
  .evdetail{flex:1;min-width:0;padding:14px;overflow:auto}
  .evdetail .evhead{margin:-14px -14px 14px}
  .evlayout .backbtn{display:none}
}
@media (max-width:380px){ .evcard .evname{font-size:24px} .evhead h1{font-size:34px} }

/* ---- objectives on missions, and active missions pulsing on the map ---- */
.objgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:4px 0 8px}
.objchip{display:flex;align-items:center;gap:6px;margin:0;font:500 14px var(--f-body);letter-spacing:0;text-transform:none;border:1.5px solid var(--line);border-radius:3px;background:#fff;padding:7px 8px;cursor:pointer}
.objchip input{width:auto;margin:0;flex:none}
.objchip:has(input:checked){border-color:var(--ink);background:#efe7d3;box-shadow:inset 3px 0 0 var(--blaze)}
.pin.hot{transform:scale(1.25);border-color:#fff;background:var(--ring,#c2410c);animation:ozpulse 1.6s ease-out infinite}
@keyframes ozpulse{0%{box-shadow:0 0 0 0 var(--ring,#f97316),0 1px 4px #0008}70%{box-shadow:0 0 0 16px transparent,0 1px 4px #0008}100%{box-shadow:0 0 0 0 transparent,0 1px 4px #0008}}
@media (prefers-reduced-motion:reduce){.pin.hot{animation:none;box-shadow:0 0 0 5px var(--ring,#f97316)}}
#maptools .chip{background:#16181a;color:#fff}

/* ---- event branding: accent colour and app themes ---- */
:root{--bar:#16181a;--on-bar:#f3efe4;--on-ink:#fff;--on-blaze:#fff;--input:#fff}
#top{background:var(--bar);color:var(--on-bar)}
#nav{background:var(--bar)}
input,select,textarea{background:var(--input)}
button.b{color:var(--on-ink)}
button.b.o{color:var(--on-blaze)}
button.b.g{color:var(--ink)}
button.b.ok,button.b.bad{color:#fff}
.chip.o,#nav .dot,#banner{color:var(--on-blaze)}
#toast{color:var(--on-ink)}
[data-theme=terminal]{--paper:#040d07;--card:#07170d;--ink:#5dff8a;--line:#14532d;--mute:#7fbf93;--blaze:#5dff8a;--bar:#0a2412;--on-bar:#5dff8a;--on-ink:#04120a;--on-blaze:#04120a;--input:#0a2412;--ok:#5dff8a;--bad:#ff6b6b;--warn:#ffd166}
[data-theme=comms]{--paper:#0e1116;--card:#161b22;--ink:#e8eef5;--line:#2a3340;--mute:#9aa7b6;--blaze:#ff9f43;--bar:#07090d;--on-bar:#e8eef5;--on-ink:#0e1116;--on-blaze:#0e1116;--input:#0e1116;--ok:#3ddc97;--bad:#ff6b6b;--warn:#ffd166}
[data-theme] #nav button{color:var(--mute)}
[data-theme] #nav button.on{color:var(--on-bar)}
[data-theme] .pin{background:var(--bar);color:var(--ink);border-color:var(--ink)}
[data-theme] .pin.hot{background:var(--ring,var(--blaze));color:var(--on-blaze)}
[data-theme] .evcard.ended,[data-theme] .objchip{background:var(--card);color:var(--mute);border-color:var(--line)}
[data-theme] .objchip:has(input:checked){background:var(--bar);color:var(--ink)}
[data-theme] button.b.ok,[data-theme] button.b.bad{color:#04120a}
.sw{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.themecard{display:flex;flex-direction:column;gap:4px;margin:0;font:500 14px var(--f-body);letter-spacing:0;text-transform:none;border:2px solid var(--line);border-radius:4px;padding:8px;cursor:pointer;background:var(--card)}
.themecard input{width:auto;margin:0 0 4px}
.themecard:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.themecard .sws{display:flex;height:22px;border-radius:3px;overflow:hidden}.themecard .sws i{flex:1}
.themecard b{font:700 15px var(--f-head);letter-spacing:.05em;text-transform:uppercase}
a.b{color:var(--on-ink);text-decoration:none}
a.b.g{background:transparent;color:var(--ink)}
a.b.s{padding:5px 10px;font-size:13px}

/* ---- map setup ---- */
#editwrap{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper)}
#editwrap[hidden]{display:none}
#editmapbox{position:relative;flex:0 0 52%;min-height:220px;background:#1b1e21}
#editmap{position:absolute;inset:0}
#edittools{position:absolute;left:10px;top:10px;z-index:500;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#edittools .b{background:var(--paper);color:var(--ink);border-color:var(--ink)}
#edittools .chip{background:var(--bar);color:#fff}
#editcross{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:450;pointer-events:none}
#editcross:before,#editcross:after{content:'';position:absolute;background:#f97316;box-shadow:0 0 0 1px #fff}
#editcross:before{left:16px;top:0;width:2px;height:34px}#editcross:after{top:16px;left:0;height:2px;width:34px}
#editpanel{flex:1;overflow:auto;padding:12px;border-top:4px solid var(--ink)}
.edhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.edstep{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:8px 10px;margin-bottom:6px;font:inherit;color:inherit;cursor:pointer}
.edstep.on{border:2px solid var(--ink)}
.edstep .num{width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.edstep.on .num{background:var(--blaze);color:var(--on-blaze)}.edstep .num.done{background:var(--ok);color:#fff}
.edstep small{display:block;color:var(--mute);font-size:13px}.edstep b{font:700 16px var(--f-head);letter-spacing:.05em;text-transform:uppercase}
.edsave{position:sticky;bottom:-12px;background:var(--paper);padding:8px 0;margin-top:8px;border-top:1px solid var(--line)}
.edcorner{width:34px;height:34px;box-sizing:border-box;background:#f97316;border:3px solid #fff;border-radius:4px;color:#16181a;font:700 12px/28px var(--f-head);text-align:center;box-shadow:0 1px 4px #0008}
.edvertex{width:22px;height:22px;box-sizing:border-box;background:#f97316;border:3px solid #fff;border-radius:50%;color:#16181a;font:700 11px/16px var(--f-head);text-align:center;box-shadow:0 1px 4px #0008}
@media (min-width:640px){
  #editwrap{flex-direction:row}
  #editmapbox{flex:1 1 0;min-width:0}
  #editpanel{flex:0 0 360px;border-top:0;border-left:3px solid var(--ink)}
}

/* ---- status, menu sheet, chat, team view ---- */
.stbtn{font-size:12px!important;padding:4px 9px!important}
.stbtn.st-playing{background:#2f7d32;border-color:#2f7d32;color:#fff}.stbtn.st-break{background:#b45309;border-color:#b45309;color:#fff}
.stbtn.st-off_field,.stbtn.st-done_for_day{background:#55544c;border-color:#55544c;color:#fff}.stbtn.st-need_medic{background:#b3261e;border-color:#b3261e;color:#fff;animation:ozpulse 1.6s infinite;--ring:#b3261e}
#sheet{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-end;justify-content:center}
#sheet[hidden]{display:none}
.sheetbg{position:absolute;inset:0;background:#000a}
.sheetbox{position:relative;width:100%;max-width:560px;max-height:88dvh;overflow:auto;background:var(--paper);color:var(--ink);border-radius:10px 10px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));border-top:5px solid var(--blaze)}
@media (min-width:640px){#sheet{align-items:center}.sheetbox{border-radius:8px;max-height:84dvh}}
.stgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin:6px 0}
.stgrid .b{padding:9px 6px!important;font-size:14px!important}
.stgrid .b.on.st-playing{background:#2f7d32;border-color:#2f7d32;color:#fff}.stgrid .b.on.st-break{background:#b45309;border-color:#b45309;color:#fff}
.stgrid .b.on.st-off_field,.stgrid .b.on.st-done_for_day{background:#55544c;border-color:#55544c;color:#fff}.stgrid .b.on.st-need_medic{background:#b3261e;border-color:#b3261e;color:#fff}
.chk{display:flex;align-items:center;gap:8px;margin:6px 0;font:500 15px var(--f-body);letter-spacing:0;text-transform:none}.chk input{width:auto}
.chatwrap{display:flex;flex-direction:column;height:100%;min-height:360px}
.chpills{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;flex:none}.chpills .b{white-space:nowrap}
.chatlist{flex:1;overflow:auto;border:1px solid var(--line);border-radius:4px;background:var(--card);padding:8px;display:flex;flex-direction:column;gap:6px;min-height:200px}
.msg{max-width:86%;align-self:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:8px 8px 8px 2px;padding:6px 9px}
.msg.mine{align-self:flex-end;background:var(--blaze);color:var(--on-blaze);border-color:var(--blaze);border-radius:8px 8px 2px 8px}
.msg .mh{display:flex;gap:8px;align-items:center;font:600 12px var(--f-head);letter-spacing:.05em;text-transform:uppercase;opacity:.85}.msg .mh span{font-weight:500;opacity:.8}
.msg .x{margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;opacity:.6;font-size:13px;padding:0 2px}
.msg .mb{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
.chatform{display:flex;gap:8px;margin-top:8px;flex:none}.chatform input{flex:1}
.pl.team{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blaze)}
.pl.medic{border-color:#b3261e;animation:ozpulse 1.2s ease-out infinite;--ring:#b3261e}

/* ---- team orders ---- */
.ordpin{width:34px;height:34px;border-radius:50%;background:var(--oc,#16181a);color:#fff;border:3px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px #0009;margin:0 auto;animation:ozpulse 2.2s ease-out infinite;--ring:var(--oc,#16181a)}
.ordpin.sm{width:30px;height:30px;flex:none;animation:none;margin:0}
.ordlbl{margin-top:2px;background:#16181a;color:#fff;font:700 11px/1.2 var(--f-head);letter-spacing:.05em;text-transform:uppercase;padding:1px 5px;border-radius:3px;white-space:nowrap;text-align:center}
.ordrow{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.ordbtns{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:150px}
.ordgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:6px}
.ordopt{margin:0;cursor:pointer;display:block}
.ordopt input{position:absolute;opacity:0;width:1px;height:1px}
.ordopt span{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:4px;padding:7px 8px;background:var(--card);color:var(--oc);font:700 14px var(--f-head);letter-spacing:.04em;text-transform:uppercase}
.ordopt b{color:var(--ink);font:inherit}
.ordopt input:checked+span{border-color:var(--oc);box-shadow:inset 0 0 0 1px var(--oc),0 0 0 2px #0001;background:#fff2}
.ordopt input:focus-visible+span{outline:3px solid var(--blaze)}
#mapcross{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;z-index:450;pointer-events:none}
#mapcross:before,#mapcross:after{content:'';position:absolute;background:#f97316;box-shadow:0 0 0 1px #fff}
#mapcross:before{left:19px;top:0;width:2px;height:40px}#mapcross:after{top:19px;left:0;height:2px;width:40px}
#mapcross[hidden],#mappick[hidden]{display:none}
#mappick{position:absolute;left:10px;right:10px;bottom:12px;z-index:600;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:6px;padding:10px;box-shadow:0 2px 10px #0008}

/* ---- roster: roles and ranks ---- */
.rrow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.rname{flex:1 1 130px;min-width:0}
.rsel{display:flex;gap:6px;flex:2 1 230px}.rsel select{padding:6px;font-size:14px;width:50%}
.rbtn{display:flex;gap:4px;flex-wrap:wrap}
.cfgrow{flex-wrap:nowrap;margin:0 0 6px}.cfgrow input[type=color]{width:46px;padding:2px;flex:none}.cfgrow input:not([type=color]){min-width:0}.cfgrow .b{flex:none}

/* ---- role icons and avatars ---- */
.avw{position:relative;display:inline-block;flex:none;width:34px;height:34px;font-size:13px;line-height:1}
.av{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;box-sizing:border-box;border:2px solid var(--rc,#16181a);background:#555;color:#fff}
.av img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.avi{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font:700 1em var(--f-head);letter-spacing:.02em}
.rb{position:absolute;right:-5px;bottom:-4px;width:46%;height:46%;min-width:15px;min-height:15px;border-radius:50%;background:#16181a;border:2px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.rb svg{width:68%;height:68%}
.rolec{display:inline-flex;align-items:center;gap:4px}.rolec svg{flex:none}
.rrow .rname{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ricobtn{padding:4px 8px}
.icogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;margin:6px 0}
.ico{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--line,#d8d2c0);border-radius:6px;background:#fff;color:var(--ink);padding:6px 2px;font:600 10px var(--f-head);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.ico.on{border-color:var(--blaze);outline:2px solid var(--blaze)}
.swatch{width:34px;height:34px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px #bbb;cursor:pointer;padding:0}
.swatch.on{box-shadow:0 0 0 3px var(--ink)}
.avcv{width:180px;height:180px;border-radius:50%;border:4px solid var(--ink);touch-action:none;background:#222}
.avbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.avbtns .b:last-child{grid-column:1/3}
/* map markers: far = dot, mid = avatar, near = avatar + role badge + name */
.mk{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.mk .avw{width:46px;height:46px;font-size:17px}
.mk .av{border-width:3px;box-shadow:0 2px 6px #0007}
.mk.me .av{box-shadow:0 0 0 3px #f97316,0 0 14px 3px #f9731688}
.mk.stale{opacity:.5}
.mk.medic .av{border-color:#b3261e;animation:ozpulse 1.2s ease-out infinite;--ring:#b3261e}
.mk.medic .rb{background:#b3261e}
.mk .mn{position:absolute;top:100%;margin-top:4px;background:#16181a;color:#fff;border-radius:10px;padding:1px 8px;font:700 12px/1.3 var(--f-head);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.mk.me .mn{background:#c2410c}.mk.medic .mn{background:#b3261e}
.mage{opacity:.75;margin-left:5px;font-weight:600}
.ack{position:absolute;left:-6px;top:-6px;width:19px;height:19px;border-radius:50%;font:700 12px/19px var(--f-head);text-align:center;font-style:normal;color:#fff;border:2px solid #fff;box-sizing:content-box;margin:-2px 0 0 -2px}
.ack.ok{background:#2f7d32}.ack.cant{background:#b3261e}.ack.help{background:#b45309}
#map.z-mid .mk .avw{width:34px;height:34px;font-size:13px}#map.z-mid .mk .rb,#map.z-mid .mk .mn{display:none}
#map.z-far .mk .avw{width:14px;height:14px}#map.z-far .mk .av{background:var(--rc);border-width:2px;box-shadow:0 0 0 1px #0008}#map.z-far .mk .av>*,#map.z-far .mk .rb,#map.z-far .mk .mn,#map.z-far .mk .ack{display:none}
#map.z-far .mk.me .av{box-shadow:0 0 0 3px #f97316}
/* orders */
#ordsheet{position:absolute;left:0;right:0;bottom:0;z-index:700;background:var(--paper);color:var(--ink);border-radius:14px 14px 0 0;padding:6px 14px 14px;box-shadow:0 -4px 16px #0008;max-height:62%;overflow:auto}
#ordsheet[hidden],#ordbanner[hidden],#radial[hidden]{display:none}
.grab{width:40px;height:4px;border-radius:2px;background:#c9c3af;margin:4px auto 8px}
.ordt{font:700 17px var(--f-head);letter-spacing:.05em;text-transform:uppercase}
.ordtys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ordty{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid #d8d2c0;border-radius:8px;background:#fffdf6;color:var(--oc);padding:8px 2px;cursor:pointer;min-height:56px;font:700 11px var(--f-head);letter-spacing:.05em;text-transform:uppercase}
.ordty b{color:var(--ink)}
.ordty.on{background:var(--oc);color:#fff;border-color:var(--ink)}.ordty.on b{color:#fff}
.seg{display:flex;gap:6px}.seg .b{flex:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chipbtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);border-radius:16px;background:transparent;color:var(--ink);padding:3px 10px;font:700 13px var(--f-head);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.chipbtn.on{background:var(--ink);color:#fff}
.radh{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #b3261e;box-sizing:border-box;box-shadow:0 1px 5px #0008}
#ordbanner{position:absolute;left:10px;right:10px;top:10px;z-index:650;color:#fff;border-radius:8px;padding:10px 12px;box-shadow:0 4px 14px #0009}
#ordbanner .b.g{background:transparent;color:#fff;border-color:#fff}
#mapwrap.hasban #maptools{top:150px}
#radial{position:absolute;z-index:800;width:0;height:0}
#radial .rdot{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:#f3efe4;border:3px solid #16181a;box-sizing:border-box}
.radbtn{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--oc);color:#fff;border:3px solid #fff;box-shadow:0 2px 8px #0009;display:flex;align-items:center;justify-content:center;cursor:pointer}
.opop .b{margin:2px 2px 0 0}
/* long-press on the map is for orders, never text selection or the iOS copy menu */
#mapwrap,#mapwrap *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#mapwrap input,#mapwrap textarea{-webkit-user-select:text;user-select:text}
#map,#map .leaflet-marker-icon{-webkit-tap-highlight-color:transparent}

/* chat avatars */
.msg{display:flex;gap:8px;align-items:flex-start}.msg .mc{flex:1;min-width:0}.msg .avw{margin-top:2px}
/* the app always fills the real screen: no strip under the tab bar on foldables and tablets */
#app{position:fixed;left:0;right:0;top:0;bottom:0;height:auto;margin:0 auto}
@supports (height:100dvh){#app{height:100dvh;bottom:auto}}
/* dual-screen (Surface Duo style) and other spanned displays: map on one screen, panel on the other, hinge in between */
@media (horizontal-viewport-segments:2){
  #app{max-width:none}
  #app.split #mapwrap{flex:none;width:env(viewport-segment-width 0 0,50%);border-right:0}
  #app.split #view{margin-left:calc(env(viewport-segment-left 1 0,50%) - env(viewport-segment-right 0 0,50%));flex:1 1 0;padding:16px}
  #nav{justify-content:space-around}
  #ordsheet{right:calc(100% - env(viewport-segment-width 0 0,100%))}
}
@media (vertical-viewport-segments:2){ #app{max-width:none} }

/* pinch-zoom belongs to the map only; the bars and pages stay put */
html,body,#app{touch-action:pan-x pan-y}
#map,#map .leaflet-container{touch-action:none}

.toplogo{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:#fff}

/* readable rows: names wrap at word boundaries, chips never break mid-word */
.chip{white-space:nowrap}
.mrow{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.mnm{flex:1 1 130px;min-width:0;overflow-wrap:break-word;word-break:normal}
.mnm b{font-size:17px}
.mchips{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.row>b,.row .grow{overflow-wrap:break-word;word-break:normal}

/* objective pins: icon with the number in a small badge */
.pin:has(svg){position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;line-height:1}
.pin .pn{position:absolute;right:-7px;top:-7px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:#fff;color:#16181a;border:1.5px solid #16181a;font:700 10px/13px var(--f-head);text-align:center;font-style:normal;box-sizing:border-box}
.pin.rad .pn{background:#16181a;color:#fff;border-color:#fff}

/* offline, SOS and alerts */
.chip.warn{background:#b45309;color:#fff}
.exp.low{color:#b3261e;font-weight:700;animation:oz-blink 1s steps(2) infinite}
#ordbanner .exp{font-weight:700}#ordbanner .exp.low{color:#fff;background:#00000055;border-radius:3px;padding:0 5px}
@keyframes oz-blink{50%{opacity:.45}}
#sos{position:absolute;right:10px;bottom:34px;z-index:650;display:flex;flex-direction:column;gap:8px;align-items:flex-end;max-width:78%}
#sos[hidden],#alertbar[hidden]{display:none}
.sosbtn{border:3px solid #fff;border-radius:30px;padding:12px 18px;font:700 16px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:#fff;box-shadow:0 3px 10px #000a;cursor:pointer;min-height:48px}
.sosbtn.med{background:#b3261e}.sosbtn.ref{background:#16181a}
.sosbtn.armed{background:#f97316;color:#16181a;animation:oz-blink .6s steps(2) infinite}
.sosact{background:#fff;color:#16181a;border:3px solid #b3261e;border-radius:10px;padding:8px 10px;display:flex;gap:10px;align-items:center;box-shadow:0 3px 10px #000a;font-size:14px}
#alertbar{position:absolute;left:10px;right:10px;bottom:34px;z-index:650}
.alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.alertcard{display:flex;gap:8px;align-items:center;background:#fff;color:#16181a;border:3px solid #b3261e;border-left-width:10px;border-radius:8px;padding:8px 10px;box-shadow:0 3px 10px #0008}
.alertcard.ref{border-color:#16181a;border-left-color:#b3261e}
.alertcard .b{white-space:nowrap}
.sosmk{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#b3261e;color:#fff;border:3px solid #fff;font:700 22px/32px var(--f-head);text-align:center;box-shadow:0 0 0 0 #b3261eaa;animation:ozpulse 1.1s ease-out infinite;--ring:#b3261e}
.sosmk.ref{background:#16181a;border-color:#b3261e}
.sosmk span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;background:#b3261e;color:#fff;font:700 11px/1.3 var(--f-head);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;padding:1px 6px;border-radius:8px}

/* compact SOS: one small button that opens a short menu */
#sos{bottom:26px;gap:6px}
.sosfab{width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:#b3261e;color:#fff;font:700 14px var(--f-head);letter-spacing:.05em;box-shadow:0 2px 8px #000a;cursor:pointer;padding:0}
.sosbtn{padding:8px 14px;font-size:14px;min-height:38px;border-width:2px}
.sosx{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#16181acc;color:#fff;font-size:14px;cursor:pointer;padding:0}
.sosact{padding:5px 8px;font-size:13px;gap:8px;border-width:2px;border-radius:8px}
.sosact .b{padding:3px 8px}

/* header: the event name takes the spare room and trims with "…"; chips, clock and buttons never squash or overlap it */
#top{flex-wrap:wrap;row-gap:6px}
#top .brand{flex:1 1 0;min-width:96px}
#top .brand ~ .grow{display:none}
#top .brand .bn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#top .brand .toplogo,#top .brand i{flex:none}
#top .st,#top .clock,#top button{flex:none;white-space:nowrap}
#top select{min-width:0}

/* slim header: logo, name, status tag, your avatar (its ring is your status colour) */
.avbtn{background:none;border:0;padding:0;cursor:pointer;flex:none;border-radius:50%;line-height:0}
#top .avbtn .av{border-width:3px}
/* map tools: one button bottom-left; tap it and the tools stack up. Hold an icon for its name. */
#maptools{left:10px;top:auto;bottom:26px;flex-direction:column;align-items:flex-start;gap:8px}
#maptools[hidden]{display:none}
#mapwrap.hasban #maptools{top:auto}
#mapnotes{position:absolute;left:10px;top:10px;z-index:500;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#mapwrap.hasban #mapnotes{top:150px}
.tfab{position:relative;width:50px;height:50px;border-radius:50%;background:#16181a;color:#fff;border:3px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #000a;cursor:pointer;padding:0;flex:none}
.tfab.open{background:var(--blaze)}
.tfab svg{width:24px;height:24px}
.tdot{position:absolute;right:-3px;top:-3px;width:15px;height:15px;border-radius:50%;border:2px solid #fff;box-sizing:border-box}
.tdot.g{background:#2f7d32}.tdot.a{background:#f59e0b}.tdot.b{background:#0f766e}
.tb{position:relative;width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px #0008;cursor:pointer;padding:0;flex:none}
.tb.on{background:var(--blaze);color:#fff;border-color:var(--blaze)}
.tb svg{width:22px;height:22px}
.tb .tl{display:none;position:absolute;left:54px;top:50%;transform:translateY(-50%);background:#16181a;color:#fff;font:700 13px var(--f-head);letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:12px;white-space:nowrap;box-shadow:0 1px 5px #0008;pointer-events:none}
.tb.showlbl .tl,.tb:hover .tl{display:block}

/* the hidden attribute always wins over a display rule (logged-out screens must not show the header or tab bar) */
[hidden]{display:none!important}

/* host, commander and admin screens */
#app.strip main{flex-direction:column}
#app.strip #mapwrap{position:relative;inset:auto;flex:none;height:min(40vh,320px);border-bottom:3px solid var(--ink)}
#app.strip #mapwrap:not([hidden])~#view{display:block}
#app.strip #view{flex:1;overflow:auto;min-height:0}
.mk.sel .av{box-shadow:0 0 0 4px #f97316,0 0 12px 3px #f97316aa}
.det{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin:10px 0}
.det>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font:700 15px var(--f-head);letter-spacing:.07em;text-transform:uppercase;min-height:28px}
.det>summary::-webkit-details-marker{display:none}
.det>summary::after{content:'⌄';margin-left:auto;font-size:18px}
.det[open]>summary::after{content:'⌃'}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.tile b{display:block;font:700 26px/1 var(--f-head)}
.tile span{font-size:12px;color:var(--mute)}
.tile.warnt{border-color:#b45309}.tile.warnt b{color:#b45309}.tile.badt{border-color:#b3261e}.tile.badt b{color:#b3261e}.tile.okt b{color:#2f7d32}
.stack{display:flex;height:8px;border-radius:4px;overflow:hidden;margin:6px 0 3px;background:#d8d2c0}.stack i{display:block;height:100%}
.prog{height:10px;background:#d8d2c0;border-radius:5px;overflow:hidden;margin:6px 0 4px}.prog i{display:block;height:100%;background:#2f7d32}
.chk{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #ece7d7}
.chk:first-of-type{border-top:0}
.ic{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font:700 14px var(--f-head);color:#fff}
.ic.ok{background:#2f7d32}.ic.warn{background:#b45309}.ic.no{background:#b3261e}.ic.todo{background:#fff;border:2px solid #8a8778;color:#8a8778}
.cmdhead{display:flex;align-items:center;gap:10px;padding-left:10px;margin-bottom:4px;flex-wrap:wrap}
.sqchips{margin:8px 0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.sqchips .chipbtn{flex:none}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.qgrid .b{padding:10px 6px}
.awaiting{background:#fffbeb;border:2px solid #f59e0b;border-radius:8px;padding:8px 10px;margin:10px 0}
.awaiting h3{color:#b45309;margin:0 0 6px}
.waitc{margin:6px 0}
.sidegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.evbar{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;align-items:center}
.evchipb{flex:none;font:700 14px var(--f-head);letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:16px;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.evchipb.on{background:var(--ink);color:#fff}
.tabs2{display:flex;gap:2px;overflow-x:auto;border-bottom:3px solid var(--ink);margin-top:6px}
.tabs2 button{flex:none;background:none;border:0;border-bottom:4px solid transparent;margin-bottom:-3px;padding:9px 12px;font:700 14px var(--f-head);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);cursor:pointer}
.tabs2 button.on{color:var(--ink);border-bottom-color:var(--blaze)}

.seg .b{white-space:nowrap;padding-left:8px;padding-right:8px;text-align:center}