/* =========================================================
   Sentinel client app (my.bellarixnet.org)
   Calm daylight surfaces, brand aubergine ink, gold for the one thing to press.
   The registration plate is the signature: every vehicle wears its plate.
   Follows the phone's light / dark setting (or the choice in More > Appearance).
   ========================================================= */
@font-face{font-family:'Archivo';src:url('../fonts/archivo-var.woff') format('woff');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
:root{
  --paper:#F5F3F7; --card:#FFFFFF; --sunk:#EDE9F1; --ink:#22102A; --ink-2:#4A3B52; --muted:#6F6577; --line:#E4DEE9; --line-2:#CFC6D6;
  --violet:#7B2FF2; --violet-ink:#5B1FC4; --violet-wash:#EFE7FE; --gold:#E2A11B; --gold-ink:#22102A; --gold-wash:#FCF1D8;
  --moving:#0E9566; --idle:#C2700F; --parked:#6C55D8; --offline:#D23C55; --sos:#DC1F2C; --sos-wash:#FDE8EA;
  --ok:#0E9566; --warn:#B86A0C; --bad:#C8243A;
  --plate:#FFFFFF; --plate-ink:#121014; --plate-edge:#22102A;
  --shadow:0 1px 2px rgba(34,16,42,.06),0 6px 24px rgba(34,16,42,.06);
  --lift:0 10px 40px rgba(34,16,42,.16);
  --glass:rgba(255,255,255,.86);
  --tiles:saturate(.72) contrast(.97);
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-tile:18px; --r-sheet:26px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#120B16; --card:#1C1322; --sunk:#160F1B; --ink:#F4EEF6; --ink-2:#D7CCDD; --muted:#AE9FB5; --line:#2F2335; --line-2:#463650;
    --violet:#A07BFF; --violet-ink:#C2AAFF; --violet-wash:#271A3F; --gold:#F0B53A; --gold-ink:#1A0F1E; --gold-wash:#2E2310;
    --moving:#2BC98A; --idle:#F0963A; --parked:#9C8BFF; --offline:#FF6079; --sos:#FF3B47; --sos-wash:#3A1218;
    --ok:#2BC98A; --warn:#F0A04A; --bad:#FF6B7F;
    --plate:#F7F5F0; --plate-ink:#121014; --plate-edge:#F7F5F0;
    --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 28px rgba(0,0,0,.35); --lift:0 14px 48px rgba(0,0,0,.55);
    --glass:rgba(28,19,34,.86); --tiles:invert(1) hue-rotate(205deg) saturate(.5) brightness(.8) contrast(1.05);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#120B16; --card:#1C1322; --sunk:#160F1B; --ink:#F4EEF6; --ink-2:#D7CCDD; --muted:#AE9FB5; --line:#2F2335; --line-2:#463650;
  --violet:#A07BFF; --violet-ink:#C2AAFF; --violet-wash:#271A3F; --gold:#F0B53A; --gold-ink:#1A0F1E; --gold-wash:#2E2310;
  --moving:#2BC98A; --idle:#F0963A; --parked:#9C8BFF; --offline:#FF6079; --sos:#FF3B47; --sos-wash:#3A1218;
  --ok:#2BC98A; --warn:#F0A04A; --bad:#FF6B7F;
  --plate:#F7F5F0; --plate-ink:#121014; --plate-edge:#F7F5F0;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 8px 28px rgba(0,0,0,.35); --lift:0 14px 48px rgba(0,0,0,.55);
  --glass:rgba(28,19,34,.86); --tiles:invert(1) hue-rotate(205deg) saturate(.5) brightness(.8) contrast(1.05);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:450 15px/1.45 var(--font);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow:hidden;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent;cursor:pointer}
a{color:inherit}
h1,h2,h3,p{margin:0}
svg{flex:none}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--font);font-stretch:88%;font-weight:650;letter-spacing:.04em}
@keyframes ping{0%{transform:scale(.6);opacity:.85}100%{transform:scale(2.1);opacity:0}}
@keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{50%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- the plate: every vehicle wears its registration ---------- */
.plate{display:inline-flex;align-items:center;height:24px;padding:0 7px 0 6px;border-radius:5px;background:var(--plate);color:var(--plate-ink);
  border:1.5px solid var(--plate-edge);box-shadow:inset 0 0 0 1.5px var(--plate);font:800 15px/1 var(--font);font-stretch:68%;letter-spacing:.06em;white-space:nowrap;text-transform:uppercase}
.plate::before{content:"";width:3px;height:13px;margin-right:6px;border-radius:1px;background:linear-gradient(var(--sos) 0 33%,var(--gold) 33% 66%,#0E9566 66%)}
.plate.lg{height:30px;font-size:19px;padding:0 9px 0 7px;border-radius:6px}
.plate.lg::before{height:16px}
.nick{font-weight:700;font-stretch:96%}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:0;font-weight:700;font-size:15px;letter-spacing:.005em;white-space:nowrap;text-decoration:none;transition:transform .12s ease,background .2s}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn-danger{background:var(--sos);color:#fff}
.btn-danger-soft{background:transparent;color:var(--bad);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bad) 40%,transparent)}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-block{width:100%}
.link{background:none;border:0;padding:8px 0;color:var(--violet-ink);font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.link.danger{color:var(--bad)}

/* ---------- boot + sign in ---------- */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--paper)}
.boot img{animation:pulse 1.6s ease infinite;border-radius:50%}
.login{position:fixed;inset:0;overflow:auto;display:flex;flex-direction:column;justify-content:flex-end;background:var(--paper)}
.login-art{position:absolute;inset:0 0 auto;height:min(58vh,520px);overflow:hidden;pointer-events:none;background:linear-gradient(180deg,var(--violet-wash),var(--paper))}
.login-art svg{width:100%;height:100%}
.la-road{stroke:var(--line-2);stroke-width:16;opacity:.55}.la-road.thin{stroke-width:7;opacity:.45}
.la-zone{stroke:var(--violet);stroke-width:2;stroke-dasharray:6 6;fill:rgba(123,47,242,.07)}
.la-dot{fill:var(--violet);stroke:var(--card);stroke-width:3}
.la-ping{fill:none;stroke:var(--violet);stroke-width:2;transform-origin:208px 170px;animation:ping 2.4s ease-out infinite}
.login-in{position:relative;width:100%;max-width:440px;margin:0 auto;padding:28px 20px calc(24px + env(safe-area-inset-bottom))}
.login-logo{display:block;height:34px;width:auto;margin-bottom:22px}
.on-dark{display:none}
:root[data-theme="dark"] .on-dark{display:block}:root[data-theme="dark"] .on-light{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .on-dark{display:block}:root:not([data-theme="light"]) .on-light{display:none}}
.login-h{font-size:clamp(34px,10vw,46px);font-weight:800;font-stretch:84%;line-height:.98;letter-spacing:-.025em}
.login-sub{margin:10px 0 18px;color:var(--muted)}
.card{background:var(--card);border-radius:var(--r-tile);box-shadow:var(--shadow);padding:16px}
.login-card{padding:18px}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-size:13px;font-weight:650;color:var(--ink-2)}
.field input,.field select,.field textarea,.code-form input,.reply textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);font-size:16px}
.field textarea,.reply textarea{resize:vertical;min-height:96px;line-height:1.4}
.field input:focus,.field select:focus,.field textarea:focus,.code-form input:focus,.reply textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-wash)}
.pw{position:relative}.pw input{padding-right:72px}
.pw button{position:absolute;right:6px;top:6px;bottom:6px;padding:0 12px;border:0;border-radius:9px;background:var(--sunk);font-weight:650;font-size:13px}
.error{margin:4px 0 10px;padding:10px 12px;border-radius:10px;background:var(--sos-wash);color:var(--bad);font-size:14px;font-weight:600}
.login-alt{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px}

