/* 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;
  /* your own messages in a conversation: slate blue, apart from the beep's panel grey */
  --me-bub: #e3eaf3;
  --me-edge: #cfdae8;
  --me-ink: #2f5f93;
  /* 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: .02em; 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 > *, .zone .zl { min-width: 0; }   /* a long name or latest line wraps inside the column, never widens the list */
.zone .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone .sub[hidden] { display: none; }
.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; }

/* integrations: one connector list; each row opens in place to manage it */
.cx-section { margin: 0 0 30px; }
.cx-head { margin: 0 0 10px; }
.cx-head h3 { margin: 0; font: 600 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.board-head p, .cx-head p { text-wrap: pretty; }
.cx-head p { margin: 8px 0 0; max-width: 66ch; font-size: 14px; color: var(--lcd-soft); }
.cx-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--lcd); overflow: hidden;
  box-shadow: 0 1px 2px rgba(24,32,27,.05), 0 8px 22px -16px rgba(24,32,27,.28); }
.cx + .cx { border-top: 1px solid var(--lcd-rule); }
.cx { transition: background .18s; }
.cx.open { background: var(--lcd-raised); }
.cx-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 32px; align-items: center; gap: 14px; padding: 14px 12px 14px 16px; cursor: pointer; }
.cx:not(.open) .cx-row:hover { background: var(--lcd-raised); }
.cx-icon { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: var(--lcd-raised); border: 1px solid var(--tile-edge); color: var(--lcd-text); }
.cx.open .cx-icon { background: var(--lcd); }
.cx-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cx-icon svg.cx-ms { width: 20px; height: 20px; stroke: none; }
.cx-icon-microsoft { background: #fff; }
.cx-text { display: grid; gap: 3px; min-width: 0; }
.cx-text b { font: 600 19px/1.1 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.cx-text > span { font-size: 13.5px; line-height: 1.35; color: var(--lcd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 9px; border: 1px solid var(--tile-edge); border-radius: 999px; background: var(--lcd);
  font: 500 12px/1 var(--mono); color: var(--lcd-soft); white-space: nowrap; }
.cx-status .led { width: 8px; height: 8px; }
.cx-soon { font: 500 12px/1 var(--mono); color: var(--lcd-dim); white-space: nowrap; }
.cx-cta { white-space: nowrap; }
.cx.open .cx-row > .cx-cta { display: none; }
.cx-row .key.cx-cta { min-width: 0; padding: 9px 16px 8px; font-size: 14px; }
.cx-toggle { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; display: grid; place-items: center; color: var(--lcd-dim); cursor: pointer; transition: background .15s, color .15s; }
.cx-toggle:hover { background: var(--lcd); color: var(--lcd-text); }
.cx-chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.cx.open .cx-chev { transform: rotate(90deg); }

/* the in-place panel: grid rows animate open, hidden content stays out of the tab order */
.cx-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s cubic-bezier(.2,.8,.2,1); }
.cx.open .cx-detail { grid-template-rows: 1fr; }
.cx-detail-in { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .26s; }
.cx.open .cx-detail-in { visibility: visible; transition: visibility 0s; }
.cx-detail-body { padding: 2px 20px 20px 74px; }
.cx-facts { margin: 0; }
.cx-fact { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--lcd-rule); }
.cx-fact:first-child { border-top: 0; padding-top: 6px; }
.cx-fact dt { padding-top: 3px; font: 600 12px/1.2 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.cx-fact dd { margin: 0; display: grid; gap: 3px; font-size: 14px; color: var(--lcd-text); min-width: 0; }
.cx-fact small { font-size: 12.5px; color: var(--lcd-dim); }
.cx-detail code { justify-self: start; padding: 3px 7px; border: 1px solid var(--tile-edge); border-radius: 5px; background: var(--lcd); font: 500 12.5px/1.3 var(--mono); color: var(--lcd-text); overflow-wrap: anywhere; }
.cx-perms { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cx-perms li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; }
.cx-perms svg { width: 16px; height: 16px; margin-top: 2px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cx-yes { stroke: var(--lcd-glow); }
.cx-no { stroke: var(--lcd-dim); }
.cx-perms li.no span { color: var(--lcd-soft); }
.cx-beeps { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-beep { display: inline-flex; align-items: center; gap: 6px; padding: 2px 11px 2px 3px; border: 1px solid var(--tile-edge); border-radius: 999px; background: var(--lcd); font-size: 13px; color: var(--lcd-text); }
.cx-none { font-size: 13.5px; color: var(--lcd-dim); }
.cx-bad { color: var(--fault-ink); }
.cx-note { margin: 4px 0 14px; max-width: 66ch; font-size: 14px; color: var(--lcd-soft); }
.cx-steps { margin: 4px 0 16px; padding-left: 20px; max-width: 70ch; font-size: 14px; color: var(--lcd-soft); }
.cx-steps li { margin-bottom: 6px; padding-left: 4px; }
.cx-steps b { color: var(--lcd-text); font-weight: 600; }
.cx-sub { margin: 18px 0 4px; font: 600 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }

/* tools: a three-way segmented control per tool */
.cx-tools { list-style: none; margin: 0; padding: 0; }
.cx-tools li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 11px 0; border-top: 1px solid var(--lcd-rule); }
.cx-tools li:first-child { border-top: 0; }
.cx-tool { display: grid; gap: 2px; min-width: 0; }
.cx-tool code { padding: 0; border: 0; background: none; font-size: 13px; }
.cx-tool small { font-size: 12.5px; color: var(--lcd-dim); }
.cx-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--tile-edge); border-radius: 9px; background: var(--lcd); transition: opacity .15s; }
.cx-seg.saving { opacity: .55; }
.cx-seg label { position: relative; }
.cx-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cx-seg span { display: block; padding: 7px 11px 6px; border-radius: 6px; font: 600 12.5px/1 var(--sans); color: var(--lcd-soft); white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.cx-seg label:hover span { color: var(--lcd-text); }
.cx-seg input:checked + span { background: var(--lcd-text); color: var(--lcd); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.cx-seg input:focus-visible + span { outline: 2px solid var(--lcd-glow); outline-offset: 1px; }
.cx-seg input:disabled { cursor: default; }
.cx-seg input:disabled + span { opacity: .6; }

/* actions and forms */
.cx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.cx-actions .key { min-width: 0; padding: 10px 16px 9px; font-size: 14px; }
.cx-btn { padding: 10px 15px 9px; border: 1px solid var(--case-edge); border-radius: 6px; background: var(--key); color: var(--lcd-text); font: 600 14px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(40,38,30,.10); cursor: pointer; transition: background .14s, box-shadow .14s; }
.cx-btn:hover { background: var(--lcd); }
.cx-btn:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.14); }
.cx-btn:disabled, .cx-actions .key:disabled { opacity: .5; cursor: progress; }
.cx-link { padding: 8px 4px; border: 0; background: none; font: 500 14px/1 var(--sans); color: var(--lcd-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tile-edge); cursor: pointer; }
.cx-link:hover { color: var(--lcd-text); text-decoration-color: currentColor; }
.cx-link.danger { color: var(--fault-ink); }
.cx-msg { font-size: 13.5px; color: var(--lcd-glow); }
.cx-msg.bad { color: var(--fault-ink); }
.cx-editslot:not(:empty) { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lcd-rule); }
.cx-form { margin: 0; }
.cx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.cx-field { display: grid; gap: 6px; min-width: 0; }
.cx-field > span, .cx-pick legend { font: 600 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.cx-field input, .cx-field textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); color: var(--lcd-text); font: 400 14.5px/1.4 var(--sans); transition: border-color .15s; }
.cx-field textarea { resize: vertical; min-height: 64px; }
.cx-field input::placeholder, .cx-field textarea::placeholder { color: var(--lcd-dim); }
.cx-field input:focus, .cx-field textarea:focus { outline: 2px solid var(--lcd-glow); outline-offset: 1px; border-color: var(--lcd-glow); }
.cx-field textarea[readonly] { background: var(--lcd-raised); color: var(--lcd-soft); }
.cx-narrow { max-width: 240px; }
.cx-pick { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.cx-pick > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cx-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 3px 13px 3px 3px; border: 1px solid var(--tile-edge); border-radius: 999px; background: var(--lcd);
  font-size: 13.5px; color: var(--lcd-soft); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.cx-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cx-chip:hover { color: var(--lcd-text); border-color: var(--lcd-dim); }
.cx-chip:has(input:checked) { border-color: var(--lcd-text); background: var(--lcd-raised); color: var(--lcd-text); box-shadow: inset 0 0 0 1px var(--lcd-text); }
.cx-chip:has(input:focus-visible) { outline: 2px solid var(--lcd-glow); outline-offset: 2px; }

/* email voice: two settings side by side */
.cx-voice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 18px; border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--lcd);
  box-shadow: 0 1px 2px rgba(24,32,27,.05), 0 8px 22px -16px rgba(24,32,27,.28); }
.cx-voice .cx-actions { margin-top: 10px; }

