/* FireFind. Same instrument look as NOVA System Designer: deep navy ink, Nova red, Rubik + IBM Plex Mono. LEDs and device states are the only other saturated colour. */
@font-face{font-family:Rubik;src:url(/fonts/rubik-var.woff2) format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  color-scheme:dark;
  --ink-900:#070C16; --ink-850:#0A1120; --ink-800:#0D1626; --ink-750:#111C2F; --ink-700:#16223A; --ink-600:#1C2B47;
  --line:#1F2C44; --line-soft:#182338; --text:#E7EDF6; --text-dim:#B4C1D6; --muted:#7F90AC; --muted-2:#5D6C86;
  --red:#DA291C; --red-hi:#F2432F; --red-dim:#8E1C13; --sel:#35B0F5;
  --fire:#F2432F; --fault:#FFB020; --ok:#22C08A; --test:#35B0F5; --off:#5D6C86;
  /* names the rest of this sheet was written against */
  --fascia:var(--ink-900); --fascia-2:var(--ink-850); --ink:var(--text); --paper:var(--ink-800);
  --r-sm:4px; --r-md:7px; --r-lg:11px;
  --body:Rubik,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; --legend:var(--body);
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink-900);color:var(--text);font:400 15px/1.5 var(--body);-webkit-text-size-adjust:100%}
h1,h2,h3{font-weight:600;letter-spacing:-.005em;margin:0;line-height:1.2}
h1{font-size:1.5rem}h2{font-size:1.1rem}h3{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
p{margin:0 0 .6em}a{color:var(--sel)}small,.muted{color:var(--muted)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
::selection{background:var(--red);color:#fff}
*{scrollbar-color:var(--ink-600) transparent}

/* buttons */
.btn{appearance:none;border:1px solid var(--red);background:var(--red);color:#fff;font-weight:500;padding:.5rem .95rem;border-radius:var(--r-md);cursor:pointer;line-height:1.2;transition:background .12s,border-color .12s}
.btn:hover{background:var(--red-hi);border-color:var(--red-hi)}.btn[disabled]{opacity:.5;cursor:default}
.btn.quiet{background:var(--ink-750);border-color:var(--line);color:var(--text-dim)}.btn.quiet:hover{background:var(--ink-700);border-color:var(--ink-600);color:var(--text)}
.btn.danger{background:var(--red);border-color:var(--red)}.btn.small{padding:.28rem .65rem;font-size:.84rem}
.btn.pass{background:var(--ok);border-color:var(--ok);color:var(--ink-900)}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}.grow{flex:1}

/* shell */
.shell{display:grid;grid-template-columns:270px 1fr;grid-template-rows:auto 1fr;min-height:100vh}
.top{grid-column:1/-1;background:var(--ink-850);border-bottom:1px solid var(--line);color:var(--text);display:flex;align-items:center;gap:1rem;padding:.55rem 1rem;padding-top:max(.55rem,env(safe-area-inset-top))}
.brand{font:600 1.05rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:.5rem}
.brand i{width:.7rem;height:.7rem;border-radius:2px;transform:rotate(45deg);background:var(--red);box-shadow:0 0 0 3px rgba(218,41,28,.25)}
.top nav{display:flex;gap:.25rem;margin-left:auto;flex-wrap:wrap}
.top nav button{background:none;border:0;color:var(--muted);padding:.35rem .6rem;border-radius:4px;cursor:pointer}
.top nav button[aria-current=true]{background:var(--ink-700);color:var(--text);box-shadow:inset 0 -2px 0 var(--red)}.top nav button:hover{color:var(--text)}
.rail{background:var(--fascia-2);border-right:1px solid var(--line);padding:.75rem;overflow:auto}
.rail h3{margin:.25rem .25rem .5rem;color:var(--muted)}
.sitebtn{display:flex;gap:.6rem;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:4px;padding:.5rem .45rem;cursor:pointer}
.sitebtn{color:var(--text)}.sitebtn:hover{background:var(--ink-750)}.sitebtn[aria-current=true]{background:var(--ink-700);box-shadow:inset 3px 0 0 var(--red)}
.sitebtn span{display:block;line-height:1.2}.sitebtn small{display:block}
.main{padding:1rem;min-width:0}

/* LEDs */
.led{width:.85rem;height:.85rem;border-radius:50%;background:var(--off);flex:none;box-shadow:inset 0 -2px 3px rgba(0,0,0,.25)}
.led.fire{background:var(--fire);box-shadow:0 0 0 3px rgba(242,67,47,.25),0 0 10px rgba(242,67,47,.8)}
.led.fault{background:var(--fault);box-shadow:0 0 0 3px rgba(255,176,32,.22),0 0 8px rgba(255,176,32,.6)}
.led.ok{background:var(--ok);box-shadow:0 0 0 3px rgba(34,192,138,.18),0 0 6px rgba(34,192,138,.45)}
.led.test{background:var(--test);box-shadow:0 0 0 3px rgba(53,176,245,.22),0 0 8px rgba(53,176,245,.5)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:.75rem 0}
.strip div{display:flex;align-items:center;gap:.55rem;padding:.6rem .8rem;border-right:1px solid var(--line);min-width:0}
.strip div:last-child{border-right:0}
.strip b{font:500 .82rem/1 var(--mono);letter-spacing:.12em}
.strip small{display:block;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .on-fire{background:rgba(218,41,28,.2)}.strip .led.fire{animation:pulse 1s steps(2,jump-none) infinite}
.banner{padding:.6rem .9rem;border-radius:var(--r-md);margin:.5rem 0;border:1px solid rgba(255,176,32,.35);border-left:4px solid var(--fault);background:rgba(255,176,32,.09)}
.banner.fire{border-color:rgba(242,67,47,.45);border-left-color:var(--fire);background:rgba(218,41,28,.14)}.banner.test{border-color:rgba(53,176,245,.4);border-left-color:var(--test);background:rgba(53,176,245,.1)}
.sitehead{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--line);margin:.25rem 0 1rem;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:.55rem .9rem;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--red)}

/* cards and tables */
.card{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:.9rem;margin-bottom:1rem}
.card>h2,.card>h3{margin-bottom:.6rem}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th{text-align:left;font:500 .68rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:.45rem .5rem;white-space:nowrap}
td{border-bottom:1px solid var(--line-soft);padding:.4rem .5rem;vertical-align:top}
.scroll{overflow-x:auto}.num{font-family:var(--mono);font-size:.88em;white-space:nowrap}
.chip{display:inline-block;padding:.08rem .5rem;border-radius:var(--r-sm);font-size:.76rem;font-weight:500;background:var(--ink-700);color:var(--text-dim);white-space:nowrap}
.chip.fire{background:rgba(218,41,28,.2);color:#FF8A7A}.chip.fault{background:rgba(255,176,32,.15);color:var(--fault)}.chip.ok{background:rgba(34,192,138,.14);color:var(--ok)}.chip.test{background:rgba(53,176,245,.15);color:var(--sel)}
code,.mono{font-family:var(--mono);font-size:.85em;word-break:break-all}

/* plan */
.floors{display:flex;gap:.3rem;margin-bottom:.5rem;flex-wrap:wrap}
.plan{position:relative;background:var(--ink-850);border:1px solid var(--line);border-radius:var(--r-md);line-height:0;overflow:hidden;touch-action:manipulation}
.plan img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.plan.blank{aspect-ratio:16/10;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:32px 32px;line-height:1.4}
.plan.blank>p{position:absolute;inset:auto 0 .75rem 0;text-align:center;color:var(--muted);margin:0;padding:0 1rem}
.plan.placing{cursor:crosshair;outline:3px dashed var(--test);outline-offset:-3px}
.mk{position:absolute;transform:translate(-50%,-50%);width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid var(--ink-900);box-shadow:0 0 0 1.5px rgba(231,237,246,.85),0 2px 6px rgba(0,0,0,.5);background:var(--muted-2);color:#fff;
  font:500 .74rem/1 var(--mono);display:grid;place-items:center;cursor:pointer;padding:0}
.mk.wide{font-size:.6rem;letter-spacing:-.03em}
.mk.normal{background:var(--ok);color:var(--ink-900)}
.mk.fire-restored{background:linear-gradient(135deg,var(--red) 0 50%,#8B96A8 50% 100%);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.mk.fault-cleared{background:linear-gradient(135deg,var(--ok) 0 50%,#8B96A8 50% 100%);color:var(--ink-900)}.mk.fault{background:var(--fault);color:var(--ink-900)}
.mk.pass{background:var(--ok);color:var(--ink-900)}.mk.fail{background:var(--red)}.mk.untested{background:var(--muted-2)}.mk.testhit{background:var(--test);color:var(--ink-900)}
.mk.alarm{background:var(--red);color:#fff;width:2.1rem;height:2.1rem;font-size:.9rem;z-index:3}.mk.alarm.wide{font-size:.7rem}
.mk.alarm::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid var(--fire);animation:ring 1.4s ease-out infinite}
.mk.dim{opacity:.35}.mk.selected{outline:3px solid var(--test);outline-offset:3px}
.mk sup{position:absolute;top:-.65rem;right:-.65rem;background:var(--text);color:var(--ink-900);border-radius:50%;min-width:1.15rem;height:1.15rem;display:grid;place-items:center;font-size:.72rem;border:1.5px solid var(--ink-900)}
@keyframes ring{from{transform:scale(.7);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes pulse{50%{opacity:.35}}
.tray{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.tray .mk{position:relative;transform:none}
.pop{position:absolute;z-index:6;background:var(--ink-700);border:1px solid var(--ink-600);box-shadow:0 12px 30px rgba(0,0,0,.55);color:var(--text);border-radius:var(--r-md);padding:.6rem .75rem;width:min(260px,80%);line-height:1.35;font-size:.9rem;transform:translate(-50%,calc(-100% - 1.4rem))}
.pop.below{transform:translate(-50%,1.4rem)}.pop b{font-size:1rem;display:block}.pop small{color:var(--text-dim)}

/* spread + events */
.spreadlist{list-style:none;margin:0;padding:0}
.spreadlist li{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;align-items:baseline;padding:.4rem 0;border-bottom:1px solid var(--line-soft)}
.spreadlist .n{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font:500 .85rem/1 var(--mono)}
.spreadlist .n.lost{background:var(--ink-900);box-shadow:0 0 0 1.5px var(--fault)}.spreadlist li.future{opacity:.3}
input[type=range]{width:100%;accent-color:var(--red)}
.log{list-style:none;margin:0;padding:0;max-height:24rem;overflow:auto;font-size:.9rem}
.log li{display:grid;grid-template-columns:4.4rem 1fr;gap:.5rem;padding:.3rem 0;border-bottom:1px solid var(--line-soft)}
.log time{color:var(--muted);font-family:var(--mono);font-size:.85em}
.log .set.fire,.log .set.gas{color:#FF8A7A;font-weight:600}.log .set.fault,.log .set.power,.log .set.comms,.log .set.tamper{color:var(--fault)}

/* walk test */
.progress{height:.6rem;border-radius:4px;background:var(--ink-700);overflow:hidden;display:flex;margin:.5rem 0}
.progress i{display:block;height:100%}.progress .p{background:var(--ok)}.progress .f{background:var(--red)}
.wtrow{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.5rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--line-soft)}
.wtrow .acts{display:flex;gap:.3rem}
.zonehead{font:600 .68rem var(--body);color:var(--muted);margin:.9rem 0 .1rem;letter-spacing:.12em;text-transform:uppercase}

/* forms */
label{display:block;font-weight:500;font-size:.85rem;color:var(--text-dim);margin:.7rem 0 .25rem}
label.check{display:flex;gap:.5rem;align-items:flex-start;font-weight:400;color:var(--text);font-size:inherit}input[type=checkbox]{accent-color:var(--red)}label.check input{margin-top:.3rem}
input[type=text],input[type=email],input[type=number],input[type=search],select,textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-900);color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sel);box-shadow:0 0 0 3px rgba(53,176,245,.18)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
textarea{min-height:7rem;font-family:var(--mono);font-size:.85rem}
dialog{border:1px solid var(--line);border-radius:var(--r-lg);padding:1.2rem;width:min(520px,calc(100vw - 2rem));background:var(--ink-800);box-shadow:0 24px 70px rgba(0,0,0,.65);color:var(--text)}
dialog::backdrop{background:rgba(7,12,22,.72);backdrop-filter:blur(2px)}
dialog h2{margin-bottom:.4rem}.dialog-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:.5rem 0}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600;word-break:break-all}
#toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);background:var(--ink-600);border:1px solid var(--line);color:var(--text);padding:.6rem 1rem;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;z-index:50}
#toast.show{opacity:1}#toast.bad{background:var(--red);border-color:var(--red-hi);color:#fff}

/* sign in */
.signin{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(ellipse at 50% 0,var(--ink-700),var(--ink-900) 65%)}
.signin .panel{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;width:min(430px,100%);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.signin .leds{display:flex;gap:1.1rem;margin:1.1rem 0 1.3rem;padding:.7rem .9rem;background:var(--ink-900);border-radius:var(--r-md);border:1px solid var(--line)}
.signin .leds span{display:flex;align-items:center;gap:.4rem;font:500 .72rem var(--mono);letter-spacing:.1em;color:var(--text-dim)}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}.empty h2{color:var(--text);margin-bottom:.4rem}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid var(--line);max-height:11.5rem}
  .cols{grid-template-columns:1fr}.strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strip div{flex-direction:column;align-items:flex-start;gap:.3rem;padding:.5rem}.strip b{font-size:.85rem;letter-spacing:.04em}.strip small{display:none}
  .main{padding:.75rem}.mk{width:1.9rem;height:1.9rem}
}
@media (prefers-reduced-motion:reduce){.mk.alarm::after,.strip .led.fire{animation:none}#toast{transition:none}}
@media print{.rail,.top,.tabs{display:none}.shell{display:block}}

/* new site wizard */
.wizard{max-width:980px}.wizard>.card{margin-top:.25rem}.wizard .card .card{border:0;padding:0;margin:0;background:none}.wizard .card .card>.row>h2{font-size:.95rem}
.wizsteps{list-style:none;display:flex;gap:.35rem;padding:0;margin:1rem 0;overflow-x:auto}
.wizsteps li{flex:1;min-width:6.4rem;display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);color:var(--muted);cursor:pointer;font-size:.86rem;white-space:nowrap}
.wizsteps li b{width:1.45rem;height:1.45rem;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ink-700);font:500 .75rem/1 var(--mono)}
.wizsteps li.on{border-color:var(--red);color:var(--text);background:var(--ink-750)}.wizsteps li.on b{background:var(--red);color:#fff}
.wizsteps li.done{color:var(--text-dim)}.wizsteps li.done b{background:var(--ok);color:var(--ink-900)}
ol.steps{margin:.3rem 0 1rem;padding-left:1.3rem;color:var(--text-dim)}ol.steps li{margin:.25rem 0}ol.steps b{color:var(--text)}
table.ajax td{vertical-align:middle;padding:.5rem}table.ajax td:nth-child(2){color:var(--text);font-weight:500}table.ajax td:last-child{font-size:.84rem}
.linkcheck{display:flex;gap:.8rem;align-items:center;margin:1rem 0 .5rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-900)}
.linkcheck .led{width:1.1rem;height:1.1rem}.linkcheck:not(.ok):not(.fault) .led{animation:pulse 1.2s ease-in-out infinite;background:var(--sel)}
.linkcheck.ok{border-color:rgba(34,192,138,.5);background:rgba(34,192,138,.08)}.linkcheck.fault{border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.08)}
details{margin:.6rem 0;color:var(--text-dim)}details summary{cursor:pointer;color:var(--sel)}details ul{padding-left:1.2rem}details li{margin:.35rem 0}
table.ajax .mono{word-break:normal;white-space:nowrap}

