/* Hallprint LAB — the interface: the front panel of a measuring instrument, on a fixed 1000 × 640 design grid (like the
   plugin), scaled to the viewport by ui.js. Near-black ground, an 8 px engineering grid showing through every panel at
   3.5 %, hairline frames with registration ticks at the four corners, boxed read-outs, numbered section titles.
   IBM Plex Mono for every label, tab, button, title and read-out (uppercase, tracked, tabular figures); IBM Plex Sans
   only for running prose (hints, notes, the About text). One colour per meaning: cyan is the measurement (keys,
   pointers, the envelope, the active mode), amber is the decay curve and a warning, green is an engaged state, red is
   armed / an alert. <html data-theme="lab"> is a plain attribute; the canvases (knobs, plot, meter, plan, band chart)
   take the same colours and faces from theme.js. */

:root {
  /* the palette: semantic names first, then the historical names some rules and files still use, as aliases */
  --bg-top: #0A0C0F;
  --bg-bottom: #060709;
  --panel: #0E1116;
  --panel-light: #141920;
  --panel-hover: #1A2129;
  --panel-pressed: #0F1318;
  --panel-edge: #040506;
  --accent: #2FD3FF;
  --accent-light: #8AE6FF;
  --accent-dark: #1A9FC4;
  --accent-rgb: 47, 211, 255;
  --accent-dark-rgb: 26, 159, 196;
  --text: #DDE4EB;
  --text-rgb: 221, 228, 235;
  --text-dim: #9DA7B3;
  --text-dim-rgb: 157, 167, 179;
  --alert: #FF4D4D;
  --alert-rgb: 255, 77, 77;
  --line: #2A313B;
  --line-strong: #3B4552;
  --field: #07090C;
  --amber: #FFB300;
  --amber-rgb: 255, 179, 0;
  --ok: #3DDC84;
  --ok-light: #8CF0BC;
  --ok-rgb: 61, 220, 132;
  --btn-text: #C3CCD6;
  --on-accent: #06090C;
  --tick: #788593;                                                    /* corner registration ticks, tab numbers, brackets */
  --grid-ink: rgba(255, 255, 255, 0.035);                             /* the 8 px engineering grid inside the panels */
  --grid-bg: linear-gradient(var(--grid-ink) 1px, transparent 1px) 0 0 / 8px 8px,
             linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px) 0 0 / 8px 8px;
  --readout-shadow: inset 0 0 0 1px var(--line), inset 0 2px 5px rgba(0, 0, 0, 0.55);
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239DA7B3' stroke-width='1.4'/></svg>");

  --velvet-top: var(--bg-top);
  --velvet-bottom: var(--bg-bottom);
  --plate: var(--panel);
  --plate-light: var(--panel-light);
  --plate-edge: var(--panel-edge);
  --gold: var(--accent);
  --gold-light: var(--accent-light);
  --gold-dark: var(--accent-dark);
  --gold-rgb: var(--accent-rgb);
  --gold-dark-rgb: var(--accent-dark-rgb);
  --ivory: var(--text);
  --ivory-dim: var(--text-dim);
  --ruby: var(--alert);

  /* type: the mono is the label face (captions, tabs, keys, titles, read-outs), the sans is for prose only */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --font-label: var(--font-mono);
  --font-title: var(--font-mono);
  --font-body: var(--font-sans);
  --font-small-caps: var(--font-mono);

  /* <hallprint-knob> label and value (read inside its shadow tree) */
  --knob-label-font: var(--font-label);
  --knob-label-size: 10px;
  --knob-label-weight: 500;
  --knob-label-spacing: 0.12em;
  --knob-label-transform: uppercase;
  --knob-label-color: var(--text-dim);
  --knob-label-focus: var(--accent);
  --knob-focus-ring: var(--accent);
  --knob-value-font: var(--font-mono);
  --knob-value-size: 11.5px;
  --knob-value-color: var(--text);
  --knob-value-opacity: 1;
  --knob-pad: 0 0 10px;

  color-scheme: dark;
}

/* ------------------------------------------------------------------ ground: near black, a faint 40 px grid over the stage */
html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-bottom);
  color: var(--text);
}
body {
  background: var(--bg-bottom) linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) fixed;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.3;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
  overflow: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
#stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}
#app {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 640px;
  transform-origin: 0 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) 0 0 / 40px 40px;
}
::selection { background: rgba(var(--accent-rgb), 0.35); color: #FFFFFF; }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ the label register: mono, uppercase, tracked */
.tab, .btn, .section-title, .row > label, .cell > label:not(.check), .enable-title, .menu-header, .stats dt,
.audio-field > span, .drop-veil span, .medallion .caption, .footer-left, .segment,
.d-row > label, .d-heights > label, .d-subtitle, .d-figures dt, .d-level > span,
.input-gate > label, .audition-head > label, .audition-trim, .folder-reset, .about h3 {
  font-family: var(--font-label);
  font-weight: 500;
  text-transform: uppercase;
}
.subtitle { font-family: var(--font-label); font-weight: 500; }
.footer-right { font-family: var(--font-mono); font-weight: 400; }

/* corner registration ticks: one pseudo-element, eight hairlines, on every framed box */
.plate::before, .hall-plate::before, .plot-wrap::before, .enable-plate::before, dialog.about::before, .drop-veil span::before {
  content: "";
  position: absolute; inset: -1px; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(var(--tick), var(--tick)) 0 0 / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 0 / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 0 / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 0 / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 0 100% / 1px 7px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 100% / 7px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 100% 100% / 1px 7px no-repeat;
}
.plot-wrap::before { --tick: var(--accent); }

/* ------------------------------------------------------------------ masthead: wordmark with a power lamp, a bank of numbered mode keys */
.masthead { position: absolute; inset: 0 0 auto 0; height: 100px; }
.title {
  position: absolute;
  left: 30px; top: 23px; height: 26px;
  margin: 0;
  font: 600 21px/26px var(--font-title);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.title::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 14px; vertical-align: 3px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7);
}
.subtitle {
  position: absolute;
  left: 30px; top: 53px; height: 16px;
  margin: 0;
  font-size: 10px; line-height: 16px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
/* three equal bordered cells, one switch bank; the active key is lit and carries the accent bar */
.tabs { position: absolute; right: 30px; top: 33px; display: flex; gap: 0; counter-reset: tab; }
.tab {
  position: relative; box-sizing: border-box;
  width: 108px; height: 30px;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--panel);
  padding: 0 12px 0 calc(12px + 0.12em);
  text-align: center; white-space: nowrap;
  font-size: 11px; line-height: 28px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  counter-increment: tab;
  transition: color 120ms, background-color 120ms;
}
.tab + .tab { border-left: 0; }
.tab::before {
  content: counter(tab, decimal-leading-zero);
  margin-right: 8px;
  font-size: 9px; letter-spacing: 0.06em;
  color: var(--tick);
  transition: color 120ms;
}
.tab:hover { color: var(--text); background: var(--panel-light); }
.tab.is-active { color: var(--text); background: rgba(var(--accent-rgb), 0.08); }
.tab.is-active::before, .tab:hover::before { color: var(--accent); }
.tab.is-active::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 2px;
  background: var(--accent);
}
.rule { position: absolute; left: 30px; right: 30px; height: 1px; border: 0; margin: 0; background: var(--line-strong); }
.rule-top { top: 92px; }
.rule-bottom { top: 0; }