/* ---------- app frame ---------- */
.app{position:fixed;inset:0}
.map{position:absolute;inset:0;z-index:0;isolation:isolate;background:var(--sunk)}
.map-fallback{position:absolute;left:16px;right:16px;top:40%;text-align:center;color:var(--muted)}
.leaflet-container{background:var(--sunk);font-family:var(--font)}
.tiles-street{filter:var(--tiles)}
.tiles-traffic{mix-blend-mode:normal}
.leaflet-control-attribution{background:var(--glass)!important;color:var(--muted)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--violet-ink)!important}
.pane{position:absolute;inset:0 0 calc(64px + env(safe-area-inset-bottom));display:flex;flex-direction:column;background:var(--paper);z-index:20}
.app[data-tab="map"] .pane{display:none}
.top{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 18px 6px}
.top-name{font-size:19px;font-weight:800;font-stretch:84%;letter-spacing:-.01em}
.conn{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--card);box-shadow:var(--shadow);font-size:12.5px;font-weight:650;color:var(--muted)}
.conn i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.conn.live i{background:var(--moving);box-shadow:0 0 0 3px rgba(14,149,102,.18)}
.conn.off i{background:var(--offline)}
.views{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.view{padding:6px 18px 28px;animation:rise .25s ease}
.view-h{font-size:30px;font-weight:800;font-stretch:84%;letter-spacing:-.02em;line-height:1.05;margin:6px 0 12px}
.lead{color:var(--muted);margin:-4px 0 14px;max-width:60ch}
.back{display:inline-flex;align-items:center;gap:4px;margin:2px 0 2px -6px;padding:6px 8px;border:0;background:none;color:var(--violet-ink);font-weight:650}
.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.empty{color:var(--muted);text-align:center;padding:22px 8px}
.loading{color:var(--muted);padding:14px 0}
.sec{font-size:14px;font-weight:700;color:var(--ink-2);margin:22px 0 8px}
.hint,.fine{color:var(--muted);font-size:13px;margin-top:8px}
.fine{text-align:center;margin-top:18px}

/* ---------- home ---------- */
.hi{font-size:15px;font-weight:600;color:var(--muted);margin-top:8px}
.headline{font-size:clamp(30px,8.4vw,40px);font-weight:800;font-stretch:82%;line-height:1;letter-spacing:-.025em;margin:4px 0 16px;text-wrap:balance}
.headline .gold{color:var(--violet-ink)}
.attention{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--gold-wash);color:var(--ink);font-weight:600;font-size:14px;border-left:4px solid var(--gold)}
.sos-banner{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:12px 14px;border-radius:16px;background:var(--sos);color:#fff;font-weight:650;cursor:pointer;border:0;width:100%;text-align:left}
.sos-banner b{display:block;font-size:15px}.sos-banner small{display:block;opacity:.9;font-size:13px;font-weight:500}
.sos-banner .sb-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font:900 11px/1 var(--font);font-stretch:75%;letter-spacing:.06em;position:relative}
.sos-banner .sb-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;animation:ping 1.8s ease-out infinite}
.sos-banner.ack{background:var(--moving)}.sos-banner.ack .sb-ic::after{display:none}
.cards{display:grid;gap:10px}
.vcard{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;width:100%;padding:14px 14px 14px 16px;border:0;border-radius:var(--r-tile);background:var(--card);box-shadow:var(--shadow);text-align:left;--c:var(--muted)}
.vcard.st-moving{--c:var(--moving)}.vcard.st-idle{--c:var(--idle)}.vcard.st-parked{--c:var(--parked)}.vcard.st-offline{--c:var(--offline)}
.vc-id{display:flex;align-items:center;gap:9px;min-width:0}
.vc-id .nick{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vline{grid-column:1;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink-2)}
.vline::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.vcard.st-moving .vline::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.vwhere{grid-column:1;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.2em}
.vcut{color:var(--bad);font-weight:700}
.vc-side{grid-column:2;grid-row:1/4;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.vc-speed{font-size:24px;font-weight:800;font-stretch:72%;line-height:1}.vc-speed small{font-size:11px;font-weight:650;color:var(--muted);margin-left:2px;font-stretch:100%}
.vc-sos{display:inline-flex;align-items:center;justify-content:center;min-width:50px;height:30px;padding:0 10px;border-radius:999px;background:transparent;color:var(--sos);font:850 12px/1 var(--font);font-stretch:78%;letter-spacing:.08em;border:1.5px solid color-mix(in srgb,var(--sos) 38%,transparent)}
.vc-sos:hover{background:var(--sos);color:#fff}
.group{margin-top:18px;border-radius:var(--r-tile);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 14px;border:0;background:none;text-align:left}
.row+.row{border-top:1px solid var(--line)}
.row-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--violet-wash);color:var(--violet-ink)}
.row-ic.req{background:var(--gold-wash);color:#9A6408}
.row-ic.doc{background:color-mix(in srgb,var(--moving) 14%,transparent);color:var(--moving)}
.row-ic.bell{background:var(--violet-wash);color:var(--violet-ink)}
.row-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.row-t{flex:1;min-width:0}.row-t b{display:block;font-weight:700}.row-t small{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dot-badge{flex:none;min-width:10px;height:10px;border-radius:5px;background:var(--sos)}

/* ---------- chips, lists ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:38px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--card);font-weight:650;font-size:14px;white-space:nowrap}
.chip.on,.chip[aria-checked="true"],.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list .day{padding:12px 2px 2px;font-size:13px;font-weight:700;color:var(--muted)}
.item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;gap:1px 12px;width:100%;padding:12px 14px;border:0;border-radius:16px;background:var(--card);box-shadow:var(--shadow);text-align:left;--c:var(--muted)}
.item .ic{grid-row:1/3;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--sunk);color:var(--c)}
.item .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.item b{font-weight:700;font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.item small{grid-column:2;font-size:13px;color:var(--muted);min-width:0}
.item .rt{grid-row:1/3;grid-column:3;font-size:13px;font-weight:700;color:var(--ink-2);text-align:right}
.item.ok{--c:var(--ok)}.item.warn{--c:var(--warn)}.item.bad{--c:var(--bad)}.item.zone{--c:var(--violet)}
.item.bad .ic{background:var(--sos-wash)}
.item.unread b::after{content:"";display:inline-block;width:8px;height:8px;margin-left:7px;border-radius:50%;background:var(--sos);vertical-align:middle}
.sum{display:grid;grid-template-columns:repeat(4,1fr);margin:4px 0 14px;border-radius:16px;background:var(--card);box-shadow:var(--shadow)}
.sum div{padding:12px 6px;text-align:center}.sum div+div{border-left:1px solid var(--line)}
.sum b{display:block;font-size:22px;font-weight:800;font-stretch:76%}.sum span{font-size:12px;color:var(--muted);font-weight:600}
.pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--sunk);color:var(--ink-2)}
.pill.new{background:var(--gold-wash);color:#8A5A06}.pill.open{background:var(--violet-wash);color:var(--violet-ink)}.pill.done{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
:root[data-theme="dark"] .pill.new{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill.new{color:var(--gold)}}

/* ---------- alerts ---------- */
.push-card{display:flex;gap:12px;margin-bottom:14px;padding:14px;border-radius:var(--r-tile);background:var(--violet-wash)}
.push-card b{display:block}.push-card p{font-size:13.5px;color:var(--ink-2);margin:2px 0 10px}
.al-settings{display:block;margin:14px auto 0}

/* ---------- safe zones ---------- */
.zones{margin:14px 0}
.zone-ed{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:30;padding:16px 18px 14px;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--card);box-shadow:var(--lift);animation:rise .25s ease}
.ze-size{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:2px 0 10px}
.ze-size label{font-size:13px;font-weight:650;color:var(--ink-2)}
.ze-size output{min-width:62px;text-align:right;font-weight:800;font-stretch:80%;font-size:17px}
input[type="range"]{accent-color:var(--violet);width:100%}
.ze-where{display:flex;gap:8px;overflow-x:auto;margin-bottom:4px}
.ze-lab{font-size:13px;font-weight:650;color:var(--ink-2);margin:6px 0 6px}
.ze-btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:4px}
.zone-ed .link{display:block;margin:8px auto 0}
.app[data-mode="zone"] .map{bottom:var(--ed-h,0px)}
.cross{position:absolute;left:50%;top:calc((100% - var(--ed-h,0px)) / 2);z-index:25;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none}
.cross::before,.cross::after{content:"";position:absolute;background:var(--ink);border-radius:2px}
.cross::before{left:21px;top:4px;width:2px;height:36px}.cross::after{top:21px;left:4px;height:2px;width:36px}
.cross i{position:absolute;left:16px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--violet);border:2.5px solid var(--card);z-index:1}
.zl{transform:translateY(-6px);display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--card);color:var(--violet-ink);font-size:12px;font-weight:750;white-space:nowrap;box-shadow:var(--shadow);border:1.5px solid color-mix(in srgb,var(--violet) 40%,transparent)}
.zl-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:none}