/* loading: placeholder rows instead of a "Loading…" line */
.cx-loading .cx-row { cursor: default; grid-template-columns: 44px minmax(0, 1fr); }
.cx-loading .cx-icon { border-color: transparent; }
.cx-loading .sk { display: block; height: 14px; width: 150px; border-radius: 7px; background: linear-gradient(90deg, var(--lcd-raised) 0%, var(--lcd-rule) 50%, var(--lcd-raised) 100%) 0 0 / 200% 100%; animation: cx-sk 1.3s ease-in-out infinite; }
.cx-loading span.sk { width: min(320px, 70%); height: 11px; margin-top: 5px; }
@keyframes cx-sk { from { background-position: 150% 0; } to { background-position: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .cx-detail, .cx-detail-in, .cx-chev, .cx { transition: none; }
  .cx-loading .sk { animation: none; }
}
@media (max-width: 760px) {
  .cx-row { grid-template-columns: 40px minmax(0, 1fr) 30px; gap: 4px 12px; padding: 13px 10px 13px 14px; }
  .cx-icon { width: 40px; height: 40px; border-radius: 10px; }
  .cx-row > .cx-status, .cx-row > .cx-cta, .cx-row > .cx-soon { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 6px; }
  .cx-row > .cx-toggle { grid-column: 3; grid-row: 1; }
  .cx-text > span { white-space: normal; }
  .cx-detail-body { padding: 2px 14px 18px; }
  .cx-fact { grid-template-columns: 1fr; padding: 11px 0; }
  .cx-fact dt { padding-top: 0; }
  .cx-fields, .cx-voice { grid-template-columns: 1fr; }
  .cx-tools li { grid-template-columns: 1fr; }
  .cx-seg { justify-self: start; }
}

/* a drafted email reply: paper on the LCD, copied into Uptick Inbox by a person */
.mail-draft { margin: 0 0 14px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); overflow: hidden; }
.mail-draft header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 16px 10px; border-bottom: 1px dashed var(--tile-edge); }
.mail-draft header b { font: 600 17px/1.2 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.mail-draft header span { font: 500 12.5px/1.3 var(--mono); color: var(--lcd-dim); }
.mail-draft pre { margin: 0; padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.55 var(--body, inherit); color: var(--lcd-text); }
.mail-draft .check-first { margin: 0; padding: 0 16px 12px; font-size: 13.5px; color: var(--lcd-soft); }
.mail-draft footer { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px; }
.mail-draft footer small { color: var(--lcd-dim); font-size: 12.5px; }

/* 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; overflow-wrap: anywhere; white-space: pre-line; }
.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); }
.proposal .outcome[hidden] { display: none; }

/* 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 { min-width: 0; }
.prompt textarea { min-width: 0; }
@media (max-width: 760px) { .prompt { flex-wrap: wrap; } .note-key { order: -1; flex-basis: 100%; text-align: left; } }
.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) minmax(140px, 176px) minmax(110px, 150px) 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 { display: grid; gap: 3px; font-size: 13px; color: var(--lcd-soft); line-height: 1.35; }
.sched-row .to span + span { font-size: 12px; color: var(--lcd-dim); }
.sched-row .who small.owner { color: var(--lcd-soft); }
.switch:disabled { opacity: .55; cursor: not-allowed; }
.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 .overnight-tick { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; font-size: 14px; color: var(--lcd-soft); }
.editor .overnight-tick[hidden] { display: none; }
.editor .overnight-tick input { accent-color: var(--lcd-glow); margin-top: 3px; }
.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; }
#company-pick { font: inherit; font-size: 13.5px; max-width: 100%; padding: 3px 6px; border: 1px solid var(--rule, #ccc); border-radius: 6px; background: transparent; color: inherit; }
.facts .invite-row { margin-top: 6px; font-size: 13px; }
.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; }
/* Which system a beep reads (Uptick, simPRO or both): only shown when a company has both */
.sys-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.sys-switch[hidden], .syswrap[hidden], .sys-pick[hidden] { display: none; }
.sys-lab { font: 600 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.syswrap select { max-width: 260px; }
.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); }
.t-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--lcd-rule); }
.t-item .case-row { border-bottom: 0; }
.mute-btn { margin-left: 6px; padding: 6px 8px; border: 1px solid var(--tile-edge); border-radius: 6px; background: none; font: 500 11.5px/1 var(--mono); color: var(--lcd-dim); cursor: pointer; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.t-item:hover .mute-btn, .mute-btn:focus-visible { opacity: 1; }
@media (hover: none) { .mute-btn { opacity: 1; } }
.mute-btn:hover { color: var(--lcd-text); border-color: var(--lcd-dim); }
.muted-note { grid-column: 1 / -1; margin: 0; padding: 10px 6px; font-size: 13px; color: var(--lcd-dim); }
.priv-tag { margin-left: 6px; vertical-align: 1px; font-size: 10px; }
.others summary { cursor: pointer; padding: 10px 6px; font-size: 13.5px; color: var(--lcd-soft); }
.others[open] summary { color: var(--lcd-text); }
.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, .panel.in-today .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); }
.pbeeps { grid-column: 1 / -1; font-size: 13.5px; color: var(--lcd-soft); }
.pbeeps summary { cursor: pointer; width: max-content; font: 600 12.5px/1.6 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.pbeeps-list { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0 4px; }
.pbeeps-list label { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.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: 3px 0; min-height: 24px; background: none; font: inherit; color: var(--lcd-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { color: var(--lcd-glow); }

/* ---------- beep home: search bar, then the beep itself, then its cases ---------- */
.cases-head { grid-template-columns: minmax(0, 1fr) auto; margin: 0 0 22px; }
.cases-head .case-search { grid-column: auto; }
.beep-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 24px; align-items: center;
  margin: 0 0 26px; padding: 0 0 24px; border-bottom: 1px solid var(--lcd-rule);
}
.beep-hero h2 { margin: 0 0 6px; font: 600 clamp(28px, 3vw, 40px)/1.02 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.beep-hero p { margin: 0; max-width: 60ch; font-size: 15px; color: var(--lcd-soft); }
.beep-hero .hero-status { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font: 600 12.5px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-soft); }
.hero-status span { display: inline-flex; align-items: center; gap: 8px; }
.hero-status .led { display: inline-block; width: 8px; height: 8px; }
.beep-hero.big { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 0 10px; border-bottom: 0; }
.beep-hero.big h2 { font-size: clamp(34px, 4vw, 52px); margin-bottom: 12px; }
.beep-hero.big p { margin: 0 auto; max-width: 52ch; }
.beep-hero.big ul { list-style: none; padding: 0; margin: 22px auto 0; display: grid; gap: 8px; max-width: 460px; text-align: left; }
.beep-hero.big li { display: flex; gap: 10px; color: var(--lcd-soft); font-size: 14px; }
.beep-hero.big li::before { content: ""; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--lcd-glow); flex: none; }
.beep-hero.big + .cases-hint { text-align: center; }
@media (max-width: 760px) {
  .beep-hero { gap: 4px 14px; padding-bottom: 18px; margin-bottom: 18px; }
  .beep-hero h2 { font-size: 25px; }
  .beep-hero p { font-size: 14px; }
  .beep-hero.big h2 { font-size: 32px; }
}
.cases-head.home { grid-template-columns: minmax(0, 1fr); }
.home-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 4px; }
.home-foot .cases-hint { margin: 0; }
.see-all { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 9px; }
.see-all span { padding: 2px 7px; border-radius: 10px; background: var(--lcd-raised); border: 1px solid var(--tile-edge); font: 500 12px/1.2 var(--mono); letter-spacing: 0; text-transform: none; color: var(--lcd-soft); }
.cases-top { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.cases-top .back { border: 0; background: none; padding: 0; font: 600 14px/1 var(--sans); color: var(--lcd-text); cursor: pointer; }
.cases-top .back:hover { color: var(--lcd-glow); }
.cases-top h2 { margin: 0; font: 600 28px/1 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }

/* ---------- beep home: the beep fills the screen ---------- */
.log-inner.is-home { min-height: 100%; display: flex; flex-direction: column; }
.is-home .cases-head.home { flex: none; margin-bottom: 8px; }
.is-home .home-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 8px 0 4px; }
.is-home .beep-hero.big { padding: 4px 0 6px; margin: 0 0 22px; }
.is-home .beep-hero.big h2 { font-size: clamp(36px, 4.4vw, 56px); margin: 6px 0 12px; }
.is-home .beep-hero.big p { font-size: 15.5px; max-width: 56ch; }
.is-home .beep-hero .hero-status { justify-content: center; margin-top: 16px; }
.is-home .home-now { width: 100%; max-width: 640px; margin: 0 auto 16px; }
.is-home .home-foot { justify-content: center; margin: 0 0 6px; }
.is-home .cases-hint { text-align: center; }
@media (max-width: 760px) {
  .is-home .beep-hero.big h2 { font-size: 30px; }
}
/* with open cases under him, he's a little smaller so they stay in view */
.is-home .beep-hero.big.with-cases { margin-bottom: 16px; }
.is-home .beep-hero.big.with-cases h2 { font-size: clamp(32px, 3.6vw, 46px); margin: 4px 0 8px; }
.is-home .beep-hero.big.with-cases .hero-status { margin-top: 12px; }
.is-home .home-now .case-row { padding: 9px 6px; }
.is-home .home-now .legend { margin-bottom: 4px; }
.is-home .beep-hero.big.with-cases .hero-text > p:not(.hero-status) { display: none; }
.is-home .home-now .c-verdict { -webkit-line-clamp: 1; }
.is-home .home-now .c-main { gap: 1px; }
/* one line per case on the home: status, title, verdict, ref and time */
.is-home .home-now .case-row { align-items: center; padding: 8px 6px; }
.is-home .home-now .case-row .led { margin-top: 0; }
.is-home .home-now .c-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.is-home .home-now .c-title { flex: 0 1 auto; max-width: 55%; }
.is-home .home-now .c-verdict { display: block; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.is-home .home-now .c-meta { grid-auto-flow: column; gap: 10px; align-items: baseline; }
.is-home .beep-hero.big.with-cases { margin-bottom: 12px; padding-bottom: 0; }
@media (max-width: 760px) {
  .is-home .home-now .c-verdict { display: none; }
  .is-home .home-now .c-title { max-width: none; }
  .is-home .home-now .c-meta span:last-child { display: none; }
}
.search-scope { display: inline-flex; margin: -8px 0 18px; }
.beep-legend { align-items: center; }
.beep-legend .buddy { margin-right: 2px; }
.people-tabs { display: inline-flex; margin: 0 0 16px; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: grid; grid-template-columns: 128px 140px minmax(0, 1fr); gap: 4px 14px; padding: 8px 2px; border-bottom: 1px solid var(--lcd-rule); font-size: 14px; }
.activity .when { font: 400 12px/1.6 var(--mono); color: var(--lcd-dim); font-variant-numeric: tabular-nums; }
.activity .who { font-weight: 600; color: var(--lcd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity .what { color: var(--lcd-soft); }
.facts .link-btn { font-size: 13px; }
@media (max-width: 760px) { .activity li { grid-template-columns: 1fr; gap: 0; } }
.qa { margin: 8px 0 0; display: grid; gap: 6px; }
.qa div { display: grid; gap: 1px; }
.qa dt { font: 600 11.5px/1.3 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); }
.qa dd { margin: 0; font-size: 14px; color: var(--lcd-text); }
.qa .na, .qa-msg { color: var(--lcd-dim); }
.qa-msg { margin: 6px 0 0; font-size: 14px; color: var(--lcd-text); white-space: pre-wrap; }
.cx-hint { font-size: 13px; color: var(--lcd-dim); }

/* photos sent to Marketing, and the graphics it renders */
.photo-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.photo-chip { position: relative; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; border: 1px solid var(--tile-edge); background: var(--lcd-raised); display: grid; place-items: center; }
.photo-chip img { width: 100%; height: 100%; object-fit: cover; }
.photo-chip button { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(24,32,27,.75); color: #fff; font-size: 13px; line-height: 18px; cursor: pointer; }
.photo-count { margin-left: 8px; font: 500 12px/1 var(--mono); color: var(--lcd-dim); }
#file-chip:has(.photo-chips) { display: flex; align-items: center; gap: 4px; }
.ask-body { display: grid; gap: 8px; min-width: 0; }
.media-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.media-strip .thumb { display: block; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid var(--tile-edge); background: var(--lcd-raised); }
.media-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mail-draft .media-strip { padding: 12px 16px 0; }
.proposal .media-strip { margin-top: 8px; }
.gfx-row { display: flex; flex-wrap: wrap; gap: 14px; }
.gfx { margin: 0; width: min(270px, 100%); }
.gfx a:first-child { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--tile-edge); background: var(--lcd-raised); box-shadow: 0 6px 16px -10px rgba(24,32,27,.4); }
.gfx img { display: block; width: 100%; height: auto; }
.gfx figcaption { margin-top: 6px; font-size: 12.5px; color: var(--lcd-dim); }
.gfx figcaption a { color: var(--lcd-soft); }

/* engineers: their proposals wait for the office, no buttons */
.with-office { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); }
.with-office:not(:empty)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber, #efa51b); box-shadow: 0 0 6px rgba(239,165,27,.55); }

/* ---------- Today: what's waiting for you ---------- */
.today-head h2 { font: 600 clamp(30px, 3vw, 40px)/1.05 var(--cond); }
.today-head p { font-size: 15.5px; color: var(--lcd-text); }
.today-head .since { color: var(--lcd-dim); }
.today-head p:first-of-type { color: var(--lcd-soft); }
.today-head .today-sum { margin-top: 12px; color: var(--lcd-text); text-wrap: pretty; }
.today-head .today-sum .led { display: inline-block; margin: 0 8px 1px 0; vertical-align: middle; }
/* One schedule's results folded into a single row; opens to the list. */
.t-fold { display: block; }
.t-fold > details > summary { list-style: none; cursor: pointer; }
.t-fold > details > summary::-webkit-details-marker { display: none; }
.t-fold > details > summary .c-title::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px; border-right: 1.5px solid var(--lcd-dim); border-bottom: 1.5px solid var(--lcd-dim); transform: rotate(-45deg); transition: transform .15s ease-out; }
.t-fold > details[open] > summary .c-title::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .t-fold > details > summary .c-title::after { transition: none; } }
.t-fold > details > .case-list { margin: 0 0 6px 22px; border-left: 1px solid var(--lcd-rule); }
.t-fold > details > .case-list .t-item:last-child { border-bottom: 0; }
.case-more > summary { cursor: pointer; padding: 9px 6px; font-size: 13.5px; color: var(--lcd-soft); }
.case-more[open] > summary { color: var(--lcd-text); }
.all-clear { margin: 8px 0 22px; padding: 18px 0; border-top: 1px solid var(--lcd-rule); border-bottom: 1px solid var(--lcd-rule); color: var(--lcd-soft); }
.starters { margin: 28px 0 18px; }
.starters .legend { color: var(--lcd-dim); border-bottom-color: var(--lcd-rule); }
.starters ul { list-style: none; margin: 0 0 8px; padding: 0; }
.starters li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lcd-rule); }
.starters b { font: 600 17px/1.2 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.starters p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--lcd-soft); max-width: 64ch; }
.starters .key { min-height: 40px; }
.today-foot { margin-top: 18px; }
/* the schedule draft: editable before it's saved */
.draft h3 { margin: 0 0 12px; font: 600 19px/1.2 var(--cond); color: var(--lcd-text); }
.draft-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 14px; }
.draft-form label, .draft-form fieldset { display: grid; gap: 5px; margin: 0; min-width: 0; font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); border: 0; padding: 0; }
.draft-form [hidden], .editor [hidden] { display: none; }
.draft-form .wide { grid-column: 1 / -1; }
.draft-form legend { padding: 0; margin-bottom: 5px; }
.draft-form select, .draft-form input, .draft-form textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #b9c2b5; border-radius: 6px; background: var(--lcd); font: 400 15px/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lcd-text); }
.draft-form textarea { resize: vertical; }
.draft-form .checks-row label { display: inline-flex; align-items: center; gap: 7px; margin-right: 16px; font: 400 14.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lcd-text); }
.draft-form .checks-row input { width: auto; min-height: 0; }
.draft-form .check-first { margin: 0; text-transform: none; letter-spacing: 0; }
@media (max-width: 720px) {
  .draft-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .starters li { grid-template-columns: 40px minmax(0, 1fr); }
  .starters .key { grid-column: 2; justify-self: start; }
}
/* phones: the view keys scroll sideways; the fade says there are more */
@media (max-width: 720px) { .modes { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } }

/* phone notifications on Today */
.push-box { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 6px 12px; align-items: baseline; margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--lcd-rule); border-radius: 8px; background: var(--lcd-raised); }
.push-box:empty { display: none; }
.push-box p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--lcd-text); }
.push-box .push-keys { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.push-box .push-keys .key, .push-box .push-keys .case-btn { min-height: 40px; }
.push-box .push-msg { grid-column: 2; color: var(--lcd-soft); font-size: 13.5px; }

/* install beeps app, on Today */
.install-box { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; margin: 22px 0 0; padding: 14px 16px; border: 1px solid var(--lcd-rule); border-radius: 8px; background: var(--lcd-raised); }
.install-box:empty { display: none; }
.install-ico { width: 26px; height: 26px; fill: none; stroke: var(--lcd-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.install-box b { font: 600 17px/1.2 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.install-box p { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--lcd-soft); }
.install-box .key { min-height: 40px; white-space: nowrap; }
@media (max-width: 720px) { .install-box { grid-template-columns: 26px minmax(0, 1fr); } .install-box .key { grid-column: 2; justify-self: start; } }

/* ---------- Brand ---------- */
.brand-form { display: grid; gap: 6px; max-width: 860px; }
.brand-sec { margin: 0 0 18px; }
.brand-sec .legend { color: var(--lcd-dim); border-bottom-color: var(--lcd-rule); margin-bottom: 12px; }
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.brand-grid .wide { grid-column: 1 / -1; }
.brand-sec > .cx-field { margin-bottom: 12px; }
.colour-pick { display: flex; align-items: center; gap: 10px; }
.colour-pick input[type=color] { width: 54px; height: 40px; padding: 2px; border: 1px solid #b9c2b5; border-radius: 6px; background: var(--lcd); cursor: pointer; }
.colour-pick code { font: 500 13px/1 var(--mono); color: var(--lcd-text); }
.brand-files { display: grid; gap: 10px; }
.brand-file { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--lcd-rule); border-radius: 8px; }
.brand-file b { font: 600 16px/1.2 var(--cond); color: var(--lcd-text); }
.brand-file p { margin: 2px 0 0; font-size: 13.5px; color: var(--lcd-soft); }
.brand-file .brand-fname { font: 500 12.5px/1.3 var(--mono); color: var(--lcd-text); }
.brand-thumb { display: grid; place-items: center; width: 96px; height: 64px; border-radius: 6px; border: 1px solid var(--lcd-rule); background: var(--lcd); overflow: hidden; font: 600 22px/1 var(--cond); color: var(--lcd-dim); }
.brand-thumb.on-dark { background: #041C2C; color: #c4cbc2; }
.brand-thumb span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.brand-thumb img { max-width: 88%; max-height: 80%; object-fit: contain; }
.brand-file-keys { display: flex; align-items: center; gap: 10px; }
.brand-file-keys .case-btn { cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; }
.brand-approvers label { display: inline-flex; align-items: center; gap: 7px; margin: 0 18px 8px 0; font-size: 14.5px; color: var(--lcd-text); }
.brand-preview { margin-top: 12px; }
.brand-preview img { display: block; width: min(360px, 100%); border-radius: 8px; border: 1px solid var(--lcd-rule); box-shadow: 0 10px 24px -14px rgba(24,32,27,.5); }
.cx-note ol { margin: 6px 0 8px; padding-left: 20px; }
.cx-note li { margin: 3px 0; }
.cx-note code { font: 500 12px/1.4 var(--mono); word-break: break-all; }
@media (max-width: 720px) { .brand-grid { grid-template-columns: 1fr; } .brand-file { grid-template-columns: 72px minmax(0, 1fr); } .brand-file-keys { grid-column: 2; } .brand-thumb { width: 72px; } }

/* ---------- Settings → Email ---------- */
.brand-form select, .cx-field select { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); color: var(--lcd-text); font: 400 14.5px/1.3 var(--sans); }
.mb-plan { margin: 0 0 10px; font-size: 14px; color: var(--lcd-soft); }
.mb-plan b { color: var(--lcd-text); font-weight: 600; }
.mb-list, .tag-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.mb-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--lcd-rule); border-radius: 8px; }
.mb-row.off .mb-text { opacity: .55; }
.mb-kind { width: 10px; height: 10px; border-radius: 50%; background: var(--lcd-glow); }
.mb-kind.mb-shared { background: #4f8fe8; }
.mb-kind.mb-account { background: #9b6bd3; }
.mb-text { min-width: 0; display: grid; gap: 2px; }
.mb-text b { font: 500 14.5px/1.3 var(--mono); color: var(--lcd-text); overflow-wrap: anywhere; }
.mb-text small { font-size: 12.5px; color: var(--lcd-soft); }
.mb-on { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--lcd-soft); }
.mb-on input, .mail-radio input { accent-color: var(--lcd-glow); }
.mb-add { display: flex; gap: 10px; align-items: end; max-width: 560px; }
.mb-add .cx-field { flex: 1; }
.mb-add .key { min-height: 41px; }
.mb-owner { margin-top: 12px; font-size: 13.5px; }
.mb-owner summary { cursor: pointer; font-weight: 600; color: var(--lcd-text); }
.mb-owner ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.tag-row { display: grid; grid-template-columns: 12px 120px minmax(120px, 1fr) minmax(0, 2fr) 64px; gap: 10px; align-items: center; }
.tag-row input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); color: var(--lcd-text); font: 400 14px/1.3 var(--sans); }
.tag-row input[readonly] { background: var(--lcd-raised); color: var(--lcd-soft); }
.tag-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--tag); }
.tag-sys { font: 600 11px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); text-align: center; }
.mail-choice { border: 0; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.mail-choice legend { font: 600 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); margin-bottom: 8px; }
.mail-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--lcd-rule); border-radius: 8px; cursor: pointer; }
.mail-radio:has(input:checked) { border-color: var(--lcd-glow); }
.mail-radio span { display: grid; gap: 3px; }
.mail-radio b { font: 600 14.5px/1.2 var(--sans); color: var(--lcd-text); }
.mail-radio small { font-size: 13px; color: var(--lcd-soft); line-height: 1.35; }
.mail-asks { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) {
  .mb-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .mb-row .cx-link { grid-column: 2; justify-self: start; }
  .tag-row { grid-template-columns: 12px 1fr 64px; }
  .tag-row select { grid-column: 2; }
  .tag-row .tag-name { grid-column: 2 / 4; }
  .tag-row .tag-meaning { grid-column: 2 / 4; }
  .tag-row > :last-child { grid-column: 3; grid-row: 1; }
  .mail-choice { grid-template-columns: 1fr; }
  .mb-add { flex-direction: column; align-items: stretch; }
}

/* Early access: sign-ups counted by where they came from */
.src-tally { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.src-tally li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--lcd-text); }
.src-tally b { font: 600 18px/1 var(--mono); text-align: right; }
.src-tally span { overflow-wrap: anywhere; }

/* Schedules: the inbox watcher's own settings */
.editor .watchset { display: grid; gap: 10px; }
.editor .watchset[hidden], .editor .syswrap[hidden], .editor .sys-note[hidden] { display: none; }
.editor .whenset select[aria-label="Check every"] { min-width: 11rem; }
.watch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.watch-grid label { display: grid; gap: 5px; font: 600 12px/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); }
.watch-grid select { padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); color: var(--lcd-text); font: 400 14px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.watchset .checks-row { display: grid; gap: 8px; font-size: 14px; color: var(--lcd-soft); }
.watchset .checks-row label { display: flex; gap: 8px; align-items: flex-start; }
.watchset input[type="checkbox"] { accent-color: var(--lcd-glow); margin-top: 3px; }
.watch-skip summary { cursor: pointer; font-size: 14px; color: var(--lcd-text); }
.watch-skip .checks-row { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 8px; }
@media (max-width: 720px) { .watch-grid { grid-template-columns: 1fr; } }
.editor .watchset .checks-row label { font: 400 14.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lcd-text); }
.editor .whenset select[aria-label="How often"] { min-width: 15.5rem; }
@media (max-width: 720px) { .editor .whenset select[aria-label="How often"] { min-width: 0; } }

/* Early access: the ad link builder */
.adlink-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 10px; }
.adlink-out { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--lcd-rule); border-radius: 8px; background: var(--lcd); }
.adlink-out code { flex: 1; min-width: 0; font: 500 13px/1.4 var(--mono); color: var(--lcd-text); overflow-wrap: anywhere; }
@media (max-width: 720px) { .adlink-row { grid-template-columns: 1fr 1fr; } .adlink-out { flex-direction: column; align-items: stretch; } }

/* Help: an ask line over the guides, each guide a ruled row that opens in place */
.help-ask { margin: 0 0 14px; }
.help-ask .legend { display: block; margin-bottom: 8px; }
.help-ask-row { display: flex; gap: 10px; max-width: 720px; }
.help-ask-row input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border: 1px solid var(--tile-edge); border-radius: 14px; background: var(--lcd-raised); font: 400 16px/1.3 var(--sans); color: var(--lcd-text); box-shadow: 0 2px 8px rgba(40,50,42,.05); }
.help-ask-row input:focus { outline: 0; border-color: var(--lcd-glow); }
.help-reply { max-width: 720px; margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--lcd-rule); border-radius: 8px; background: var(--lcd-raised); }
.help-reply p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--lcd-text); max-width: 66ch; }
.help-reply .meta2, .help-reply .meta2 a { font-size: 13px; color: var(--lcd-soft); }
.help-reply .meta2 a:hover { color: var(--lcd-glow); }
.help-person { display: grid; gap: 10px; max-width: 720px; margin: 0 0 22px; }
.help-person label { display: grid; gap: 6px; }
.help-person textarea, .help-person input { width: 100%; padding: 9px 11px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); font: 400 14.5px/1.45 var(--sans); color: var(--lcd-text); }
.help-person :is(textarea, input):focus { outline: 0; border-color: var(--lcd-glow); }
.help-mine, .help-guides { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lcd-rule); }
.help-mine li { padding: 10px 4px; border-bottom: 1px solid var(--lcd-rule); }
.help-mine .q { margin: 0 0 4px; font-weight: 500; color: var(--lcd-text); }
.help-mine .a { margin: 0; color: var(--lcd-soft); font-size: 14.5px; max-width: 66ch; }
.help-guides li { border-bottom: 1px solid var(--lcd-rule); }
.help-guides summary { display: grid; gap: 2px; padding: 11px 4px; cursor: pointer; list-style: none; }
.help-guides summary::-webkit-details-marker { display: none; }
.help-guides summary:hover { background: var(--lcd-raised); }
.help-guides summary b { font: 600 17px/1.15 var(--cond); letter-spacing: .02em; color: var(--lcd-text); }
.help-guides summary span { font-size: 13.5px; color: var(--lcd-soft); }
.help-guides details[open] summary b { color: var(--lcd-glow); }
.guide { padding: 2px 4px 18px; max-width: 66ch; font-size: 15px; line-height: 1.55; color: var(--lcd-soft); }
.guide h4 { margin: 16px 0 6px; font: 600 13px/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); }
.guide p { margin: 0 0 10px; }
.guide ul, .guide ol { margin: 0 0 10px; padding-left: 20px; }
.guide li { margin-bottom: 4px; }
.guide b { color: var(--lcd-text); font-weight: 600; }
@media (max-width: 760px) { .help-ask-row .key { min-width: 0; } }
.panel .lcd .help-ask ~ .meta2, #log-inner > .meta2, .help-mine .meta2, .help-person .meta2 { margin: 8px 0 0; font-size: 13.5px; color: var(--lcd-soft); }
.notice.ok { border-color: var(--lcd-rule); color: var(--lcd-text); }
.notice.ok::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--led-green); vertical-align: 1px; }