/* ------------------------------------------------------------------ footer: a status bar of three cells under the rule */
.footer { position: absolute; left: 0; top: 612px; width: 1000px; height: 28px; }
.footer-left, .footer-right, .footer-centre {
  position: absolute; top: 0; height: 28px; line-height: 28px;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.footer-left { left: 30px; width: 250px; font-size: 9px; letter-spacing: 0.1em; }   /* ends ≈ 277 px, clear of the centre cell at 290 */
.footer-right { right: 30px; width: 250px; font-size: 9.5px; letter-spacing: 0.04em; text-align: right; }
/* 290–710: clear of the version link and of phonoclassical.com; the live read-out, a lamp before it (cyan when nominal,
   amber in the warning state); a long read-out ellipsises, the tooltip has the whole text */
.footer-centre {
  left: 290px; width: 420px; box-sizing: border-box; padding: 0 10px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; text-align: center;
  color: var(--btn-text);
}
.footer-centre::before { content: "\25CF"; display: inline-block; margin-right: 7px; font-size: 7px; vertical-align: 1px; color: var(--accent); }
.footer-centre.is-warning { color: var(--amber); }
.footer-centre.is-warning::before { color: var(--amber); }

/* ------------------------------------------------------------------ pages */
.page { position: absolute; left: 30px; top: 100px; width: 940px; height: 504px; counter-reset: section; }

/* ------------------------------------------------------------------ buttons: boxed, square, mono; the frame lights up */
.btn {
  box-sizing: border-box;
  height: 44px;
  padding: 0 6px 0 calc(6px + 0.1em);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--panel-light);
  color: var(--btn-text);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
}
.btn:hover { background: var(--panel-hover); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.22), 0 0 10px rgba(var(--accent-rgb), 0.16); }
.btn:active { background: var(--panel-pressed); box-shadow: none; }
.btn.is-on { background: rgba(var(--ok-rgb), 0.1); border-color: var(--ok); color: var(--ok-light); }
.btn.is-on:hover { box-shadow: 0 0 0 1px rgba(var(--ok-rgb), 0.22), 0 0 10px rgba(var(--ok-rgb), 0.16); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--accent-light); border-color: var(--accent-light); color: var(--on-accent); }
.btn.primary:active { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn:disabled, .btn:disabled:hover { opacity: 0.35; background: var(--panel-light); border-color: var(--line-strong); color: var(--btn-text); box-shadow: none; }
.btn.primary:disabled, .btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:is(.btn, .tab, .chevron, .medallion):focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.chevron {
  width: 36px; height: 44px; padding: 0; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 0; background: var(--panel-light);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 120ms, background-color 120ms, box-shadow 120ms;
}
.chevron:hover { border-color: var(--accent); background: var(--panel-hover); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.22); }
.chevron svg { width: 10px; height: 15px; fill: none; stroke: var(--text-dim); stroke-width: 1.25; stroke-linecap: butt; stroke-linejoin: miter; }
.chevron:hover svg, .chevron:active svg { stroke: var(--accent); }
.chevron:disabled svg { stroke: rgba(var(--text-dim-rgb), 0.3); }

/* ------------------------------------------------------------------ section titles: numbered, a hairline running out to the panel edge */
.section-title {
  display: flex; align-items: center; gap: 10px;
  height: 22px; margin: 0 0 4px; line-height: 22px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--text);
  counter-increment: section; counter-reset: sub;
}
.section-title::before { content: counter(section, decimal-leading-zero); flex: 0 0 auto; color: var(--accent); font-weight: 500; }
.section-title::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 2px; background: var(--line); }
/* a caption on a panel that has no title row: the same counter, a smaller face, no rule (the frame is the rule) */
.plate-caption {
  position: absolute; display: block; z-index: 1;
  height: 12px; margin: 0; line-height: 12px;
  font-size: 9px; font-weight: 500; letter-spacing: 0.14em; color: var(--text-dim);
  white-space: nowrap; pointer-events: none;
}
.plate-caption::before { margin-right: 8px; }
.plate-caption::after { display: none; }
.right-plate > .plate-caption { left: 18px; top: 7px; }
.audio-row > .plate-caption { right: 14px; bottom: 5px; height: 10px; line-height: 10px; }
.plot-wrap > .plate-caption { left: 0; top: -13px; height: 10px; line-height: 10px; }   /* clear of the plot's corner tick */
.knobs > .plate-caption { left: 0; top: -9px; height: 9px; line-height: 9px; }