/* ---------- requests ---------- */
.th-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.th-meta{color:var(--muted);font-size:13.5px;margin:-6px 0 12px}
.thread{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.msg{max-width:86%;padding:10px 13px;border-radius:16px 16px 16px 6px;background:var(--card);box-shadow:var(--shadow);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.me{justify-self:end;border-radius:16px 16px 6px 16px;background:var(--ink);color:var(--paper);box-shadow:none}
.msg small{display:block;margin-top:4px;font-size:11.5px;opacity:.7}
.reply{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.reply textarea{min-height:52px}
.reply .btn{min-height:52px}

/* ---------- documents + verify card ---------- */
.code-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-bottom:14px}
.code-form input{text-transform:uppercase;font-stretch:88%;font-weight:650;letter-spacing:.05em}
.vf-card{border-radius:var(--r-tile);background:var(--card);box-shadow:var(--shadow);padding:16px;border-top:5px solid var(--line-2)}
.vf-ok{border-top-color:var(--ok)}.vf-bad{border-top-color:var(--bad)}.vf-wait{border-top-color:var(--gold)}
.vf-stamp{display:flex;gap:12px;align-items:center}
.vf-stamp svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vf-ok .vf-stamp svg{color:var(--ok)}.vf-bad .vf-stamp svg{color:var(--bad)}.vf-wait .vf-stamp svg{color:var(--gold)}
.vf-stamp h3{font-size:19px;font-weight:800;font-stretch:86%;line-height:1.1}.vf-stamp p{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
.vf-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.vf-rows div{min-width:0}.vf-rows .wide{grid-column:1/-1}
.vf-rows dt{font-size:12px;color:var(--muted)}.vf-rows dd{margin:0;font-weight:700;font-size:14.5px;overflow-wrap:anywhere}
.vf-rows dd.mono{font-size:14px}
.vf-note{margin:14px 0 0!important;font-size:13px;color:var(--muted)!important}

/* ---------- more ---------- */
.me-card b{display:block;font-size:20px;font-weight:800;font-stretch:88%}
.me-card>span{color:var(--muted);font-size:14px}
.me-plan{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.me-plan div{min-width:0}.me-plan dt{font-size:12px;color:var(--muted)}.me-plan dd{margin:0;font-weight:700;font-size:14px}
.toggles{padding:4px 16px}
.tg{display:flex;align-items:center;gap:12px;min-height:54px;padding:6px 0;cursor:pointer}
.tg+.tg{border-top:1px solid var(--line)}
.tg span{flex:1;font-weight:600}.tg small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.tg input{appearance:none;flex:none;width:48px;height:28px;border-radius:999px;background:var(--line-2);position:relative;transition:background .2s;cursor:pointer}
.tg input::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.tg input:checked{background:var(--violet)}.tg input:checked::after{transform:translateX(20px)}
.tg input:disabled{opacity:.5}
.seg{display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:14px;background:var(--sunk);gap:4px}
.seg button{min-height:40px;border:0;border-radius:10px;background:none;font-weight:650;font-size:14px;color:var(--ink-2)}
.seg button[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.help-row{display:grid;grid-template-columns:1.6fr 1fr;gap:10px}
.signout{margin-top:22px}

/* ---------- tabs ---------- */
.tabs{position:absolute;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--muted);font-size:11.5px;font-weight:650}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--ink)}
.tab.on svg{stroke:var(--violet);stroke-width:2.3}
.tab.on::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--violet)}
.badge{position:absolute;top:7px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sos);color:#fff;font-size:11px;font-style:normal;font-weight:800;display:grid;place-items:center}

