/* style.css — one stylesheet for all four pages (3D room HUD, diag, settings, remote).
   Dark "control-room" theme; the colour tokens intentionally match the protocol
   console palette in js/console.js so the DOM console and the canvas console read
   as the same instrument. */

:root {
  --bg: #0d1117;
  --panel: #161d26;
  --panel-edge: #263140;
  --ink: #d4dbe1;
  --ink-dim: #8a9aa8;
  --cyan: #39c5cf;   /* TX> */
  --amber: #e8a33d;  /* <RX */
  --green: #57ab5a;  /* cs OK / link up */
  --red: #e5534b;    /* cs BAD / link down */
  --grey: #768390;   /* --- link --- lines */
  --accent: #ffd54f; /* active preset button */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, sans-serif;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

/* ============================== room page (index.html) ============================== */

.room-page { overflow: hidden; height: 100vh; }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

/* HUD is a pointer-transparent overlay; only the nav links accept clicks so the
   canvas below keeps receiving pointer-lock / raycast clicks everywhere else. */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud .hud-top-right, #hud .hud-top-right a { pointer-events: auto; }

.hud-panel {
  position: absolute;
  background: rgba(13, 17, 23, 0.74);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 10px 14px;
  backdrop-filter: blur(3px);
}
.hud-top-left { top: 14px; left: 14px; min-width: 230px; }
.hud-top-right { top: 14px; right: 14px; display: flex; gap: 16px; font-size: 14px; }
.hud-row { margin: 3px 0; font-size: 14px; }

.lamp {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  margin-right: 8px; background: var(--grey); vertical-align: baseline;
}
.lamp.green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.lamp.red   { background: var(--red);   box-shadow: 0 0 8px var(--red); }
.lamp.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: blink 1s infinite; }
.lamp.grey  { background: var(--grey); }
@keyframes blink { 50% { opacity: 0.35; } }

.badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 10px; border-radius: 10px;
}
.badge.occupied { background: rgba(87, 171, 90, 0.2); color: #a5e8a8; border: 1px solid var(--green); }
.badge.vacant   { background: #2a333d; color: var(--ink-dim); border: 1px solid var(--panel-edge); }

#crosshair {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: #fff; font: 22px/1 "Consolas", monospace; text-shadow: 0 0 4px #000;
}
.hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(13, 17, 23, 0.74); border: 1px solid var(--panel-edge);
  border-radius: 8px; padding: 6px 16px; font-size: 13px; color: var(--ink-dim);
  white-space: nowrap;
}
#hud-toast {
  position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%);
  background: rgba(32, 22, 8, 0.92); border: 1px solid var(--amber); color: var(--amber);
  border-radius: 8px; padding: 8px 16px; font-size: 13px; max-width: 70vw;
}

/* ============================== shared page chrome (diag + settings) ============================== */

.page-head {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--panel-edge);
}
.page-head h1 { font-size: 17px; margin: 0; font-weight: 600; }
.sub { color: var(--ink-dim); font-size: 13px; } /* header subtitle + inline notes (diag sensor line) */
.page-head nav { margin-left: auto; display: flex; gap: 16px; font-size: 14px; }

.page {
  padding: 18px 22px; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  max-width: 1500px;
}
.panel {
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 10px; padding: 14px 16px;
}
.panel.wide { grid-column: 1 / -1; }
.panel h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-dim); margin: 0 0 10px; font-weight: 600;
}
.panel .note { font-size: 12px; color: var(--ink-dim); margin: 8px 0 0; }

.btn {
  background: #1f2937; color: var(--ink); border: 1px solid var(--panel-edge);
  border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer;
  font-family: inherit;
}
.btn:hover { border-color: var(--cyan); }
.btn:active { transform: translateY(1px); }
/* Active = CE belief (ui.active_button_id from preset_changed) — never set locally on click. */
.btn.active {
  background: var(--accent); color: #1a1206; border-color: var(--accent);
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.45); font-weight: 700;
}
/* Pending = clicked, awaiting the next preset_changed (or the 3 s timeout). */
.btn.pending { animation: pulse 0.7s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 14px var(--cyan); border-color: var(--cyan); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

#lights-grid { display: grid; gap: 5px; width: max-content; }
#lights-grid .cell {
  width: 38px; height: 38px; border-radius: 5px; display: grid; place-items: center;
  font: 11px "Consolas", monospace; background: #000; border: 1px solid #202830;
  color: var(--ink-dim); transition: background-color 0.15s linear;
}

#console-pre, #state-pre {
  background: #081019; border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 10px 12px; font: 12.5px/1.5 "Consolas", "Courier New", monospace;
  overflow: auto; white-space: pre; margin: 0; color: var(--ink);
}
#console-pre { max-height: 420px; min-height: 160px; }
#state-pre { max-height: 260px; }