/* Helpful / Not right under an answer: two small light keys that latch, and a line for what was wrong */
.feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 18px; }
.fb-q { font: 500 12px/1 var(--mono); color: var(--lcd-dim); margin-right: 2px; }
.fb-btn { padding: 6px 10px 5px; border: 1px solid var(--tile-edge); border-radius: 4px; background: transparent; font: 600 12.5px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--lcd-soft); cursor: pointer; transition: background-color .14s, color .14s, border-color .14s; }
.fb-btn:hover { background: var(--lcd-raised); color: var(--lcd-text); border-color: var(--lcd-glow); }
.fb-btn[aria-pressed="true"] { background: var(--key-press); color: var(--lcd-text); border-color: var(--case-edge); box-shadow: inset 0 2px 5px rgba(40,38,30,.14); }
.fb-why { flex-basis: 100%; display: grid; gap: 6px; max-width: 560px; }
.fb-why label { font-size: 13px; color: var(--lcd-soft); }
.fb-why textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); font: 400 14px/1.4 var(--sans); color: var(--lcd-text); resize: vertical; }
.fb-why textarea:focus { outline: 0; border-color: var(--lcd-glow); }
.fb-why .keys { justify-content: flex-start; }
.fb-thanks { flex-basis: 100%; margin: 2px 0 0; font: 500 12.5px/1.4 var(--mono); color: var(--lcd-glow); }
.no-access { max-width: 640px; }
.no-access .ways { margin: 14px 0 20px; padding-left: 18px; color: var(--lcd-soft); font-size: 15px; line-height: 1.5; }
.no-access .ways li { margin-bottom: 10px; }
.no-access .ways b { color: var(--lcd-text); }
.no-access a { color: var(--lcd-text); text-underline-offset: 2px; }
.no-access .keys { gap: 10px; }
/* A company paused by beeps: one quiet line above the log, not a red alarm (nothing needs this person) */
.paused-note { position: sticky; top: 0; z-index: 2; margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--lcd-rule); background: var(--lcd-raised); font-size: 14px; color: var(--lcd-soft); }
.paused-note::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 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); vertical-align: 1px; }

/* @mentions and team notes */
.composer-inner { position: relative; }
.mention-pick { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; z-index: 5; min-width: 240px; max-width: 360px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); box-shadow: 0 8px 20px -10px rgba(24,32,27,.35); }
.mention-pick li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--lcd-text); }
.mention-pick li span { font: 600 12px/1.6 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--lcd-dim); }
.mention-pick li[aria-selected="true"], .mention-pick li:hover { background: var(--lcd-raised); }
.note-key { flex: none; align-self: center; padding: 6px 9px 5px; border: 1px solid var(--tile-edge); border-radius: 4px; background: transparent; font: 600 12px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--lcd-soft); cursor: pointer; white-space: nowrap; }
.note-key:hover { background: var(--lcd-raised); color: var(--lcd-text); border-color: var(--lcd-glow); }
.note-key[aria-pressed="true"] { background: var(--key-press); color: var(--lcd-text); border-color: var(--case-edge); box-shadow: inset 0 2px 5px rgba(40,38,30,.14); }
.ask.note .ask-body p { color: var(--lcd-soft); }
.ask.note .note-tag { display: inline-block; margin-bottom: 4px; font: 600 11px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); }
.ask.note .at, .ask .at { color: var(--lcd-text); font-weight: 600; }

/* What's new: a note from beeps. On Today it sits under the greeting as a raised card, once; on Help it's a list. */
.news-new { display: grid; gap: 12px; margin: 0 0 22px; }
.news { max-width: 720px; }
.news.fresh { padding: 14px 16px 12px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); }
.news .legend { margin: 0 0 4px; }
.news h3 { margin: 0 0 6px; font: 700 20px/1.2 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.news .guide { padding: 0; }
.news .meta2 { margin: 0 0 8px; font-size: 13.5px; color: var(--lcd-soft); }
.news-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.news-keys .spacer { flex: 1; }
.news .news-more { margin: 12px 0 0; }
.news-day { font: 500 12px/1 var(--mono); color: var(--lcd-dim); letter-spacing: 0; margin-left: 6px; }
.news-list .news { padding: 14px 4px; border-bottom: 1px solid var(--lcd-rule); }
.news-list .news:first-of-type { border-top: 1px solid var(--lcd-rule); }
.news-prefs { margin-top: 12px; font-size: 14px; color: var(--lcd-soft); }
.news-prefs input { accent-color: var(--lcd-glow); margin-right: 6px; }
.news-thanks { max-width: 720px; }
@media (max-width: 760px) { .news-keys .spacer { display: none; } .news-keys .key { flex: 1 1 100%; } }
.news .meta2 .link-btn { text-align: left; }

/* Which mailboxes an Email Manager schedule reads */
.mb-pick .checks-row { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 14.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lcd-text); }
.mb-pick .checks-row label { display: inline-flex; align-items: baseline; gap: 6px; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.mb-pick .checks-row input { accent-color: var(--lcd-glow); }
.mb-pick small { font-size: 12.5px; color: var(--lcd-dim); }
.mb-pick .note { margin: 6px 0 0; font: 400 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lcd-soft); }
.mb-pick[hidden] { display: none; }
.draft-form .mb-pick .lab { display: block; margin-bottom: 6px; font: 600 12px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }

/* Self-serve trial (signed in, in no company) */
.trial-box { margin: 18px 0 6px; padding: 16px 18px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); max-width: 640px; }
.trial-box h3 { margin: 0 0 6px; font: 700 20px/1.2 var(--cond); color: var(--lcd-text); }
.trial-box p { margin: 0 0 12px; color: var(--lcd-soft); }
.trial-form { display: grid; gap: 12px; }
.trial-form label > input { width: 100%; padding: 10px 12px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); font: 400 15px/1.3 var(--sans); color: var(--lcd-text); }
.trial-form fieldset { border: 0; margin: 0; padding: 0; }
.trial-form .checks-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; font-size: 14.5px; }
.trial-form input[type=radio] { accent-color: var(--lcd-glow); margin-right: 6px; }

/* Plan and billing (owner, Usage page) */
.billing .plans { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.billing .plans li { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--lcd); }
.billing .plans b { font: 700 19px/1.2 var(--cond); color: var(--lcd-text); }
.billing .plans .price { font: 600 15px/1.3 var(--sans); color: var(--lcd-text); }
.billing .plans small { font-size: 13px; color: var(--lcd-soft); }
.billing .plans .key { justify-self: start; margin-top: 6px; }
.paused-note .link-btn { margin-left: 6px; }
.billing .plans li { align-content: start; }

/* Settings → Integrations → beeps support (owner only) */
#support-access .sup-ask { border: 1px solid var(--rule, rgba(255,255,255,.15)); border-radius: 6px; padding: 10px 12px; margin: 0 0 12px; }
#support-access .sup-ask p, #support-access .sup-on { margin: 0 0 8px; text-wrap: pretty; }
#support-access .sup-on { display: flex; align-items: center; gap: 8px; }
#support-access .keys { flex-wrap: wrap; }
#support-access .sup-log { margin-top: 12px; }
#support-access .sup-log ul { margin: 8px 0 0; padding-left: 18px; }
#support-access .sup-log li { margin: 0 0 4px; }

/* Schedule editor → Email particular people */
.editor .pick-people { margin-top: 10px; }
.editor .pick-people summary { cursor: pointer; font-size: 14px; color: var(--lcd-soft); }
.editor .pick-people .checks-row { margin-top: 8px; }
.editor .pick-people .note { margin-top: 6px; }

/* Today → To approve: the change card opens under its row, keys and all */
.t-approve > details > .proposal { margin: 4px 0 6px 22px; }
.t-approve .t-open { margin: 0 0 12px 22px; }

/* Quieter chrome: the panel facts fold away, Today doesn't repeat its own list in Open cases, and the reassurance about
   approval lives once, in the LCD status line ("Changes wait for Approve"). */
.panel-facts > summary { cursor: pointer; list-style: none; }
.panel-facts > summary::-webkit-details-marker { display: none; }
.panel-facts > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.panel-facts[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.panel.in-today .legend.hist, .panel.in-today #history { display: none; }
.fine { display: none; }

/* Schedule editor: legends stay uppercase, but anything that is a sentence or a choice (tick boxes, the overnight note,
   people) is set in Barlow (DESIGN.md Legend Rule). The when-row wraps rather than squeezing the day to a chevron. */
.editor .checks-row label, .editor .overnight-tick, .editor .pick-people label, .editor .mb-pick label:not(.lab) { font: 400 14px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--lcd-soft); margin: 0; }
.editor .checks-row label { display: inline-flex; align-items: center; }
.editor .whenset { display: flex; flex-wrap: wrap; gap: 8px; }
.editor .whenset > * { flex: 1 1 9rem; min-width: 0; }
.editor .whenset select[aria-label="How often"] { flex-basis: 14rem; }

/* "Was this right?" sits quietly under every answer: plain words, not panel keys. */
.fb-btn { padding: 4px 8px; font: 400 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; border-color: transparent; color: var(--lcd-dim); min-height: 24px; }
.fb-btn:hover { border-color: var(--tile-edge); }

.gutter .g-t > span { white-space: nowrap; }
@media (max-width: 760px) { .gutter .g-t > span { display: block; font-size: 10.5px; } }

/* Today takes the whole window: the beep list and the indicators come back on every other page. */
.panel.in-today { grid-template-columns: minmax(0, 1fr); }
.panel.in-today > .zones, .panel.in-today > .indicators { display: none; }
.panel.in-today > .lcd { grid-column: 1 / -1; }
/* Start here: the one thing to do first. A raised LCD card with a red LED, not a red wash (DESIGN.md One Red Thing). */
.start-here { margin: 4px 0 26px; padding: 18px 20px 16px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--lcd-raised); box-shadow: 0 2px 8px rgba(40,50,42,.05); }
.start-here .sh-k { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font: 600 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--fault-ink); }
.start-here h3 { margin: 0 0 6px; font: 600 clamp(20px, 2.2vw, 26px)/1.15 var(--cond); color: var(--lcd-text); text-wrap: balance; }
.start-here .sh-v { margin: 0 0 6px; font-size: 15px; line-height: 1.45; color: var(--lcd-text); max-width: 66ch; }
.start-here .sh-m { margin: 0 0 14px; font: 500 12px/1.3 var(--mono); color: var(--lcd-dim); }
.start-here .sh-m .link-btn { font: inherit; }
.start-here .keys { display: flex; flex-wrap: wrap; gap: 8px; }
.start-here .proposal { margin: 0 0 10px; }

/* A beep's home: compact header, what it keeps watch on, then open conversations. "Open cases" (every beep's, which
   Today covers) and "Beeps now" (the zone LEDs already say it) are gone from the side columns. */
.legend.hist, #history, .indicators > section:first-child { display: none; }
.beep-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 2px 0 22px; }
.beep-head h2 { margin: 0; font: 600 30px/1.05 var(--cond); color: var(--lcd-text); }
.beep-head p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--lcd-soft); max-width: 66ch; }
.beep-head .hero-status { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font: 500 12px/1 var(--mono); color: var(--lcd-dim); text-transform: none; letter-spacing: 0; justify-content: flex-start; }
.beep-head .hero-status span { display: inline-flex; gap: 6px; align-items: center; }
.watch-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--lcd-raised); }
.watch-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--lcd-rule); }
.watch-row:last-child { border-bottom: 0; }
.watch-row .led { margin-top: .45em; }
.watch-row p { margin: 0; }
.watch-row .w-name { font: 600 15px/1.3 var(--sans); color: var(--lcd-text); }
.watch-row .w-read { margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--lcd-text); max-width: 66ch; }
.watch-row .w-meta { margin-top: 4px; font: 500 11.5px/1.3 var(--mono); color: var(--lcd-dim); }
.watch-row.off .w-name, .watch-row.off .w-read { color: var(--lcd-soft); }
.watch-add { margin: 10px 2px 0; font-size: 14px; color: var(--lcd-soft); }
.case-group.watch { margin-bottom: 26px; }
.beep-checks { margin: 8px 0 10px; padding-left: 20px; color: var(--lcd-soft); font-size: 14.5px; line-height: 1.6; }
.home-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 14px; }
.home-foot .case-search { flex: 1 1 260px; }
@media (max-width: 760px) {
  .beep-head h2 { font-size: 24px; }
  .watch-row { grid-template-columns: 12px minmax(0, 1fr); }
  .watch-row .key { grid-column: 2; justify-self: start; }
}
/* The beep home reads top-down now (header, watch, open), so its rows match Today's: title, then the verdict. */
.is-home .home-main { justify-content: flex-start; }
.is-home .home-now { max-width: none; margin: 0 0 16px; }
.is-home .home-foot { justify-content: flex-start; }
.is-home .cases-hint { text-align: left; }
.is-home .home-now .case-row { align-items: start; padding: 11px 6px; }
.is-home .home-now .case-row .led { margin-top: .45em; }
.is-home .home-now .c-main { display: grid; gap: 3px; }
.is-home .home-now .c-title { max-width: none; }
.is-home .home-now .c-verdict { display: -webkit-box; -webkit-line-clamp: 2; white-space: normal; font-size: 13.5px; }
.is-home .home-now .c-meta { grid-auto-flow: row; gap: 4px; }
@media (max-width: 760px) { .is-home .home-now .c-verdict { display: -webkit-box; } }