/* no page zoom: only the full screen plan zooms */
html{touch-action:pan-x pan-y}
html.fm-on,html.fm-on body{overflow:hidden}

/* keyholder / client page: no site rail, no tabs */
.shell.solo{grid-template-columns:1fr}.shell.solo .main{max-width:1200px;width:100%;margin:0 auto}
.top nav select{width:auto;max-width:46vw;padding:.3rem .5rem;background:var(--ink-750)}

/* plan: tap for full screen */
.plan .expand{position:absolute;right:.5rem;top:.5rem;z-index:4;background:rgba(7,12,22,.78);color:var(--text);border:1px solid var(--ink-600);border-radius:var(--r-md);padding:.3rem .6rem;font-size:.78rem;line-height:1.2;cursor:pointer;backdrop-filter:blur(3px)}
#fullmap{position:fixed;inset:0;z-index:40;background:var(--ink-900)}#fullmap[hidden]{display:none}
#fm-view{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#fm-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;line-height:0}
#fm-img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
#fm-marks{position:absolute;inset:0}
#fm-marks .mk{transform:translate(-50%,-50%) scale(var(--inv,1))}
#fm-exit{position:absolute;right:max(.8rem,env(safe-area-inset-right));top:max(.8rem,env(safe-area-inset-top));z-index:3;background:var(--red);color:#fff;border:0;border-radius:999px;padding:.65rem 1.1rem;font:600 .95rem/1 var(--body);box-shadow:0 6px 20px rgba(0,0,0,.55);cursor:pointer}
#fm-floors{position:absolute;left:max(.8rem,env(safe-area-inset-left));top:max(.8rem,env(safe-area-inset-top));z-index:3}#fm-floors .floors{margin:0}
#fm-info{position:absolute;left:50%;transform:translateX(-50%);bottom:max(.8rem,env(safe-area-inset-bottom));z-index:3;max-width:calc(100vw - 1.6rem);pointer-events:none}
#fm-info>div{background:rgba(13,22,38,.92);border:1px solid var(--ink-600);border-radius:var(--r-lg);padding:.5rem .9rem;text-align:center;backdrop-filter:blur(4px);box-shadow:0 8px 24px rgba(0,0,0,.5)}
#fm-info>div.fire{background:rgba(218,41,28,.92);border-color:var(--red-hi);color:#fff}#fm-info>div.fire small{color:#fff}
#fm-info b{display:block;font-size:.95rem}#fm-info small{color:var(--text-dim)}

