/* NovaTracer. 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(5,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.fault{background:var(--fault);color:var(--ink-900)}.mk.disabled{background:var(--text);color:var(--ink-900);border-style:dashed}
.mk.lost{background:var(--ink-900);box-shadow:0 0 0 1.5px var(--fault)}.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:static;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],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(5,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:8.5rem;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}
.fx-base{fill:none;stroke:#DA291C;stroke-opacity:.38;stroke-linecap:round}
.fx-flow{fill:none;stroke:#FF6A4D;stroke-linecap:round;animation:fxflow .7s linear infinite}
.fx-scan{fill:none;stroke:#FFE3DC;stroke-linecap:round;filter:drop-shadow(0 0 4px #FF3B1F) drop-shadow(0 0 10px #DA291C);animation:fxscan var(--dur) cubic-bezier(.45,0,.55,1) var(--delay) infinite}
.fx-head{fill:#F2432F;stroke:#070C16;stroke-width:1;filter:drop-shadow(0 0 5px #DA291C);animation:fxhead var(--dur) ease-in-out var(--delay) infinite}
@keyframes fxflow{to{stroke-dashoffset:calc(var(--dash) * -1px)}}
@keyframes fxscan{0%{stroke-dashoffset:calc(var(--from) * 1px);opacity:0}8%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:calc(var(--to) * 1px);opacity:0}}
@keyframes fxhead{0%,70%{opacity:.75}88%{opacity:1;fill:#FFE3DC}100%{opacity:.75}}
@media (prefers-reduced-motion:reduce){.fx-flow,.fx-scan,.fx-head{animation:none}.fx-scan{display:none}}