/* the host's phone app · the front door's look: dark, pixel lettering, bolted frames, no rounded corners */
@font-face{font-family:"Pixelify Sans";src:url(fonts/PixelifySans.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url(fonts/NunitoSans-latin.ttf) format("truetype");font-weight:200 1000;font-display:swap}
:root{--void:#0b0a12;--deep:#14111f;--frame:#221e30;--frame2:#2d2d50;--plum:#5a3f63;--copper:#c27a45;--mint:#ecf4e3;
 --green:#00ff1a;--blue:#0047ff;--amber:#fcc03c;--red:#ff3b3b;--cream:#f3eadb;--dim:#a79cb8;
 --pixel:"Pixelify Sans",system-ui,sans-serif;--body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--void);color:var(--cream);font:16px/1.45 var(--body)}
body{min-height:100vh;padding:calc(env(safe-area-inset-top) + 56px) 16px calc(env(safe-area-inset-bottom) + 84px)}
.top{position:fixed;inset:0 0 auto 0;height:calc(env(safe-area-inset-top) + 48px);padding:env(safe-area-inset-top) 16px 0;
 display:flex;align-items:center;justify-content:space-between;background:var(--deep);border-bottom:2px solid var(--frame2);z-index:5}
.mark{font:700 20px var(--pixel);letter-spacing:.08em;color:var(--mint)}
.who{font-size:13px;color:var(--dim)}
h1,h2,h3{font-family:var(--pixel);font-weight:700;margin:0 0 8px;color:var(--mint)}
h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}
.dim{color:var(--dim)} .small{font-size:13px}
.card{background:var(--deep);border:2px solid var(--frame2);box-shadow:4px 4px 0 var(--void),4px 4px 0 2px var(--frame);
 padding:14px;margin:0 0 14px;position:relative}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:10px 0 4px}
input,textarea{width:100%;background:var(--void);color:var(--cream);border:2px solid var(--frame2);padding:10px;font:16px var(--body);border-radius:0}
textarea{min-height:84px;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--copper);outline-offset:0}
.key{display:inline-block;margin:12px 8px 0 0;padding:10px 16px;background:var(--copper);color:var(--void);border:0;border-radius:0;
 font:700 15px var(--pixel);letter-spacing:.04em;box-shadow:3px 3px 0 var(--plum);cursor:pointer}
.key.ghost{background:transparent;color:var(--cream);border:2px solid var(--frame2);box-shadow:none}
.key.danger{background:var(--red);color:var(--void)}
.key:disabled{opacity:.45}
.tabs{position:fixed;inset:auto 0 0 0;display:flex;background:var(--deep);border-top:2px solid var(--frame2);
 padding:0 0 env(safe-area-inset-bottom);z-index:5}
.tabs a{flex:1;text-align:center;padding:12px 4px 10px;color:var(--dim);text-decoration:none;font:600 13px var(--pixel);position:relative}
.tabs a.on{color:var(--mint);box-shadow:inset 0 3px 0 var(--copper)}
.tabs .badge{position:absolute;top:6px;margin-left:2px;background:var(--red);color:var(--void);font:700 11px var(--body);padding:0 5px}
.lights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.light{background:var(--deep);border:2px solid var(--frame2);padding:12px 8px;text-align:center}
.light .dot{width:22px;height:22px;margin:0 auto 8px;background:var(--frame2)}
.light.ok .dot{background:var(--green);box-shadow:0 0 12px var(--green)}
.light.bad .dot{background:var(--red);box-shadow:0 0 14px var(--red);animation:pulse 1.2s steps(2) infinite}
.light.warn .dot{background:var(--amber)}
.light .t{font:700 14px var(--pixel)} .light .s{font-size:12px;color:var(--dim);margin-top:2px}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.light.bad .dot{animation:none}}
.row{border-top:1px solid var(--frame);padding:10px 0} .row:first-child{border-top:0}
.row.unseen{box-shadow:inset 3px 0 0 var(--red);padding-left:10px}
.meta{font-size:12px;color:var(--dim)}
.tag{display:inline-block;font:700 11px var(--body);text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;margin-right:6px;background:var(--frame2);color:var(--cream)}
.tag.red{background:var(--red);color:var(--void)} .tag.amber{background:var(--amber);color:var(--void)} .tag.host{background:var(--copper);color:var(--void)}
.line{white-space:pre-wrap;word-break:break-word;margin:4px 0}
.chat{display:flex;flex-direction:column;gap:2px}
.chat .msg{padding:6px 8px;background:var(--deep);border-left:3px solid var(--frame2)}
.chat .msg.flag{border-left-color:var(--red)} .chat .msg.mine{border-left-color:var(--copper)}
.say{position:fixed;inset:auto 0 calc(env(safe-area-inset-bottom) + 50px) 0;display:flex;gap:8px;padding:8px 16px;background:var(--void);border-top:2px solid var(--frame)}
.say input{flex:1} .say .key{margin:0}
.sheet{position:fixed;inset:0;background:rgba(11,10,18,.86);z-index:9;display:flex;align-items:flex-end}
.sheet .card{width:100%;margin:0;max-height:85vh;overflow:auto}
.toast{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 70px);background:var(--mint);color:var(--void);padding:10px 12px;font-weight:700;z-index:10}
.ts-box{margin:8px 0 0;min-height:0}
ol.check{padding-left:20px;margin:6px 0} ol.check li{margin:4px 0}
.gap{height:14px} .gap-say{height:70px}