/* The audio source bar (bench/source-bar.js): the look from the mockup Jacob
   approved on 29 Sep. Every rule is scoped to `.sb`, so it can be dropped into
   either document (`index.html`, `bench/setup.html`) without a collision, and
   every colour is a value from the mockup rather than a name borrowed from
   either page's palette. No colour here changes with a level: the strips are
   one colour whatever they show. */

.sb {
  --sb-bg: #182933; --sb-well: #14212A; --sb-line: #2E4550; --sb-rule: #223640;
  --sb-text: #E8ECEE; --sb-dim: #8B9DA5; --sb-teal: #0B8392; --sb-teal-lit: #8FD3DD;
  --sb-on: #3FB27A; --sb-busy: #E7A6A2; --sb-amber: #E8B25C;
  background: var(--sb-bg); border: 1px solid var(--sb-line); border-radius: 6px;
  color: var(--sb-text); font: 14px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box; width: 100%; position: relative;
  /* The bar answers to its own width, not the window's: the page puts it in
     columns of different widths, and the one-row layout needs about 930 px. */
  container: sb / inline-size;
}
.sb *, .sb *::before, .sb *::after { box-sizing: border-box; }
.sb [hidden] { display: none !important; }
.sb.is-drop { outline: 2px dashed var(--sb-teal-lit); outline-offset: -4px; }

.sb-row { display: flex; align-items: stretch; min-height: 92px; }

/* Source: the label over two pills. The column is as wide as its pills at
   least (never a fixed width the word "Recorded" can spill out of, onto the
   divider), and 150px when they are narrower. */