/* ---------- map ---------- */
.map-tools{position:absolute;right:12px;top:calc(14px + env(safe-area-inset-top));z-index:15;display:flex;flex-direction:column;gap:8px}
.tool{width:44px;height:44px;border-radius:14px;border:0;display:grid;place-items:center;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);color:var(--ink)}
.tool svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.tool-gap{height:4px}
.vm{position:relative;width:44px;height:44px;cursor:pointer;--c:var(--muted)}
.vm.st-moving{--c:var(--moving)}.vm.st-idle{--c:var(--idle)}.vm.st-parked{--c:var(--parked)}.vm.st-offline{--c:var(--offline)}
.vm-core{position:absolute;left:13px;top:13px;width:18px;height:18px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.vm.st-moving .vm-core::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--c);animation:ping 2.2s ease-out infinite}
.vm.st-offline .vm-core{background:#fff;border-color:var(--c)}
.vm-arrow{position:absolute;inset:0;transform-origin:22px 22px}
.vm-arrow::before{content:"";position:absolute;left:16px;top:-1px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--c);filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.vm.is-sel .vm-core{left:10px;top:10px;width:24px;height:24px;box-shadow:0 0 0 5px color-mix(in srgb,var(--violet) 40%,transparent),0 2px 10px rgba(0,0,0,.4)}
.vm-label{position:absolute;left:50%;top:44px;transform:translateX(-50%);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.vm-label.plate{height:21px;font-size:13px;padding:0 5px 0 4px}
.vm-label.plate::before{height:11px;margin-right:4px}
.vm-label.txt{padding:4px 9px;border-radius:9px;background:var(--card);color:var(--ink);font-size:12px;font-weight:750;white-space:nowrap}
.pin-wrap{width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.pin-se{width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.pin-s{background:var(--moving)}.pin-e{background:var(--offline)}
.pin-play{width:22px;height:22px;border-radius:50%;background:var(--violet);border:3px solid #fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--violet) 30%,transparent)}

/* ---------- vehicle sheet ---------- */
.sheet{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:30;max-height:calc(100% - 140px);overflow:auto;padding:10px 18px 16px;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--card);box-shadow:var(--lift);animation:rise .22s ease}
.grab{display:block;width:40px;height:5px;margin:0 auto 10px;border-radius:3px;background:var(--line-2)}
.sheet-x{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:50%;border:0;background:var(--sunk);display:grid;place-items:center;color:var(--ink)}
.sheet-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.sh-id{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:44px}
.sh-id h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:22px;font-weight:800;font-stretch:86%;line-height:1.1}
.st-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--sunk);color:var(--ink-2);--c:var(--muted)}
.st-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.st-chip.st-moving{--c:var(--moving)}.st-chip.st-idle{--c:var(--idle)}.st-chip.st-parked{--c:var(--parked)}.st-chip.st-offline{--c:var(--offline)}
.sh-line{margin-top:8px;font-weight:650}
.sh-addr{color:var(--muted);font-size:14px}
.sh-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 0 0;border-radius:14px;background:var(--sunk)}
.sh-stats div{padding:9px 10px}.sh-stats div+div{border-left:1px solid var(--line)}
.sh-stats dt{font-size:12px;color:var(--muted)}.sh-stats dd{margin:0;font-weight:750;font-size:15px}
.health{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.hc{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 10px;border-radius:14px;background:var(--sunk);--hc:var(--muted)}
.hl-good{--hc:var(--ok)}.hl-fair{--hc:var(--warn)}.hl-poor{--hc:var(--bad)}
.hc-ic{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--card);color:var(--hc)}
.hc-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-txt{flex:1;min-width:0}
.hc-txt small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-txt b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-txt em{display:block;font-style:normal;font-size:11.5px;font-weight:650;color:var(--hc);line-height:1.25}
.hl-none .hc-txt em{color:var(--muted);font-weight:500}
.hc-val{display:flex;align-items:center;gap:8px;min-width:0}
.hm{flex:none;display:flex;align-items:flex-end;gap:2px}
.hm-bars i{width:4px;border-radius:1px;background:var(--line-2)}.hm-bars i.on{background:var(--hc)}
.hm-batt{position:relative;width:26px;height:13px;padding:1.5px;border:1.5px solid var(--line-2);border-radius:3px}
.hm-batt i{display:block;height:100%;border-radius:1.5px;background:var(--hc)}
.hm-batt::after{content:"";position:absolute;right:-4.5px;top:2.5px;width:2.5px;height:5px;border-radius:0 1px 1px 0;background:var(--line-2)}
.sh-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.act{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border:0;border-radius:14px;background:none;color:var(--ink);font-size:12.5px;font-weight:650;text-decoration:none}
.act svg{width:40px;height:40px;padding:10px;border-radius:50%;background:var(--violet-wash);color:var(--violet-ink);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-box{margin-top:10px}
.sec-state{margin-bottom:8px;padding:10px 12px;border-radius:12px;background:var(--gold-wash);font-weight:650;font-size:14px}
.sos-btn{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:10px 14px 10px 10px;border:0;border-radius:18px;background:var(--sos-wash);color:var(--ink);text-align:left}
.sos-btn .sos-ic{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--sos);color:#fff;font:900 13px/1 var(--font);font-stretch:75%;letter-spacing:.06em;box-shadow:0 4px 14px color-mix(in srgb,var(--sos) 45%,transparent)}
.sos-btn b{display:block;color:var(--bad)}.sos-btn small{display:block;color:var(--ink-2);font-size:13px}
.stolen{display:block;margin:6px auto 0;font-size:13.5px}

/* ---------- replay ---------- */
.replay{position:absolute;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:30;padding:12px 14px;border-radius:20px;background:var(--card);box-shadow:var(--lift)}
.rp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rp-head b{display:block;font-weight:800}.rp-head span{font-size:13px;color:var(--muted)}
.replay .sheet-x{position:static}
.rp-ctl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:8px}
.rp-ctl .tool{background:var(--ink);color:var(--paper)}
#rpNow{font-size:13px;min-width:118px;text-align:right}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;background:rgba(18,8,22,.48);animation:rise .2s ease}
.modal-in{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:18px 18px calc(18px + env(safe-area-inset-bottom));border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--paper)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.modal-head h2{font-size:22px;font-weight:800;font-stretch:86%}
.modal-head .sheet-x{position:static}
.dm-actions{display:grid;gap:8px;margin-top:14px}
.dm-actions .link{text-align:center}
#cmText{margin-bottom:12px}

