/* desk.css — the NeverLogOff Desk.
   Dark (it stays open all day), one accent per kind of thing — same meanings as the stream:
   build = purple, race = amber, shipped = green, viewers = sky, demo/inbox = teal. Logical properties only (RTL-ready). */
:root {
  --bg: #060608; --card: #0E0E13; --hi: #16161D; --ink: #F2F2F5; --dim: #A1A1AA; --dimI: #85858F;
  --line: #1D1D25; --lineI: #34343E; --ok: #22C55E; --warn: #F59E0B; --bad: #F87171;
  --c-build: #8B5CF6; --c-race: #F59E0B; --c-ship: #22C55E; --c-vote: #38BDF8; --c-demo: #2DD4BF;
  --accent: var(--c-build);
  --font: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
}
[data-seg="build"] { --accent: var(--c-build); } [data-seg="race"] { --accent: var(--c-race); }
[data-seg="demo"] { --accent: var(--c-demo); } [data-seg="vote"] { --accent: var(--c-vote); }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--c-vote); outline-offset: 3px; border-radius: 6px; }
.hide { display: none !important; }
code { font: 500 0.92em var(--mono); background: var(--hi); border: 1px solid var(--lineI); border-radius: 6px; padding: 2px 6px; }

.bar { display: flex; align-items: center; gap: 14px; padding-block: 14px; padding-inline: 16px; background: #000; border-block-end: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { color: var(--ink); text-decoration: none; font: 700 19px var(--font); letter-spacing: -0.01em; }
.sep { inline-size: 1px; block-size: 20px; background: var(--lineI); }
.title { font: 600 16px var(--font); color: var(--dim); }
.grow { flex: 1; }
.conn { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--mono); color: var(--dim); }
.conn i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--dimI); }
.conn[data-state="on"] i { background: var(--ok); } .conn[data-state="bad"] i { background: var(--bad); }
button { font: 600 14px var(--font); color: #000; background: var(--ink); border: 0; border-radius: 999px; padding-block: 10px; padding-inline: 18px; cursor: pointer; }
button.ghost { background: transparent; color: var(--dim); border: 1px solid var(--lineI); padding-block: 6px; padding-inline: 12px; font-size: 13px; }
button:disabled { opacity: .5; cursor: default; }

main { max-inline-size: 1320px; margin-inline: auto; padding-inline: 16px; padding-block: 24px 64px; }
.pair { max-inline-size: 620px; margin-inline: auto; }
.pair h1 { font: 700 32px/1.15 var(--font); letter-spacing: -0.02em; margin-block: 12px 8px; }
.lead { color: var(--dim); font-size: 17px; }
.steps { padding-inline-start: 22px; color: var(--ink); } .steps li { margin-block: 8px; }
.pairform { display: grid; gap: 12px; margin-block: 20px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.pairform label { color: var(--dim); font-size: 14px; }
#code { font: 600 28px var(--mono); letter-spacing: 0.3em; padding-block: 10px; padding-inline: 14px; border-radius: 10px; border: 1px solid var(--lineI); background: var(--bg); color: var(--ink); inline-size: 100%; }
.scope { border: 0; padding: 0; margin: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.scope label { color: var(--ink); }
.msg { min-block-size: 1.4em; margin: 0; color: var(--dim); }
.msg.bad { color: var(--bad); } .msg.ok { color: var(--ok); }
.note { color: var(--dimI); font-size: 13px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 16px; }
.win { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding-block: 16px 18px; padding-inline: 18px; min-inline-size: 0; border-block-start: 3px solid var(--accent); }
.win h2 { margin-block: 0 12px; font: 600 13px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.big { font: 650 24px/1.2 var(--font); letter-spacing: -0.01em; }
.pill { display: inline-block; font: 600 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding-block: 3px; padding-inline: 9px; border-radius: 999px; border: 1px solid var(--lineI); color: var(--dim); }
.pill.live { border-color: var(--bad); color: var(--bad); } .pill.ok { border-color: var(--ok); color: var(--ok); } .pill.acc { border-color: var(--accent); color: var(--accent); }
.list { display: flex; flex-direction: column; gap: 8px; margin-block-start: 10px; }
.row { display: flex; align-items: baseline; gap: 12px; padding-block: 8px; border-block-start: 1px solid var(--line); min-inline-size: 0; }
.row:first-child { border-block-start: 0; }
.row .l { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .v { font: 600 14px var(--mono); color: var(--accent); }
.dot { inline-size: 12px; block-size: 12px; border-radius: 50%; flex: none; }
.q { background: var(--hi); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-block-start: 10px; }
.q .qt { font-weight: 600; overflow-wrap: anywhere; }
.q .ctx { color: var(--dim); font-size: 13px; white-space: pre-wrap; margin-block-start: 6px; max-block-size: 7.5em; overflow: hidden; }
.chip { display: inline-block; margin-block-start: 8px; font: 600 12px var(--mono); padding-block: 3px; padding-inline: 8px; border-radius: 6px; background: rgba(245,158,11,.14); color: var(--warn); border: 1px solid rgba(245,158,11,.4); }
.q textarea, .q input[type=text] { inline-size: 100%; margin-block-start: 8px; background: var(--bg); color: var(--ink); border: 1px solid var(--lineI); border-radius: 8px; padding: 8px 10px; font: 400 14px var(--font); }
.q .act { display: flex; gap: 10px; align-items: center; margin-block-start: 8px; flex-wrap: wrap; }
.q .act label { color: var(--dim); font-size: 13px; }
.banner { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-block-end: 10px; }
.empty { color: var(--dim); }
/* phones: the connection text shortens to its light, the header never scrolls sideways */
@media (max-width: 560px) {
  .bar { flex-wrap: wrap; row-gap: 8px; }
  #connText { display: none; }
  .title { display: none; }
  .sep { display: none; }
}

/* ---- 2026-10-01: phone through NeverLogOff, Bot, Files, Add your phone ---- */
[data-seg="ship"] { --accent: var(--c-ship); }
.conn[data-state="away"] i { background: var(--warn); }
.act { display: flex; gap: 10px; align-items: center; margin-block-start: 8px; flex-wrap: wrap; min-inline-size: 0; }
#botForm label { color: var(--dim); font-size: 13px; }
.reply { white-space: pre-wrap; overflow-wrap: anywhere; margin-block-start: 8px; padding-block: 8px; padding-inline: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font: 400 13px/1.5 var(--mono); max-block-size: 22em; overflow: auto; }
.when { color: var(--dimI); font: 500 12px var(--mono); }
.pill.bad { border-color: var(--bad); color: var(--bad); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-inline-size: 0; }
.crumbs button { background: transparent; color: var(--accent); padding-block: 4px; padding-inline: 6px; font-size: 13px; border-radius: 6px; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs .here { color: var(--ink); font: 600 13px var(--font); padding-inline: 6px; overflow-wrap: anywhere; }
.crumbs .gt { color: var(--dimI); }
button.frow { display: flex; align-items: baseline; gap: 12px; inline-size: 100%; text-align: start; background: transparent; color: var(--ink); font: 400 14px var(--font); border-radius: 8px; padding-block: 8px; padding-inline: 8px; border-block-start: 1px solid var(--line); }
button.frow:first-child { border-block-start: 0; }
button.frow:hover { background: var(--hi); }
button.frow .l { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.frow .v { font: 500 12px var(--mono); color: var(--dim); flex: none; }
button.frow.dir .l { color: var(--accent); font-weight: 600; }
.phoneadd { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.qr { inline-size: min(100%, 280px); margin-block: 12px 4px; background: #fff; border-radius: 10px; overflow: hidden; }
.qr svg { display: block; inline-size: 100%; block-size: auto; }
.linktext { display: block; overflow-wrap: anywhere; word-break: break-all; font-size: 12px; margin-block-start: 6px; }
.conn { min-inline-size: 0; } #connText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#toDesk { margin-block-start: 12px; }
@media (max-width: 560px) {
  /* through NeverLogOff the light alone is not enough: say it, on its own line if needed */
  .conn[data-mode="relay"] #connText { display: inline; }
  .win { padding-inline: 14px; }
  main { padding-inline: 12px; }
}

/* ---- 2026-10-01 (review fixes): the computer's code, shown on both screens before a phone connects ---- */
.fp { font: 600 12px var(--mono); color: var(--dim); letter-spacing: 0.08em; white-space: nowrap; }
.fprow { margin-block: 10px; color: var(--dim); }
/* review 2: the code is 16 characters (XXXX-XXXX-XXXX-XXXX) — sized to stay on one line at 360 px */
.fpbig { display: inline-block; font: 700 clamp(15px, 4.4vw, 22px) var(--mono); letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; max-inline-size: 100%; }
#linkConfirmBox .act { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- 2026-10-02: On air controls (Operator window). Big targets (>= 44 px), wraps to one column at 360 px ---- */
.opstate { min-block-size: 2.4em; }
.opstate .row .l { white-space: normal; overflow-wrap: anywhere; }
.opgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-block: 6px 12px; }
button.opb { min-block-size: 48px; border-radius: 12px; background: var(--hi); color: var(--ink); border: 1px solid var(--lineI); font: 600 14px/1.25 var(--font); padding-block: 8px; padding-inline: 12px; text-align: center; overflow-wrap: anywhere; }
button.opb:hover:not(:disabled) { border-color: var(--accent); }
button.opb.ok { border-color: rgba(34,197,94,.55); color: var(--ok); }
button.opb.small { min-block-size: 44px; min-inline-size: 64px; flex: none; padding-inline: 10px; }
.oprow { align-items: center; }
.oprow .l { white-space: normal; overflow-wrap: anywhere; }
#opSayBox select { min-block-size: 44px; background: var(--bg); color: var(--ink); border: 1px solid var(--lineI); border-radius: 8px; padding-inline: 8px; font: 400 14px var(--font); }
#opSayBox input[type=text] { min-block-size: 44px; }
#opSayBox .act button { min-block-size: 44px; }
.oppanic { margin-block: 4px 14px; padding-block-end: 12px; border-block-end: 1px solid var(--line); } /* 2026-10-03: first in the window */
button.panic { inline-size: 100%; min-block-size: 56px; border-radius: 14px; background: #7F1D1D; color: #FFF; border: 2px solid var(--bad); font: 700 16px var(--font); letter-spacing: 0.04em;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background-image: linear-gradient(90deg, #DC2626, #DC2626); /* white text stays >= 4.5:1 while it fills */ background-repeat: no-repeat; background-size: 0% 100%; }
button.panic.holding { background-size: 100% 100%; transition: background-size 1.5s linear; }
#opPanicConfirm .act button { flex: 1 1 140px; min-block-size: 48px; }
#opMsg { margin-block-start: 10px; }
@media (prefers-reduced-motion: reduce) { button.panic.holding { transition: none; outline: 3px solid var(--warn); } }
/* 2026-10-02 blind review F4: only the pressed button shows it is waiting */
button.opb.busy, button.panic.busy { opacity: .7; cursor: progress; }
/* 2026-10-03 review: the held state is from an older read (no answer since) */
.opstate .banner { margin-block: 0 8px; }

/* ---- 2026-10-05: Phone & guests. Same big targets as the On air controls; the waiting-room picture is muted and never on air ---- */
#phRun button, #phStopConfirm button { min-block-size: 48px; }
#phStopConfirm .act button { flex: 1 1 140px; }
#phAskForm .act { flex-wrap: nowrap; }
#phAskForm input[type=text] { margin-block-start: 0; min-block-size: 44px; flex: 1; min-inline-size: 0; }
#phAskForm button, #phAddBox button, #phLinkBox button, #phAddBtn { min-block-size: 44px; }
.phguest .act { margin-block-start: 0; }
.phguest .qt { overflow-wrap: anywhere; }
video.phprev { display: block; inline-size: min(100%, 320px); aspect-ratio: 16 / 9; margin-block-start: 10px; background: #000; border-radius: 8px; border: 1px solid var(--lineI); }
#phPanicSlot .oppanic { margin-block-start: 8px; }