/* Beep panel styles (from the finished prototype, john/index.html). */
:root {
  /* enclosure */
  --case: #eeece7;
  --case-hi: #f8f7f4;
  --case-lo: #e2dfd8;
  --case-edge: #cdc9bf;
  --legend: #26261f;
  --legend-soft: #5c5a51;
  /* LCD window */
  --lcd: #fcfdfa;
  --lcd-raised: #f2f5ef;
  --lcd-rule: #e1e7dc;
  --lcd-text: #18201b;
  --lcd-soft: #3e4a42;
  --lcd-dim: #64706a;
  --lcd-glow: #2b7a3c;
  --fault-ink: #c11d13;
  --warn-ink: #9a5b00;
  --tile-edge: #dce3d6;
  /* LEDs */
  --led-red: #e0251b;
  --led-amber: #efa51b;
  --led-green: #39c25a;
  --led-off: #c2beb4;
  /* keys */
  --key: #fdfcfa;
  --key-press: #e4e1d9;

  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans: "Barlow", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--case);
  color: var(--legend);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lcd-glow); color: var(--lcd); }
:focus-visible { outline: 2px solid var(--legend); outline-offset: 2px; }
.lcd :focus-visible { outline-color: var(--lcd-glow); }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- enclosure frame ---------- */
.panel {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 236px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--case-hi), transparent 60%),
    var(--case);
}

.panel > * { min-width: 0; }
.bezel {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 6px 2px;
}
.mark {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--cond);
}
.mark b { font-size: 32px; font-weight: 700; letter-spacing: .01em; line-height: 1; }
.mark span { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--legend-soft); }
.screws { flex: 1; height: 1px; background: linear-gradient(90deg, var(--case-edge) 0 0) center / 100% 1px no-repeat; opacity: .55; }
.clock { font: 500 13px/1 var(--mono); color: var(--legend-soft); font-variant-numeric: tabular-nums; }
.sample {
  font: 600 12px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 9px; border: 1px solid var(--case-edge); border-radius: 3px; color: var(--legend-soft);
}

/* engraved section legends */
.legend {
  font: 600 12px/1 var(--cond);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--legend-soft);
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--case-edge);
}

/* ---------- LED ---------- */
.led {
  width: 10px; height: 10px; border-radius: 50%;
  flex: none;
  background: var(--led-off);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.18), 0 0 0 1px rgba(40,38,30,.25);
}
.led.red   { background: var(--led-red);   box-shadow: 0 0 0 1px rgba(120,20,14,.45), 0 0 9px 1px rgba(224,37,27,.5); }
.led.amber { background: var(--led-amber); box-shadow: 0 0 0 1px rgba(120,76,0,.45), 0 0 9px 1px rgba(239,165,27,.45); }
.led.green { background: var(--led-green); box-shadow: 0 0 0 1px rgba(20,90,40,.45), 0 0 8px 1px rgba(57,194,90,.35); }
.led.flash { animation: flash 1.1s steps(1) infinite; }
@keyframes flash { 50% { background: var(--led-off); box-shadow: inset 0 1px 1px rgba(0,0,0,.18), 0 0 0 1px rgba(40,38,30,.25); } }