/* ---------- Settings as full-width panel pages (22 Oct) ----------
   One vocabulary: .key.approve commits (Save, Invite, Choose), .key.reject is its partner, .edit-btn opens or edits a
   row, .link-btn is a quiet aside inside a sentence. Rows: lead (LED or buddy) · what · a small note · one action. */
.panel.in-settings { grid-template-columns: minmax(0, 1fr); }
.panel.in-settings > .zones, .panel.in-settings > .indicators { display: none; }
.panel.in-settings > .lcd { grid-column: 1 / -1; grid-template-rows: minmax(0, 1fr); }
.panel.in-settings .lcd-status, .panel.in-settings .composer, .panel.in-settings .paused-note.is-trial { display: none; }
.panel.in-settings .log { padding-top: 24px; padding-bottom: 32px; }
@media (max-width: 760px) { .panel.in-settings .lcd { height: calc(100dvh - 128px); } }

.s-tabs { display: flex; margin: 0 0 26px; border-bottom: 1px solid var(--lcd-rule); overflow-x: auto; scrollbar-width: none; }
.s-tabs::-webkit-scrollbar { display: none; }
.s-tabs button { flex: none; min-height: 44px; padding: 0 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 13px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-dim); cursor: pointer; }
.s-tabs button:first-child { padding-left: 2px; }
.s-tabs button:hover { color: var(--lcd-text); }
.s-tabs button[aria-current="page"] { color: var(--lcd-text); border-bottom-color: var(--lcd-text); }
.s-tabs button:focus-visible { outline: 2px solid var(--lcd-glow); outline-offset: -4px; }
.s-guide { margin: -10px 0 20px; font-size: 13.5px; color: var(--lcd-dim); }

.s-sub { margin: 30px 0 8px; font: 600 12px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--legend-soft); }
.s-sub:first-child { margin-top: 0; }
.s-sub b { margin-left: 6px; font-weight: 600; color: var(--lcd-dim); }
.s-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lcd-rule); }
.s-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: center; min-height: 60px; padding: 10px 2px; border-bottom: 1px solid var(--lcd-rule); }
.s-row.led-lead { grid-template-columns: 12px minmax(0, 1fr) auto auto; }
.s-row > .led { justify-self: center; }
.s-row > .buddy { justify-self: center; }
.s-row .wh { min-width: 0; }
.s-row .wh > b { display: block; font: 600 15.5px/1.25 var(--sans); color: var(--lcd-text); overflow-wrap: anywhere; }
.s-row .wh > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--lcd-soft); }
.s-row .wh > small { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--mono); color: var(--lcd-dim); overflow-wrap: anywhere; }
.s-row .as { font: 500 12px/1.3 var(--mono); color: var(--lcd-dim); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.s-row .ac { justify-self: end; display: flex; gap: 8px; align-items: center; }
.s-row .money { min-width: 72px; font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--lcd-text); text-align: right; }
.s-row.off .wh > b, .s-row.off .wh > span { color: var(--lcd-soft); }
.s-row.is-open { border-bottom-style: dashed; }
.s-more { grid-column: 1 / -1; padding: 6px 0 12px; }
.s-more[hidden] { display: none; }
.edit-btn { min-height: 36px; min-width: 64px; cursor: pointer; }
.edit-btn.warn { color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn-ink) 55%, transparent); }
.edit-btn.warn:hover { background: color-mix(in srgb, var(--led-amber) 10%, transparent); }
.s-foot { margin: 14px 0 0; font-size: 14px; color: var(--lcd-soft); }
.s-p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--lcd-soft); max-width: 66ch; }

/* Sections that fold: a heading, what's in it, a chevron. */
.s-secs { border-top: 1px solid var(--lcd-rule); }
.s-sec { border-bottom: 1px solid var(--lcd-rule); }
.s-sec > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 14px; gap: 4px 16px; align-items: baseline; min-height: 52px; padding: 15px 2px; }
.s-sec > summary::-webkit-details-marker { display: none; }
.s-sec > summary b { font: 600 15.5px/1.25 var(--sans); color: var(--lcd-text); }
.s-sec > summary span { font-size: 14px; color: var(--lcd-soft); }
.s-sec > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--lcd-dim); border-bottom: 2px solid var(--lcd-dim); transform: rotate(45deg) translateY(-3px); justify-self: end; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.s-sec[open] > summary::after { transform: rotate(-135deg); }
.s-sec > summary:focus-visible { outline: 2px solid var(--lcd-glow); outline-offset: 2px; }
.s-sec-body { padding: 0 2px 20px; }
.s-sec-body > .s-rows { border-top: 0; }
.s-sec-body > .s-rows .s-row:last-child { border-bottom: 0; }

/* Changes on a page that saves as one: a bar that floats at the bottom until saved. */
.s-savebar { position: sticky; bottom: 12px; z-index: 3; display: flex; gap: 14px; align-items: center; justify-content: space-between; margin: 24px 0 0; padding: 10px 10px 10px 16px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--lcd-raised); box-shadow: 0 6px 20px rgba(40,50,42,.12), 0 1px 3px rgba(40,50,42,.08); font-size: 14px; color: var(--lcd-text); }
.s-savebar[hidden] { display: none; }
.s-savebar .link-btn { margin-left: 8px; }
.s-savebar .err { color: var(--fault-ink); }
@media (max-width: 760px) { .s-savebar { bottom: 8px; padding: 8px 8px 8px 14px; } }

/* Integration tools, nested under their connection. */
.s-tools { list-style: none; margin: 0; padding: 0; }
.s-tool { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 10px 0; }
.s-tool + .s-tool { border-top: 1px solid color-mix(in srgb, var(--lcd-rule) 60%, transparent); }
.s-tool .t { min-width: 0; font-size: 14px; color: var(--lcd-text); }
.s-tool .t small { display: block; font: 500 11.5px/1.3 var(--mono); color: var(--lcd-dim); overflow-wrap: anywhere; }
.s-tool .why { grid-column: 1 / -1; font-size: 13px; color: var(--lcd-soft); }
.cx-seg input:disabled + span { opacity: .4; text-decoration: line-through; }

/* Usage: one figure in pounds, then rows. */
.s-month { padding: 4px 2px 6px; }
.s-big { font: 500 32px/1 var(--mono); letter-spacing: -.02em; color: var(--lcd-text); font-variant-numeric: tabular-nums; }
.s-meter { height: 3px; margin: 12px 0 8px; max-width: 420px; border-radius: 2px; background: var(--lcd-rule); overflow: hidden; }
.s-meter i { display: block; height: 100%; background: var(--lcd-text); }
.s-meter i.near { background: var(--led-amber); } .s-meter i.over { background: var(--led-red); }
.s-month p { margin: 0; font-size: 14px; color: var(--lcd-soft); }
.s-range { display: flex; gap: 4px; margin: 0 0 18px; }
.s-range button { min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: none; font: 500 13.5px/1 var(--sans); color: var(--lcd-soft); cursor: pointer; }
.s-range button[aria-pressed="true"] { border-color: var(--tile-edge); background: var(--lcd-raised); color: var(--lcd-text); }
.s-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; margin: 8px 0 4px; }
.s-form label { display: grid; gap: 6px; font-size: 13.5px; color: var(--lcd-soft); }
.s-form input, .s-form select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 6px; background: var(--lcd); font: 400 15px/1.2 var(--sans); color: var(--lcd-text); }
.s-form .keys { display: flex; gap: 8px; }