.sb-source { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 16px; border-right: 1px solid var(--sb-rule); width: auto; min-width: 150px; flex: none; }
.sb-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .8px; color: var(--sb-dim); text-transform: uppercase; }
.sb-pills { display: flex; flex: none; white-space: nowrap; align-self: flex-start; background: var(--sb-well); border: 1px solid var(--sb-line); border-radius: 20px; padding: 2px; }
.sb-pill { font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 16px; padding: 6px 10px; background: transparent; color: var(--sb-dim); cursor: pointer; }
.sb-pill.is-on { background: var(--sb-teal); color: #fff; }
.sb-pill:disabled { cursor: default; opacity: .7; }
.sb-pill:focus-visible, .sb button:focus-visible, .sb select:focus-visible, .sb a:focus-visible { outline: 2px solid var(--sb-teal-lit); outline-offset: 2px; }

/* The middle: Live or Recorded. */
.sb-body { flex: 1 1 auto; display: flex; align-items: center; gap: 18px; padding: 0 18px; min-width: 0; }
.sb-rec { gap: 12px; }
.sb-spacer { flex: 1 1 auto; }

.sb-main { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 0 1 220px; }
.sb-main-button { font: inherit; font-size: 14px; font-weight: 600; color: var(--sb-text); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.sb-main-button:disabled { cursor: default; }
.sb-device { font-size: 12px; color: var(--sb-dim); }
.sb-link { font: inherit; font-size: 12px; color: var(--sb-teal-lit); background: none; border: 0; padding: 0; text-align: left; text-decoration: underline; cursor: pointer; }
.sb-signin { color: var(--sb-dim); }

.sb-menu { position: absolute; z-index: 20; top: 100%; left: 0; margin-top: 6px; min-width: 280px; max-width: 420px; max-height: 320px; overflow: auto;
  background: var(--sb-well); border: 1px solid var(--sb-line); border-radius: 6px; padding: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.sb-menu-head { font-size: 10.5px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--sb-dim); padding: 6px 8px 2px; }
.sb-menu-empty { font-size: 12.5px; color: var(--sb-dim); padding: 4px 8px; }
.sb-menu-item { display: block; width: 100%; font: inherit; font-size: 13px; text-align: left; color: var(--sb-text); background: none; border: 0; border-radius: 4px; padding: 6px 8px 6px 26px; cursor: pointer; position: relative; text-decoration: none; }
.sb-menu-item:hover, .sb-menu-item:focus-visible { background: var(--sb-rule); }
.sb-menu-item[aria-checked="true"]::before { content: "✓"; position: absolute; left: 8px; color: var(--sb-teal-lit); }
a.sb-menu-item { color: var(--sb-teal-lit); }

/* Monitor / Muted. */
.sb-mute { font: inherit; flex: none; white-space: nowrap; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 4px; border: 1px solid var(--sb-line); background: var(--sb-well); color: var(--sb-teal-lit); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sb-mute.is-muted { color: var(--sb-amber); }
.sb-mute-icon { display: inline-flex; }

/* Two thin strips, left over right. One colour, whatever they show. */
.sb-levels { display: flex; flex-direction: column; gap: 4px; width: 120px; flex: none; }
.sb-strip { height: 6px; background: var(--sb-rule); border-radius: 3px; position: relative; overflow: hidden; }
.sb-fill { position: absolute; left: 0; top: 0; height: 6px; width: 0; background: var(--sb-teal-lit); border-radius: 3px; transition: width .12s linear; }

.sb-status { font-size: 12.5px; color: var(--sb-dim); white-space: nowrap; }
.sb-status[data-tone="on"] { color: var(--sb-on); }
.sb-status[data-tone="busy"] { color: var(--sb-busy); }
.sb-rec-status { font-size: 12.5px; color: var(--sb-dim); white-space: nowrap; }
.sb-rec-status[data-tone="busy"] { color: var(--sb-busy); }

/* Recording. */
.sb-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sb-rec-empty, .sb-rec-picked { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.sb-choose { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: 4px; border: 1px solid var(--sb-line); background: var(--sb-well); color: var(--sb-text); cursor: pointer; }
.sb-hint { font-size: 12.5px; color: var(--sb-dim); }
.sb-from { font-size: 11px; color: var(--sb-dim); }
.sb-rec-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sb-file-length { font-weight: 400; color: var(--sb-dim); }
.sb-change { font-size: 13px; padding: 6px; }
.sb-read-all { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sb-dim); }
.sb-read-all input { accent-color: var(--sb-teal); }

/* The one button. */
.sb-act { display: flex; align-items: center; padding: 0 16px; border-left: 1px solid var(--sb-rule); flex: none; }
.sb-action { font: inherit; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 4px; border: 0; min-width: 150px; background: var(--sb-teal); color: #fff; cursor: pointer; }
.sb-action:disabled { background: var(--sb-rule); color: #52646D; cursor: default; }
.sb-action.is-stop { background: var(--sb-line); color: #fff; }

/* One plain line under the bar: a question, a click needed, a rig missing. */
.sb-note { border-top: 1px solid var(--sb-rule); padding: 8px 16px; font-size: 13px; color: var(--sb-dim); }
.sb-note .sb-link { font-size: 13px; }
.sb-ask { display: inline-flex; align-items: center; gap: 8px; color: var(--sb-text); }
.sb-question { font: inherit; font-size: 13px; color: var(--sb-text); background: var(--sb-well); border: 1px solid var(--sb-line); border-radius: 4px; padding: 4px 8px; }
.sb-guard { color: var(--sb-amber); }
.sb-quiet { color: var(--sb-dim); }
.sb-allow { font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 4px; border: 1px solid var(--sb-teal); background: var(--sb-teal); color: #fff; cursor: pointer; }


/* Quick checks: a chip on the bar, and a drawer dropping from it. The dot is
   state (run, or not yet), not a verdict; nothing below changes colour with
   what a reading says. */
.sb-chip { font: inherit; flex: none; white-space: nowrap; display: flex; align-items: center; gap: 9px; padding: 6px 12px; border-radius: 4px; border: 1px solid var(--sb-line); background: var(--sb-well); color: var(--sb-text); text-align: left; cursor: pointer; }
.sb-chip:disabled { cursor: default; opacity: .6; }
.sb-chip[aria-expanded="true"] { border-color: var(--sb-amber); }
.sb-chip-text { display: flex; flex-direction: column; gap: 1px; }
.sb-chip-name { font-size: 12.5px; font-weight: 600; }
.sb-chip-state { font-size: 11.5px; color: var(--sb-dim); }
.sb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sb-dim); flex: none; }
.sb-dot[data-tone="amber"] { background: var(--sb-amber); }
.sb-dot[data-tone="green"] { background: var(--sb-on); }

.sb-drawer { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 14px; width: min(560px, calc(100% - 16px));
  background: var(--sb-bg); border: 1px solid var(--sb-amber); border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; }
.sb-drawer::before { content: ""; position: absolute; left: var(--sb-caret, 40px); top: -15px; width: 2px; height: 14px; background: var(--sb-amber); }
.sb-q-head { display: flex; align-items: flex-start; gap: 12px; }
.sb-q-heads { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.sb-q-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--sb-amber); }
.sb-q-title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; }
.sb-q-close { font: inherit; font-size: 18px; width: 40px; height: 40px; flex: none; background: none; border: 1px solid var(--sb-line); border-radius: 4px; color: var(--sb-dim); cursor: pointer; }
.sb-q-lift { background: #10323A; border-radius: 4px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.sb-q-status { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--sb-dim); }
.sb-q-readings { display: flex; flex-direction: column; border: 1px solid var(--sb-rule); border-radius: 4px; }
.sb-q-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--sb-rule); }
.sb-q-row:last-child { border-bottom: 0; }
.sb-q-line { display: flex; gap: 12px; align-items: baseline; }
.sb-q-name { font-size: 14px; font-weight: 600; flex: 1 1 auto; }
.sb-q-value { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.sb-q-how { padding: 6px 14px 10px; }
.sb-q-how .how-measured { margin: 0; color: var(--sb-dim); font-size: 12.5px; }
.sb-q-means { font-size: 12.5px; color: var(--sb-dim); }
.sb-q-fine { font-size: 12.5px; color: var(--sb-dim); }
.sb-q-buttons { display: flex; gap: 10px; }
.sb-q-go { font: inherit; font-size: 15px; font-weight: 600; flex: 1 1 auto; padding: 12px 18px; background: var(--sb-teal); color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
.sb-q-go:disabled { background: var(--sb-rule); color: #B8C4CA; cursor: default; }
.sb-q-alt { font: inherit; font-size: 15px; padding: 12px 18px; background: transparent; color: var(--sb-text); border: 1px solid var(--sb-line); border-radius: 4px; cursor: pointer; }
.sb-q-alt:disabled { opacity: .5; cursor: default; }
.sb-q-every { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sb-dim); }
.sb-q-every input { accent-color: var(--sb-teal); }

/* A narrow bar (a phone, or a column that is not wide): two rows, never a
   sideways scroll. The one-row bar needs about 930 px (the source column is as
   wide as its pills), so it stacks below 940. */
@container sb (max-width: 940px) {
  .sb-row { flex-wrap: wrap; }
  .sb-source { width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--sb-rule); padding: 10px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .sb-body { flex-wrap: wrap; gap: 12px; padding: 12px 16px; flex-basis: 100%; }
  .sb-main { min-width: 0; flex: 1 1 100%; }
  .sb-act { width: 100%; border-left: 0; border-top: 1px solid var(--sb-rule); padding: 12px 16px; }
  .sb-action { width: 100%; }
  .sb-status { white-space: normal; }
  .sb-slot { flex: 1 1 100%; }
  .sb-drawer { left: 8px !important; right: 8px; width: auto; padding: 18px; }
  .sb-drawer::before { display: none; }
  .sb-rec-empty, .sb-rec-picked { flex-wrap: wrap; }
}

/* STRIP MODE (Measure's recorder, bench/recorder.js): the page draws the input,
   the rig, the monitor switch and the button in its own strip, and the bar
   keeps the source, Quick checks and its notes. The state is still the bar's. */
.sb--strip[data-source="live"] .sb-row { min-height: 0; padding: 10px 0; }
.sb--strip[data-source="live"] .sb-source { flex-direction: row; align-items: center; gap: 12px; border-right: 0; }
.sb--strip[data-source="live"] .sb-main, .sb--strip[data-source="live"] .sb-mute, .sb--strip[data-source="live"] .sb-levels,
.sb--strip[data-source="live"] .sb-live > .sb-status, .sb--strip[data-source="live"] .sb-act { display: none; }
.sb--strip[data-source="live"] .sb-live { justify-content: flex-start; }