/* NodeDial styles. Copyright (c) 2026 Kerry Hodgkins. All rights reserved. See LICENSE. */
[hidden]{display:none!important}
/* Layout: one beige-black CRT on a dark desk, a USR-style LED strip and controls under it. Single dark world by design. */
:root{
  color-scheme: dark;
  --room:#0c0a09; --plastic:#1c1917; --plastic-hi:#2b2623; --edge:#3a332f;
  --ink:#c9bdb4; --dim:#7a6e67; --led-off:#2c1b18; --led-red:#ff4b3a; --led-grn:#59e36d;
  --focus:#ffcf5a;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--room);color:var(--ink);font:13px/1.4 var(--mono);margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;gap:12px;
  padding-inline:16px;padding-block:12px;overflow-x:hidden}
.rig{width:min(100%,1040px,calc((100vh - 190px) * 4 / 3),calc((100dvh - 190px) * 4 / 3));min-width:0;display:flex;flex-direction:column;gap:10px}
.crt{position:relative;width:100%;max-width:100%;aspect-ratio:4/3;background:#000;border-radius:18px;
  box-shadow:0 0 0 10px var(--plastic),0 0 0 11px var(--edge),0 18px 50px rgba(0,0,0,.7),inset 0 0 60px rgba(0,0,0,.9);overflow:hidden;cursor:text}
.crt canvas{position:absolute;inset:2.5% 2.5%;width:95%;height:95%;display:block}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%)}
.crt.noscan::after{background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%)}
#kb{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;resize:none;color:transparent;background:transparent;caret-color:transparent}
.crt:focus-within{outline:2px solid transparent}
.panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  background:linear-gradient(var(--plastic-hi),var(--plastic));border:1px solid var(--edge);border-radius:8px;padding:8px 12px}
.leds{display:flex;gap:10px;flex-wrap:wrap}
.led{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;letter-spacing:.08em;color:var(--dim)}
.led i{width:9px;height:9px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.led.on i{background:var(--led-red);box-shadow:0 0 6px var(--led-red)}
.led.g.on i{background:var(--led-grn);box-shadow:0 0 6px var(--led-grn)}
.modem{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;min-width:0}
.modem select{font:inherit;font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--ink);background:var(--room);border:1px solid var(--edge);border-radius:4px;padding:5px 6px;max-width:100%;min-width:0}
.modem select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ctl{display:flex;gap:6px;flex-wrap:wrap}
.ctl button{font:inherit;font-size:11px;letter-spacing:.06em;color:var(--ink);background:var(--room);border:1px solid var(--edge);border-radius:4px;padding:5px 9px;cursor:pointer}
.ctl button:hover{border-color:var(--dim)}
.ctl button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ctl button[aria-pressed="false"]{color:var(--dim)}
.fine{font-size:11px;color:var(--dim);text-align:center;max-width:80ch;text-wrap:balance}
.rotate{display:none}
@media (max-width:520px) and (orientation:portrait){.rotate{display:inline}}
.rig:fullscreen{width:100%;height:100%;justify-content:center;align-items:center;background:#000;padding:16px}
.rig:fullscreen .crt{width:min(100%,calc((100vh - 90px) * 4 / 3))}
.rig:fullscreen .panel{width:min(100%,calc((100vh - 90px) * 4 / 3))}
@media (max-width:520px){.modem span{display:none}.crt{border-radius:10px;box-shadow:0 0 0 5px var(--plastic),0 0 0 6px var(--edge)}}
@media (prefers-reduced-motion:reduce){.led.on i{box-shadow:none}}
.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}
.skip{position:absolute;left:16px;top:-48px;background:var(--plastic-hi);color:var(--ink);padding:8px 12px;border:1px solid var(--edge);border-radius:4px;z-index:5}
.skip:focus{top:12px}
.fine a{color:var(--ink)}
.callbar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;font-size:12px;margin:0;color:var(--dim)}
.callbar button{font:inherit;font-size:12px;color:var(--ink);background:#3a120f;border:1px solid #7a2a22;border-radius:4px;padding:6px 10px;cursor:pointer}
.callbar button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Touch: an extra-keys row under the screen, tighter margins, and a side-by-side layout when a phone is sideways. */
.keys{display:flex;gap:4px;justify-content:space-between}.keys button[data-key="Enter"]{flex-grow:1.8}
.keys button{flex:1 1 0;min-width:0;min-height:40px;font:inherit;font-size:12px;letter-spacing:0;white-space:nowrap;overflow:hidden;color:var(--ink);background:var(--plastic);border:1px solid var(--edge);border-radius:6px;padding:0 2px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.keys button:active{background:var(--plastic-hi)}
.keys button[aria-pressed="true"]{color:#0c0a09;background:var(--focus);border-color:var(--focus)}
.touch .crt{touch-action:manipulation}
.touch #b-kb{display:none}
@media (max-width:520px){body{padding-inline:8px;padding-block:8px;justify-content:flex-start}.rig{gap:12px}.crt{margin-top:6px}}
@media (orientation:landscape) and (max-height:520px){
  body{padding:6px 10px;justify-content:center}
  .rig{width:100%;max-width:1040px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-rows:min-content;align-content:center;column-gap:16px;row-gap:8px}
  .crt{grid-row:1 / span 6;width:calc((100dvh - 22px) * 4 / 3);border-radius:10px;box-shadow:0 0 0 5px var(--plastic),0 0 0 6px var(--edge)}
  .rig > :not(.crt){grid-column:2}
  .keys{flex-wrap:wrap}.keys button{flex:1 1 18%;min-height:36px}
  .panel{padding:6px 8px;gap:8px}.modem span{display:none}.modem select{max-width:100%}
  .fine{display:none}
}