/* How we use Uptick: the owner's own words, first on the Beeps page. */
.s-conv textarea { display: block; width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); font: 400 15px/1.55 var(--sans); color: var(--lcd-text); resize: vertical; }
.s-conv .keys { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; }
.s-conv .keys small { font-size: 13px; color: var(--lcd-dim); }
.beep-edit { grid-column: 1 / -1; display: grid; gap: 14px; padding: 6px 0 16px 52px; }
.beep-edit .beep-name { display: flex; gap: 10px; align-items: center; }
.beep-edit .beep-name input { min-height: 40px; max-width: 320px; }
.beep-edit .instr { display: none; grid-column: auto; }
.beep-row.open .beep-edit .instr { display: grid; }
.s-row.beep-row { padding: 10px 2px; }
.s-row.beep-row > .buddy { grid-row: auto; width: 32px !important; height: 32px !important; align-self: center; }
.beep-edit .beep-name input { padding: 8px 10px; border: 1px solid var(--tile-edge); border-radius: 6px; background: var(--lcd); font: 500 16px/1.2 var(--sans); }
.beep-edit .keys { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 760px) {
  .s-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .s-row.led-lead { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .s-row .as { grid-column: 2; grid-row: 2; text-align: left; white-space: normal; }
  .s-row .as:empty { display: none; }
  .s-row .ac, .s-row .money { grid-column: 3; grid-row: 1 / span 2; }
  .s-sec > summary { grid-template-columns: minmax(0, 1fr) 14px; }
  .s-sec > summary span { grid-column: 1; grid-row: 2; }
  .s-sec > summary::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .s-tool { grid-template-columns: minmax(0, 1fr); }
  .s-tool .cx-seg { justify-self: start; }
  .beep-edit { padding-left: 0; }
}

/* No red text links: a remove is a quiet link, the confirm says what happens. */
.cx-link.danger { color: var(--lcd-soft); }
.cx-link.danger:hover { color: var(--fault-ink); }
/* Integrations in the settings row style: a light, the name, a note, one button; details open beneath, indented. */
.cx-list { border: 0; border-top: 1px solid var(--lcd-rule); border-radius: 0; background: none; overflow: visible; }
.cx { border-bottom: 1px solid var(--lcd-rule); }
.cx + .cx { border-top: 0; }
.cx.open { background: none; }
.cx.open > .cx-row { border-bottom: 1px dashed var(--lcd-rule); }
.cx-row { grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 4px 16px; min-height: 60px; padding: 10px 2px; }
.cx:not(.open) .cx-row:hover { background: color-mix(in srgb, var(--lcd-raised) 70%, transparent); }
.cx-row > .led { justify-self: center; }
.cx-text b { font: 600 15.5px/1.25 var(--sans); letter-spacing: 0; }
.cx-text > span { font-size: 14px; color: var(--lcd-soft); }
.cx-row > .as { font: 500 12px/1.3 var(--mono); color: var(--lcd-dim); white-space: nowrap; }
.cx-detail-body { padding: 14px 2px 20px 30px; }
.cx-actions .cx-btn, .cx-detail .cx-btn { min-height: 40px; }
.s-more-tools > summary { list-style: none; display: inline-block; margin: 8px 0 0; cursor: pointer; font-size: 14px; }
.s-more-tools > summary::-webkit-details-marker { display: none; }
.s-more-tools[open] > summary { display: none; }
@media (max-width: 760px) {
  .cx-row { grid-template-columns: 12px minmax(0, 1fr) auto; padding: 10px 2px; }
  .cx-row > .as { grid-column: 2; grid-row: 2; white-space: normal; }
  .cx-row > .as:empty { display: none; }
  .cx-row > button { grid-column: 3; grid-row: 1 / span 2; }
  .cx-detail-body { padding: 12px 2px 18px 12px; }
}
/* People and mailbox rows join the settings row style (their old card styles came first in this file). */
.s-row.person, .s-row.mb-row { grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 4px 16px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--lcd-rule); border-radius: 0; }
.s-row.person .ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; justify-content: start; }
.s-row.person .ctl .cx-field { min-width: 180px; }
.s-row .s-more .pbeeps { margin-top: 10px; }
.s-row .tag.soft { margin-left: 6px; vertical-align: 2px; }
.invite-form.s-more { width: 100%; margin: 0; }
[data-invite-wrap] { flex-wrap: wrap; }
@media (max-width: 760px) {
  .s-row.person, .s-row.mb-row { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .invite-form.s-more { grid-template-columns: 1fr; }
}
.brand-dot { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(40,38,30,.2); vertical-align: -1px; }
.brand-form .s-sec-body .brand-grid { margin-top: 2px; }
.brand-file .edit-btn { display: inline-flex; align-items: center; cursor: pointer; }
.beep-edit[hidden] { display: none; }
.beep-edit .swatch-name { text-align: left; margin: 6px 0 0; }
.cx-list { box-shadow: none; }

/* Phones: the five bezel keys get their own full-width row, so none is cut off. */
@media (max-width: 760px) {
  .bezel { flex-wrap: wrap; row-gap: 10px; }
  .bezel .signout { margin-left: auto; }
  .bezel .modes { order: 5; flex: 1 1 100%; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .bezel .mode { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 9px 2px 8px; font-size: 11.5px; letter-spacing: .05em; text-align: center; }
}
/* After the last change in a conversation is approved. */
.finish-ask { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 0; }
.finish-ask > span { margin-right: 4px; font-size: 14px; color: var(--lcd-soft); }
.proposal.resolved .outcome { font: 400 14.5px/1.5 var(--sans); color: var(--lcd-text); }
.proposal.resolved .outcome.err { color: var(--fault-ink); }
.event-body > .feedback { margin-top: 14px; }
.ref-chip { white-space: nowrap; font-family: var(--mono); }
/* A drafted schedule reads back as one sentence; the underlined parts open the details. */
.s-sent { margin: 0 0 22px; padding: 20px 22px 18px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--lcd-raised); }
.s-said { margin: 0 0 12px; font-size: 13.5px; color: var(--lcd-dim); }
.s-said q { font-style: italic; color: var(--lcd-soft); }
.s-sentence { margin: 0 0 10px; font-size: 18px; line-height: 1.65; color: var(--lcd-text); max-width: 58ch; text-wrap: pretty; }
.s-blank { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; font-weight: 600; color: var(--lcd-text); text-align: left; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--lcd-glow); text-underline-offset: 4px; cursor: pointer; }
.s-blank:hover { text-decoration-color: var(--lcd-text); }
.s-blank:focus-visible { outline: 2px solid var(--lcd-glow); outline-offset: 2px; border-radius: 2px; }
.s-note { margin: 0 0 16px; font-size: 13.5px; color: var(--lcd-soft); }
.s-sent .draft-form { margin: 0 0 16px; }
.s-sent .draft-form[hidden] { display: none; }
.s-sent .keys { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.s-sent .keys .link-btn { margin-left: 6px; font-size: 14px; }
.s-sent .work { margin: 0; }
.s-ok { display: flex; gap: 10px; align-items: baseline; margin: 0 0 18px; font-size: 14.5px; color: var(--lcd-text); }
.s-ok .led { flex: none; transform: translateY(1px); }
.sched-head { grid-template-columns: 12px 34px minmax(0, 1fr) auto; align-items: center; border-bottom: 0; }
.sched-head > .led { margin: 0; }
.sched-list > .sched { border-bottom: 1px solid var(--lcd-rule); }
.sched-list > .sched:last-child { border-bottom: 0; }
.sched.off .sched-head .w-name, .sched.off .sched-head .w-read { color: var(--lcd-soft); }
.sched.just-saved > .sched-head { animation: justsaved 2.4s cubic-bezier(.16,1,.3,1) 1; }
@keyframes justsaved { from { background: color-mix(in srgb, var(--led-green) 16%, var(--lcd-raised)); } to { background: transparent; } }
.sched .editor { padding: 4px 16px 18px 74px; }
@media (max-width: 760px) {
  .s-sent { padding: 16px 16px 14px; }
  .s-sentence { font-size: 16.5px; }
  .sched-head { grid-template-columns: 12px 34px minmax(0, 1fr); }
  .sched-head > .edit-btn { grid-column: 3; justify-self: start; }
  .sched .editor { padding: 4px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .sched.just-saved > .sched-head { animation: none; } }
/* Inside a conversation the case bar is the sticky one: the trial or paused line scrolls away under it. */
.log:has(.case-bar) .paused-note { position: static; }
.log:has(.case-bar) .paused-note.is-trial { display: none; }   /* the trial line is on Today and Usage; a conversation keeps its own bar clear */
/* A team note is people talking to each other, not to the beep: a dashed note, not a question bubble. */
.ask.note .ask-body { border: 1px dashed var(--tile-edge); border-radius: 8px; background: transparent; padding: 8px 12px 10px; }
.ask.note .note-tag { color: var(--warn-ink); }
/* Tap targets */
.fb-btn { min-height: 32px; }
.link-btn { min-height: 28px; }
.help-guides li.pinned > details > summary b::after { content: 'Start here'; margin-left: 10px; padding: 2px 6px; border: 1px solid var(--tile-edge); border-radius: 4px; font: 600 10.5px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); vertical-align: 2px; }

/* ---------- Critique fixes (22 Oct) ---------- */
/* Rows without a status light keep their text aligned without an unlit LED. */
.s-row.no-lead { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width: 760px) { .s-row.no-lead { grid-template-columns: minmax(0, 1fr) auto; } .s-row.no-lead .as { grid-column: 1; } .s-row.no-lead .ac, .s-row.no-lead .money { grid-column: 2; } }
/* A tool's chosen permission is a latched key, not the dark Approve fill. */
.cx-detail .cx-seg input:checked + span { background: var(--key-press); color: var(--lcd-text); box-shadow: inset 0 2px 5px rgba(40,38,30,.18); }
.cx-seg input:disabled + span { opacity: 1; color: var(--lcd-dim); }
/* Schedule rows: when it runs is a readout (mono); who and why stay in sentences. */
.sched-head .w-meta { font: 400 13px/1.45 var(--sans); color: var(--lcd-soft); text-wrap: pretty; }
.sched-head .w-when { font: 500 12px/1.45 var(--mono); color: var(--lcd-dim); }
.sched-head .s-act { display: flex; gap: 8px; align-items: center; }
.sched-head .switch { min-height: 36px; }
@keyframes justsaved { from { background: color-mix(in srgb, var(--led-amber) 18%, var(--lcd-raised)); } to { background: transparent; } }
@media (max-width: 760px) {
  .sched-head { grid-template-columns: 12px 34px minmax(0, 1fr) auto; }
  .sched-head > .s-act { grid-column: 4; flex-direction: column; align-items: stretch; }
}
/* Readability and tap targets the detector flagged. */
.lcd textarea::placeholder, .lcd input::placeholder { color: var(--lcd-dim); opacity: 1; }
.s-row .wh > small, .s-tool .t small { font-size: 12px; }
.panel.in-settings .board-head p, .cx-head p { max-width: 58ch; }
#support-access .sup-ask { border: 0; border-left: 1px solid var(--lcd-rule); border-radius: 0; padding: 2px 0 2px 14px; }
.tag-row select { min-height: 32px; }
#support-access .sup-log > summary, .panel-facts > summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; }
.cases-hint, #checks li, .s-p, .s-foot { text-wrap: pretty; }
.beep-edit .swatch-name { grid-column: auto; justify-self: start; }

/* Settings tabs as a strip of latching keys, like the view keys on the bezel: the open page is the key that's in. */
.s-tabs { display: inline-flex; max-width: 100%; margin: 0 0 26px; border: 1px solid var(--case-edge); border-bottom: 1px solid var(--case-edge); border-radius: 6px; background: var(--case-hi); overflow-x: auto; }
.s-tabs button { min-height: 40px; padding: 0 16px; margin: 0; border: 0; border-right: 1px solid var(--case-edge); border-radius: 0; color: var(--legend-soft); font-size: 12.5px; }
.s-tabs button:first-child { padding-left: 16px; }
.s-tabs button:last-child { border-right: 0; }
.s-tabs button:hover { background: var(--key); color: var(--legend); }
.s-tabs button[aria-current="page"] { background: var(--key-press); color: var(--legend); border-bottom-color: transparent; box-shadow: inset 0 2px 5px rgba(40,38,30,.14); }
@media (max-width: 760px) {
  .s-tabs { display: flex; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .s-tabs button { padding: 0 13px; }
}
.s-foot > p { margin: 0 0 4px; }
.s-asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.s-asks .link-btn { text-align: left; }

/* ---------- The beep list says what each beep last found; the right column keeps its schedules (22 Oct) ---------- */
.zone .zl time { margin-left: auto; padding-right: 18px; font: 500 11px/1 var(--mono); color: var(--legend-soft); white-space: nowrap; }
.zone .sub.latest { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.zone.is-new .sub.latest { color: var(--legend); font-weight: 600; }
.zone.is-new .zl time { color: var(--legend); }
.zone > .led { top: 12px; }
.watch-rail h2 b { margin-left: 4px; color: var(--legend-soft); font-weight: 600; }
.rail-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--case-edge); }
.rail-rows li { border-bottom: 1px solid var(--case-edge); }
.rail-rows button { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 10px; width: 100%; padding: 10px 2px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rail-rows button:hover { background: var(--key); }
.rail-rows button:focus-visible { outline: 2px solid var(--lcd-glow); outline-offset: -2px; }
.rail-rows .led { width: 8px; height: 8px; margin-top: .4em; }
.rail-rows b { font: 600 14px/1.25 var(--sans); color: var(--legend); }
.rail-rows .r-read { grid-column: 2; font-size: 13px; line-height: 1.35; color: var(--legend); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rail-rows small { grid-column: 2; font: 500 11.5px/1.3 var(--mono); color: var(--legend-soft); }
.rail-rows li.off b, .rail-rows li.off .r-read { color: var(--legend-soft); }
.rail-none { margin: 0 0 6px; font-size: 13.5px; color: var(--legend-soft); }
.rail-add { margin: 10px 2px 0; font-size: 13.5px; }
.rail-add .link-btn { color: var(--legend); }
/* Wide screens show the schedules in the column; narrower ones keep them as Keeping watch on the beep's home. */
@media (min-width: 1181px) { .is-home .case-group.watch { display: none; } }
@media (max-width: 1180px) { .watch-rail { display: none; } #checks-sec[hidden] { display: none; } }
/* Picked up from the beep list: one quiet line saying why you're in this conversation. */
.resumed { margin: 8px 0 14px; font-size: 13.5px; color: var(--lcd-soft); }
.resumed b { color: var(--lcd-text); font-weight: 600; }

/* Describe a job → a beep of its own: the card on Today, requests for the owner, and the build page. Same raised
   surface as Start here; facts in a two-column list that stacks on a phone. */
.nb-wrap { margin: 0 0 6px; }
.nb { margin: 0 0 26px; padding: 18px 20px 16px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--lcd-raised); box-shadow: 0 2px 8px rgba(40,50,42,.05); }
.nb .nb-k { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font: 600 12px/1.2 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); }
.nb h3 { margin: 0 0 6px; font: 600 clamp(20px, 2.2vw, 26px)/1.15 var(--cond); color: var(--lcd-text); text-wrap: balance; }
.nb > p, .nb form > p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--lcd-soft); max-width: 66ch; }
.nb > p b { color: var(--lcd-text); font-weight: 600; }
.nb-dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 16px; margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--lcd-rule); font-size: 14px; }
.nb-dl dt { font: 500 12px/1.6 var(--mono); color: var(--lcd-dim); }
.nb-dl dd { margin: 0; color: var(--lcd-text); line-height: 1.45; overflow-wrap: anywhere; }
.nb .keys { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nb-label { display: block; margin: 0 0 6px; font: 500 12.5px/1.4 var(--mono); color: var(--lcd-soft); }
.nb textarea, .nb select { width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--tile-edge); border-radius: 6px; background: var(--lcd); color: var(--lcd-text); font: inherit; font-size: 14.5px; }
.nb textarea { resize: vertical; }
.nb textarea:focus-visible, .nb select:focus-visible { outline: 2px solid var(--lcd-glow); outline-offset: 1px; }
.nb-instr { margin: 0 0 16px; }
.nb-instr summary { cursor: pointer; font: 500 13px/1.4 var(--mono); color: var(--lcd-soft); }
.nb-instr pre { white-space: pre-wrap; margin: 8px 0 0; padding: 12px; border-radius: 6px; background: var(--lcd); font: 13.5px/1.5 var(--sans, inherit); color: var(--lcd-text); max-width: 72ch; }
.nb-edit[hidden] { display: none; }
.nb-reply { margin-top: 14px; }
.nb .rows { margin: 0 0 16px; }
.nb-foot { margin: 12px 0 0 !important; font: 500 12px/1.4 var(--mono) !important; color: var(--lcd-dim) !important; }
.s-add { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 14px 0 0; font-size: 13.5px; color: var(--lcd-soft); }
@media (max-width: 759px) {
  .nb { padding: 16px 14px 14px; }
  .nb-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .nb-dl dt { margin-top: 8px; }
}