/* ------------------------------------------------------------------ reverb page */
.selector { position: relative; display: flex; align-items: stretch; height: 44px; }
.hall-plate {
  position: relative; flex: 1 1 auto; min-width: 0; margin: 0 6px; box-sizing: border-box; text-align: center;
  background: var(--field); border: 1px solid var(--line); border-radius: 0;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);   /* the border is the hairline (the ticks sit on it); no second ring */
}
.hall-name {
  height: 22px; margin-top: 4px; padding: 0 10px;
  font: 500 13.5px/22px var(--font-title); letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hall-format {
  height: 14px; padding: 0 8px;
  font: 400 9.5px/14px var(--font-mono); letter-spacing: 0.02em;
  color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.selector-buttons { display: flex; gap: 6px; margin-left: 4px; width: 390px; flex: 0 0 390px; }   /* five keys: 4 × 78 + 54 (Share) + 4 × 6 */
.selector-buttons .btn { width: 78px; flex: 0 0 78px; font-size: 10px; letter-spacing: 0.08em; }   /* 78: "OPEN FILE" in the 10 px mono at 0.08 em needs ~76 (the Design page keys use the same size) */
.selector-buttons #btn-share { width: 54px; flex: 0 0 54px; }

.plot-wrap { position: relative; margin-top: 12px; height: 244px; }
.plot-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  border: 1px solid var(--line);
}
.plot { display: block; width: 100%; height: 100%; border-radius: 0; }
#plot { width: 940px; height: 244px; }

.enable-plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 400px; box-sizing: border-box; padding: 16px 22px 14px;
  text-align: center;
  background: var(--grid-bg), var(--panel-light);
  border: 1px solid var(--line-strong); border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.enable-title { margin: 0 0 10px; font-size: 10.5px; letter-spacing: 0.16em; padding-left: 0.16em; color: var(--text); }
.enable-title::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: 1px;
  background: var(--amber); box-shadow: 0 0 6px rgba(var(--amber-rgb), 0.6);
}
.enable-plate .btn { height: 28px; width: 170px; font-size: 10.5px; }
.enable-note { margin: 10px 0 0; font-family: var(--font-body); font-size: 11px; line-height: 1.45; color: var(--text-dim); }

.info-line {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 22px; margin-top: 5px; padding: 0 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--text-dim);
}
.info-left, .info-right { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-left { flex: 1 1 auto; min-width: 0; }
.info-right {
  flex: 0 0 auto; margin-left: 16px; padding: 0 8px; line-height: 20px;
  font-size: 10.5px; color: var(--text);
  background: var(--field); box-shadow: var(--readout-shadow);
}
.info-error {
  position: absolute; left: 0; right: 0; top: 0; height: 22px; line-height: 22px;
  text-align: center; font-size: 10.5px; color: var(--alert); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px;
}
.info-error::before { content: "[ERR] "; }
.info-error:empty { display: none; }
.info-line.has-error .info-left, .info-line.has-error .info-right { visibility: hidden; }

/* knobs: a strip of eight cells with a hairline between the channels */
.knobs { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); height: 170px; margin-top: 8px; box-shadow: inset 0 1px 0 var(--line); }
hallprint-knob { display: block; height: 170px; }
hallprint-knob + hallprint-knob { background: linear-gradient(var(--line), var(--line)) 0 50% / 1px 62% no-repeat; }

/* ------------------------------------------------------------------ library menu */
.menu {
  position: absolute; z-index: 30; top: 48px; right: 0;
  min-width: 280px; max-width: 560px; max-height: 440px; overflow: auto;
  box-sizing: border-box; padding: 4px 0;
  background: var(--panel-light);
  border: 1px solid var(--line-strong); border-radius: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  text-align: left;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--panel-light);
}
.menu-header {
  margin: 4px 12px 2px; padding: 4px 0 3px;
  font-size: 9px; letter-spacing: 0.14em; color: var(--accent-dark);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.menu-item {
  position: relative; display: block; width: 100%; box-sizing: border-box;
  height: 26px; padding: 0 12px 0 26px; border: 0; background: none;
  font: 11.5px/26px var(--font-mono); letter-spacing: 0.01em; color: var(--text); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(var(--accent-rgb), 0.12); color: #FFFFFF; box-shadow: inset 2px 0 0 var(--accent); outline: none; }
.menu-item:disabled, .menu-item:disabled:hover { color: rgba(var(--text-rgb), 0.35); background: none; box-shadow: none; }
.menu-item.is-ticked::before {
  content: ""; position: absolute; left: 11px; top: 10px; width: 6px; height: 6px;
  border-radius: 0; background: var(--accent); box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.6);
}
.menu-item.is-danger { color: var(--alert); }
.menu-sep { height: 1px; margin: 4px 12px; background: var(--line-strong); }
#download-menu { right: 144px; min-width: 330px; }   /* under the Download key: Share (54) + Report (78) + two gaps from the right edge */

/* ------------------------------------------------------------------ panels: the engineering grid inside every plate */
.plate {
  box-sizing: border-box;
  background: var(--grid-bg), var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

/* ------------------------------------------------------------------ capture page */
.form-plate { position: absolute; left: 0; top: 0; width: 600px; height: 436px; }
/* the plate counts as 01, not its title: the Session h2 is hidden with the form while a capture is reviewed, and a
   display:none title would not increment — the right plate and the audio row stay 02 / 03 */
.form-plate { counter-increment: section; }
.form-plate .section-title { counter-increment: none; }
.right-plate { position: absolute; left: 620px; top: 0; width: 320px; height: 436px; }

.session { position: absolute; inset: 0; padding: 18px 22px; margin: 0; }
/* ten rows (three text fields, six pairs, the save folder) share the plate with the format line and the hint.
   A narrow label column on the left gives the left-hand selects room for their longest option ("Sine sweep
   (recommended)"); the right-hand column has 86 px of label so "Stereo – inputs 1 + 2" fits the mono in full */
.row { display: grid; grid-template-columns: 78px 1fr; column-gap: 6px; align-items: center; height: 30px; }
.row.pair { grid-template-columns: 276px 1fr; column-gap: 16px; }
.row.pair + .row.pair { margin-top: 0; }
.row.pair:first-of-type { margin-top: 6px; }
.cell { display: grid; grid-template-columns: 86px 1fr; column-gap: 6px; align-items: center; min-width: 0; }
.row.pair > .cell:first-child { grid-template-columns: 78px 1fr; }
.row > label, .cell > label:not(.check) {
  font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim);
  white-space: nowrap; overflow: hidden;
}
.cell.is-disabled > label, .row.is-disabled > label { color: rgba(var(--text-dim-rgb), 0.4); }

/* fields and selects, everywhere: an inset dark well with a hairline, mono, the frame lights on focus */
.session input[type="text"], .session select, .audio-row select,
.page-design input[type="text"], .page-design input.d-number, .page-design select, .audition select, .page-science input[type="text"] {
  box-sizing: border-box; width: 100%; height: 24px; min-width: 0;
  padding: 0 6px; margin: 0;
  background-color: var(--field);
  border: 1px solid var(--line); border-radius: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  font: 11px/22px var(--font-mono); letter-spacing: 0.01em; color: var(--text);
  outline: none;
  caret-color: var(--accent);
  transition: border-color 120ms, box-shadow 120ms;
}
.session input[type="text"]::placeholder, .page-design input::placeholder, .page-science input[type="text"]::placeholder { color: rgba(var(--text-dim-rgb), 0.75); font-style: normal; }
.session input[type="text"]::selection, .page-design input::selection, .page-science input[type="text"]::selection { background: rgba(var(--accent-rgb), 0.35); color: #FFFFFF; }
.session input[type="text"]:hover, .session select:hover, .audio-row select:hover,
.page-design input[type="text"]:hover, .page-design input.d-number:hover, .page-design select:hover, .audition select:hover, .page-science input[type="text"]:hover { border-color: var(--line-strong); }
.session input[type="text"]:focus, .session select:focus, .audio-row select:focus,
.page-design input[type="text"]:focus, .page-design input.d-number:focus, .page-design select:focus, .audition select:focus, .page-science input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.25);
}
/* selects: a thin chevron, the text inset clear of it and ellipsised before it could touch it */
.session select, .audio-row select, .page-design select, .audition select {
  appearance: none; -webkit-appearance: none;
  padding-right: 22px; text-overflow: ellipsis;
  background-image: var(--select-chevron);
  background-repeat: no-repeat; background-position: right 8px center;
  cursor: pointer;
}
.session select option, .audio-row select option, .page-design select :is(option, optgroup), .audition select :is(option, optgroup) {
  background: var(--panel-light); color: var(--text); font-family: var(--font-mono);
}
.session input:disabled, .session select:disabled, .audio-row select:disabled,
.page-design input:disabled, .page-design select:disabled, .audition select:disabled, .page-science input:disabled { opacity: 0.4; cursor: default; }

