/* Additive display: black is transparent, so keep the background pure black
   and draw everything in bright colours. */
:root {
  --fg: #eef4ff;
  --dim: #8fa3c0;
  --accent: #5cc8ff;
  --ok: #7dffa8;
  --warn: #ffcf5c;
  --bad: #ff7a7a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--fg); }
body { font: 18px/1.3 system-ui, sans-serif; }
main { width: 100%; max-width: 600px; height: 100vh; max-height: 600px; margin: 0 auto; padding: 12px; overflow: hidden; }
.view { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.view[hidden] { display: none; }
h1 { font-size: 24px; margin: 0 0 4px; color: var(--accent); }
.hint, .quiet { color: var(--dim); }
code { color: var(--warn); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: var(--dim); }
input {
  font: 22px/1.2 ui-monospace, monospace; color: var(--fg); background: #000;
  border: 2px solid var(--dim); border-radius: 8px; padding: 8px 10px;
}
button {
  font: 600 18px system-ui, sans-serif; color: var(--fg); background: #000;
  border: 2px solid var(--dim); border-radius: 8px; padding: 8px 12px; min-height: 44px;
}
button.primary { border-color: var(--accent); color: var(--accent); }
button:focus, input:focus { outline: none; border-color: var(--fg); background: var(--accent); color: #000; }
input:focus { background: #000; color: var(--fg); box-shadow: 0 0 0 3px var(--accent); }
.msg { min-height: 1.3em; margin: 0; color: var(--warn); }
.hint.small { font-size: 14px; margin: 0; text-align: center; }
.hint.ok { color: var(--ok); margin: 0; }

/* Digit picker */
.picker {
  display: flex; justify-content: center; gap: 6px; padding: 6px;
  border: 2px solid transparent; border-radius: 12px;
}
.picker:focus { outline: none; border-color: var(--accent); }
.slot {
  width: 54px; display: flex; flex-direction: column; align-items: center;
  border: 2px solid #3a4658; border-radius: 10px; padding: 2px 0;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
}
.slot.gap { margin-left: 14px; }
.slot .digit { font-size: 40px; line-height: 1.1; color: var(--fg); }
.slot .ghost { font-size: 16px; line-height: 1.2; min-height: 1.2em; color: var(--dim); }
.picker:focus .slot.active { border-color: var(--fg); }
.picker:focus .slot.active .digit { color: var(--accent); }
.slot.active { border-color: var(--dim); }
.bar { display: flex; justify-content: space-between; font-size: 14px; color: var(--dim); }
#status.running { color: var(--ok); }
#status.down { color: var(--bad); }
#screen {
  flex: 1; margin: 0; overflow: hidden; white-space: pre-wrap; word-break: break-all;
  font: 15px/1.25 ui-monospace, "DejaVu Sans Mono", monospace; color: var(--fg);
}

/* ---- main screen: output, prompt box, suggestions, keyboard, Claude keys ---- */
.view.main { gap: 5px; }
.bar { gap: 8px; }
#flash { flex: 1; text-align: center; color: var(--warn); }
.view.main #screen { font-size: 13px; line-height: 1.2; min-height: 0; border: 2px solid transparent; border-radius: 6px; }
.view.main #screen:focus { outline: none; border-color: var(--accent); overflow-y: auto; }
.compose { display: flex; gap: 6px; }
.compose textarea {
  flex: 1; height: 50px; resize: none; padding: 4px 8px;
  font: 15px/1.25 ui-monospace, "DejaVu Sans Mono", monospace; color: var(--ok); background: #000;
  border: 2px solid #3a4658; border-radius: 6px;
}
.compose textarea::placeholder { color: var(--dim); }
.compose textarea:focus { outline: none; border-color: var(--accent); box-shadow: none; }
.compose button { width: 84px; }
.sugg, .kb, .ctl { display: grid; gap: 4px; }
.sugg { grid-template-columns: repeat(5, 1fr); }
.kb { grid-template-columns: repeat(10, 1fr); }
.ctl { grid-template-columns: repeat(7, 1fr); }
.sugg button, .kb button, .ctl button { min-height: 31px; padding: 0 2px; font-size: 16px; border-radius: 6px; }
.sugg button { font: 14px ui-monospace, monospace; color: var(--ok); border-color: #2d5a3d; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sugg button:disabled { visibility: hidden; }
.kb button { border-color: #3a4658; }
.kb button.fn { color: var(--dim); font-size: 14px; }
.ctl button { border-color: #6b5a2a; color: var(--warn); }
.ctl button.quiet { color: var(--dim); border-color: #3a4658; }
.sugg button:focus, .kb button:focus, .ctl button:focus { background: var(--accent); color: #000; border-color: var(--fg); }

/* ---- sessions ---- */
.bar { align-items: center; }
.sess-btn { min-height: 26px; padding: 1px 10px; font-size: 14px; color: var(--accent); border-color: #2a4c66; border-radius: 6px; }
.sess-btn:focus { background: var(--accent); color: #000; }
#alert { color: var(--warn); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.ctl button.sess { color: var(--accent); border-color: #2a4c66; font-size: 14px; }
.zoom-only { display: none; }
.sess-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.sess-item { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-size: 20px; text-align: left; }
.sess-item.needs_input { border-color: var(--warn); }
.sess-item.needs_input span:last-child { color: var(--warn); }
.sess-item.working span:last-child { color: var(--ok); }
.sess-item.stopped { color: var(--dim); }
.sess-item.current { border-color: var(--accent); }

/* message box grows while you're in it */
.compose textarea { transition: height 120ms; }
.compose textarea:focus { height: 104px; }

/* focused coloured buttons: keep the label readable on the highlight */
.ctl button.sess:focus, .ctl button.quiet:focus { color: #000; }
.compose textarea { scrollbar-width: none; }
.short { display: none; }

/* ---- vision / zoom ----
   --fs (text px), --ui (control label px) and --btnh (control height) are
   set from your prescription in app.js. At ≥22 px text the body gets .zoom:
   keyboard and suggestions hide (dictate/draw instead), controls get big. */
:root { --fs: 15px; --ui: 16px; --btnh: 31px; }
body.zoom .sugg, body.zoom .kb, body.zoom #status, body.zoom #clock, body.zoom .hint.small { display: none; }
body.zoom .long { display: none; }
body.zoom .short { display: inline; }
body.zoom .zoom-only { display: block; }
body.zoom .view.main { gap: 6px; }
body.zoom .bar { gap: 6px; }
body.zoom .sess-btn { font-size: var(--ui); min-height: var(--btnh); padding: 0 10px; font-weight: 700; }
body.zoom #s-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
body.zoom #alert { font-size: var(--ui); max-width: 2.5em; }
body.zoom #flash:not(:empty) {
  position: fixed; left: 8px; right: 8px; top: calc(var(--btnh) + 16px); z-index: 5;
  font-size: var(--ui); font-weight: 700; padding: 8px; background: #000; border: 3px solid var(--warn); border-radius: 10px;
}
body.zoom .view.main #screen { font-size: var(--fs); line-height: 1.15; word-break: break-word; }
body.zoom .compose textarea { font-size: var(--ui); height: calc(var(--btnh) * 1.25); }
body.zoom .compose textarea:focus { height: calc(var(--btnh) * 2.2); }
body.zoom .compose textarea::placeholder { font-size: calc(var(--ui) * 0.6); }
body.zoom .compose button { width: calc(var(--ui) * 3.6); font-size: var(--ui); font-weight: 700; }
body.zoom .ctl { grid-template-columns: repeat(5, 1fr); gap: 6px; }
body.zoom .ctl button { min-height: var(--btnh); font-size: var(--ui); font-weight: 700; padding: 0; border-width: 3px; }
/* other screens */
body.zoom h1 { font-size: var(--ui); }
body.zoom .view > button, body.zoom .sess-item { font-size: var(--ui); min-height: var(--btnh); }
body.zoom .msg { font-size: calc(var(--ui) * 0.8); }
body.zoom .slot .digit { font-size: max(40px, min(var(--fs), 64px)); }
body.zoom .slot { width: auto; min-width: 0.9em; padding: 2px 4px; }
body.zoom .picker .slot { font-size: max(40px, min(var(--fs), 64px)); }

/* Text-size screen is always large, whatever the current setting. */
.view.vision { gap: 12px; }
.view.vision h1 { font-size: 34px; }
.view.vision .hint { font-size: 24px; margin: 0; text-align: center; }
.rx { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px;
  border: 3px solid #3a4658; border-radius: 14px; font: 700 56px ui-monospace, monospace; }
.rx:focus { outline: none; border-color: var(--accent); color: var(--accent); }
.rx-arrow { font-size: 40px; color: var(--dim); }
.rx-preview { font-family: ui-monospace, monospace; color: var(--ok); text-align: center; line-height: 1.1; min-height: 1.2em; overflow: hidden; white-space: nowrap; }
.view.vision > button { font-size: 30px; min-height: 64px; font-weight: 700; }