/* phones: smaller everything, so the plan and the spread list fit on one screen */
@media (max-width:900px){
  body{font-size:13.5px;line-height:1.4}
  h1{font-size:1.1rem}h2{font-size:.95rem}
  .top{padding:.35rem .6rem;gap:.5rem}.brand{font-size:.85rem}.top nav button{padding:.25rem .45rem;font-size:.85rem}
  .main{padding:.5rem}.card{padding:.55rem;margin-bottom:.5rem;border-radius:var(--r-md)}.card>h2,.card>h3{margin-bottom:.3rem}
  .rail{max-height:6.5rem;padding:.4rem}.sitebtn{padding:.3rem .4rem}
  .sitehead{align-items:center}.sitehead small{font-size:.78rem}
  .strip{margin:.4rem 0;border-radius:var(--r-md)}.strip div{padding:.35rem .4rem;gap:.2rem}.strip b{font-size:.62rem;letter-spacing:.06em}.strip .led{width:.65rem;height:.65rem}
  .banner{padding:.4rem .6rem;margin:.35rem 0;font-size:.9rem}
  .tabs{margin:.1rem 0 .5rem}.tabs button{padding:.4rem .6rem}
  .cols{gap:.5rem}
  .mk{width:1.5rem;height:1.5rem;font-size:.62rem;border-width:1.5px}.mk.wide{font-size:.5rem}.mk.alarm{width:1.85rem;height:1.85rem;font-size:.75rem}.mk.alarm.wide{font-size:.58rem}
  .spreadlist li{padding:.25rem 0;grid-template-columns:1.7rem 1fr auto}.spreadlist .n{width:1.4rem;height:1.4rem;font-size:.72rem}
  .log{max-height:14rem;font-size:.82rem}.log li{grid-template-columns:3.9rem 1fr;padding:.2rem 0}
  .btn{padding:.4rem .75rem}.btn.small{padding:.22rem .5rem;font-size:.78rem}
  input[type=text],input[type=email],input[type=number],select,textarea{font-size:16px}      /* under 16px makes iOS zoom the page on focus */
  .keyholder .sitehead h1{font-size:1rem}.keyholder .cols small{font-size:.72rem;line-height:1.3;display:block}
}