.check { display: flex; align-items: center; gap: 8px; height: 22px; cursor: pointer; min-width: 0; }
.cell > .check { grid-column: 1 / -1; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.check .box {
  position: relative; flex: 0 0 14px; width: 14px; height: 14px; box-sizing: border-box;
  background: var(--field); border: 1px solid var(--line-strong); border-radius: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.check:hover .box { border-color: var(--accent); }
.check input:checked + .box { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 6px rgba(var(--ok-rgb), 0.35); }
.check input:checked + .box::after {
  content: ""; position: absolute; left: 1px; top: 1px; width: 10px; height: 10px;
  background: var(--on-accent);
  clip-path: polygon(13% 50%, 24% 39%, 41% 56%, 76% 20%, 87% 31%, 41% 79%);
}
.check input:focus-visible + .box { outline: 1px solid var(--accent); outline-offset: 1px; }
.check-text { font-family: var(--font-mono); font-size: 10.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 37 chars × 6.3 px fit the 262 px cell */
.check.is-disabled { opacity: 0.4; cursor: default; }

/* save folder: a key, the name of the chosen folder (or where the files go instead) and a small [ RESET ] */
.folder-field { display: flex; align-items: center; gap: 10px; min-width: 0; }
#btn-folder { flex: 0 0 auto; height: 24px; padding: 0 10px 0 calc(10px + 0.1em); font-size: 9.5px; }
.folder-readout {
  flex: 0 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 13px; color: var(--text);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.folder-readout.is-default { color: var(--text-dim); }
.folder-readout.is-error { color: var(--alert); }
.folder-reset {
  flex: 0 0 auto; height: 24px; padding: 0 2px; border: 0; background: none;
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 120ms;
}
.folder-reset::before { content: "[ "; color: var(--tick); }
.folder-reset::after { content: " ]"; color: var(--tick); }
.folder-reset:hover { color: var(--accent); }
.folder-reset:hover::before, .folder-reset:hover::after { color: var(--accent-dark); }
.folder-reset:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.folder-reset:disabled { opacity: 0.4; }

.format-line {
  height: 22px; margin: 4px 0 0; padding: 0 8px; box-sizing: border-box;
  font: 400 10.5px/22px var(--font-mono); letter-spacing: 0.02em; color: var(--text);
  background: var(--field); box-shadow: var(--readout-shadow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.format-line.is-warning { color: var(--amber); }
.hint { margin: 4px 0 0; font-family: var(--font-body); font-size: 11px; line-height: 1.45; color: var(--text-dim); }
.hint.small { font-size: 10.5px; }

/* review (same plate) */
.review { position: absolute; inset: 0; padding: 14px 16px; display: flex; flex-direction: column; }
#review-plot { flex: 0 0 200px; width: 568px; height: 200px; }
.stats {
  flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 24px;
  margin: 8px 0 0; padding: 0; align-content: start; min-height: 0;
}
.stat { display: flex; align-items: center; min-width: 0; margin: 0; box-shadow: inset 0 -1px 0 var(--line); }
.stat.wide { grid-column: 1 / -1; }
.stats dt { flex: 0 0 120px; font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); }
.stats dd { margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-message { height: 22px; margin: 0 0 8px; padding: 0; line-height: 22px; font-family: var(--font-mono); font-size: 10.5px; color: var(--amber);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-message.is-error { color: var(--alert); }
.review-message.is-error::before { content: "[ERR] "; }
.review-buttons { display: flex; gap: 8px; height: 34px; }
.review-buttons .btn { height: 32px; }
#btn-save { width: 170px; } #btn-audition { width: 120px; } #btn-discard { width: 110px; } #btn-export { width: 120px; }

/* right plate: the meter, the capture key in a 36-tick bezel, the status and the progress */
.meter { position: absolute; left: 18px; top: 22px; width: 84px; height: 336px; display: block; }
.right-column { position: absolute; left: 108px; top: 18px; width: 194px; }
.medallion {
  display: block; width: 136px; height: 136px; margin: 7px auto 0; padding: 0; box-sizing: border-box;
  border: 2px solid var(--accent); border-radius: 50%; position: relative;
  background: repeating-conic-gradient(from -1deg, var(--line-strong) 0deg 2deg, transparent 2deg 10deg);
  transition: border-color 160ms;
}
.medallion-face {
  position: absolute; inset: 5px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box;
  background: var(--panel-light);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 8px rgba(0, 0, 0, 0.6);
  transition: background-color 160ms;
}
.medallion:hover .medallion-face { background: var(--panel-hover); }
.medallion:active .medallion-face { background: var(--panel-pressed); }
.medallion .caption { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.2em; padding-left: 0.2em; color: var(--text); }
.medallion .sub { margin-top: 3px; font: 400 9.5px/14px var(--font-mono); letter-spacing: 0.06em; color: var(--text-dim); }
.medallion.is-armed { border-color: var(--alert); background: repeating-conic-gradient(from -1deg, var(--alert) 0deg 2deg, transparent 2deg 10deg); }
.medallion.is-armed .medallion-face, .medallion.is-armed:hover .medallion-face { background: var(--alert); box-shadow: 0 0 18px rgba(var(--alert-rgb), 0.45); }
.medallion.is-armed .caption { color: var(--on-accent); }
.medallion.is-armed .sub { color: rgba(6, 9, 12, 0.8); }
.medallion:disabled { opacity: 0.4; }

.status { height: 40px; margin: 8px 0 0; font-family: var(--font-mono); font-size: 10.5px; line-height: 20px; letter-spacing: 0.01em; text-align: center; color: var(--text);
          overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.status.is-error { color: var(--alert); }
.status.is-error::before { content: "[ERR] "; }
.progress { height: 3px; margin: 12px 6px 11px; box-sizing: border-box; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6); transition: width 120ms linear; }
/* two lines of 16 px (a long "Last saved" file name is cut with an ellipsis), then 8 px of air */
.elapsed { height: 32px; margin: 8px 0 8px; font: 400 10.5px/16px var(--font-mono); letter-spacing: 0.02em; text-align: center; color: var(--text-dim);
           overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.right-column .hint.small { margin-top: 0; }

/* audio row: the Rate column is wide enough for "Device default" in the mono */
.audio-row { position: absolute; left: 0; top: 446px; width: 940px; height: 58px;
             display: grid; grid-template-columns: 112px 1fr 1fr 162px auto; grid-template-rows: 26px 14px; column-gap: 12px; row-gap: 2px;
             align-items: center; padding: 6px 14px 4px; }
#btn-audio { height: 26px; font-size: 10.5px; padding: 0 4px; }
#btn-audio.is-running { background: var(--panel-light); color: var(--ok-light); border-color: var(--ok); }
#btn-audio.is-running::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 0; background: var(--ok); box-shadow: 0 0 5px rgba(var(--ok-rgb), 0.7); }
#btn-audio.is-running:hover { background: var(--panel-hover); color: var(--ok-light); border-color: var(--ok); box-shadow: 0 0 0 1px rgba(var(--ok-rgb), 0.22), 0 0 10px rgba(var(--ok-rgb), 0.16); }
.audio-field { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; min-width: 0; }
.audio-field > span { font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); white-space: nowrap; }
.audio-row select { height: 22px; }
.audio-readout { padding: 0 8px; line-height: 20px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text); white-space: nowrap; text-align: right; max-width: 230px; overflow: hidden; text-overflow: ellipsis;
                 background: var(--field); box-shadow: var(--readout-shadow); }
.audio-readout.is-warning { color: var(--amber); }
.audio-note { grid-column: 1 / -1; margin: 0; font-family: var(--font-body); font-size: 10px; line-height: 14px; color: var(--text-dim);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ drop veil */
.drop-veil {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 40px 40px,
    rgba(6, 7, 9, 0.84);
  pointer-events: none;
}
.drop-veil span {
  position: relative; display: inline-block;
  padding: 20px 36px 20px calc(36px + 0.18em); font-size: 11.5px; letter-spacing: 0.18em; color: var(--text);
  border: 1px solid var(--accent); border-radius: 0; background: var(--panel);
  outline: 1px dashed rgba(var(--accent-rgb), 0.45); outline-offset: 5px;
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.18);
}

/* ------------------------------------------------------------------ footer links + About dialog */
.footer .footer-link { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-decoration: none; }
.footer button.footer-link { text-align: left; }
.footer .footer-link:hover { color: var(--accent); }
.footer .footer-link:focus-visible, .about a:focus-visible { color: var(--accent); outline: 1px solid var(--accent); outline-offset: 2px; }

dialog.about {
  width: 440px; max-width: calc(100vw - 40px); padding: 0; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--grid-bg), var(--panel); color: var(--text);
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.7); text-align: left;
  font-family: var(--font-body);
  counter-reset: about;
}
dialog.about::backdrop { background: rgba(3, 4, 6, 0.78); }
/* the body scrolls, not the dialog: 100vh − 42 px + the 2 px border stays under the UA modal max-height (100% − 2em − 6 px),
   so the ::before ticks of the frame never scroll away with the content (the .d-form pattern) */
.about-body {
  max-height: calc(100vh - 42px); box-sizing: border-box; padding: 28px 30px 22px;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; overscroll-behavior: contain;
}
.about h2 { margin: 0; font-family: var(--font-title); font-weight: 600; font-size: 18px; line-height: 26px; letter-spacing: 0.26em; color: var(--text); }
.about .about-version { margin: 6px 0 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--accent); }
.about .about-sub { margin: 0 0 6px; font-family: var(--font-label); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.about .about-text { margin: 0 0 18px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); }
.about h3 {
  margin: 0 0 6px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 9.5px; letter-spacing: 0.16em; color: var(--text-dim);
  counter-increment: about;
}
.about h3::before { content: counter(about, decimal-leading-zero) "  "; color: var(--accent-dark); }
.about-credits { margin: 0 0 14px; text-align: left; }
.about-credits div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; box-shadow: inset 0 -1px 0 var(--line); }
.about-credits dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.01em; color: var(--text); }
.about-credits dd { margin: 0; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.about .about-link { margin: 0; float: left; line-height: 28px; }
.about .about-link a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--accent); text-decoration: none; }
.about .about-link a::before { content: "\2197 "; color: var(--accent-dark); }
.about .about-link a:hover { color: var(--accent-light); }
.about form { margin: 0; text-align: right; }
.about .btn { position: static; min-width: 96px; height: 28px; padding: 0 18px; cursor: pointer; }

