/* amomii Broadcast, the phone page (v1.0, 2026-10-20). Light, fast, one-handed: big touch
   targets, one column, no sideways scroll. Workbench colors on a dark plum frame. */
:root{
  --band:#F5EFE3; --paper:#FFFFFF; --hair:#E2DCD2; --slate:#6B5F76; --ink:#0E0B12; --ink-2:#17121F;
  --plum:#1C1226; --plum-lift:#2C1B3E; --bone:#F0E9D8; --ash:#A79CB0;
  --pink:#F0508C; --ok:#2BB84A; --err:#E5534B; --gold-text:#8C6100;
  --yel-1:#FFE45C; --yel-2:#FFB81C; --yel-fill:#FFC21F;
  --display:"Archivo Black","Arial Black",sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0}
body{background:var(--band);color:var(--ink);font:16px/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:contain}
.app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1.15;margin:0}
button{font:600 16px var(--body);cursor:pointer;color:inherit}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:var(--plum);color:var(--bone)}
.brand{display:none}
.bar-t{flex:1;min-width:0;display:flex;flex-direction:column}
.bar-t b{font:400 18px var(--display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ash)}
.status i{width:9px;height:9px;border-radius:50%;background:var(--ash);flex:none}
.status.live i{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 1.8s infinite}
.status.live{color:var(--bone)}
.status.off i{background:var(--err)}
.status.wait i{background:var(--yel-2)}
@keyframes pulse{50%{opacity:.4}}
.menu-btn{width:46px;height:46px;border-radius:12px;border:1px solid #4a3a5e;background:transparent;color:var(--bone);font-size:24px;line-height:1;flex:none}
.banner{margin:10px 14px 0;padding:12px 14px;border-radius:14px;background:var(--yel-fill);color:var(--ink);font-weight:600;border:2px solid var(--ink-2);box-shadow:3px 3px 0 var(--ink-2)}
.banner.err{background:#FBE2DF}
.banner button{margin-top:8px;padding:8px 12px;border-radius:10px;border:2px solid var(--ink-2);background:var(--paper)}

/* ---------- join ---------- */
.join{padding:18px 16px 30px}
.join h1{font-size:26px;margin:6px 0 8px}
.join p{color:var(--slate)}
.joinform{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.joinform label{display:flex;flex-direction:column;gap:4px;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--slate)}
.joinform input{font:600 24px var(--mono);letter-spacing:.06em;padding:12px 14px;border-radius:12px;border:2px solid var(--ink-2);background:var(--paper);color:var(--ink);width:100%;text-transform:uppercase}
.joinform input:focus{outline:3px solid var(--yel-fill)}
.big{min-height:56px;border-radius:14px;border:2px solid var(--ink-2);background:var(--yel-fill);color:var(--ink);font:400 19px var(--display);box-shadow:4px 4px 0 var(--ink-2)}
.big:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink-2)}
.err{color:#B3261E;font-weight:600;min-height:1.4em}
.remembered h2{font-size:18px;margin:18px 0 8px}
.rem{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rem button.go{flex:1;text-align:left;min-height:54px;padding:8px 14px;border-radius:12px;border:2px solid var(--ink-2);background:var(--paper);box-shadow:3px 3px 0 var(--ink-2)}
.rem button.go small{display:block;font:500 12px var(--mono);color:var(--slate)}
.rem button.x{width:44px;height:44px;border-radius:12px;border:1px solid var(--hair);background:transparent;color:var(--slate);font-size:20px}

/* ---------- controller ---------- */
.ctl{padding:12px 14px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.watchnote{background:var(--plum-lift);color:var(--bone);border-radius:12px;padding:10px 12px;font-size:14px}
.items{display:flex;flex-direction:column;gap:12px}
.it{background:var(--paper);border:2px solid var(--ink-2);border-radius:18px;box-shadow:4px 4px 0 var(--ink-2);padding:12px 14px;min-width:0}
.it h3{font:700 15px var(--body);margin:0 0 8px;display:flex;justify-content:space-between;gap:8px}
.it h3 small{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--slate);align-self:center}
.it .hint{font-size:12.5px;color:var(--slate);margin-top:6px}
.it.watch .ctrl{pointer-events:none;opacity:.55}
.pressbtn{width:100%;min-height:96px;border-radius:16px;border:3px solid var(--ink-2);background:var(--yel-fill);font:400 24px var(--display);color:var(--ink);box-shadow:5px 5px 0 var(--ink-2);touch-action:none;user-select:none;-webkit-user-select:none}
.pressbtn.down{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink-2);background:var(--yel-2)}
.toggle{width:100%;min-height:84px;border-radius:16px;border:3px solid var(--ink-2);background:var(--band);display:flex;align-items:center;justify-content:space-between;padding:0 18px;font:400 22px var(--display);box-shadow:4px 4px 0 var(--ink-2)}
.toggle .knob{width:76px;height:42px;border-radius:99px;background:#d8d0c4;border:3px solid var(--ink-2);position:relative;transition:background .15s}
.toggle .knob::after{content:"";position:absolute;top:50%;transform:translateY(-50%);left:3px;box-sizing:border-box;width:32px;height:32px;border-radius:50%;background:var(--paper);border:2px solid var(--ink-2);transition:left .15s}
.toggle.on .knob{background:var(--ok)}
.toggle.on .knob::after{left:calc(100% - 35px)}   /* centered both ways (Shaun's test 2026-10-20) */
.slider{width:100%;height:56px;-webkit-appearance:none;appearance:none;background:transparent;touch-action:none}
.slider::-webkit-slider-runnable-track{height:16px;border-radius:99px;background:linear-gradient(90deg,var(--yel-fill) var(--p,50%),#E8E1D6 var(--p,50%));border:2px solid var(--ink-2)}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;margin-top:-16px;border-radius:50%;background:var(--paper);border:3px solid var(--ink-2);box-shadow:2px 2px 0 var(--ink-2)}
.slider::-moz-range-track{height:16px;border-radius:99px;background:#E8E1D6;border:2px solid var(--ink-2)}
.slider::-moz-range-progress{height:16px;border-radius:99px;background:var(--yel-fill)}
.slider::-moz-range-thumb{width:40px;height:40px;border-radius:50%;background:var(--paper);border:3px solid var(--ink-2)}
.valbig{font:600 15px var(--mono);color:var(--slate)}
.pad{position:relative;width:min(100%,280px);aspect-ratio:1;margin:0 auto;border-radius:20px;background:radial-gradient(circle,#fff 0,var(--band) 70%);border:3px solid var(--ink-2);touch-action:none}
.pad::before,.pad::after{content:"";position:absolute;background:var(--hair)}
.pad::before{left:50%;top:8%;bottom:8%;width:2px}
.pad::after{top:50%;left:8%;right:8%;height:2px}
.pad .thumb{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--yel-fill);border:3px solid var(--ink-2);box-shadow:3px 3px 0 var(--ink-2);left:50%;top:50%;z-index:1;pointer-events:none}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.swatches button{aspect-ratio:1.4;border-radius:12px;border:3px solid var(--ink-2)}
.swatches button.on{box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--ink-2)}
.colorrow{display:flex;gap:10px;align-items:center;margin-top:10px}
.colorrow input{width:64px;height:48px;border:3px solid var(--ink-2);border-radius:12px;padding:0;background:none}
.msgrow{display:flex;gap:8px}
.msgrow input{flex:1;min-width:0;font:600 18px var(--body);padding:12px;border-radius:12px;border:2px solid var(--ink-2)}
.msgrow button{min-width:84px;border-radius:12px;border:2px solid var(--ink-2);background:var(--yel-fill);box-shadow:3px 3px 0 var(--ink-2)}
.permbtn{width:100%;min-height:60px;border-radius:14px;border:2px solid var(--ink-2);background:var(--plum);color:var(--bone);font:600 17px var(--body)}
.tiltvis{display:flex;align-items:center;gap:14px}
.tiltvis .bubble{width:96px;height:96px;border-radius:50%;border:3px solid var(--ink-2);position:relative;background:var(--band);flex:none}
.tiltvis .bubble i{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--yel-fill);border:2px solid var(--ink-2);left:50%;top:50%}
.tiltvis .nums{font:600 14px var(--mono);color:var(--slate)}
.sensorflash{font:400 22px var(--display);padding:10px 0;transition:color .2s}
.sensorflash.hit{color:var(--pink)}
.meter{height:22px;border-radius:99px;border:2px solid var(--ink-2);background:var(--band);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yel-1),var(--yel-2));transition:width .08s}
.shownum{font:400 56px/1 var(--display);letter-spacing:-.03em;word-break:break-word}
.shownum small{font:600 20px var(--body);color:var(--slate);margin-left:6px}
.gauge svg{width:100%;max-width:280px;display:block;margin:0 auto}
.graph canvas{width:100%;height:150px;display:block}
.lamp{width:110px;height:110px;border-radius:50%;margin:4px auto;border:4px solid var(--ink-2);background:#D8D0C4;transition:background .1s, box-shadow .1s}
.lamp.on{background:var(--yel-1);box-shadow:0 0 34px var(--yel-2)}
.picwrap{position:relative;height:280px;overflow:hidden;border-radius:12px;background:var(--band);touch-action:none}
.picwrap img{position:absolute;max-height:250px;max-width:90%;transition:transform .09s linear;user-select:none;-webkit-user-drag:none;pointer-events:none}
.picwrap .nopic{position:absolute;inset:0;display:grid;place-items:center;color:var(--slate);font-size:14px;text-align:center;padding:20px}
.notes{display:flex;flex-direction:column;gap:6px}
.note{background:var(--band);border-radius:10px;padding:8px 10px;font-weight:600}
.note small{display:block;font:500 12px var(--mono);color:var(--slate)}
.readings{background:var(--paper);border:1px solid var(--hair);border-radius:14px;padding:10px 14px}
.readings summary{cursor:pointer;font-weight:600}
.readings .rd{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--hair);font-size:14px}
.readings .rd b{font:600 14px var(--mono)}
.delay{font-size:12px;color:var(--slate);text-align:center;margin:4px 0 0}
.empty{background:var(--paper);border:2px dashed var(--hair);border-radius:16px;padding:20px;text-align:center;color:var(--slate)}

/* ---------- sheets ---------- */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(14,11,18,.45);display:flex;align-items:flex-end;justify-content:center}
.sheet-in{width:100%;max-width:560px;background:var(--paper);border-radius:20px 20px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;max-height:85vh;overflow-y:auto}
.sheet-in h2{font-size:20px;margin:4px 4px 6px}
.sheet-row{min-height:54px;border-radius:14px;border:1px solid var(--hair);background:var(--band);text-align:left;padding:0 16px}
.sheet-row.danger{color:#B3261E}
.sheet-row.close{background:var(--ink);color:#fff;text-align:center}
.sheet-in ol{margin:0 0 8px;padding-left:22px}
.sheet-in li{margin:6px 0}
.flash{position:fixed;inset:0;pointer-events:none;background:var(--yel-1);opacity:0;z-index:30;transition:opacity .25s}
.flash.on{opacity:.75;transition:none}

/* preview inside the bench: no top padding for a notch */
body.preview .bar{padding-top:10px}
@media (min-width:700px){ .brand{display:block;font:700 13px var(--body)} .brand .wb{font:400 13px var(--display);letter-spacing:.06em;color:var(--yel-1)} }
/* v1.0.4: clearance between a sensor box (the tilt circle) and its permission button */
.it .permbtn{margin-top:14px}
/* v1.1.0: offline is shown plainly; controls are dimmed and switched off until the computer is back */
.offbar{background:#3A1420;color:#FFE1E6;border-radius:14px;padding:12px 14px;font-weight:600;border:2px solid var(--ink-2);box-shadow:3px 3px 0 var(--ink-2)}
.offbar::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--err);margin-right:8px;vertical-align:1px}
.items.off{opacity:.42;filter:grayscale(.7);pointer-events:none;transition:opacity .2s}
.once{background:var(--yel-fill);color:var(--ink) !important;border-radius:12px;padding:10px 12px;font-weight:600}