/* fire spread lines */
.spreadfx{position:absolute;inset:0;pointer-events:none;z-index:2;line-height:0}.spreadfx svg{display:block;width:100%;height:100%;overflow:visible}
.mk{z-index:3}.mk.alarm{z-index:4}.plan .pop{z-index:6}
.sp-line{fill:none;stroke:#FF6A4D;stroke-opacity:.55;stroke-linecap:round;stroke-linejoin:round}
.sp-glow{fill:none;stroke:#FF3B2A;stroke-opacity:.6;stroke-linecap:round;stroke-linejoin:round;filter:blur(2.5px);animation:sp-run var(--cycle,3s) cubic-bezier(.45,.05,.55,.95) var(--phase,0s) infinite}
.sp-core{fill:none;stroke:#FFF3EF;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #FF3B2A) drop-shadow(0 0 6px rgba(255,59,42,.8));animation:sp-run var(--cycle,3s) cubic-bezier(.45,.05,.55,.95) var(--phase,0s) infinite}
@keyframes sp-run{0%{stroke-dashoffset:calc(var(--from) * 1px);opacity:0}5%{opacity:1}74%{opacity:1}78%,100%{stroke-dashoffset:calc(var(--to) * 1px);opacity:0}}
@media (prefers-reduced-motion:reduce){.sp-glow,.sp-core{animation:none;display:none}}

/* version and changes (platform admin) */
.brand .ver{font:500 .62rem/1 var(--mono);letter-spacing:.04em;text-transform:none;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.2rem .45rem;margin-left:.2rem}
ul.changes{margin:.2rem 0 .4rem;padding-left:1.1rem;color:var(--text-dim)}ul.changes li{margin:.3rem 0;line-height:1.45}

/* plan tools: hide healthy devices, show my location */
.plan-tools{position:absolute;left:.5rem;top:.5rem;z-index:5;display:flex;gap:.35rem;line-height:1}
.plan-tools .tool,.plan .expand{display:inline-flex;align-items:center;gap:.35rem;background:rgba(7,12,22,.8);color:var(--text);border:1px solid var(--ink-600);border-radius:999px;
  padding:.38rem .6rem;font:500 .78rem/1 var(--body);cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.plan-tools .tool.off{color:var(--muted)}.plan-tools .tool.on{border-color:var(--sel);color:var(--sel);box-shadow:0 0 0 3px rgba(53,176,245,.18)}
.plan-tools .tool span{font-size:.72rem}
.ico{width:1.05rem;height:1.05rem;flex:none}
#fm-tools{position:absolute;left:max(.8rem,env(safe-area-inset-left));top:calc(max(.8rem,env(safe-area-inset-top)) + 3rem);z-index:3}
#fm-tools .plan-tools{position:static}

/* north arrow, once the plan is tied to the map */
.north{position:absolute;right:.6rem;bottom:.6rem;z-index:4;width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(7,12,22,.72);border:1px solid var(--ink-600);display:grid;place-items:center;line-height:1;pointer-events:none}
.north>div{display:grid;place-items:center;gap:1px}.north i{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:9px solid var(--red)}
.north b{font:600 .56rem/1 var(--body);color:var(--text)}

/* you are here */
.me-acc{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(53,176,245,.14);border:1.5px solid rgba(53,176,245,.55);z-index:3;pointer-events:none}
.me-acc.poor{background:rgba(255,176,32,.08);border:2px dashed rgba(255,176,32,.85)}
.me-dot{position:absolute;width:1rem;height:1rem;transform:translate(-50%,-50%);border-radius:50%;background:#35B0F5;border:2.5px solid #fff;box-shadow:0 0 0 1px rgba(7,12,22,.6),0 2px 8px rgba(0,0,0,.5);z-index:6;pointer-events:none}
.me-dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid #35B0F5;animation:me-ping 2s ease-out infinite}
.me-dot.poor{background:transparent;border:2px dashed #FFB020;box-shadow:none}.me-dot.poor::after{display:none}
#fm-marks .me-dot{transform:translate(-50%,-50%) scale(var(--inv,1))}
@keyframes me-ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.8);opacity:0}}
.me-note{position:absolute;left:.5rem;bottom:.5rem;right:3.2rem;z-index:5;display:flex;gap:.45rem;align-items:flex-start;background:rgba(7,12,22,.86);border:1px solid var(--ink-600);border-radius:var(--r-md);
  padding:.4rem .6rem;font:400 .78rem/1.35 var(--body);color:var(--text);pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.me-note .me-pin{width:.6rem;height:.6rem;border-radius:50%;background:#35B0F5;flex:none;margin-top:.25rem}
.me-note.warn{border-color:rgba(255,176,32,.6)}.me-note.warn .me-pin{background:#FFB020}.me-note.bad .me-pin{background:var(--red)}.me-note.wait .me-pin{background:var(--muted)}
@media (prefers-reduced-motion:reduce){.me-dot::after{animation:none}}

/* location prompt for keyholders */
.geo-ask{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1rem;background:rgba(7,12,22,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.geo-card{position:relative;width:min(24rem,100%);background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem 1.3rem 1.3rem;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.geo-card h2{font-size:1.15rem;margin:.9rem 0 .5rem;line-height:1.3}.geo-card p{color:var(--text-dim);font-size:.9rem;margin:0 0 1.1rem}
.geo-go{width:100%;padding:.8rem 1rem;font-size:1rem;background:#35B0F5;border-color:#35B0F5;color:var(--ink-900)}.geo-go:hover{background:#5BC2F7;border-color:#5BC2F7}
.geo-x{position:absolute;right:.55rem;top:.55rem;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--line);background:var(--ink-750);color:var(--text-dim);font-size:1rem;cursor:pointer}
.geo-icon{width:3.4rem;height:3.4rem;margin:0 auto;border-radius:50%;background:rgba(53,176,245,.14);display:grid;place-items:center}
.geo-icon i{width:1.1rem;height:1.1rem;border-radius:50%;background:#35B0F5;border:3px solid #fff;box-shadow:0 0 0 6px rgba(53,176,245,.25)}

/* device plotting: a card on the page opens the full-screen plotter */
.plotlaunch .plotcount{flex:1 1 18rem;display:grid;gap:.35rem}.plotlaunch .progress{margin:0}
html.pfs-on,html.pfs-on body{overflow:hidden}
#plotfs{position:fixed;inset:0;z-index:40;background:var(--ink-900)}#plotfs[hidden]{display:none}
.pfs-view{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:40px 40px}
.pfs-view.panning{cursor:grabbing}
.pfs-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;line-height:0;box-shadow:0 12px 40px rgba(0,0,0,.55)}
.pfs-stage[hidden]{display:none}
.pfs-img{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.pfs-marks{position:absolute;inset:0}
.pfs-marks .mk{transform:translate(-50%,-50%) scale(var(--inv,1))}
.pfs-empty{position:absolute;left:1rem;right:1rem;top:42%;text-align:center;color:var(--muted);line-height:1.4}
.pfs-top,.pfs-list,.pfs-zoom{background:rgba(10,17,32,.94);border:1px solid var(--ink-600);box-shadow:0 8px 24px rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pfs-top{position:absolute;left:.6rem;right:.6rem;top:max(.6rem,env(safe-area-inset-top));z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .8rem;border-radius:var(--r-lg);padding:.45rem .55rem .45rem .8rem}
.pfs-brand{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.pfs-brand>b{font-family:var(--display,inherit);letter-spacing:.02em}.pfs-brand .floors{margin:0}
.pfs-now{flex:1 1 16rem;display:flex;flex-wrap:wrap;gap:.3rem .5rem;align-items:baseline;min-width:0}.pfs-now small{color:var(--muted)}.pfs-now .hint{color:var(--text-dim);font-size:.85rem}
.pfs-acts{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-left:auto}
.pfs-exit{background:var(--red);border-color:var(--red-hi);color:#fff}
.pfs-exit kbd{font:500 .66rem/1 var(--mono);border:1px solid rgba(255,255,255,.45);border-radius:4px;padding:.12rem .3rem;margin-left:.45rem}
.pfs-list{position:absolute;right:.6rem;top:5rem;bottom:.6rem;width:21rem;z-index:3;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:.6rem .6rem .3rem}
.pfs-list.closed{bottom:auto;padding-bottom:.6rem}.pfs-list.closed>:not(.pfs-listtop){display:none}.pfs-list.closed .progress{display:none}
.pfs-listtop{display:grid;gap:.4rem}
.pfs-fold{display:flex;align-items:center;gap:.5rem;width:100%;background:none;border:0;color:var(--text);padding:0;cursor:pointer;font:inherit;text-align:left}
.pfs-fold span{margin-left:auto;color:var(--text-dim);font-size:.8rem}.pfs-fold .caret{font-style:normal;color:var(--muted)}
.pfs-listtop .progress{margin:0}
.pfs-ctl{display:flex;gap:.4rem;margin:.5rem 0 .3rem}.pfs-ctl input[type=search]{flex:1;min-width:0;margin:0}.pfs-ctl select{width:auto;margin:0;flex:none}
.pfs-others{margin:.1rem 0 .3rem;font-size:.8rem}
.pfs-list .plist{flex:1;min-height:0;overflow:auto;margin:0 -.3rem}
.pfs-zoom{position:absolute;left:.6rem;bottom:max(.6rem,env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;gap:.2rem;border-radius:999px;padding:.25rem}
.pfs-zoom span{font:500 .75rem var(--mono);color:var(--text-dim);min-width:3.2rem;text-align:center}
@media (max-width:759px){
  .pfs-top{padding:.4rem .5rem}.pfs-now{flex-basis:100%;order:3}.pfs-now .hint{display:none}
  .pfs-list{left:.5rem;right:.5rem;top:auto;bottom:max(.5rem,env(safe-area-inset-bottom));width:auto;height:42vh}
  .pfs-list.closed{height:auto}
}
.mk.plot{background:#E7EDF6;color:var(--ink-900);cursor:grab;touch-action:none}.mk.plot.dragging{cursor:grabbing;z-index:8;box-shadow:0 0 0 3px var(--sel),0 6px 16px rgba(0,0,0,.5)}
.mk.plot.selected{background:var(--sel);color:var(--ink-900);outline:3px solid rgba(53,176,245,.45);outline-offset:2px;z-index:7}
.mk.ghost{background:rgba(7,12,22,.35);color:var(--text-dim);border:1.5px dashed var(--text-dim);box-shadow:none;font-size:.58rem;opacity:.85}
.plist{overflow:auto;margin:0 -.3rem}
.pgroup{font:600 .66rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:.7rem .4rem .25rem}
.prow{display:grid;grid-template-columns:2.4rem 1fr 1.2rem;gap:.4rem;align-items:center;width:100%;text-align:left;background:none;border:0;border-radius:var(--r-sm);padding:.35rem .4rem;color:var(--text);cursor:pointer}
.prow:hover{background:var(--ink-750)}.prow.on{background:rgba(53,176,245,.14);box-shadow:inset 3px 0 0 var(--sel)}
.prow .pno{font:500 .8rem var(--mono);color:var(--text-dim)}.prow .pname b{display:block;font-weight:500;font-size:.88rem;line-height:1.25}.prow .pname small{color:var(--muted);font-size:.74rem}
.prow .pstate{color:var(--ok);font-weight:700}.prow.done .pname b{color:var(--text-dim)}.prow.off .pname b{color:var(--muted);text-decoration:line-through}

/* enrolment wizard */
.wizard.wide{max-width:none}
.wizplan{margin-top:.8rem;max-width:56rem}.wizplan img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r-md)}
.wizplan .plan img{border:0;border-radius:0}
.geoplan.tapping .plan{cursor:crosshair;outline:2px dashed var(--sel);outline-offset:-2px}
.corners{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.corner{background:var(--ink-850);border:1px solid var(--line);border-radius:var(--r-md);padding:.6rem .7rem}.corner.tapping{border-color:var(--sel);box-shadow:0 0 0 3px rgba(53,176,245,.18)}
.corner input{margin-top:.4rem;font-family:var(--mono);font-size:.85rem}
.cpin{position:absolute;transform:translate(-50%,-50%);width:1.6rem;height:1.6rem;border-radius:50%;background:var(--sel);color:var(--ink-900);font:600 .8rem/1.6rem var(--body);text-align:center;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5);z-index:6;pointer-events:none}
.north.big{width:3rem;height:3rem}.north.big i{border-left-width:6px;border-right-width:6px;border-bottom-width:13px}.north.big b{font-size:.7rem}
@media (max-width:900px){.corners{grid-template-columns:1fr}}

/* the bar above the plan: tools on the left, full screen on the right; nothing floats over devices */
.planbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .45rem}
.planbar .plan-tools{position:static}
.planbar .tool{display:inline-flex;align-items:center;gap:.35rem;background:var(--ink-750);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:.4rem .7rem;font:500 .8rem/1 var(--body);cursor:pointer}
.planbar .tool.off{color:var(--muted)}.planbar .tool.on{border-color:var(--sel);color:var(--sel);box-shadow:0 0 0 3px rgba(53,176,245,.18)}
.me-note{position:static;margin-top:.45rem;right:auto;left:auto;bottom:auto;pointer-events:auto;background:var(--ink-850)}
#fm-tools .plan-tools .tool{background:rgba(7,12,22,.8)}

/* the colour behind a plan: four swatches and a custom colour */
.bgpick{display:inline-flex;align-items:center;gap:.3rem;vertical-align:middle}
.bgpick .sw{width:1.45rem;height:1.45rem;border-radius:50%;border:1px solid rgba(255,255,255,.4);padding:0;cursor:pointer;position:relative;flex:none}
.bgpick .sw.on{box-shadow:0 0 0 2px var(--ink-850),0 0 0 4px var(--sel)}
.bgpick .sw:focus-visible{outline:2px solid var(--sel);outline-offset:2px}
.bgpick .custom{display:inline-block;background:conic-gradient(#e5484d,#f5a623,#22c08a,#35b0f5,#8b5cf6,#e5484d);overflow:hidden}
.bgpick .custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}

/* I/O modules: what each is wired to */
.linkish{display:block;background:none;border:0;padding:.2rem 0 0;color:var(--sel);font:inherit;font-size:.78rem;cursor:pointer;text-align:left}
.linkish:hover{text-decoration:underline}
.iocard select{min-width:12rem}.iocard td input[type=text]{min-width:11rem}

.pfs-others[hidden]{display:none}
.pfs-top .short{display:none}
.pfs-top>.pfs-exit{order:5}
.pfs-marks .mk{width:1.5rem;height:1.5rem;font-size:.66rem}.pfs-marks .mk.wide{font-size:.54rem}
@media (max-width:759px){
  .pfs-top .long,.pfs-exit kbd{display:none}.pfs-top .short{display:inline}
  .pfs-brand{order:0;flex:1}.pfs-top>.pfs-exit{order:1}.pfs-now{order:2}.pfs-acts{order:3;margin-left:0}
  .pfs-marks .mk{width:1.35rem;height:1.35rem;font-size:.6rem}
}
.bgpick .custom{margin:0;align-self:center}

/* floor tabs: another floor in fire (red) or with a fault (orange) flashes, so it is not missed; fire wins */
.floors .btn.floor-fire{border-color:var(--red-hi);animation:floor-fire 1.1s ease-in-out infinite}
.floors .btn.floor-fault{border-color:var(--fault);animation:floor-fault 1.5s ease-in-out infinite}
.floor-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.35rem;vertical-align:middle;background:currentColor}
.floor-fire .floor-dot{background:var(--red-hi)}.floor-fault .floor-dot{background:var(--fault)}
@keyframes floor-fire{0%,100%{box-shadow:0 0 0 1px var(--red-hi)}50%{box-shadow:0 0 0 3px var(--red-hi),0 0 14px 3px rgba(242,67,47,.55)}}
@keyframes floor-fault{0%,100%{box-shadow:0 0 0 1px var(--fault)}50%{box-shadow:0 0 0 3px var(--fault),0 0 12px 2px rgba(255,176,32,.45)}}
@media (prefers-reduced-motion:reduce){.floors .btn.floor-fire,.floors .btn.floor-fault{animation:none;box-shadow:0 0 0 2px currentColor}.floors .btn.floor-fire{box-shadow:0 0 0 2px var(--red-hi)}.floors .btn.floor-fault{box-shadow:0 0 0 2px var(--fault)}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.progress .p.low{background:var(--red)}

/* phones: a header a quarter shorter */
@media (max-width:900px){
  .top{padding:.15rem .55rem;padding-top:max(.15rem,env(safe-area-inset-top));gap:.4rem;line-height:1.15}
  .brand{font-size:.78rem}.brand i{width:.55rem;height:.55rem;box-shadow:0 0 0 2px rgba(218,41,28,.25)}
  .top nav{gap:.3rem .15rem}.top nav button{min-height:24px;padding:0 .42rem;font-size:.8rem;line-height:1;display:inline-flex;align-items:center}      /* 24 px: big enough to tap */
  .top nav select{padding:.05rem .35rem;line-height:1.1;height:auto}
}

/* keyholders on a phone: one screen, nothing scrolls but the boxes that say so */
html.kh-fit,html.kh-fit body{height:100%;overflow:hidden;overscroll-behavior:none}
.shell.solo.fit{height:100vh;height:100dvh;grid-template-rows:auto minmax(0,1fr)}
.shell.solo.fit .main{min-height:0;overflow:hidden;padding:.4rem .5rem;padding-bottom:max(.4rem,env(safe-area-inset-bottom))}
.kh{height:100%;min-height:0;display:flex;flex-direction:column;gap:.35rem}
.kh>*{flex:none}
.kh-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem;min-width:0}
.kh-head h1{font-size:1rem;margin:0;line-height:1.2}.kh-head small{color:var(--muted);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kh .strip{margin:0}
.kh-line{margin:0;padding:.3rem .55rem;font-size:.8rem;line-height:1.3}
.kh-replay{display:flex;align-items:center;gap:.4rem}.kh-replay span{flex:1;text-align:center}
.kh-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--ink-850)}
.kh-tabs button{position:relative;border:0;background:none;color:var(--muted);font:600 .9rem/1 var(--body);padding:.6rem .5rem;cursor:pointer}
.kh-tabs button+button{border-left:1px solid var(--line)}
.kh-tabs button[aria-selected=true]{background:var(--ink-700);color:var(--text);box-shadow:inset 0 -3px 0 var(--red)}
.kh-tabs button:focus-visible{outline:2px solid var(--sel);outline-offset:-2px}
.kh-dot{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--red-hi);margin-left:.4rem;vertical-align:middle}
.kh-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.planbox.fit{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.35rem}
.planbox.fit>*{flex:none}.planbox.fit .planbar{margin:0}.planbox.fit .floors{margin:0}
.planbox.fit .me-note{margin:0}
.planbox.fit .tray{max-height:3.2rem;overflow:auto}
.planfit{flex:1 1 auto!important;min-height:0;container-type:size;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.planfit>.plan{flex:none;width:100%}
.planfit.known>.plan{width:min(100cqw, calc(100cqh * var(--ar)));aspect-ratio:var(--ar)}
.planfit.known>.plan img{height:100%}
.kh-events{gap:.4rem}
.kh-half{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.kh-half>.card{flex:1 1 auto;min-height:0;overflow:auto;margin:0;padding-top:0;overscroll-behavior:contain}
.kh-half>.card>:first-child{position:sticky;top:0;z-index:1;background:var(--ink-800);padding-top:.5rem;padding-bottom:.25rem;margin:0}
.kh-half .log{max-height:none}
.kh-note{flex:none;color:var(--muted);font-size:.68rem;line-height:1.3;padding:.3rem .2rem 0}

/* a bubble with no label: a plain dot, the device named when tapped */
.mk:empty{font-size:0}

/* a narrow phone: the admin menu keeps one line; the diamond stays as the brand */
@media (max-width:520px){.shell:not(.solo) .brand .bname{display:none}}
/* devices not on a plan: bubble and name */
.trayitem{display:inline-flex;align-items:center;gap:.3rem;background:var(--ink-850);border:1px solid var(--line);border-radius:999px;padding:.12rem .5rem .12rem .15rem}
.trayitem small{font-size:.76rem;color:var(--text-dim);max-width:12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* keyholder phone, 0.8.6: nothing above the plan may grow without limit, and the plan keeps real space */
.kh-head{flex-wrap:nowrap}.kh-head h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}.kh-head small{flex:0 10 auto;min-width:0}
.planbox.fit .floors{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.planbox.fit .floors::-webkit-scrollbar{display:none}.planbox.fit .floors .btn{flex:none}
.planbox.fit .tray{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;margin-top:0;padding:.55rem .6rem .3rem}
.planbox.fit .tray .trayitem{flex:none}
.planfit{min-height:8rem;padding:.95rem}                 /* half a bubble all round, so bubbles at the plan's edge stay whole */
.planfit>.plan{overflow:visible}
.planfit.known>.plan{box-sizing:content-box;width:min(calc(100cqw - 2px), calc((100cqh - 2px) * var(--ar)))}   /* the picture keeps its exact shape */
.planfit>.plan.blank{width:100%;height:100%;aspect-ratio:auto}.planfit>.plan.blank>p{inset:auto 0 50% 0;transform:translateY(50%)}
.selline{display:flex;align-items:flex-start;gap:.5rem;background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-md);padding:.4rem .55rem;line-height:1.3}
.selline>span{flex:1;min-width:0}.selline b{display:block;font-size:.9rem}.selline small{display:block;color:var(--text-dim);font-size:.74rem}.selline .st{display:block;font-size:.8rem}
.selline .x{flex:none;background:none;border:0;color:var(--muted);font-size:1rem;line-height:1;padding:.2rem .3rem;cursor:pointer;min-width:24px;min-height:24px}
/* 5: narrow phones keep the header on one row */
@media (max-width:420px){
  .shell.solo:has(.top nav select) .brand .bname{display:none}
  .top nav{flex-wrap:nowrap;min-width:0}.top nav select{min-width:0;max-width:calc(100vw - 7.5rem)}.brand{flex:none}
}
@media (max-width:360px){.top nav{gap:.15rem}.top nav button{padding:0 .3rem;font-size:.76rem}}
.planfit{position:relative}.planfit>.selline{position:absolute;left:.3rem;right:.3rem;bottom:.3rem;z-index:8;box-shadow:0 8px 24px rgba(0,0,0,.5)}