/* ---------- zones (agents) ---------- */
.zones { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.zone-list {
  list-style: none; margin: 0 0 18px; padding: 0; display: grid; flex: none; /* never squeezed: every zone stays visible, the column scrolls instead */
  background: var(--case-hi); border: 1px solid var(--case-edge); border-radius: 6px; overflow: hidden;
}
.zone-list li + li .zone { border-top: 1px solid var(--case-edge); }
.zone {
  width: 100%;
  display: grid;
  position: relative;
  grid-template-columns: 40px 1fr;
  align-items: center;
  column-gap: 11px;
  padding: 8px 26px 8px 8px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.zone:hover { background: var(--key); }
.zone[aria-pressed="true"] { background: var(--key-press); box-shadow: inset 0 2px 5px rgba(40,38,30,.14); }
.zone[aria-pressed="true"] .name { color: var(--legend); }
.zone .num { font: 500 12px/1 var(--mono); color: var(--legend-soft); }
.zone .name { font: 600 17px/1.1 var(--cond); letter-spacing: .02em; }
.zone .sub { grid-column: 2; font-size: 12.5px; line-height: 1.3; color: var(--legend-soft); margin-top: 2px; }
.zone .zl { display: flex; gap: 7px; align-items: baseline; }
.zone .buddy { grid-row: 1 / span 2; }
.zone > .led { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; }

/* detector-head buddies: one shared face, a colour and accessory per agent */
.buddy { display: block; flex: none; }
.gutter .buddy { margin-left: -3px; }
.idle .buddy { margin: 0 auto 18px; }
.thinking { margin: 0 0 22px; }
.thinking .tk { display: flex; align-items: center; gap: 12px; min-height: 34px; font: 500 12.5px/1.4 var(--mono); color: var(--lcd-soft); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--lcd-glow); animation: dot 1.1s var(--ease) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.reply { margin: 0 0 22px; }
.reply p { margin: 0; color: var(--lcd-soft); max-width: 66ch; }
.reply strong { color: var(--lcd-text); font-weight: 600; }
.small-event h3 { margin: 4px 0 4px; font: 600 20px/1.15 var(--cond); }
.small-event p { margin: 0; color: var(--lcd-soft); font-size: 14px; }

.history { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; min-height: 96px; }
.history li {
  display: grid; grid-template-columns: 98px 1fr auto; gap: 8px; align-items: baseline;
  padding: 6px 2px; border-bottom: 1px dashed var(--case-edge); font-size: 13px;
}
.history .ref { font: 500 12px/1.3 var(--mono); white-space: nowrap; }
.history .when { font: 400 11.5px/1 var(--mono); color: var(--legend-soft); font-variant-numeric: tabular-nums; }
.history .done { color: var(--legend-soft); }
.history .done .ref::before {
  content: ""; display: inline-block; width: 4px; height: 8px; margin: 0 7px 1px 1px;
  border: solid var(--led-green); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.history .new { animation: newrow .9s var(--ease); }
@keyframes newrow { from { background: rgba(239,165,27,.35); } to { background: transparent; } }
.zones, .history, .indicators, .zone-list { scrollbar-width: thin; scrollbar-color: var(--case-edge) transparent; }
.zones::-webkit-scrollbar, .history::-webkit-scrollbar, .indicators::-webkit-scrollbar, .zone-list::-webkit-scrollbar, .quick::-webkit-scrollbar { height: 6px; width: 6px; }
.zones::-webkit-scrollbar-thumb, .history::-webkit-scrollbar-thumb, .indicators::-webkit-scrollbar-thumb, .zone-list::-webkit-scrollbar-thumb { background: var(--case-edge); border-radius: 3px; }
.log::-webkit-scrollbar, .quick::-webkit-scrollbar { width: 6px; height: 6px; }
.log::-webkit-scrollbar-thumb, .quick::-webkit-scrollbar-thumb { background: var(--lcd-rule); border-radius: 3px; }

/* ---------- LCD window ---------- */
.lcd {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  background: var(--lcd);
  color: var(--lcd-text);
  border-radius: 10px;
  border: 1px solid var(--case-edge);
  box-shadow:
    0 0 0 6px var(--case-lo),
    0 0 0 7px var(--case-edge),
    0 10px 30px rgba(60,58,48,.10),
    inset 0 1px 6px rgba(40,50,42,.07);
  overflow: hidden;
}
.lcd ::selection { background: var(--lcd-glow); color: var(--lcd); }
.lcd-status {
  display: flex; gap: 18px; align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--lcd-rule);
  font: 500 12px/1 var(--mono);
  color: var(--lcd-glow);
  letter-spacing: .02em;
}
.lcd-status .agent { color: var(--lcd-text); }
.lcd-status .spacer { flex: 1; }
.lcd-status .dim { color: var(--lcd-dim); }

.log {
  overflow: auto;
  padding: 22px 0 18px;
  scrollbar-color: var(--lcd-rule) transparent;
  scrollbar-width: thin;
}
.log-inner { width: min(780px, 100% - 48px); margin: 0 auto; }

.ask, .event, .reply, .thinking {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start;
}
.ask { margin: 0 0 22px; padding: 0 0 14px; border-bottom: 1px dashed var(--lcd-rule); }
.gutter { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font: 500 12px/1.3 var(--mono); color: var(--lcd-dim); font-variant-numeric: tabular-nums; }
.gutter .evno { color: var(--lcd-glow); }
.ask p { margin: 0; font-size: 15.5px; color: var(--lcd-text); }
.ask p::before { content: "› "; color: var(--lcd-glow); font-family: var(--mono); }

.event { margin: 0 0 26px; }
.meta { margin: -8px 0 18px; font: 500 12px/1.4 var(--mono); color: var(--lcd-dim); }

.verdict {
  font: 600 clamp(26px, 2.6vw, 34px)/1.08 var(--cond);
  letter-spacing: .01em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.verdict .led { display: inline-block; vertical-align: .18em; margin-right: 12px; }
.lede { margin: 0 0 20px; color: var(--lcd-soft); max-width: 66ch; }
.lede strong { color: var(--lcd-text); font-weight: 600; }

/* ruled result rows: columns never move, state restyles the row */
.rows { border-top: 1px solid var(--lcd-rule); margin: 0 0 24px; }
.row {
  display: grid;
  grid-template-columns: 14px 150px minmax(0, 1fr) 170px;
  gap: 14px;
  align-items: baseline;
  padding: 11px 4px;
  border-bottom: 1px solid var(--lcd-rule);
}
.row .led { align-self: center; }
.row .check { font: 600 15px/1.2 var(--cond); letter-spacing: .04em; text-transform: uppercase; color: var(--lcd-soft); }
.row .result { font-size: 14.5px; }
.row .refs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.row.fault .check { color: var(--fault-ink); }
.row.warn .check { color: var(--warn-ink); }

.ref-chip {
  font: 500 11.5px/1 var(--mono);
  padding: 4px 6px;
  border-radius: 3px;
  background: var(--lcd-raised);
  color: var(--lcd-text);
  border: 1px solid var(--tile-edge);
  text-decoration: none;
  white-space: nowrap;
}
.ref-chip:hover { border-color: var(--lcd-glow); color: var(--lcd-glow); }

.actions-title { font: 600 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); margin: 0 0 10px; }
.actions { margin: 0 0 26px; padding-left: 20px; color: var(--lcd-soft); }
.actions li { margin-bottom: 6px; padding-left: 4px; }
.actions li::marker { font: 500 12px var(--mono); color: var(--lcd-dim); }
.actions strong { color: var(--lcd-text); font-weight: 600; }

/* proposed change: the one red thing */
.proposal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
  padding: 16px 18px;
  margin: 0 0 12px;
  border: 1px solid rgba(224,37,27,.55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(224,37,27,.09), rgba(224,37,27,.03));
}
.p-face { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.proposal h3 { margin: 0 0 6px; font: 600 21px/1.15 var(--cond); letter-spacing: .01em; }
.proposal p { margin: 0; color: var(--lcd-soft); font-size: 14px; max-width: 62ch; }
.keys { display: flex; gap: 10px; }
.key {
  min-width: 108px;
  padding: 11px 16px 10px;
  border-radius: 6px;
  font: 600 15px/1 var(--cond);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--case-edge);
  transition: background .14s, box-shadow .14s, filter .14s;
}
.key.approve { background: var(--lcd-text); color: var(--lcd); border-color: var(--lcd-text); box-shadow: inset 0 -2px 0 rgba(0,0,0,.35); }
.key.reject { background: var(--key); color: var(--lcd-text); box-shadow: inset 0 -2px 0 rgba(40,38,30,.10); }
.key:hover { filter: brightness(1.06); }
.key:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.25); filter: brightness(.96); }
.key:disabled { opacity: .45; cursor: not-allowed; }