/* ---------- a conversation as messages (23 Oct, option B): people on the right, the beep on the left ---------- */
.mt { margin: 0 0 20px; }
.mt-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px; font-size: 13px; color: var(--lcd-soft); }
.mt-h b { font-size: 13.5px; font-weight: 600; color: var(--lcd-text); }
.mt-h time { font: 500 11.5px/1 var(--mono); color: var(--lcd-dim); font-variant-numeric: tabular-nums; }
.mt-tag { padding: 3px 7px 2px; border-radius: 999px; background: var(--lcd-raised); font: 600 10.5px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-soft); }
/* people */
.mt-me { display: flex; flex-direction: column; align-items: flex-end; width: fit-content; max-width: min(78%, 560px); margin-left: auto; padding: 0; border: 0; }
.mt-me .mt-said { padding: 11px 15px; border-radius: 16px 16px 4px 16px; background: var(--lcd-text); color: var(--lcd); font-size: 15px; line-height: 1.5; }
.mt-me .mt-said p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: inherit; color: inherit; }
.mt-me .mt-said p::before { content: none; }
.mt-me .mt-said .at { color: inherit; font-weight: 700; }
.mt-me .media-strip { margin-top: 8px; }
.mt-me.note .mt-said { background: transparent; color: var(--lcd-text); border: 1px dashed var(--case-edge); }
.mt-me .note-tag { margin: 0 0 5px; font: 600 11px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--warn-ink); }
/* the beep */
.event.mt-beep, .thinking.mt-beep { display: flex; gap: 10px; align-items: flex-start; max-width: min(94%, 720px); }
.mt-beep > .buddy { flex: none; margin-top: 22px; }   /* level with the top of its bubble, under the name line */
.mt-wrap { flex: 1; min-width: 0; }
.mt-bub { padding: 14px 16px 12px; border-radius: 16px 16px 16px 4px; background: var(--lcd-raised); border: 1px solid var(--tile-edge); }
.mt-bub .verdict { display: flex; gap: 10px; align-items: baseline; margin: 0 0 6px; font: 600 16.5px/1.35 var(--sans); letter-spacing: 0; color: var(--lcd-text); text-wrap: pretty; }
.mt-bub .verdict .led { flex: none; align-self: center; margin: 0; }
.mt-bub .lede { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--lcd-soft); max-width: 68ch; }
.mt-find { list-style: none; margin: 8px 0 2px; padding: 0; }
.mt-find li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 15px; line-height: 1.5; color: var(--lcd-text); }
.mt-find li + li { border-top: 1px solid var(--lcd-rule); }
.mt-find .led { width: 8px; height: 8px; margin-top: 7px; }
.mt-find b { font-weight: 600; }
.mt-find li.fault b { color: var(--fault-ink); }
.mt-find li.warn b { color: var(--warn-ink); }
.mt-find .ref-chip { margin: 0 2px; padding: 1px 6px; font-size: 11.5px; vertical-align: 1px; }
.mt-bub .actions-block { margin: 12px 0 2px; }
.mt-bub .mail-draft { background: var(--lcd); }
.mt-wrap > .proposal { margin: 10px 0 0; }
.mt-wrap > .feedback { margin: 6px 0 0 2px; }
.thinking.mt-beep { margin: 0 0 20px; }
.thinking .mt-bub.tk { display: flex; align-items: center; gap: 12px; min-height: 0; font: 500 13.5px/1.4 var(--sans); color: var(--lcd-soft); }
/* quiet lines across the thread: decisions, "picked up from" */
.mt-sys { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; font: 500 12px/1.4 var(--mono); color: var(--lcd-dim); text-align: center; }
.mt-sys::before, .mt-sys::after { content: ""; flex: 1; height: 1px; background: var(--lcd-rule); }
.mt-sys span { max-width: 70ch; }
.mt-sys b { font-weight: 600; color: var(--lcd-text); }
/* the slim header */
.case-bar { flex-wrap: nowrap; gap: 10px; margin-bottom: 18px; padding: 10px 0; }
.case-bar .back { padding: 2px 6px 4px 0; font: 600 24px/1 var(--sans); }
.case-bar .case-title { flex: 1; min-width: 0; margin: 0; font: 600 18px/1.25 var(--cond); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-bar .cs { flex: none; padding: 6px 9px 5px; border-radius: 999px; background: var(--lcd-raised); font-size: 11.5px; white-space: nowrap; }
.case-bar .cs .led { width: 8px; height: 8px; }
.case-faces { display: inline-flex; flex: none; padding-left: 6px; }
.case-faces:empty { display: none; }
.case-faces i { display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border: 2px solid var(--lcd); border-radius: 50%; background: var(--case-lo); font: 600 10.5px/1 var(--sans); font-style: normal; color: var(--lcd-soft); }
.case-faces i.team { background: rgba(57,194,90,.18); color: var(--lcd-glow); }
.case-bar .case-btn { flex: none; height: 32px; padding: 0 11px; border-radius: 6px; background: var(--key); color: var(--lcd-text); font-weight: 600; }
.case-bar .case-btn.more { width: 34px; padding: 0; font-size: 18px; letter-spacing: 0; }
.case-more { position: relative; flex: none; }
.case-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; display: grid; min-width: 240px; padding: 6px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--lcd); box-shadow: 0 10px 28px rgba(30,40,32,.16); }
.case-menu[hidden] { display: none; }
.case-mi { padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; font: 500 14px/1.2 var(--sans); color: var(--lcd-text); }
.case-mi:hover:not(:disabled), .case-mi:focus-visible { background: var(--lcd-raised); }
.case-mi:disabled { opacity: .45; cursor: default; }
.case-menu .case-share { display: grid; gap: 0; margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--lcd-rule); }
.case-menu .case-share .vis { margin: 6px 10px 4px; font-size: 12.5px; color: var(--lcd-dim); }
.invite-pop { margin: -8px 0 16px; }
.log:has(.case-bar) .paused-note.is-trial { display: none; }
@media (max-width: 760px) {
  .case-bar { gap: 6px; flex-wrap: nowrap; }
  .case-bar .cs { order: 0; width: auto; padding: 6px; }
  .case-bar .cs #case-label { display: none; }
  .case-faces { display: none; }
  .case-bar .case-btn.new { width: 34px; padding: 0; font-size: 0; }
  .case-bar .case-btn.new::before { content: "+"; font-size: 20px; line-height: 1; }
  .case-bar .case-title { font-size: 16.5px; }
  .event.mt-beep, .thinking.mt-beep { max-width: 100%; }
  .mt-beep > .buddy { display: none; }
  .mt-me { max-width: 88%; }
  .mt-bub { padding: 12px 13px 10px; }
  .mt-find li, .mt-bub .lede, .mt-me .mt-said { font-size: 14.5px; }
}

/* ---------- Today (23 Oct): the ask box first, then your beeps; what's waiting beside it on wide screens ---------- */
.panel.in-today .composer { display: none; }   /* its contents move into Today's head (placeComposer) */
.panel.in-today .log-inner { width: min(1220px, 100% - 48px); }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 56px; }
@media (min-width: 1280px) {
  .today-grid { grid-template-columns: minmax(0, 600px) minmax(0, 560px); align-items: start; justify-content: center; }
  .today-side { padding-top: 6px; }
}
.today-main { min-width: 0; }
.today-side { min-width: 0; }
.today-main .today-head { margin-bottom: 18px; }
.today-ask .composer-inner { width: auto; margin: 0; display: flex; flex-direction: column; }
.today-ask .quick { order: 2; margin: 12px 0 0; }
.today-ask .prompt { padding: 14px 12px 14px 18px; border-radius: 16px; box-shadow: 0 4px 16px rgba(40,50,42,.07); }
.today-ask .prompt textarea { font-size: 16.5px; min-height: 28px; }
.today-ask .fine, .today-ask .dock { display: none; }
.today-ask + .work { margin: 14px 0 0; }
.quick .intent { padding: 9px 13px; border-radius: 999px; font: 600 13.5px/1 var(--sans); color: var(--lcd-text); background: var(--key); }
.quick .intent[aria-pressed="true"] { background: var(--lcd-text); border-color: var(--lcd-text); color: var(--lcd); }
.today-beeps { margin: 30px 0 0; }
.today-beeps .legend { margin: 0 0 10px; }
.tb-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tb { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1px solid var(--tile-edge); border-radius: 999px; background: var(--key); font: 500 13.5px/1 var(--sans); color: var(--lcd-text); transition: background .15s, border-color .15s; }
.tb:hover { background: var(--lcd-raised); border-color: var(--lcd-glow); }
.tb-new { border-style: dashed; color: var(--lcd-glow); font-weight: 600; padding-left: 10px; }
.tb-plus { font-size: 17px; line-height: 1; }
.today-main .starters { margin-top: 30px; }
.today-side > .case-group:first-child, .today-side > section:first-child, .today-side > div:first-child { margin-top: 0; }
.rest-fold > summary b { margin-left: 4px; color: var(--lcd-soft); }
.rest-fold > .case-group { margin: 10px 0 0 14px; }
@media (max-width: 760px) {
  .panel.in-today .log-inner { width: calc(100% - 28px); }
  .today-ask .prompt textarea { font-size: 16px; }
  .quick .intent { padding: 8px 11px; font-size: 13px; }
}