/* ---------- SOS ---------- */
.sos-modal .modal-in{text-align:center}
.sos-modal .modal-head{text-align:left}
.sos-veh{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-weight:700}
.sos-text{color:var(--ink-2);margin:0 auto 18px;max-width:38ch}
.sos-hold{position:relative;display:grid;place-items:center;width:200px;height:200px;margin:0 auto;border:0;border-radius:50%;background:var(--sos);color:#fff;box-shadow:0 12px 40px color-mix(in srgb,var(--sos) 45%,transparent);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .15s ease}
.sos-hold.holding{transform:scale(.96)}
.sos-hold svg{position:absolute;inset:-12px;width:224px;height:224px;transform:rotate(-90deg)}
.sos-hold circle{fill:none;stroke-width:7}
.sh-track{stroke:color-mix(in srgb,var(--sos) 22%,transparent)}
.sh-fill{stroke:var(--ink);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3}
.sos-hold b{display:block;font-size:48px;font-weight:900;font-stretch:72%;letter-spacing:.04em;line-height:1}
.sos-hold small{display:block;margin-top:6px;font-size:14px;font-weight:650;opacity:.92}
.sos-note{margin:16px auto 6px;max-width:36ch;font-size:13px;color:var(--muted)}
.sos-state{display:grid;justify-items:center;gap:8px;padding:8px 0 4px}
.sos-state .big{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--sos);color:#fff;position:relative}
.sos-state .big::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--sos);animation:ping 1.8s ease-out infinite}
.sos-state.ack .big{background:var(--ok)}.sos-state.ack .big::after{border-color:var(--ok)}
.sos-state.fail .big{background:var(--warn)}.sos-state.fail .big::after{display:none}
.sos-state .big svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sos-state h3{font-size:22px;font-weight:800;font-stretch:86%}
.sos-state p{color:var(--ink-2);max-width:38ch}
.sos-log{list-style:none;margin:12px 0 0;padding:0;text-align:left;font-size:13.5px;color:var(--muted);display:grid;gap:4px}
.sos-log li b{color:var(--ink);font-weight:650}
.sos-call{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}