/* 1. pending change docked above the composer: always in view */
.dock {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 9px 10px; margin: 0 0 10px;
  border: 1px solid rgba(224,37,27,.55); border-radius: 8px; background: rgba(224,37,27,.07);
}
.dock[hidden] { display: none; }
.dock .t { font: 600 16px/1.2 var(--cond); letter-spacing: .01em; }
.dock .s { font-size: 12.5px; color: var(--lcd-soft); }
.dock .key { min-width: 0; padding: 9px 14px 8px; font-size: 14px; }
.proposal.resolved { border-color: var(--lcd-rule); background: var(--lcd-raised); }
.proposal .outcome { grid-column: 1 / -1; font: 500 12.5px/1.4 var(--mono); color: var(--lcd-glow); display: none; }
.proposal.resolved .outcome { display: block; }

/* empty state for an idle agent: the Grok-style centred greeting */
.idle {
  min-height: 100%;
  display: grid; place-content: center; text-align: center;
  padding: 40px 24px;
}

.idle h2 { font: 600 clamp(34px, 4vw, 52px)/1 var(--cond); margin: 0 0 12px; letter-spacing: .01em; }
.idle p { margin: 0 auto; max-width: 52ch; color: var(--lcd-soft); }
.idle ul { list-style: none; padding: 0; margin: 22px auto 0; display: grid; gap: 8px; max-width: 460px; text-align: left; }
.idle li { display: flex; gap: 10px; color: var(--lcd-soft); font-size: 14px; }
.idle li::before { content: ""; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--lcd-glow); flex: none; }

/* composer, centred on the LCD base */
.composer { padding: 12px 0 18px; border-top: 1px solid var(--lcd-rule); background: linear-gradient(180deg, rgba(252,253,250,0), var(--lcd) 30%); }
.composer-inner { width: min(780px, 100% - 48px); margin: 0 auto; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.quick button {
  padding: 7px 11px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--tile-edge);
  color: var(--lcd-soft);
  font: 500 13.5px/1 var(--sans);
  transition: border-color .15s, color .15s, background .15s;
}
.quick button:hover { border-color: var(--lcd-glow); color: var(--lcd-text); background: var(--lcd-raised); }
.prompt {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 10px 10px 16px;
  border-radius: 14px;
  background: var(--lcd-raised);
  border: 1px solid var(--tile-edge);
  box-shadow: 0 2px 8px rgba(40,50,42,.05);
  transition: border-color .2s;
}
.prompt:focus-within { border-color: var(--lcd-glow); }
.prompt textarea {
  flex: 1; resize: none; border: 0; outline: 0; background: transparent;
  color: var(--lcd-text); caret-color: var(--lcd-glow);
  font: 400 16px/1.45 var(--sans);
  padding: 6px 0; min-height: 30px; max-height: 160px;
  overflow-y: hidden;
}
.prompt textarea::placeholder { color: var(--lcd-dim); }
.send {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--lcd-text); color: var(--lcd); border: 0;
  transition: transform .14s var(--ease), filter .14s;
}
.send:hover { filter: brightness(1.08); }
.send:active { transform: translateY(1px); }
.fine { margin: 8px 2px 0; font: 400 12px/1.4 var(--sans); color: var(--lcd-dim); }

/* ---------- view keys: Panel / Schedules / Beeps ---------- */
.modes { display: flex; border: 1px solid var(--case-edge); border-radius: 6px; overflow: hidden; background: var(--case-hi); }
.mode {
  padding: 7px 13px 6px; border: 0; background: transparent;
  font: 600 13px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--legend-soft);
  transition: background .15s, color .15s, box-shadow .15s;
}
.mode + .mode { border-left: 1px solid var(--case-edge); }
.mode:hover { background: var(--key); color: var(--legend); }
.mode[aria-pressed="true"] { background: var(--key-press); color: var(--legend); box-shadow: inset 0 2px 5px rgba(40,38,30,.14); }
.sample .short { display: none; }
.panel.in-sched .lcd-status .buddy, .panel.in-beeps .lcd-status .buddy { display: none; }