/* segmented control (Plan | Response on the Design page): a two-position mode key */
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 0; overflow: hidden; }
.segment {
  box-sizing: border-box; height: 26px; min-width: 92px; padding: 0 12px 0 calc(12px + 0.12em); margin: 0;
  border: 0; background: var(--field); color: var(--btn-text);
  font-size: 10px; letter-spacing: 0.12em;
  transition: background-color 120ms, color 120ms;
}
.segment + .segment { border-left: 1px solid var(--line-strong); }
.segment:hover { background: var(--panel-light); color: var(--text); }
.segment[aria-checked="true"], .segment[aria-checked="true"]:hover { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.segment:focus-visible { outline: 1px solid var(--text); outline-offset: -3px; }

/* ------------------------------------------------------------------ reverb page: Input (the microphone through the reverb: Muted / Live) */
.input-gate {
  flex: 0 0 66px; margin-left: 6px;
  display: grid; grid-template-columns: 66px; grid-template-rows: 15px 27px; row-gap: 2px;
}
.input-gate > label {
  grid-column: 1; grid-row: 1; align-self: end;
  font-size: 9px; line-height: 13px; letter-spacing: 0.14em;
  color: var(--text-dim); white-space: nowrap; overflow: hidden;
}
.input-gate > .btn { grid-column: 1; grid-row: 2; width: 66px; height: 27px; padding: 0 4px 0 calc(4px + 0.08em); font-size: 10px; letter-spacing: 0.08em; }   /* the selector-key register (10 px, 0.08 em): one key size across the row */
.input-gate > .btn.is-live, .input-gate > .btn.is-live:hover {
  background: var(--alert); border-color: var(--alert); color: var(--on-accent); font-weight: 600;
  box-shadow: 0 0 10px rgba(var(--alert-rgb), 0.35);
}

/* ------------------------------------------------------------------ reverb page: Audition (a dry recording through the hall) */
.audition {
  flex: 0 0 194px; margin-left: 6px;   /* 194: the label row holds AUDITION and the trim read-out ("TRIM −12.4 dB") side by side */
  display: grid; grid-template-columns: minmax(0, 1fr) 52px; grid-template-rows: 15px 27px; column-gap: 6px; row-gap: 2px;
}
.audition-head { grid-column: 1; grid-row: 1; align-self: end; display: flex; align-items: baseline; gap: 4px; min-width: 0; height: 13px; overflow: hidden; }
.audition-head > label {
  flex: 0 0 auto;
  font-size: 9px; line-height: 13px; letter-spacing: 0.14em;
  color: var(--text-dim); white-space: nowrap; overflow: hidden;
}
/* the auto-trim read-out: the same register, tabular, dim; a key (click switches the trim off and on) without a frame */
.audition-trim {
  flex: 0 1 auto; min-width: 0; height: 13px; margin: 0; padding: 0; border: 0; background: none;
  font-size: 9px; line-height: 13px; letter-spacing: 0.02em; text-transform: none; font-variant-numeric: tabular-nums;
  color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.audition-trim:hover, .audition-trim:focus-visible { color: var(--text); outline: none; }
.audition-trim:focus-visible { box-shadow: 0 1px 0 var(--accent); }
.audition-trim.is-busy { color: rgba(var(--text-dim-rgb), 0.6); }
.audition-trim.is-off { color: rgba(var(--text-dim-rgb), 0.6); text-decoration: line-through; }
.audition-trim.is-hot { color: var(--amber); }
.audition-trim:disabled { opacity: 0.4; cursor: default; }
.audition > select { grid-column: 1; grid-row: 2; align-self: center; }
.audition > .btn { grid-column: 2; grid-row: 1 / span 2; width: 52px; height: 44px; padding: 0 2px 0 calc(2px + 0.08em); font-size: 10px; letter-spacing: 0.08em; }   /* the same register */

/* ------------------------------------------------------------------ design page: room, plan / response, results and listening */
.d-room   { position: absolute; left: 0;     top: 0; width: 292px; height: 504px; }
.d-centre { position: absolute; left: 302px; top: 0; width: 388px; height: 504px; padding: 12px; }
.d-side   { position: absolute; left: 700px; top: 0; width: 240px; height: 504px; padding: 10px 14px; display: flex; flex-direction: column; }
.d-side > * { flex: 0 0 auto; }

.d-form {
  position: absolute; inset: 0; margin: 0; padding: 12px 14px 8px;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.d-form .section-title, .d-side .section-title { margin: 0 0 2px; }
.d-subtitle {
  display: flex; align-items: center; gap: 8px;
  height: 20px; margin: 5px 0 0; padding-top: 3px; line-height: 20px;
  border-top: 1px solid var(--line);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--text);
  counter-increment: sub;
}
.d-subtitle::before { content: counter(section, decimal-leading-zero) "." counter(sub); flex: 0 0 auto; color: var(--accent-dark); font-weight: 500; }
.d-subtitle::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.d-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 6px; align-items: center; height: 25px; }
.d-row > label, .d-heights > label, .d-level > span {
  font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim);
  white-space: nowrap; overflow: hidden;
}
.d-row.is-disabled > label, .d-row.is-disabled .d-unit { opacity: 0.4; }
.d-num { display: flex; align-items: center; gap: 6px; min-width: 0; }
.d-num input { flex: 0 0 72px; width: 72px; }
.d-unit { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--text-dim); white-space: nowrap; }