/* ---------- wide screens: the list beside the map ---------- */
@media (min-width:900px){
  .pane{inset:16px auto 16px 16px;width:420px;border-radius:24px;box-shadow:var(--lift);overflow:hidden}
  .app[data-tab="map"] .pane{display:flex}
  .tabs{left:16px;right:auto;bottom:16px;width:420px;border-radius:0 0 24px 24px;border-top:1px solid var(--line);padding-bottom:0;height:64px}
  .tab.tab-map{display:none}
  .tabs{grid-template-columns:repeat(4,1fr)}
  .pane{bottom:80px;border-radius:24px 24px 0 0}
  .sheet,.zone-ed{left:452px;right:auto;bottom:16px;width:400px;border-radius:24px;max-height:calc(100% - 32px)}
  .replay{left:452px;right:auto;width:420px;bottom:16px}
  .map-tools{top:16px;right:16px}
  .modal{align-items:center}
  .modal-in{border-radius:24px}
  .zone-ed{left:16px;bottom:80px;width:420px;border-radius:24px 24px 0 0;box-shadow:none;border-top:1px solid var(--line)}
}

/* the whole vehicle tile opens the vehicle; the SOS handle sits on top */
.vc-open{position:absolute;inset:0;z-index:0;padding:0;border:0;border-radius:inherit;background:none}
.vcard>span{position:relative;z-index:1;pointer-events:none;min-width:0}
.vcard .vc-sos{pointer-events:auto}
.ze-where{align-items:center}.ze-where .chips{padding:0}