/* ---------- beeps view: names and colours ---------- */
.beep-list { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--lcd-rule); }
.beep-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--lcd-rule); }
.beep-row.flash { animation: newrow 1.2s var(--ease); }
.beep-row .buddy { grid-row: span 2; }
.beep-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.beep-name .num { font: 500 12px/1 var(--mono); color: var(--lcd-dim); }
.beep-name input {
  min-width: 0; width: min(280px, 100%); font: 600 21px/1.15 var(--cond); letter-spacing: .01em; color: var(--lcd-text);
  background: var(--lcd-raised); border: 1px solid var(--tile-edge); border-radius: 8px; padding: 4px 10px;
  transition: border-color .15s, background .15s;
}
.beep-name input:hover { border-color: var(--lcd-dim); }
.beep-name input:focus { outline: none; border-color: var(--lcd-glow); background: var(--lcd-raised); }
.beep-job { grid-column: 2; margin: 0; }
.beep-job { font-size: 13px; color: var(--lcd-dim); }
.swatches { grid-column: 3; grid-row: 1; display: grid; grid-template-columns: repeat(6, 24px); gap: 7px; }
.swatch { width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); transition: box-shadow .12s; }
.swatch:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--lcd), 0 0 0 3px var(--lcd-dim); }
.swatch:focus-visible { outline: 2px solid var(--lcd-text); outline-offset: 3px; }
.swatch-name { grid-column: 3; justify-self: end; margin: 0; font-size: 12.5px; color: var(--lcd-dim); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--lcd), 0 0 0 4px var(--lcd-text); }
.beep-reset { grid-column: 2; justify-self: start; padding: 6px 10px 5px; border: 1px solid var(--tile-edge); border-radius: 4px; background: transparent; font: 600 13px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--lcd-soft); }
.beep-reset:hover { border-color: var(--lcd-glow); color: var(--lcd-text); background: var(--lcd-raised); }
.beep-reset[hidden] { display: none; }