/* ---------- conversation polish (23 Oct): no black slabs, more room ---------- */
/* Your side is a soft green tint with ink text: still plainly yours, never heavier than the answer. */
.mt-me .mt-said { background: var(--me-bub); color: var(--lcd-text); border: 1px solid var(--me-edge); }
.mt-me .mt-said .at, .mt-me .said-more { color: var(--me-ink); }
.mt-me.note .mt-said { background: transparent; border: 1px dashed var(--case-edge); }
/* A long question folds to its first lines. */
.mt-me.long .mt-said p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mt-me.long.open .mt-said p { display: block; -webkit-line-clamp: unset; }
.said-more { margin: 8px 0 0; padding: 0; border: 0; background: none; font: 600 13px/1.2 var(--sans); color: var(--lcd-glow); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* A conversation gets a wider column than other pages; your bubbles can be wider too. */
.log-inner:has(> .case-bar) { width: min(940px, 100% - 48px); }
.mt-me { max-width: min(74%, 640px); }
.event.mt-beep, .thinking.mt-beep { max-width: 100%; }
.mt-bub .lede { max-width: 76ch; }
/* Record numbers are keys: press to copy. */
button.ref-chip { cursor: copy; font: 500 11.5px/1 var(--mono); }
button.ref-chip:focus-visible { outline: 2px solid var(--lcd-glow); outline-offset: 1px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; transform: translateX(-50%); max-width: min(92vw, 520px); margin: 0; padding: 10px 16px; border-radius: 10px; background: var(--lcd-text); color: var(--lcd); font: 500 14px/1.4 var(--sans); box-shadow: 0 8px 24px rgba(20,30,22,.22); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.toast.out { opacity: 0; transform: translate(-50%, 6px); }
/* "Not for me" is always there, quietly. */
.mute-btn { opacity: 1; color: var(--lcd-soft); }
.t-item:hover .mute-btn, .mute-btn:focus-visible { opacity: 1; }
/* Zone numbers stay as a quiet label in the list. */
.zone .num { color: var(--legend-soft); }
@media (max-width: 760px) {
  .mt-me { max-width: 90%; }
  .mt-h time { font-size: 11.5px; }
}
.lcd:has(.log-inner > .case-bar) .composer-inner { width: min(940px, 100% - 48px); }
@media (max-width: 760px) { .lcd:has(.log-inner > .case-bar) .composer-inner { width: calc(100% - 28px); } }
.mt-bub .verdict .led { align-self: flex-start; margin-top: .42em; }

/* ---------- Today (23 Oct, T2): All clear, Finish setting up and Latest from your beeps in the right-hand column ---------- */
.all-clear { padding: 18px 20px; border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--lcd-raised); }
.all-clear h3 { margin: 0 0 4px; font: 600 22px/1.15 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.all-clear p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--lcd-soft); }
.setup { margin: 22px 0 0; padding: 14px 18px 6px; border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--lcd-raised); }
.setup > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; list-style: none; cursor: default; }
.setup > summary::-webkit-details-marker { display: none; }
.setup-t { font: 600 17px/1.2 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.setup-n { font: 500 12px/1 var(--mono); color: var(--lcd-dim); white-space: nowrap; }
.setup ol { list-style: none; margin: 10px 0 0; padding: 0; }
.setup-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--lcd-rule); }
.setup-item:empty { display: none; }
.setup-item .si-t b { display: block; font: 600 14.5px/1.3 var(--sans); color: var(--lcd-text); }
.setup-item .si-t > span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.45; color: var(--lcd-soft); }
.setup-item .si-t > span b { display: inline; font: inherit; font-weight: 600; color: var(--lcd-text); }
.setup-item .si-t em { font-style: normal; color: var(--lcd-dim); }
.setup-item[data-state="done"] .si-t > b { color: var(--lcd-soft); }
.setup-item .si-k { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.setup-item .key, .setup-item .case-btn { min-width: 0; min-height: 36px; padding: 8px 14px 7px; font-size: 13px; white-space: nowrap; text-decoration: none; }
/* Everything done: one quiet line at the end, which opens to send a test or turn notifications off. */
.setup.all-done { padding: 10px 16px; background: transparent; border-color: var(--lcd-rule); }
.setup.all-done > summary { cursor: pointer; }
.setup.all-done .setup-t { font: 500 14px/1.3 var(--sans); color: var(--lcd-soft); }
.setup.all-done .setup-t::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--led-green); }
@media (max-width: 720px) { .setup-item { grid-template-columns: 10px minmax(0, 1fr); } .setup-item .si-k { grid-column: 2; justify-content: flex-start; } }
.today-latest { margin: 22px 0 0; }
.today-latest ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--lcd-rule); }
.today-latest li { border-bottom: 1px solid var(--lcd-rule); }
.today-latest button { width: 100%; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border: 0; background: none; text-align: left; cursor: pointer; }
.today-latest button:hover { background: var(--lcd-raised); }
.today-latest .tl-t b { display: block; font: 600 14px/1.3 var(--sans); color: var(--lcd-text); }
.today-latest .tl-t span { display: block; font-size: 13px; color: var(--lcd-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-latest time { font: 500 11.5px/1 var(--mono); color: var(--lcd-dim); }
.today-side > .all-clear + .setup, .today-side > .all-clear + .news-new { margin-top: 18px; }
.zone .zl .name { min-width: 0; }
.zone .zl .priv-tag { flex: none; }
@media (max-width: 760px) { .zone .sub.latest { display: none; } }
/* In a conversation the case bar is the only header: no status strip above it (23 Oct score fixes). */
.panel.in-case .lcd-status { display: none; }
/* One column (laptop and phone): what's waiting comes straight after the ask box, then setting up, then your beeps
   and starters, with Everything else last (23 Oct score fixes). The two wrappers step aside so their parts can be ordered. */
@media (max-width: 1279px) {
  .today-grid > .today-main, .today-grid > .today-side { display: contents; }
  .today-grid > * > * { order: 3; min-width: 0; }
  .today-grid .today-head { order: 1; }
  .today-grid .today-ask { order: 2; }
  .today-grid .setup, .today-grid .today-latest { order: 4; }
  .today-grid .today-beeps { order: 5; }
  .today-grid .starters { order: 6; }
  .today-grid .rest-fold { order: 7; }
  .today-grid .today-foot { order: 8; }
  .today-grid > .today-side > :first-child { margin-top: 14px; }
  .today-grid .setup, .today-grid .today-latest { margin-top: 6px; }
}
/* Intent keys wrap rather than run off a phone's edge. */
.today-ask #quick { flex-wrap: wrap; overflow: visible; }
.mt-me .mt-web { margin: 6px 2px 0; text-align: right; font-size: 12.5px; color: var(--lcd-dim); }
.mt-me .mt-web a { color: var(--me-ink); }
/* A beep's schedules: see the latest result, or open the schedule itself (23 Oct). */
.sched-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: 13px; }
.rail-rows .sched-links { margin: -4px 0 10px 22px; }
.rail-rows .sched-links .link-btn { display: inline; width: auto; padding: 0; white-space: nowrap; }
/* ---------- Meetings (23 Oct): record a meeting, the transcript, what it remembers, hand-offs ---------- */
.rec-card { margin: 6px 0 18px; padding: 16px 18px; border: 1px solid var(--tile-edge); border-radius: 14px; background: var(--lcd-raised); display: grid; gap: 12px; }
.rec-card h3 { margin: 0; font: 600 22px/1.15 var(--cond); letter-spacing: .01em; color: var(--lcd-text); }
.rec-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--lcd-soft); }
.rec-tick { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--lcd-text); cursor: pointer; }
.rec-tick input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--lcd-glow); flex: none; }
.rec-start, .rec-stop { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; border-radius: 12px; font: 700 16px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.rec-start { border: 1px solid var(--lcd-text); background: var(--lcd-text); color: var(--lcd); }
.rec-start:disabled { opacity: .45; cursor: default; }
.rec-start i { width: 13px; height: 13px; border-radius: 50%; background: var(--led-red); }
.rec-stop { border: 1px solid var(--tile-edge); background: var(--key); color: var(--lcd-text); }
.rec-stop i { width: 13px; height: 13px; background: var(--lcd-text); border-radius: 2px; }
.rec-small { font-size: 12.5px !important; color: var(--lcd-dim) !important; }
.rec-quiet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warn-ink) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, #efa51b 12%, var(--lcd-raised)); }
.rec-quiet[hidden] { display: none; }
.bot-card .s-rows { margin: 4px 0 0; }
.bot-form { display: grid; gap: 10px; }
.diary { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--lcd-rule); }
.diary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.diary-head .legend { margin: 0; }
.diary-mode { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lcd-dim); }
.diary-mode select { min-height: 36px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); font: 400 14px/1.3 var(--sans); color: var(--lcd-text); }
.diary .s-rows { margin: 0; }
.diary .ac { display: flex; align-items: center; gap: 10px; }
.diary-on { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--lcd-soft); white-space: nowrap; }
.bot-card, .bot-card > *, .diary, .diary-mode, .diary-mode select { min-width: 0; }
@media (max-width: 640px) { .diary-head { display: grid; } .diary .s-row { flex-wrap: wrap; } .diary-mode { display: grid; gap: 4px; width: 100%; } .diary-mode select { width: 100%; } }
.bot-form input[type=url] { min-height: 44px; padding: 8px 12px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); font: 400 14.5px/1.3 var(--sans); color: var(--lcd-text); min-width: 0; }
.bot-form input[type=url]:focus { outline: 0; border-color: var(--lcd-glow); }
.bot-form .rec-auto-keys { align-items: center; }
.rec-keys2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec-opt { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--lcd); text-align: left; cursor: pointer; font: inherit; }
.rec-opt:disabled { opacity: .5; cursor: default; }
.rec-opt:not(:disabled):hover { border-color: var(--lcd-glow); }
.rec-opt b { display: flex; align-items: center; gap: 10px; font: 700 15px/1.2 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-text); }
.rec-opt b i { width: 12px; height: 12px; border-radius: 50%; background: var(--led-red); flex: none; }
.rec-opt span { font-size: 13.5px; line-height: 1.45; color: var(--lcd-soft); }
.rec-opt.main { border-color: var(--lcd-text); }
.rec-src { display: block; margin: 2px 0 6px; font-size: 12.5px; color: var(--lcd-dim); }
.share-how { display: grid; gap: 12px; padding: 14px 16px; border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--lcd); }
.share-how ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--lcd-text); }
.share-pic { display: grid; gap: 8px; padding: 12px; border: 1px solid #cfd4d0; border-radius: 10px; background: #fff; font: 13px/1.3 system-ui, sans-serif; color: #202124; max-width: 420px; }
.share-pic .tabs { display: flex; gap: 16px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }
.share-pic .tabs span.on { color: #1a73e8; border-bottom: 2px solid #1a73e8; padding-bottom: 4px; }
.share-pic .scr { height: 70px; border-radius: 6px; background: linear-gradient(135deg, #e8eef7, #cfd9e8); outline: 3px solid #1a73e8; }
.share-pic label { display: flex; gap: 8px; align-items: center; }
.share-pic label i { width: 30px; height: 16px; border-radius: 8px; background: #1a73e8; position: relative; }
.share-pic label i::after { content: ''; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.share-pic .btns { display: flex; justify-content: flex-end; gap: 8px; }
.share-pic .btns span { padding: 6px 14px; border-radius: 4px; border: 1px solid #ccc; }
.share-pic .btns span.go { background: #1a73e8; color: #fff; border-color: #1a73e8; }
@media (max-width: 640px) { .rec-keys2 { grid-template-columns: 1fr; } }
.rec-auto { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--lcd-rule); font-size: 14px; color: var(--lcd-soft); }
.rec-auto b { color: var(--lcd-text); font-weight: 600; }
.rec-auto.editing { display: grid; justify-content: stretch; }
.rec-auto label { display: grid; gap: 4px; font-size: 13px; color: var(--lcd-dim); }
.rec-auto select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); font: 400 14.5px/1.3 var(--sans); color: var(--lcd-text); }
.rec-auto-keys { display: flex; gap: 8px; }
.rec-quiet p { color: var(--lcd-text) !important; font-weight: 500; }
.rec-quiet b { font-family: var(--mono); color: var(--warn-ink); }
.rec-card.live { border-color: #f1c4c0; background: #fdf6f5; }
.rec-clock { display: flex; align-items: center; gap: 12px; font: 500 34px/1 var(--mono); color: var(--lcd-text); }
.rec-meter { flex: 1; max-width: 160px; height: 6px; border-radius: 3px; background: var(--lcd-rule); overflow: hidden; }
.rec-meter i { display: block; height: 100%; width: 0; background: var(--led-green); transition: width .2s linear; }
.rec-lines { display: grid; gap: 6px; font-size: 14px; color: var(--lcd-soft); min-height: 44px; }
.rec-lines p { margin: 0; } .rec-lines b { color: var(--lcd-text); font-weight: 600; } .rec-lines .partial { color: var(--lcd-dim); }
.rec-words .rw { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-top: 1px solid var(--lcd-rule); font-size: 14px; color: var(--lcd-text); }
.rw-add { display: flex; gap: 8px; margin: 10px 0 4px; }
.rw-add input { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd); font: 400 14.5px/1.3 var(--sans); color: var(--lcd-text); }
.rw-add input:focus { outline: 0; border-color: var(--lcd-glow); }
.mt-meeting { margin-top: 10px; }
.mt-tx { border: 1px solid var(--tile-edge); border-radius: 12px; background: var(--lcd); }
.mt-tx > summary { padding: 10px 14px; cursor: pointer; font: 600 13.5px/1.3 var(--sans); color: var(--lcd-soft); }
.tx-lines { padding: 0 14px 12px; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; font-size: 14px; line-height: 1.5; color: var(--lcd-soft); }
.tx-lines p { margin: 0; } .tx-lines b { color: var(--lcd-text); font-weight: 600; } .tx-lines time { margin: 0 8px; font: 500 11px/1 var(--mono); color: var(--lcd-dim); }
.tx-names { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 12px 14px; border-top: 1px solid var(--lcd-rule); }
.tx-names .legend { width: 100%; margin: 0; }
.tx-names label { display: grid; gap: 4px; font: 500 12px/1.2 var(--mono); color: var(--lcd-dim); }
.tx-names input { min-height: 36px; padding: 6px 10px; border: 1px solid var(--tile-edge); border-radius: 8px; background: var(--lcd-raised); font: 400 14px/1.3 var(--sans); color: var(--lcd-text); }
.tx-keys { margin: 8px 2px 0; font-size: 13.5px; }
.handoffs { display: grid; gap: 6px; margin: 10px 0 0; }
.hand-key { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--key); text-align: left; font: 500 14px/1.35 var(--sans); color: var(--lcd-text); cursor: pointer; }
.hand-key:hover { border-color: var(--lcd-glow); }
.hand-key i { font-style: normal; color: var(--lcd-soft); }
.case-row .c-meta:has([data-act-done]) { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.rec-watch { display: flex; gap: 14px; align-items: center; }
.rec-watch b { display: block; font: 600 20px/1.2 var(--cond); color: var(--lcd-text); }
.rec-watch .rec-clock { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 500 14px/1 var(--mono); color: var(--lcd-soft); }
.rec-watch .rec-meter { width: 80px; flex: none; }
.rec-sofar { padding: 10px 12px; border: 1px solid var(--tile-edge); border-radius: 10px; background: var(--lcd); display: grid; gap: 6px; }
.rec-sofar h4 { margin: 0; }
.rec-sofar p { margin: 0; display: flex; gap: 8px; font-size: 14px; color: var(--lcd-text); }
.rec-sofar p .led { margin-top: 6px; flex: none; }
/* Finish setting up sits under Start here on Today (24 Oct): room before the lists below it. */
.today-side .setup:not(.all-done) { margin-bottom: 22px; }