.page-design input[type="text"], .page-design input.d-number, .page-design select, .audition select, .page-science input[type="text"] { height: 23px; line-height: 21px; }
.page-design input.d-number { padding-right: 2px; }
/* a typed number outside its limits: not applied (design.js gives the limits in the status line) */
.page-design input.is-invalid, .page-design input.is-invalid:hover, .page-design input.is-invalid:focus {
  border-color: var(--alert); color: var(--alert);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--alert-rgb), 0.25);
}

/* centre: Plan | Response over one canvas, the two heights and the distance under it */
.d-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 26px; }
.d-view-bar .segmented { flex: 0 0 auto; }
.d-view-bar .segment { height: 24px; min-width: 88px; font-size: 9.5px; }
.d-view-hint { min-width: 0; font-family: var(--font-body); font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-canvas-wrap { position: relative; height: 388px; margin-top: 8px; }
.d-canvas-wrap::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border: 1px solid var(--line); }
.d-canvas-wrap canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; border-radius: 0; outline: none; }
.d-canvas-wrap canvas:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.d-heights { display: flex; align-items: center; gap: 6px; height: 24px; margin-top: 8px; }
.d-heights .d-num { margin-right: 12px; }
.d-heights .d-num:last-child { margin-right: 0; }
.d-heights .d-num input { flex-basis: 56px; width: 56px; }
.d-distance { height: 18px; margin: 4px 0 0; padding: 0 8px; box-sizing: border-box; font: 400 10.5px/18px var(--font-mono); letter-spacing: 0.02em; color: var(--text);
              background: var(--field); box-shadow: var(--readout-shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* right: figures, RT60 per band, the dry recording, playback and the exports */
.d-figures { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; grid-auto-rows: 19px; margin: 0; }
.d-fig:nth-child(-n+2) { grid-column: 1 / -1; }   /* volume and surface: a row each, a large hall needs the width */
.d-fig { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; min-width: 0; margin: 0; line-height: 19px; box-shadow: inset 0 -1px 0 var(--line); }
.d-figures dt { flex: 0 0 auto; font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); white-space: nowrap; }
.d-figures dd { flex: 0 1 auto; min-width: 0; margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em; color: var(--text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 120ms; }
.page-design.is-stale .d-figures dd.is-sim, .page-design.is-provisional .d-figures dd.is-sim { opacity: 0.4; }   /* being computed, or the broadband values of a drag */
.d-bands { display: block; width: 210px; height: 110px; margin-top: 6px; border-radius: 0; }   /* leaves the status line its three lines */
.d-side .d-listen-title { margin-top: 6px; }
/* the auto-trim read-out at the right end of the LISTEN title (after the rule): mono, tabular, dim; click switches the trim off and on */
.d-listen-title .d-trim {
  order: 2; flex: 0 0 auto; height: 22px; margin: 0; padding: 0; border: 0; background: none;
  font: 400 9.5px/22px var(--font-mono); letter-spacing: 0.04em; text-transform: none; font-variant-numeric: tabular-nums;
  color: var(--text-dim); white-space: nowrap; cursor: pointer;
}
.d-listen-title .d-trim:hover, .d-listen-title .d-trim:focus-visible { color: var(--text); outline: none; }
.d-listen-title .d-trim:focus-visible { box-shadow: 0 1px 0 var(--accent); }
.d-listen-title .d-trim.is-busy { color: rgba(var(--text-dim-rgb), 0.6); }
.d-listen-title .d-trim.is-off { color: rgba(var(--text-dim-rgb), 0.6); text-decoration: line-through; }
.d-listen-title .d-trim.is-hot { color: var(--amber); }
.d-licence-row { display: flex; align-items: center; gap: 6px; height: 16px; margin-top: 3px; }
.d-licence { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 9.5px; line-height: 16px; letter-spacing: 0.01em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-licence-row .folder-reset { height: 16px; font-size: 9px; }
.d-transport { display: flex; align-items: center; gap: 6px; height: 26px; margin-top: 6px; }
.page-design .btn, .page-science .btn { height: 26px; padding: 0 4px 0 calc(4px + 0.08em); font-size: 10px; letter-spacing: 0.08em; }
#d-play { flex: 0 0 66px; }
#d-stop { flex: 0 0 58px; }
.d-transport .check { margin-left: 8px; }
.d-level { display: grid; grid-template-columns: auto minmax(0, 1fr) 42px; column-gap: 8px; align-items: center; height: 22px; margin-top: 5px; cursor: default; }
.d-level output { font-family: var(--font-mono); font-size: 11px; color: var(--text); text-align: right; white-space: nowrap; }
.d-range { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 16px; margin: 0; padding: 0; background: transparent; cursor: pointer; outline: none; }
.d-range::-webkit-slider-runnable-track { height: 3px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, var(--line) 1px 10%); }
.d-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -3.5px; border: 0; border-radius: 0; background: var(--accent); box-shadow: 0 0 0 1px var(--panel); }
.d-range::-moz-range-track { height: 3px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, var(--line) 1px 10%); }
.d-range::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 0; background: var(--accent); box-shadow: 0 0 0 1px var(--panel); }
.d-range:hover::-webkit-slider-thumb, .d-range:focus-visible::-webkit-slider-thumb { background: var(--accent-light); }
.d-range:hover::-moz-range-thumb, .d-range:focus-visible::-moz-range-thumb { background: var(--accent-light); }
.d-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--panel), 0 0 0 2px var(--accent); }
.d-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--panel), 0 0 0 2px var(--accent); }
.d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.d-side .d-status {
  flex: 1 1 0; min-height: 0; max-height: 42px; margin: 6px 0 0;
  font-family: var(--font-mono); font-size: 10px; line-height: 14px; letter-spacing: 0.01em; color: var(--text-dim);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.d-side .d-status.is-busy { color: var(--amber); }
.d-side .d-status.is-error { color: var(--alert); }
.d-side .d-status.is-error::before { content: "[ERR] "; }

/* About: sources and licences of the dry recordings */
.about-sources { margin: 0 0 14px; }
.about .about-sources-text { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); text-align: left; }
.about .about-sources-text a { color: var(--accent); text-decoration: none; }
.about .about-sources-text a:hover { color: var(--accent-light); }