/* ---------- schedules board ---------- */
.board-head h2 { font: 600 clamp(26px, 2.6vw, 34px)/1.08 var(--cond); letter-spacing: .01em; margin: 0 0 8px; }
.board-head p { margin: 0 0 18px; color: var(--lcd-soft); max-width: 66ch; }
.sched-list { list-style: none; margin: 0 0 26px; padding: 0; border-top: 1px solid var(--lcd-rule); }
.sched { border-bottom: 1px solid var(--lcd-rule); }
.sched.flash { animation: newrow 1.2s var(--ease); }
.sched-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 196px 120px auto; gap: 14px; align-items: center; padding: 12px 4px; }
.sched-row .who b { font: 600 17px/1.1 var(--cond); letter-spacing: .02em; }
.sched-row .who p { margin: 2px 0 0; font-size: 14.5px; color: var(--lcd-text); }
.sched-row .who small { display: block; margin-top: 3px; font: 500 11.5px/1.3 var(--mono); color: var(--lcd-dim); }
.sched-row .when { font: 500 12.5px/1.35 var(--mono); color: var(--lcd-text); font-variant-numeric: tabular-nums; }
.sched-row .when span { display: block; color: var(--lcd-dim); font-size: 11.5px; white-space: nowrap; }
.sched-row .to { font-size: 13px; color: var(--lcd-soft); line-height: 1.35; }
.sched.off .who, .sched.off .when, .sched.off .to { opacity: .55; }
.sched-actions { display: flex; align-items: center; gap: 10px; }
.edit-btn { padding: 6px 10px 5px; border: 1px solid var(--tile-edge); border-radius: 4px; background: transparent; font: 600 13px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--lcd-soft); }
.edit-btn:hover, .edit-btn[aria-expanded="true"] { border-color: var(--lcd-glow); color: var(--lcd-text); background: var(--lcd-raised); }
/* latching key: raised and labelled Paused when off, pressed in and labelled On when running */
.switch {
  min-width: 74px; padding: 6px 10px 5px; border-radius: 4px; border: 1px solid var(--case-edge);
  background: var(--key); color: var(--lcd-soft); box-shadow: inset 0 -2px 0 rgba(40,38,30,.10);
  font: 600 13px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s, box-shadow .15s, color .15s;
}
.switch:hover { color: var(--lcd-text); }
.switch[aria-checked="true"] { background: var(--key-press); color: var(--lcd-text); box-shadow: inset 0 2px 5px rgba(40,38,30,.18); }
.editor { display: none; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 4px 4px 18px 58px; }
.sched.open .editor { display: grid; }
.editor label, .editor .lab { display: block; font: 600 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); margin: 0 0 7px; }
.editor .full { grid-column: 1 / -1; }
.editor textarea, .editor select, .editor input[type="time"] {
  width: 100%; font: 400 14.5px/1.5 var(--sans); color: var(--lcd-text); background: var(--lcd-raised);
  border: 1px solid var(--tile-edge); border-radius: 8px; padding: 9px 11px;
}
.editor textarea { min-height: 96px; resize: vertical; field-sizing: content; max-height: 320px; scrollbar-width: thin; scrollbar-color: var(--lcd-rule) transparent; }
.editor textarea::-webkit-scrollbar { width: 6px; }
.editor textarea::-webkit-scrollbar-thumb { background: var(--lcd-rule); border-radius: 3px; }
.editor textarea:focus, .editor select:focus, .editor input:focus { outline: none; border-color: var(--lcd-glow); }
.editor .whenset { display: grid; grid-template-columns: 1.4fr 1fr .9fr; gap: 8px; }
.editor .checks-row { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--lcd-soft); }
.editor .checks-row input { accent-color: var(--lcd-glow); margin-right: 6px; }
.editor .keys { grid-column: 1 / -1; justify-content: flex-end; }
.editor .note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--lcd-dim); }
.draft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 16px; padding: 16px 18px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); margin: 0 0 22px; }
.draft h3 { margin: 0 0 4px; font: 600 21px/1.15 var(--cond); }
.draft dl { margin: 10px 0 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 14px; font-size: 14.5px; }
.draft dt { font: 600 12px/1.6 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.draft dd { margin: 0; }
.draft .keys { grid-column: 1 / -1; justify-content: flex-end; }
.draft.saved .keys { display: none; }
.draft .outcome { grid-column: 1 / -1; margin: 0; font: 500 12.5px/1.4 var(--mono); color: var(--lcd-glow); display: none; }
.draft.saved .outcome { display: block; }

/* ---------- indicators ---------- */
.indicators { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow: auto; }
.common { display: grid; gap: 6px; }
.common div {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 10px;
  background: var(--case-hi);
  border: 1px solid var(--case-edge);
  border-radius: 4px;
}
.common span { font: 600 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.common b { font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.facts { margin: 0; display: grid; gap: 10px; }
.facts div { display: grid; gap: 2px; }
.facts dt { font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--legend-soft); }
.facts dd { margin: 0; font-size: 13.5px; line-height: 1.35; }
.checks { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--legend); }
.checks li { margin-bottom: 4px; }

/* ---------- event arrival motion (only when JS adds .arriving) ---------- */
.arriving .gutter, .arriving .verdict, .arriving .lede, .arriving .meta, .arriving .row, .arriving .actions-block, .arriving .proposal {
  opacity: 0; transform: translateY(6px); filter: blur(3px);
}
.arrived { opacity: 1 !important; transform: none !important; filter: none !important;
  transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .led.flash, .dots i { animation: none; }
  .arriving * { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .panel { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .indicators { overflow: visible; }
  .indicators { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .indicators > section { flex: 1 1 220px; }
  .row { grid-template-columns: 14px 120px minmax(0, 1fr); }
  .row .refs { grid-column: 3; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .panel { height: auto; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: none; padding: 10px; gap: 12px; }
  .zones { overflow: visible; }
  .lcd { height: 82dvh; }
  .bezel { flex-wrap: wrap; gap: 10px; }
  .screws, .clock { display: none; }
  .mark b { font-size: 26px; }
  .sample { font-size: 11px; }
  .zone-list { max-width: 100%; }
  .lcd-status { gap: 10px; padding: 10px 14px; }
  .zones { order: 1; }
  .zone-list { grid-auto-flow: column; grid-auto-columns: minmax(200px, 72%); overflow-x: auto; margin-bottom: 0; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .zone { scroll-snap-align: start; }
  .zones .history, .zones .legend.hist { display: none; }
  .lcd { order: 2; min-height: 78vh; }
  .indicators { order: 3; }
  .lcd-status .dim { display: none; }
  .log-inner, .composer-inner { width: calc(100% - 28px); }
  .ask p { max-width: 88%; }
  .row { grid-template-columns: 12px minmax(0, 1fr); gap: 6px 10px; }
  .row .check { grid-column: 2; }
  .row .result, .row .refs { grid-column: 2; }
  .proposal { grid-template-columns: 1fr; }
  .keys .key { flex: 1; }
}
@media (max-width: 760px) {
  .panel { height: auto; min-height: 100dvh; grid-template-rows: auto auto auto auto; }
  .lcd { height: calc(100dvh - 152px); min-height: 0; }
  .zones .legend { display: none; }
  .indicators { display: flex; flex-direction: column; overflow: visible; }
  .indicators > section { flex: none; }
  .zone-list { grid-auto-columns: max-content; grid-auto-flow: column; overflow-x: auto; overflow-y: hidden; }
  .zone-list li + li .zone { border-top: 0; border-left: 1px solid var(--case-edge); }
  .zone { grid-template-columns: 28px auto; padding: 5px 22px 5px 5px; column-gap: 8px; }
  .zone .sub { display: none; }
  .zone .buddy { width: 28px !important; height: 28px !important; grid-row: auto; }
  .zone > .led { top: 6px; right: 7px; width: 7px; height: 7px; }
  .zone .name { font-size: 15px; white-space: nowrap; }
  .quick { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .quick button { flex: none; }
  .ask, .event, .reply, .thinking { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .ask { grid-template-columns: 52px minmax(0, 1fr); }
  .ask .gutter span:first-child { font-size: 11px; }
  .gutter .buddy { width: 30px !important; height: 30px !important; }
  .dock { grid-template-columns: auto minmax(0, 1fr); }
  .dock > .led { display: none; }
  .dock .keys { grid-column: 1 / -1; }
  .proposal { grid-template-columns: auto minmax(0, 1fr); }
  .proposal .keys { grid-column: 1 / -1; }
  .composer { padding: 10px 0 12px; }
  .fine { display: none; }
  /* first-viewport budget: the zone tab already names the beep */
  .mark span { display: none; }
  .bezel { flex-wrap: nowrap; padding: 2px 2px 0; }
  .lcd-status .buddy, .lcd-status .agent { display: none; }
  .lcd-status { padding: 8px 14px; }
  .dock { padding: 8px 10px; gap: 8px 10px; }
  .dock > div:not(.keys) { min-width: 0; }
  .dock .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
  .dock .s { display: none; }
  .dock .key { padding: 8px 12px 7px; }
  .lcd { height: calc(100dvh - 104px); }
  /* zone strip: fade the edge so more beeps read as there, no tab-like thumb */
  .zone-list { scrollbar-width: none; padding-bottom: 0; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
  .zone-list::-webkit-scrollbar { display: none; }
  .zone-list.at-end { -webkit-mask-image: none; mask-image: none; }
  .idle { padding: 12px 16px 20px; }
  .idle ul { margin-top: 14px; }
  .sample .long { display: none; }
  .sample .short { display: inline; }
  .bezel { gap: 8px; }
  .mode { padding: 7px 10px 6px; font-size: 12.5px; }
  .sched-row { gap: 6px 10px; }
  .beep-row { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 12px; padding: 12px 2px; }
  .beep-row .buddy { width: 48px !important; height: 48px !important; grid-row: span 2; align-self: start; }
  .beep-name input { font-size: 19px; }
  .swatches { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(6, 28px); gap: 8px 10px; }
  .swatch { width: 28px; height: 28px; }
  .swatch-name { grid-column: 1 / -1; justify-self: start; }
  .beep-reset { grid-column: 1 / -1; }
  .sched-row { grid-template-columns: 34px minmax(0, 1fr); }
  .sched-row .buddy { width: 30px !important; height: 30px !important; align-self: start; margin-top: 1px; }
  .sched-row .when, .sched-row .to { grid-column: 2; }
  .sched-actions { grid-column: 2; }
  .editor { grid-template-columns: 1fr; padding: 4px 0 16px; }
  .editor .whenset { grid-template-columns: 1fr 1fr; }
  .editor .whenset select:first-child { grid-column: 1 / -1; }
  .draft dl { grid-template-columns: 1fr; gap: 2px; }
  .draft dd { margin-bottom: 6px; }
}

/* ---------- live app additions ---------- */
.signout { font: 600 12px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border: 1px solid var(--case-edge); border-radius: 3px; background: var(--key); color: var(--legend-soft); }
.signout:hover { color: var(--legend); border-color: var(--legend-soft); }
.attach { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; border: 1px solid var(--tile-edge); background: var(--key); color: var(--lcd-soft); }
.attach[hidden] { display: none; }
.attach.has { border-color: var(--lcd-glow); color: var(--lcd-glow); }
.file-chip { margin: 0 0 8px; font: 500 12px/1.4 var(--mono); color: var(--lcd-glow); }
.file-chip[hidden] { display: none; }
.notice { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); color: var(--lcd-soft); font-size: 14px; }
.notice.bad { border-color: rgba(224,37,27,.45); color: var(--fault-ink); background: rgba(224,37,27,.05); }
.event .actions { margin-top: 4px; }
.proposal.failed { border-color: rgba(224,37,27,.55); }
.proposal .outcome.err { color: var(--fault-ink); }
.instr { grid-column: 2 / -1; display: none; gap: 8px; }
.beep-row.open .instr { display: grid; }
.instr textarea { width: 100%; min-height: 140px; resize: vertical; font: 400 14.5px/1.5 var(--sans); color: var(--lcd-text); background: var(--lcd-raised); border: 1px solid var(--tile-edge); border-radius: 8px; padding: 9px 11px; field-sizing: content; max-height: 420px; }
.instr textarea:focus { outline: none; border-color: var(--lcd-glow); }
.instr .meta2 { font: 500 11.5px/1.3 var(--mono); color: var(--lcd-dim); }
.instr .keys { justify-content: flex-end; }
.more-btn { justify-self: start; margin-top: 2px; }
@media (max-width: 760px) { .instr { grid-column: 1 / -1; } }

/* ---------- cases: one line per question, opened to see the thread ---------- */
.history .hist-row {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 9px; align-items: center; width: 100%;
  padding: 7px 2px; border: 0; border-bottom: 1px dashed var(--case-edge); background: none; text-align: left; font-size: 13px;
}
.history li { display: block; padding: 0; border: 0; }
.history .hist-row:hover { background: var(--case-hi); }
.history .hist-row .led { width: 8px; height: 8px; }
.history .hist-row .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--legend); }
.history .empty { padding: 8px 2px; font-size: 13px; color: var(--legend-soft); }

.cases-head { display: grid; grid-template-columns: 1fr auto; gap: 12px 14px; align-items: center; margin: 0 0 22px; }
.cases-head h2 { margin: 0; font: 600 30px/1 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.cases-head h2 span { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); margin-left: 6px; }
.scope { display: flex; border: 1px solid var(--tile-edge); border-radius: 5px; overflow: hidden; }
.scope button { padding: 7px 13px; border: 0; background: transparent; font: 600 12.5px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.scope button + button { border-left: 1px solid var(--tile-edge); }
.scope button[aria-pressed="true"] { background: var(--lcd-raised); color: var(--lcd-text); box-shadow: inset 0 1px 3px rgba(24,32,27,.1); }
.case-search {
  grid-column: 1 / -1; width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--tile-edge);
  background: var(--lcd-raised); font: 400 14.5px/1.3 var(--sans); color: var(--lcd-text);
}
.case-search:focus { outline: none; border-color: var(--lcd-glow); }

.case-group { margin: 0 0 22px; }
.case-group .legend { color: var(--lcd-dim); border-bottom-color: var(--lcd-rule); display: flex; gap: 8px; }
.case-group .legend b { font-weight: 600; color: var(--lcd-text); }
.case-group.needs .legend b { color: var(--fault-ink); }
.case-list { list-style: none; margin: 0; padding: 0; }
.case-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%;
  padding: 11px 6px; border: 0; border-bottom: 1px solid var(--lcd-rule); background: none; text-align: left; border-radius: 4px;
}
.case-row:hover { background: var(--lcd-raised); }
.case-row .led { margin-top: .45em; }
.c-main { display: grid; gap: 3px; min-width: 0; }
.c-title { font: 500 15px/1.35 var(--sans); color: var(--lcd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-verdict { font-size: 13.5px; line-height: 1.4; color: var(--lcd-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-meta { display: grid; justify-items: end; gap: 4px; font: 400 11.5px/1.2 var(--mono); color: var(--lcd-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.c-ref { font-weight: 500; color: var(--lcd-text); }
.case-group.past .c-title { color: var(--lcd-soft); }
.cases-hint { margin: 6px 0 0; font-size: 13px; color: var(--lcd-dim); }

.case-bar {
  position: sticky; top: -22px; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -22px 0 14px; padding: 12px 0 10px; background: var(--lcd); border-bottom: 1px solid var(--lcd-rule);
}
.case-bar .spacer { flex: 1; }
.case-bar .cs { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-soft); }
.case-bar .back, .case-btn {
  padding: 7px 11px; border-radius: 4px; border: 1px solid var(--tile-edge); background: transparent;
  font: 500 13px/1 var(--sans); color: var(--lcd-soft); transition: border-color .15s, color .15s, background .15s;
}
.case-bar .back { border-color: transparent; padding-left: 0; color: var(--lcd-text); font-weight: 600; }
.case-bar .back:hover { color: var(--lcd-glow); }
.case-btn:hover:not(:disabled) { border-color: var(--lcd-glow); color: var(--lcd-text); background: var(--lcd-raised); }
.case-btn:disabled { opacity: .45; cursor: default; }
.case-title { margin: 0 0 20px; font: 600 26px/1.15 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }

@media (max-width: 760px) {
  .cases-head h2 { font-size: 25px; }
  .case-row { grid-template-columns: 10px minmax(0, 1fr); }
  .c-meta { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; gap: 10px; }
  .case-bar { gap: 8px; }
  .case-bar .cs { order: -1; width: 100%; }
  .case-title { font-size: 22px; }
}

/* ---------- sharing a case ---------- */
.c-vis { font-weight: 500; color: var(--lcd-soft); }
.case-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -10px 0 22px; position: relative; }
.case-share .vis { font-size: 13.5px; color: var(--lcd-soft); margin-right: 4px; }
.case-share .vis.private::before, .case-share .vis.team::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 8px 1px 0; vertical-align: middle;
  background: var(--led-off);
}
.case-share .vis.team::before { background: var(--led-green); }
.invite-pop { flex-basis: 100%; padding: 12px 14px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); }
.invite-pop ul { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; }
.invite-pop label { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--lcd-text); }
.pop-title { margin: 0; font-size: 13.5px; color: var(--lcd-soft); }

/* ---------- people and usage (no composer: these pages don't talk to a beep) ---------- */
.panel.in-admin .composer { display: none; }
.panel.in-admin .lcd-status .buddy { display: none; }
.invite-form { display: grid; grid-template-columns: 1.4fr 1fr auto auto; gap: 8px; margin: 0 0 14px; }
.invite-form input, .invite-form select, .person select, .rates input {
  min-width: 0; padding: 9px 11px; border-radius: 6px; border: 1px solid var(--tile-edge); background: var(--lcd-raised);
  font: 400 14.5px/1.2 var(--sans); color: var(--lcd-text);
}
.invite-form input:focus, .person select:focus, .rates input:focus { outline: none; border-color: var(--lcd-glow); }
.invite-form .key { padding: 9px 18px; }
.people { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--lcd-rule); }
.person { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--lcd-rule); }
.person .who { display: grid; gap: 2px; min-width: 0; }
.person .who b { font-weight: 600; color: var(--lcd-text); }
.person .who > span { font: 400 12.5px/1.3 var(--mono); color: var(--lcd-dim); overflow: hidden; text-overflow: ellipsis; }
.person .seen { font-size: 13px; color: var(--lcd-soft); }
.person .ctl { display: flex; gap: 8px; align-items: center; justify-content: end; }
.person.off .who b, .person.off .seen { color: var(--lcd-dim); }
.tag { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 3px; background: var(--lcd-text); color: var(--lcd); font: 600 11px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.tag.soft { background: var(--lcd-raised); color: var(--lcd-soft); border: 1px solid var(--tile-edge); }
.role-fixed { font: 600 12.5px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }

.usage-range { display: inline-flex; margin: 0 0 18px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 26px; }
.tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); }
.tile span { font: 600 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.tile b { font: 600 32px/1.05 var(--cond); color: var(--lcd-text); font-variant-numeric: tabular-nums; }
.tile small { font-size: 12.5px; color: var(--lcd-soft); }
.meter { display: block; height: 6px; border-radius: 3px; background: var(--lcd-rule); overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; background: var(--led-green); }
.meter i.near { background: var(--led-amber); }
.meter i.over { background: var(--led-red); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.bars .k { color: var(--lcd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .bar { height: 10px; border-radius: 5px; background: var(--lcd-rule); overflow: hidden; }
.bars .bar i { display: block; height: 100%; background: var(--lcd-glow); border-radius: 5px; }
.bars .v { font: 400 12.5px/1 var(--mono); color: var(--lcd-soft); font-variant-numeric: tabular-nums; }
.days { display: flex; align-items: end; gap: 3px; height: 90px; padding: 0 2px; border-bottom: 1px solid var(--lcd-rule); }
.days span { flex: 1; height: 100%; display: flex; align-items: end; }
.days i { display: block; width: 100%; background: var(--lcd-glow); border-radius: 2px 2px 0 0; }
.rates { display: grid; gap: 12px; }
.rates > label { display: grid; gap: 6px; max-width: 260px; font-size: 13.5px; color: var(--lcd-soft); }
.rates table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rates th { text-align: left; font: 600 11.5px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); padding: 6px 6px 6px 0; }
.rates td { padding: 4px 6px 4px 0; color: var(--lcd-text); font-family: var(--mono); font-size: 12.5px; }
.rates td input { width: 100%; max-width: 110px; }
.rates .meta2 { margin: 0; font-size: 12.5px; color: var(--lcd-dim); }

@media (max-width: 760px) {
  .modes { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .mode { white-space: nowrap; }
  .invite-form { grid-template-columns: 1fr 1fr; }
  .invite-form input[type=email] { grid-column: 1 / -1; }
  .person { grid-template-columns: minmax(0, 1fr); }
  .person .ctl { justify-content: start; }
  .tiles { grid-template-columns: 1fr; }
  .tile b { font-size: 28px; }
  .bars li { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; }
  .rates table, .rates thead, .rates tbody, .rates tr { display: block; }
  .rates thead { display: none; }
  .rates tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--lcd-rule); }
  .rates td:first-child { grid-column: 1 / -1; }
  .rates td input { max-width: none; }
}
.model-pick { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--lcd-dim); }
.model-pick select { padding: 6px 8px; border-radius: 4px; border: 1px solid var(--tile-edge); background: var(--lcd-raised); font: 500 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lcd-text); }
.model-pick select { max-width: 100%; min-width: 0; }
@media (max-width: 760px) {
  /* five views for the owner: the view switch scrolls sideways instead of pushing Sign out off */
  .bezel .modes { flex: 1 1 auto; min-width: 0; }
  .bezel .sample { display: none; }
  .signout { white-space: nowrap; }
  .model-pick { flex-wrap: wrap; max-width: 100%; }
}

/* ---------- beep strip arrows (only when the strip scrolls sideways) ---------- */
.zone-strip { position: relative; flex: none; margin: 0 0 18px; }
.zone-strip .zone-list { margin-bottom: 0; }
.zone-nudge {
  position: absolute; top: 1px; bottom: 1px; z-index: 2; width: 34px; display: none; align-items: center; justify-content: center;
  border: 0; padding: 0; color: var(--legend); cursor: pointer;
}
.zone-nudge.prev { left: 1px; border-radius: 5px 0 0 5px; background: linear-gradient(90deg, var(--case-hi) 55%, rgba(248,247,244,0)); justify-content: flex-start; padding-left: 6px; }
.zone-nudge.next { right: 1px; border-radius: 0 5px 5px 0; background: linear-gradient(270deg, var(--case-hi) 55%, rgba(248,247,244,0)); justify-content: flex-end; padding-right: 6px; }
.zone-nudge:hover { color: var(--lcd-glow); }
.zone-strip.can-left .zone-nudge.prev, .zone-strip.can-right .zone-nudge.next { display: flex; }
/* the arrows replace the fade at the edge */
.zone-strip.can-left .zone-list, .zone-strip.can-right .zone-list { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 760px) {
  .zone-strip { margin-bottom: 0; }
  .zone-nudge { width: 30px; }
}
.link-btn { border: 0; padding: 0; background: none; font: inherit; color: var(--lcd-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { color: var(--lcd-glow); }