/* ===== vehicles on the map: a top-down vehicle that turns with its heading (shared with the other Sentinel app) ===== */
@keyframes vmPing{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.vm.vm2{position:relative;width:44px;height:44px;cursor:pointer;--c:#9A93B4}
.vm2.st-moving{--c:var(--moving)}.vm2.st-idle{--c:var(--idle)}.vm2.st-parked{--c:var(--parked)}.vm2.st-offline{--c:var(--offline)}
.vm2-halo{position:absolute;left:6px;top:6px;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--c) 20%,transparent);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 65%,transparent)}
.vm2.st-moving .vm2-halo::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--c);animation:vmPing 2.2s ease-out infinite}
.vm2-rot{position:absolute;inset:0}
.vm2-beam{position:absolute;left:12px;top:-12px;width:20px;height:22px;background:linear-gradient(to top,color-mix(in srgb,var(--c) 75%,transparent),transparent);clip-path:polygon(32% 100%,68% 100%,100% 0,0 0);opacity:.7}
.vm2-car{position:absolute;left:8px;top:8px;width:28px;height:28px;overflow:visible;filter:drop-shadow(0 2px 2.5px rgba(0,0,0,.5))}
.vm2-car .b{fill:var(--c);stroke:#fff;stroke-width:1.25;stroke-linejoin:round}
.vm2-car .g{fill:rgba(12,8,22,.62)}
.vm2-car .r{fill:rgba(255,255,255,.2)}
.vm2-car .k{fill:none;stroke:rgba(12,8,22,.35);stroke-width:.8}
.vm2-car .h{fill:#FFF5C2}.vm2-car .t{fill:#FF4D5E}
.vm2.st-offline .vm2-car .b{fill:#6F6880;stroke:var(--offline)}
.vm2.st-offline .vm2-car .h{fill:#9A93B4}
.vm2.is-sel .vm2-halo{left:2px;top:2px;width:40px;height:40px;box-shadow:0 0 0 2.5px #fff,0 0 0 7px color-mix(in srgb,var(--c) 40%,transparent)}
.vm2.is-sel .vm2-car{left:6px;top:6px;width:32px;height:32px}
.vm2.is-play .vm2-halo{background:rgba(255,255,255,.18);box-shadow:0 0 0 2.5px #fff,0 4px 18px rgba(0,0,0,.45)}

/* ===== route replay: every position, which way it went, where it stood, start and end ===== */
.rt-pt{width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.rt-pt i{width:9px;height:9px;border-radius:50%;background:#fff;border:2.5px solid var(--c);box-shadow:0 1px 3px rgba(0,0,0,.45);pointer-events:auto;cursor:pointer;transition:transform .12s}
.rt-pt i:hover{transform:scale(1.7)}
.rt-pt.over i{width:12px;height:12px;background:var(--c);border-color:#fff}
.rt-arrow{width:44px;height:44px;display:flex;align-items:flex-start;justify-content:center;pointer-events:none}
.rt-arrow i{margin-top:13px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid #fff;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))}
.rt-stop,.rt-flag{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.rt-stop b,.rt-flag b{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:2.5px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.45);font:900 16px/1 var(--font,var(--body,system-ui));font-stretch:80%;color:#fff}
.rt-stop.parked b{background:#2563EB}
.rt-stop.idle b{background:var(--idle);border-radius:50%}
.rt-stop b svg,.rt-flag b svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rt-stop span,.rt-flag span{position:absolute;left:38px;top:50%;transform:translateY(-50%);padding:5px 9px 5px 10px;border-radius:10px;background:rgba(18,13,28,.92);color:#fff;font:700 12px/1.25 var(--font,var(--body,system-ui));white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none}
.rt-stop span small,.rt-flag span small{display:block;font-weight:500;font-size:11px;opacity:.8}
.rt-flag.start b{background:#0E9566;border-radius:50% 50% 50% 4px}
.rt-flag.end b{background:#1F1A2E;border-radius:50% 50% 4px 50%}
.rt-flag.end b svg{fill:#fff;stroke:none;width:11px;height:11px}
.rt-flag.start span{background:#0E9566}
.rt-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:12px;font-weight:600}
.rt-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.rt-legend i{width:16px;height:5px;border-radius:3px;background:var(--c)}
.rt-legend .p{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:#2563EB;color:#fff;font-weight:900;font-size:10px;font-style:normal}
.rt-legend .s{width:12px;height:12px;border-radius:50%;background:var(--idle)}
.rt-stops{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;max-height:190px;overflow:auto}
.rt-stops button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:12px;border:1px solid rgba(127,127,127,.25);background:rgba(127,127,127,.08);color:inherit;text-align:left;cursor:pointer;font:inherit;font-size:13px}
.rt-stops b.k{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#2563EB;color:#fff;font-weight:900;font-size:12px}
.rt-stops .idle b.k{background:var(--idle);border-radius:50%}
.rt-stops .start b.k{background:#0E9566;border-radius:50%}
.rt-stops small{opacity:.75}
.rt-stops em{font-style:normal;font-weight:700;white-space:nowrap}

.replay .rt-legend{color:var(--ink-2);margin-top:8px}
.vm2.is-play{pointer-events:none}
:has(> .rt-pt),:has(> .rt-arrow),:has(> .zl-wrap){pointer-events:none}
/* start and end stand on a short stem above their point, so the replay vehicle never hides them */
.rt-flag b{transform:translateY(-24px)}
.rt-flag::before{content:"";position:absolute;left:21px;top:6px;width:2.5px;height:16px;border-radius:2px;background:#fff;box-shadow:0 0 3px rgba(0,0,0,.5)}
.rt-flag::after{content:"";position:absolute;left:18px;top:18px;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #0E9566}
.rt-flag.end::after{border-color:#1F1A2E}
.rt-flag span{top:calc(50% - 24px)}
.rt-pt i{width:8px;height:8px;border-width:2px}
.rt-flag.end span{left:auto;right:38px}

/* safe zone editor: circle or drawn shape, 50 m to 1,500 km */
.ze-mode{margin:2px 0 12px}
.ze-type{display:grid;grid-template-columns:auto 96px 1fr;align-items:center;gap:10px;margin:-2px 0 10px;font-size:13px;color:var(--muted)}
.ze-type label{font-weight:650;color:var(--ink-2)}
.ze-type input{min-height:40px;padding:6px 10px;border-radius:10px;border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);font-size:15px;font-weight:700;font-stretch:85%}
.ze-type input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-wash)}
#zeQuick{padding-bottom:6px}
#zeQuick .chip,.ze-tools .chip,.ze-where .chip{min-height:34px;padding:0 12px;font-size:13px}
.ze-hint{font-size:13.5px;color:var(--ink-2);margin:0 0 8px}
.ze-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ze-tools .chip:disabled{opacity:.45}
.ze-count{margin-left:auto;font-size:13px;font-weight:700;color:var(--violet-ink)}
/* corners of a drawn zone */
.zd-pt{width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.zd-pt b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#5B1FC4;border:2.5px solid #7B2FF2;font:800 11px/1 var(--font,var(--body,system-ui));box-shadow:0 2px 6px rgba(0,0,0,.4)}
.zd-pt.first b{background:#7B2FF2;color:#fff;border-color:#fff;width:26px;height:26px}

/* ---------- Messages (toasts): one stack at the top ---------- */
.toasts{position:fixed;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top));bottom:auto;z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
body:has(.app[data-tab="map"]) .toasts{right:64px}
.toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px;width:100%;max-width:440px;padding:11px 6px 11px 14px;border-radius:16px;background:var(--ink);color:var(--paper);font-weight:600;font-size:14px;line-height:1.35;box-shadow:var(--lift);pointer-events:auto;animation:toastIn .2s ease}
.toast.bad{background:var(--sos);color:#fff}
.toast.out{animation:toastOut .18s ease forwards}
.toast .t-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.toast .t-msg{min-width:0;overflow-wrap:anywhere}
.toast .t-x{width:28px;height:28px;margin:-4px 0;display:grid;place-items:center;border:0;border-radius:9px;background:none;color:inherit;opacity:.7;cursor:pointer}
.toast .t-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.toast,.toast.out{animation:none}}
@media (min-width:900px){
  .toasts{left:auto;right:76px;top:16px;width:380px;align-items:stretch}
  body:has(.app[data-tab="map"]) .toasts{right:76px}
}