/* ------------------------------------------------------------------ offline version */
.footer-left button { font: inherit; letter-spacing: inherit; color: inherit; }
.footer-left .footer-sep { opacity: 0.5; margin: 0 7px; }
.about-offline { margin: 0 0 14px; }
.about .about-offline-text { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--text-dim); text-align: left; }
.about-offline-actions { text-align: center; }
.about-offline-actions .btn { position: static; min-width: 190px; height: 28px; padding: 0 18px; cursor: pointer; }

/* ------------------------------------------------------------------ PDF pages (About dialog): a two-position mode key, dark | light */
.about-pdf { margin: 0 0 14px; }
.about .about-pdf-text { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--text-dim); text-align: left; }
.about-pdf .segmented { display: flex; width: 100%; box-sizing: border-box; }
.about-pdf .segment { flex: 1 1 0; min-width: 0; height: 26px; font-size: 9.5px; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------------ Science (About dialog): the provider of the online engine, its API key, the base URL of a local server and the model */
.about-science { margin: 0 0 14px; }
.about .about-science-text { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: var(--text-dim); text-align: left; }
.about .about-science-text a { color: var(--accent); text-decoration: none; }
.about .about-science-text a:hover { color: var(--accent-light); }
.about-science-field { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; cursor: default; }
.about-science-field > span {
  flex: 0 0 98px; font-family: var(--font-label); font-weight: 500; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); text-align: left; white-space: nowrap; overflow: hidden;
}
.about-science-field > input, .about-science-field > select {
  flex: 1 1 auto; min-width: 0; height: 26px; padding: 0 8px; margin: 0; box-sizing: border-box;
  background-color: var(--field); color: var(--text);
  border: 1px solid var(--line); border-radius: 0; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; outline: none; caret-color: var(--accent);
  transition: border-color 120ms, box-shadow 120ms;
}
.about-science-field > input::placeholder { color: rgba(var(--text-dim-rgb), 0.75); }
.about-science-field > input:hover, .about-science-field > select:hover { border-color: var(--line-strong); }
.about-science-field > input:focus-visible, .about-science-field > select:focus-visible {
  border-color: var(--accent); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.25);
}
.about-science-field > select {
  appearance: none; -webkit-appearance: none; padding-right: 22px; text-overflow: ellipsis; cursor: pointer;
  background-image: var(--select-chevron); background-repeat: no-repeat; background-position: right 8px center;
  font-size: 10.5px; letter-spacing: 0;
}
.about-science-field > select option { background: var(--panel-light); color: var(--text); font-family: var(--font-mono); }
.about-science-field .btn { position: static; flex: 0 0 auto; min-width: 0; height: 26px; padding: 0 10px 0 calc(10px + 0.1em); font-size: 9.5px; cursor: pointer; }
/* the help line under the provider (free-tier note, where the key comes from) and the state line at the foot (the key's
   tail, the model, how the last REFRESH went): mono, no uppercase — a key tail and a model id read as typed. The state
   line wraps and clamps at four rows (the .d-status pattern), so a long model id or the local server's CORS hint is
   read in full; the title holds the whole text */