/* ============================== settings page ============================== */

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tabs .btn.tab-active { background: var(--cyan); color: #06222a; border-color: var(--cyan); font-weight: 700; }

.form-table { width: 100%; border-collapse: collapse; }
.form-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-dim); padding: 4px 6px; font-weight: 600;
}
.form-table td { padding: 3px 6px; }
.form-table input, .field-grid input {
  width: 100%; background: #0d141c; color: var(--ink);
  border: 1px solid var(--panel-edge); border-radius: 6px; padding: 6px 8px;
  font: 13px "Consolas", monospace;
}
.form-table input:focus, .field-grid input:focus, #raw-text:focus { outline: 1px solid var(--cyan); }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.field-grid label { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 4px; }

#raw-text {
  width: 100%; min-height: 420px; background: #0d141c; color: var(--ink);
  border: 1px solid var(--panel-edge); border-radius: 8px; padding: 10px;
  font: 13px/1.5 "Consolas", monospace; resize: vertical;
}

.banner { border-radius: 8px; padding: 10px 14px; margin: 12px 0 0; font-size: 14px; }
.banner.ok  { background: rgba(87, 171, 90, 0.12); border: 1px solid var(--green); color: #9fdda2; }
.banner.err { background: rgba(229, 83, 75, 0.12); border: 1px solid var(--red); color: #f1a09b; }
.banner.err ul { margin: 6px 0 0 18px; padding: 0; }
.banner.err code { color: #ffc9c5; }

/* ============================== remote page (remote.html) ============================== */
/* The phone-first touch remote: thumb-sized targets (>= 48px) and a sticky status strip. */

.remote-status {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 10px 14px; font-size: 13px;
  background: rgba(13, 17, 23, 0.92); border-bottom: 1px solid var(--panel-edge);
  backdrop-filter: blur(4px);
}
.r-chip { color: var(--ink-dim); white-space: nowrap; }
.dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: #39424d; margin-right: 6px; vertical-align: -1px;
}
.dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }

.remote { display: grid; gap: 14px; padding: 14px; max-width: 560px; margin: 0 auto; }
/* manipulation kills iOS Safari's double-tap zoom on rapid repeat taps but keeps pinch-zoom. */
.remote .btn, .remote-status { touch-action: manipulation; }
.remote .btn { min-height: 48px; }
.btn.big {
  min-height: 56px; font-size: 16px; padding: 10px 16px; flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.scene-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.scene-grid .btn.big { justify-content: flex-start; }
/* Swatch = the preset's colour from load-controller memory (js/remote.js resolves it). */
.swatch {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: #2a333d; border: 1px solid rgba(255, 255, 255, 0.25);
}

#r-grid { display: grid; gap: 3px; }
#r-grid .r-cell {
  aspect-ratio: 1 / 1; border-radius: 3px; background: #000;
  border: 1px solid #1a222b; transition: background-color 0.15s linear;
}

/* Gateway-link toggle: the colour class is CE state (connection_status); label is intent. */
.btn.link-connected { border-color: var(--green); }
.btn.link-disconnected { border-color: var(--red); color: #f1a09b; }
.btn.link-reconnecting { border-color: var(--amber); animation: blink 1s infinite; }

#r-console {
  background: #081019; border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 8px 10px; margin: 0; font: 11px/1.5 "Consolas", "Courier New", monospace;
  white-space: pre; overflow-x: auto; color: var(--ink);
}

.remote-foot { display: flex; justify-content: center; gap: 22px; padding: 6px 0 20px; font-size: 14px; }

#r-toast {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 20;
  background: rgba(32, 22, 8, 0.94); border: 1px solid var(--amber); color: var(--amber);
  border-radius: 8px; padding: 8px 16px; font-size: 13px; max-width: 86vw;
}

/* ============================== touch controls (room page) ============================== */

#scene { touch-action: none; } /* a canvas drag is look-around, never a page scroll/zoom */
/* On touch the overview button is the only affordance (the hint text drops the "O" key),
   so give it a thumb-sized target; desktop keeps the compact inline-styled look. */
@media (pointer: coarse) {
  #overview-btn { min-height: 44px; min-width: 88px; font-size: 15px; touch-action: manipulation; }
}
#joystick {
  position: absolute; left: 18px; bottom: 18px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(38, 49, 64, 0.35);
  border: 1px solid rgba(122, 139, 153, 0.45);
  pointer-events: auto; touch-action: none;
}
#joystick-knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(212, 219, 225, 0.35);
  border: 1px solid rgba(212, 219, 225, 0.55);
}