.about .about-science-help {
  margin: -2px 0 8px 106px; font-family: var(--font-mono); font-size: 9.5px; line-height: 13px; letter-spacing: 0.02em;
  color: var(--text-dim); text-align: left;
}
.about .about-science-help:empty { display: none; }
.about .about-science-state {
  margin: -2px 0 0 106px; font-family: var(--font-mono); font-size: 9.5px; line-height: 14px; letter-spacing: 0.02em;
  color: var(--text-dim); text-align: left;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ scrollbars (WebKit) */
.d-form::-webkit-scrollbar, .menu::-webkit-scrollbar, .about-body::-webkit-scrollbar { width: 8px; }
.d-form::-webkit-scrollbar-track, .menu::-webkit-scrollbar-track, .about-body::-webkit-scrollbar-track { background: transparent; }
.d-form::-webkit-scrollbar-thumb, .menu::-webkit-scrollbar-thumb, .about-body::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid var(--panel); }
.d-form::-webkit-scrollbar-thumb:hover, .menu::-webkit-scrollbar-thumb:hover, .about-body::-webkit-scrollbar-thumb:hover { background: var(--tick); }

/* selects: a touch smaller and untracked so the longest options ("Stereo – inputs 1 + 2", "Sine sweep (recommended)") fit their cells in full */
.session select, .audio-row select, .page-design select, .audition select { font-size: 10.5px; letter-spacing: 0; }

/* ---- capture page: the Source (loudspeaker correction) cell and the Calibrate dialog */
.row.pair > .cell.source-cell { grid-template-columns: 78px 1fr auto; }
dialog.calibrate { max-height: 92vh; overflow-y: auto; }
.calibrate h2 { font-size: 14px; letter-spacing: 0.22em; margin-bottom: 8px; }
.source-cell > .btn { height: 22px; padding: 0 8px; font-size: 9.5px; letter-spacing: 0.08em; }
.calibrate .cal-guide { margin: 0 0 10px; padding-left: 18px; font: 11.5px/1.45 var(--font-sans); color: var(--text-dim); text-align: left; }
.calibrate .cal-guide li { margin: 0 0 3px; }
.calibrate .cal-row { display: grid; grid-template-columns: 78px 1fr; column-gap: 8px; align-items: center; margin: 0 0 10px; }
.calibrate .cal-row > label { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.calibrate .cal-row > input { height: 24px; box-sizing: border-box; padding: 0 6px; border: 1px solid var(--line); background: var(--field); color: var(--text); font: 11px/22px var(--font-mono); }
.calibrate .cal-row > input:focus { outline: none; border-color: var(--accent); }
.calibrate .cal-plot { display: block; width: 100%; height: 160px; border: 1px solid var(--line); background: var(--field); }
.calibrate .cal-status { margin: 8px 0 12px; font: 10.5px/1.4 var(--font-mono); color: var(--text-dim); text-align: left; min-height: 30px; }
.calibrate .cal-status.is-error { color: var(--alert); }
.calibrate .cal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.calibrate .cal-actions .btn { height: 28px; min-width: 96px; }

/* ---- footer: the offline store as it really is (ui.js, from updates.js' 'hallprint:offline' event) */
.footer #offline-open[data-state="ready"] { color: var(--ok); }
.footer #offline-open[data-state="storing"] { color: var(--accent); }
.footer #offline-open[data-state="incomplete"] { color: var(--amber); }