/* The calibration page. The rack surface, like every view of the app
   (docs/brand-art-direction.md, "One surface"), with teal kept for
   measurements and the three verdict colours kept semantic: good, amber
   (nearly, or not sure yet) and red (wrong, or stop). */
:root {
  --ink: #0D171D; --bench: #101D24; --bench-2: #182933; --bench-3: #223640;
  --line: #2E4550; --teal: #0B8392; --teal-lit: #8FD3DD; --text: #E8ECEE;
  --muted: #92A4AC; --good: #6FCF97; --amber: #E8B25C; --red: #E2685E;
  --radius: 6px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--text);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[hidden] { display: none !important; }
/* The shared header sets its own sizes; this page's 15px/1.5 body would otherwise make it taller than on every other page. */
.gb-header { font-size: 16px; line-height: normal; }
a { color: var(--teal-lit); }
h1 { font-size: 1.7rem; margin: .1rem 0 .4rem; }
h2 { font-size: 1.1rem; margin: 0 0 .7rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
p { margin: .35rem 0; }
.note { color: var(--muted); font-size: 13.5px; }
.eyebrow { margin: 0; font-size: .72rem; letter-spacing: .14em; color: var(--teal-lit); }
.lede { color: var(--muted); max-width: 62ch; }

/* Visually hidden but reachable: matches styles.css's .sr-only (not loaded on
   this document, which is its own page). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.tool-line { color: var(--muted); margin: .7rem 0 .2rem; }
.cal-main { max-width: 1600px; margin: 0 auto; padding: 20px clamp(16px, 3vw, 40px) 80px; }
.cal-card { background: var(--bench); border: 1px solid var(--bench-3); border-radius: var(--radius);
  padding: 18px 20px; margin: 14px 0; }

/* THE THREE SET UP CARDS, equal rank, one row once there is room for it
   (Jacob, 28 Sep: tool pages use the full width). */
.setup-cards { display: grid; gap: .8rem; grid-template-columns: 1fr; margin: 14px 0; }
@media (min-width: 900px) { .setup-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.setup-card { display: grid; gap: .3rem; align-content: start; background: var(--bench); border: 1px solid var(--bench-3);
  border-radius: var(--radius); padding: 14px 16px; color: var(--text); text-decoration: none; }
.setup-card:hover { border-color: var(--teal); }
.setup-card strong { font-size: 15px; }
.setup-card span { color: var(--muted); font-size: 13.5px; }
.setup-card small { color: var(--teal-lit); font-size: 12px; }
.setup-card[aria-current="true"] { border-color: var(--teal-lit); box-shadow: inset 0 0 0 1px var(--teal-lit); }

/* ONE CARD AT A TIME (docs/briefs/site-structure.md, Calibration item 2): the
   overview shows the three cards full size; in any other Set up view they fold
   to one row of titles, wrapping on a narrow screen, with "← Set up" first to
   go back. The cards stay real links; only what they say beyond the title is
   hidden. Instruments hides the whole row (its `data-tools`). */
.setup-back { display: none; color: var(--teal-lit); text-decoration: none; font-size: 12.5px; line-height: 1.2; padding: 3px 6px; }
.setup-back:hover { text-decoration: underline; }
html[data-tool]:not([data-tool="set-up"]) .setup-cards { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin: 8px 0; }
html[data-tool]:not([data-tool="set-up"]) .setup-back { display: inline-block; }
html[data-tool]:not([data-tool="set-up"]) .setup-card { padding: 3px 8px; border-radius: 999px; }
html[data-tool]:not([data-tool="set-up"]) .setup-card span,
html[data-tool]:not([data-tool="set-up"]) .setup-card small { display: none; }
html[data-tool]:not([data-tool="set-up"]) .setup-card strong { font-size: 12.5px; line-height: 1.2; font-weight: 600; }

/* THE SIX JOBS (Instruments, navigation part 2, Jacob 28 Sep): equal rank,
   three to a row once there is room, one chosen. */
.job-head { justify-content: space-between; }
.job-cards { display: grid; gap: .8rem; grid-template-columns: 1fr; margin: 14px 0; }
@media (min-width: 900px) { .job-cards { grid-template-columns: repeat(3, 1fr); } }
.job-card { display: grid; gap: .3rem; align-content: start; background: var(--bench); border: 1px solid var(--bench-3);
  border-radius: var(--radius); padding: 14px 16px; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.job-card:hover { border-color: var(--teal); }
.job-card strong { font-size: 15px; }
.job-card span { color: var(--muted); font-size: 13.5px; }
.job-card[aria-pressed="true"] { border-color: var(--teal-lit); box-shadow: inset 0 0 0 1px var(--teal-lit); }

/* The frame's own buttons (all classed gb-*) keep the frame's styling; the :where keeps this rule's specificity at a bare button's. */
button:not(:where([class^="gb-"], [class*=" gb-"])), .file-pick, a.button-link { font: inherit; padding: .5rem .95rem; border-radius: var(--radius); border: 1px solid var(--teal);
  background: var(--teal); color: #fff; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; }
button.ghost, .file-pick.ghost, a.button-link.ghost { background: transparent; color: var(--teal-lit); }
/* A link that goes to another view, dressed as the secondary button it sits
   beside (site structure brief, Calibration item 4). */
a.button-link { text-decoration: none; }
/* Set up's "Compare calibration reports" and Measure's "Compare with another
   play" are the same kind of door, so they are dressed alike (site structure,
   item 4): Measure's secondary button, a filled panel with a teal edge and
   bold teal words that fills teal on hover (styles.css .secondary-button). */
a.button-link.secondary { background: #182933; color: var(--teal-lit); font-weight: 800; }
a.button-link.secondary:hover { background: var(--teal); color: #fff; }
button:disabled { opacity: .45; cursor: default; }
.file-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-pick { position: relative; background: transparent; color: var(--teal-lit); }
.link-pick { position: relative; color: var(--teal-lit); text-decoration: underline; cursor: pointer; }
.link-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
select, input[type=number], input[type=text] { font: inherit; background: var(--bench-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .35rem .5rem; min-height: 36px; }
input[type=number] { width: 5.5rem; }
input[type=text] { min-width: min(16rem, 100%); }
.row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; }
.row.small { font-size: 13px; }
/* One button size on Instruments (UX Review's Instruments note 9, 29 Sep):
   a small row there shrinks its labels and fields, not its buttons. Scoped
   to Instruments; Set up's other tools keep their small rows as they were. */
html[data-tool="instruments"] .row.small button, html[data-tool="instruments"] .row.small .file-pick { font-size: 15px; }
.field { display: inline-flex; gap: .4rem; align-items: center; color: var(--muted); font-size: 13.5px; flex-wrap: wrap; max-width: 100%; }
/* A long option or a wide text box shrinks to the row instead of pushing the page sideways (320 px). */
.field select, .field input { min-width: 0; max-width: 100%; }
.status { color: var(--muted); font-size: 13.5px; }

/* disc picker */
.disc-picker, .disc-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.disc-label { color: var(--muted); font-size: 13.5px; }
.disc { display: inline-flex; gap: .5rem; align-items: baseline; background: var(--bench-2); border: 1px solid var(--line);
  color: var(--text); padding: .45rem .8rem; min-height: 0;
  /* A long record name wraps inside its button on a phone. */
  flex-wrap: wrap; max-width: 100%; text-align: left; }
.disc[aria-checked="true"] { border-color: var(--teal-lit); box-shadow: inset 0 0 0 1px var(--teal-lit); }
.disc small { color: var(--muted); }
.tag { display: inline-block; font-size: 11.5px; letter-spacing: .04em; padding: .05rem .4rem;
  border-radius: 3px; border: 1px solid var(--amber); color: var(--amber); cursor: help; }
.disc-chosen .side { min-height: 30px; padding: .2rem .7rem; }
button.link { background: none; border: 0; color: var(--teal-lit); text-decoration: underline; padding: 0 .2rem; min-height: 0; }
#sim-entry-line button.link { padding: 0; font-size: inherit; vertical-align: baseline; }
.disc-card { padding: 12px 20px; }
.disc:disabled { opacity: .55; }

/* tests */
.test-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: .15rem 1.2rem; }
.test-list li { padding: .45rem 0; border-bottom: 1px solid var(--bench-3); display: flex; gap: .6rem; align-items: baseline; }
.test-list .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--teal-lit); transform: translateY(-1px); }
.test-list li.off { color: var(--muted); }
.test-list li.off .dot { background: transparent; border: 1px solid var(--muted); }
.test-list small { display: block; color: var(--muted); font-size: 12.5px; }
.test-list .live { font-size: 11px; color: var(--teal-lit); letter-spacing: .06em; margin-left: .3rem; }

/* steps: the record on the left, the steps down the right (Jacob, 25 Sep),
   the readings column free to grow as the page widens. */
.calibrate-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
/* The heading spans both columns, so the record takes the narrow one and the steps the wide one, both from the top. */
.calibrate-grid > h2 { grid-column: 1 / -1; margin-bottom: 0; }
@media (max-width: 860px) {
  .calibrate-grid { grid-template-columns: 1fr; }
  .calibrate-grid .record-map { position: static; }
  /* The steps first, then the record's live status and the fold that holds
     its drawing (site structure brief item 2). On the simulator the panel is
     the rig's own controls, which are what the steps are about: it stays
     first there. */
  body:not(.rig-on) .calibrate-grid .record-map { order: 2; }
}
.calibrate-main { min-width: 0; }
/* The gauge and the spectrum side by side once there is room (Jacob, 28 Sep:
   tool pages use the full width); everything else in .readings stays full
   width across both columns. */
@media (min-width: 1280px) {
  .readings { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4rem; align-items: start; }
  .readings > * { grid-column: 1 / -1; }
  .readings > #gauge { grid-column: 1; margin-bottom: 0; }
  .readings > #spectrum { grid-column: 2; }
}
.step-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .35rem; }
.step-list button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; text-align: left; background: transparent; color: var(--muted); border-color: var(--line); }
.step-list button small { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.step-list button[aria-selected="true"] { color: var(--text); border-color: var(--teal-lit); background: var(--bench-2); }
.step-open { margin: .4rem 0 .8rem; }

.call-out { font-size: 1.6rem; font-weight: 700; margin: 0; }
.banner { padding: .5rem .75rem; border-radius: var(--radius); font-weight: 700; margin: .5rem 0; }
.banner.red { background: rgba(226, 104, 94, .16); border: 1px solid var(--red); color: var(--red); }
.banner.amber { background: rgba(232, 178, 92, .14); border: 1px solid var(--amber); color: var(--amber); }
.where { min-height: 1.5em; }


/* readings */
.verdict { padding: .65rem .85rem; border-radius: var(--radius); border-left: 4px solid var(--line); background: var(--bench-2); margin: 0 0 .7rem; }
/* The small marks beside a figure (account/level-mark.js) stay together on one line. */
.level-marks { white-space: nowrap; }
.chain-difference { margin: 0 0 .7rem; font-size: 14px; }
.chain-difference small { color: var(--muted); }
/* Input problems that void every reading, right under the source bar (UX area
   5 finding 3); the readings dim until it clears. */
.input-problem { margin: .5rem 0 0; padding: .5rem .8rem; border-radius: var(--radius); background: color-mix(in srgb, var(--red) 18%, transparent); border-left: 4px solid var(--red); font-weight: 600; }
.readings.voided #verdict, .readings.voided #gauge { opacity: .4; transition: opacity .2s; }
.verdict.good { border-left-color: var(--good); }
.verdict.amber { border-left-color: var(--amber); }
.verdict.red { border-left-color: var(--red); }
.verdict.quiet { color: var(--muted); }
.gauge { min-height: 90px; margin-bottom: .6rem; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge text { fill: var(--muted); font-size: 12.5px; }
.gauge .g-line { stroke: var(--line); stroke-width: 1; }
.gauge .g-zone { fill: rgba(111, 207, 151, .14); }
.gauge .g-l { fill: #7E8FD9; }
.gauge .g-r { fill: #D9A441; }
.gauge .g-dot { stroke: var(--ink); stroke-width: 1; }
.gauge .g-wait { fill: var(--muted); font-style: italic; font-size: 12px; }
.gauge .g-threshold { stroke: var(--red); stroke-dasharray: 4 3; }
.gauge .g-trace { fill: none; stroke: var(--teal-lit); stroke-width: 2; }
.gauge .g-needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }

.meters { display: grid; gap: .35rem; margin: .4rem 0 .7rem; }
.meter { display: grid; grid-template-columns: 1.2rem 1fr 7.5rem; gap: .5rem; align-items: center; font-size: 13px; }
.meter-bar { position: relative; height: 14px; border-radius: 7px; background: var(--bench-2); border: 1px solid var(--line); overflow: hidden; }
.meter-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--teal); transition: width .1s linear; }
.meter output { font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
/* The buzz under the ladder (page.js drawBuzz): the .meter bar, one line per channel per band. Shown and never coloured by a figure. */
.buzz { margin: 0 0 .7rem; display: grid; gap: .45rem; }
.buzz[hidden] { display: none; }
.buzz-caption { margin: 0; font-size: 13px; color: var(--muted); }
.buzz-rung { display: grid; gap: .2rem; padding-bottom: .35rem; border-bottom: 1px solid var(--bench-3); }
.buzz-um { font-size: 13px; }
.buzz-line { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) minmax(8rem, 12rem); gap: .5rem; align-items: center; font-size: 13px; }
.buzz-figure { font-variant-numeric: tabular-nums; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.buzz-figure small { display: block; color: var(--muted); font-size: 12px; }
.spectrum { width: 100%; height: auto; background: var(--bench-2); border: 1px solid var(--line); border-radius: var(--radius); display: block; }

/* profile and compare */
.runs { list-style: none; padding: 0; margin: .4rem 0; }
.runs li { padding: .4rem 0; border-bottom: 1px solid var(--bench-3); font-size: 14px; }
.runs li small { color: var(--muted); display: block; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; margin: .5rem 0; }
th, td { text-align: left; padding: .32rem .5rem; border-bottom: 1px solid var(--bench-3); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.v-same { color: var(--good); }
.v-different { color: var(--amber); }
.v-withheld, .v-unknown, .v-missing { color: var(--muted); }
.refusal { border-left: 4px solid var(--amber); padding: .5rem .8rem; background: var(--bench-2); border-radius: var(--radius); margin: .5rem 0; }
.listen { border-top: 1px solid var(--bench-3); margin-top: 1rem; }
.compare-summary { display: grid; gap: .5rem; margin: .8rem 0 1rem; }
.compare-summary .verdict { margin: 0; }
.compare-detail { margin: .3rem 0; }
.compare-detail summary { cursor: pointer; color: var(--teal-lit); padding: .3rem 0; }
.tests-fold summary { cursor: pointer; font-weight: 700; padding: .2rem 0; }
.tests-fold[open] summary { margin-bottom: .6rem; }
.preset { border: 1px solid var(--teal); border-radius: var(--radius); background: var(--bench-2); padding: 14px 18px; }
.preset h2 { margin-bottom: .3rem; }
.check-headline { font-size: 1.25rem; font-weight: 800; margin: .9rem 0 .6rem; }
.check-headline.good { color: var(--good); }
.check-headline.amber { color: var(--amber); }
.check-headline.red { color: var(--red); }
/* The instruments. */
/* The audio source bars (bench/source-bar.css): Your turntable's sits at the
   top of its input card, Instruments' between the tabs and the jobs. */
#turntable-source-bar { margin: 0 0 .6rem; }
#instruments-source-bar { margin: .8rem 0 .4rem; }
#job-interpret { margin-top: .8rem; }
.path { color: var(--muted); font-size: 12.5px; margin: 0 0 .4rem; }
.chip { background: transparent; color: var(--muted); border-color: var(--line); min-height: 32px; padding: .25rem .7rem; }
.chip.on { color: var(--text); border-color: var(--teal-lit); background: var(--bench-2); }
.meter-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: .8rem; }
.meter-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; background: var(--bench-2); min-width: 0; }
.meter-tile h3 { margin: 0 0 .15rem; }
.meter-tile .caption { margin: 0 0 .4rem; }
.meter-tile .settings { margin: .2rem 0 .5rem; }
.meter-tile .verdict { margin: .4rem 0 0; padding: .35rem .6rem; font-size: 13px; }
.meter-tile svg { width: 100%; height: auto; display: block; }
.meter-tile .g-line { stroke: var(--line); stroke-width: 1; }
.meter-tile .g-zero { stroke: var(--muted); stroke-width: 1; }
.trace { fill: none; stroke-width: 1.5; }
.trace.left, .trace.mono { stroke: #7E8FD9; }
.trace.right { stroke: #D9A441; }
.goniometer { max-width: 200px; margin: 0 auto; }
.goniometer .dot { fill: var(--teal-lit); opacity: .7; }
.correlation-row { display: grid; grid-template-columns: 1.4rem 1fr 1.4rem; gap: .4rem; align-items: center; font-size: 12px; color: var(--muted); }
.correlation { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--red), var(--amber) 50%, var(--good)); }
.correlation i { position: absolute; top: -3px; width: 3px; height: 16px; background: var(--text); transform: translateX(-1px); }
table.figures { max-width: 100%; }
table.figures td { border: 0; padding: .15rem .3rem; overflow-wrap: anywhere; }
table.figures td.num { white-space: normal; }
.standard { color: var(--muted); font-size: 12px; font-style: italic; margin: 0 0 .3rem; }
.generator { margin: .3rem 0 .6rem; }
.generator summary { cursor: pointer; color: var(--teal-lit); }
.status-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.status-chip { font-size: 12.5px; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.status-chip.good { border-color: var(--good); color: var(--good); }
.status-chip.amber { border-color: var(--amber); color: var(--amber); }
.status-chip.red { border-color: var(--red); color: var(--red); }
.verdict.finding { display: grid; grid-template-columns: 1.8rem 1fr; gap: .6rem; align-items: start; }
.finding-number { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--bench-3); font-weight: 800; font-size: 13px; }
.finding button { margin-top: .4rem; min-height: 32px; padding: .2rem .7rem; font-size: 13px; }
.generator-tile { margin-top: .8rem; border-color: var(--teal); }
/* The generator is a <details>: on the distortion job it folds under "Test
   the meters without any gear" (instruments-ui.js sets the summary). */
.generator-tile > summary { cursor: pointer; }
.generator-tile > summary h3 { display: inline; }
.generator-tile[open] > summary { margin-bottom: .3rem; }
/* On Instruments the job panel's own heading names the job, and the boxed
   Hum and noise check under it needs no second title (UX review, 29 Sep);
   Set up's electronics view keeps its title. */
html[data-tool="instruments"] #quick-check-heading { display: none; }
/* The output: Stop always on screen while anything plays. */
.output-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; display: flex; gap: 1rem; align-items: center;
  max-width: calc(100vw - 32px); padding: .6rem .9rem; border-radius: var(--radius); background: var(--ink); border: 2px solid var(--amber); color: var(--text); }
.output-bar button { background: var(--red); border-color: var(--red); font-weight: 800; }
.output-confirm { max-width: 520px; background: var(--bench); color: var(--text); border: 1px solid var(--amber); border-radius: var(--radius); padding: 18px 20px; }
.output-confirm::backdrop { background: rgba(0, 0, 0, .6); }
.loopback ol { padding-left: 1.2rem; }
.gauge .g-held { opacity: .35; }
/* The gauges (calibration/gauges.js). Teal is measurement, green the set
   zone, red the limit, amber a reading that wants attention; channels keep
   their two colours and differ in shape too (left a circle, right a square). */
.gauge text.g-strong { fill: var(--text); font-weight: 700; font-size: 13.5px; }
.gauge text.g-value { fill: var(--text); font-weight: 800; font-size: 14.5px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.gauge text.g-note { font-size: 12px; }
.gauge tspan.g-note { font-size: 12px; font-weight: 400; font-style: normal; font-family: inherit; fill: var(--muted); }
.gauge text.g-good { fill: var(--good); font-weight: 700; }
.gauge text.g-bad { fill: var(--red); font-weight: 700; }
.gauge text.g-accent { fill: var(--teal-lit); font-weight: 700; }
.gauge .g-rail { stroke: var(--bench-3); stroke-width: 9; stroke-linecap: round; }
.gauge .g-rail-thin { stroke: var(--line); stroke-width: 1.5; }
.gauge .g-grid { stroke: var(--bench-3); stroke-width: 1; }
.gauge .g-centre { stroke: var(--good); stroke-width: 1.5; }
.gauge .g-knob { stroke: var(--ink); stroke-width: 1; }
.gauge .g-mark { fill: var(--amber); }
.gauge .g-mark-good { fill: var(--good); }
.gauge .g-mark-quiet { fill: var(--muted); }
.gauge .g-mark-last { fill: var(--amber); opacity: .35; }
.gauge .g-trail { fill: var(--amber); }
.gauge .g-raw { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 3 2; }
.gauge .g-track { fill: var(--bench-3); }
.gauge .g-fill { fill: var(--teal-lit); }
.gauge .g-over { fill: var(--red); opacity: .08; }
.gauge .g-playing { fill: var(--teal-lit); opacity: .08; }
.gauge .g-rated { fill: var(--muted); opacity: .5; }
.gauge .g-info { fill: none; stroke: var(--muted); stroke-dasharray: 3 2; opacity: .6; }
.gauge .g-line-l { fill: none; stroke: #7E8FD9; stroke-width: 2.5; }
.gauge .g-line-r { fill: none; stroke: #D9A441; stroke-width: 2; stroke-dasharray: 6 4; }
/* Where it let go: waveforms, drawn thin and solid, never dashed. */
.let-go { margin: .4rem 0 .9rem; }
.let-go-caption { margin: .2rem 0 .5rem; }
.let-go .gauge .g-line-l, .let-go .gauge .g-line-r { stroke-width: 1.2; stroke-dasharray: none; }
.let-go .gauge .lg-env { stroke-width: 1; }
.let-go .gauge .lg-mark { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.gauge .g-swing { stroke-dasharray: none; stroke-width: 3; stroke-linecap: round; opacity: .55; }
.gauge .g-turn { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.gauge .g-average { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 6 4; }
.tracking-choice { display: flex; flex-wrap: wrap; gap: 8px; margin: .2rem 0 .6rem; }
.tracking-choice button[aria-pressed="true"] { border-color: var(--text); color: var(--text); }
.gauge-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: .2rem 0 .6rem; font-size: 13.5px; color: var(--muted); }
.gauge-setting select { background: var(--bench); color: var(--text); border: 1px solid var(--line); padding: 6px 8px; max-width: 100%; min-width: 0; }
.report-gauge { margin: .4rem 0 .8rem; }
.report-gauge svg { width: 100%; height: auto; display: block; }

.gauge .g-held-label { opacity: .6; }
/* Jacob's page notes, 29 Sep: "How it works" stands out. */
.how-box { font-size: 14px; line-height: 1.55; color: var(--text); background: var(--bench-2); border: 1px solid var(--line); border-left: 4px solid var(--teal-lit); border-radius: var(--radius); padding: .6rem .9rem; margin: .5rem 0; }
.how-box:empty { display: none; }
.how-box .how-head { display: block; margin-bottom: .3rem; }
.how-box p { margin: .35rem 0; }
.how-box .how-note { color: var(--muted); }
.step-order { color: var(--muted); font-size: 13px; margin: .4rem 0 .6rem; }

/* The Loading step's curves (calibration/gauges.js loading, calibration/page.js
   renderLoading): one line per loading setting, told apart by colour AND dash,
   in blues, violet, cyan and greys on purpose - no green, amber or red, because
   a curve is not a verdict. The flattest is heavier. The shaded range is where
   the figures are taken, not a limit. */
.gauge .g-judged { fill: var(--teal-lit); opacity: .09; }
.gauge .g-zero { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.gauge polyline.g-loading { fill: none; stroke-width: 2; stroke-linejoin: round; }
.gauge polyline.g-loading-flat { stroke-width: 3.8; }
.gauge .g-loading-0, .loading-swatch.g-loading-0 { stroke: #7E8FD9; }
.gauge .g-loading-1, .loading-swatch.g-loading-1 { stroke: #C792EA; stroke-dasharray: 8 4; }
.gauge .g-loading-2, .loading-swatch.g-loading-2 { stroke: #5CC8D8; stroke-dasharray: 2 3; }
.gauge .g-loading-3, .loading-swatch.g-loading-3 { stroke: #E6E8EA; stroke-dasharray: 10 3 2 3; }
.gauge .g-loading-4, .loading-swatch.g-loading-4 { stroke: #D98FB6; stroke-dasharray: 5 3; }
.gauge .g-loading-5, .loading-swatch.g-loading-5 { stroke: #9AA0B5; stroke-dasharray: 1 3; }
.loading-panel { margin: 0 0 .7rem; }
.loading-passes { list-style: none; margin: .3rem 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.loading-pass { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bench-2); }
.loading-pass.flattest { border-color: var(--teal-lit); }
.loading-pass-text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.loading-pass-text small { color: var(--muted); }
.loading-pass button { flex: none; }
/* A short stroke in the curve's own colour and dash (an svg, so the stroke is the swatch). */
.loading-swatch { flex: none; width: 34px; height: 8px; stroke-width: 3; }

/* The record, drawn (calibration/record-map.js): the side small and unrolled,
   in the colours of our own record layout. */
.record-map { position: sticky; top: 92px; align-self: start; padding: 14px 16px; border: 1px solid var(--line); background: var(--bench); }
.record-map-cap { margin: 0 0 6px; font: 800 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; color: var(--muted); }
/* The record's own name heads its panel, in the page's type, not a label's. */
#record-map-title { font-weight: 700; font-size: 15px; line-height: 1.3; font-family: inherit; letter-spacing: 0; color: var(--text); margin-bottom: 10px; }
/* The one-line live status, above the fold on a narrow screen. */
.record-status { margin: 0 0 .5rem; font-size: 13px; font-weight: 700; color: var(--text); }
.record-fold > summary { display: none; cursor: pointer; padding: .5rem 0; color: var(--teal-lit); font-weight: 700; min-height: 32px; }
.record-fold .rm-measure { display: block; margin: .6rem 0 0; }
@media (max-width: 860px) {
  .record-fold > summary { display: list-item; }
  .record-fold:not([open]) { margin-top: 0; }
  .record-map { padding: 10px 14px; }
}
.record-map-svg { width: 100%; height: auto; display: block; }
.record-map-svg text { fill: var(--muted); font-size: 11.5px; }
.record-map-svg .rm-strong { fill: var(--text); font-weight: 700; font-size: 13px; }
.record-map-svg .rm-label { fill: var(--text); }
.record-map-svg .rm-note { fill: var(--muted); }
.record-map-svg .rm-sub { fill: var(--muted); font-size: 10.5px; }
.record-map-svg .rm-trap { fill: var(--amber); }
.record-map-svg .rm-cap { font-size: 10px; letter-spacing: 1px; }
.record-map-svg .rm-num { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; fill: var(--muted); }
.record-map-svg .rm-ruler { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.record-map-svg .rm-tick { stroke: var(--line); stroke-width: 1; }
.record-map-svg .rm-leader { fill: none; stroke: var(--line); stroke-width: .8; }
.record-map-svg .rm-start { fill: var(--teal-lit); }
.record-map-svg .rm-needle { fill: var(--text); }

/* Your calibration: each step, first reading and latest (Jacob, 25 Sep). */
.journal { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .45rem; }
.journal-step { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); gap: .1rem 1rem; padding: .55rem .8rem; border-left: 3px solid var(--line); background: var(--bench-2); border-radius: var(--radius); }
.journal-step.good { border-left-color: var(--good); }
.journal-step.amber { border-left-color: var(--amber); }
.journal-step.red { border-left-color: var(--red); }
.journal-step.unread { color: var(--muted); background: transparent; border: 1px dashed var(--line); }
.journal-figure { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13.5px; }
.journal-step small { grid-column: 2; color: var(--muted); font-size: 12px; }
.journal-step p { grid-column: 1 / -1; margin: .2rem 0 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 640px) { .journal-step { grid-template-columns: 1fr; } .journal-step small { grid-column: 1; } }
/* Your calibration, compact: a line for each step (site structure brief
   item 2, the phone fix); the full journal is under More. */
.journal-lines { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .3rem; }
.journal-line { display: flex; justify-content: space-between; gap: .8rem; padding: .4rem .7rem; border-left: 3px solid var(--line); background: var(--bench-2); border-radius: var(--radius); }
.journal-line.good { border-left-color: var(--good); }
.journal-line.amber { border-left-color: var(--amber); }
.journal-line.red { border-left-color: var(--red); }
.journal-line.unread { color: var(--muted); background: transparent; border: 1px dashed var(--line); }
.journal-line span { font-size: 13.5px; text-align: right; }
.report-more { margin: .8rem 0 0; }
.report-more > summary { cursor: pointer; font-weight: 700; color: var(--teal-lit); padding: .3rem 0; min-height: 32px; }
.clean-pass { margin: 1rem 0 .4rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); }
.clean-pass h3 { margin: 0 0 .3rem; }
.keep-row { margin: .3rem 0 0; }
/* A live recording kept nowhere else: the same warning Measure shows. */
.keep-warning { color: var(--amber); font-weight: 700; font-size: .9rem; line-height: 1.35; }
.keep-warning.is-saved { color: var(--muted); font-weight: 400; }
.keep-warning[hidden] { display: none; }
.report-gauge { max-width: 560px; }

/* Test your own gear: the response, left teal and right amber, ±6 dB. */
.through-response { width: 100%; max-width: 560px; height: auto; display: block; margin: .4rem 0; background: var(--bench-2); border-radius: var(--radius); }
.through-response .tr-grid { stroke: var(--line); stroke-width: .6; }
.through-response .tr-zero { stroke: var(--muted); stroke-width: 1; }
.through-response .tr-label { fill: var(--muted); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; }
.through-response .tr-left { fill: none; stroke: #8FD3DD; stroke-width: 2; }
.through-response .tr-right { fill: none; stroke: #E8B25C; stroke-width: 2; stroke-dasharray: 5 3; }

/* The demo: our record on a simulated turntable (calibration/demo-ui.js). */
.demo-card h2 { margin: 0 0 .3rem; font-size: 18px; }
.demo-setups { display: flex; flex-wrap: wrap; gap: .45rem; margin: .7rem 0 .3rem; }
.demo-setups .chip[aria-checked="true"] { color: var(--teal-lit); border-color: var(--teal-lit); box-shadow: inset 0 0 0 1px var(--teal-lit); }
.demo-says { margin: .3rem 0 .6rem; min-height: 1.4em; }
.demo-controls summary { cursor: pointer; color: var(--teal-lit); }
.demo-controls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem 1.2rem; margin: .6rem 0; }
.demo-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .1rem .6rem; font-size: 13.5px; }
.demo-control-name { grid-column: 1; }
.demo-control output { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; color: var(--muted); }
.demo-control input { grid-column: 1 / -1; width: 100%; }
.demo-control small { grid-column: 1 / -1; color: var(--muted); }
#demo-progress { width: 160px; }
.demo-result h3 { font-size: 15px; margin: 1rem 0 .5rem; }
.table-scroll { overflow-x: auto; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.demo-table th, .demo-table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--bench-3); vertical-align: top; }
.demo-table thead th { color: var(--muted); font-weight: 600; }
.demo-table td small { color: var(--muted); }
.demo-table .demo-mark { width: 1.5rem; text-align: center; font-weight: 700; }
.demo-table tr.agrees .demo-mark { color: var(--good); }
.demo-table tr.differs .demo-mark { color: var(--red); }

/* The GrooveRig 1000 (calibration/rig-ui.js): in the record's column, wider. */
/* Wide screens only: on a phone the one-column rule above holds, or the
   rig's 360 px floor pushes the page sideways. */
@media (min-width: 861px) {
  body.rig-on .calibrate-grid { grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); }
}
body.rig-on .rm-only { display: none; }
body:not(.rig-on) .rig-only { display: none; }
/* A section off this tab that keeps its own open/closed state. */
.tool-off { display: none !important; }
/* An extra that belongs to some of the jobs, not all (Jacob, 28 Sep).
   Hidden only while Instruments is the open tab (page.js's showTool() names
   it on the root element). */
html[data-tool="instruments"] .job-off { display: none !important; }
/* The tests a recording reads, after the last step (UX area 5 finding 5). */
.step-more { display: flex; align-items: center; gap: .6rem; justify-content: space-between; padding: .5rem .6rem; border-top: 1px dashed var(--line); margin-top: .3rem; }
.step-more-text { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.step-more small { color: var(--muted); }
body.rig-on #profile-section { display: none; }
.rig { display: flex; flex-direction: column; gap: .5rem; }
.tag.sim { background: var(--teal-lit); color: #0A1418; }
.tag.dev { background: var(--amber); color: #0A1418; font-weight: 700; }
.rig-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.rig-presets .chip[aria-checked="true"] { color: var(--teal-lit); border-color: var(--teal-lit); box-shadow: inset 0 0 0 1px var(--teal-lit); }
.rig-answer { color: var(--amber); font-size: 13.5px; }
.rig-deck { position: relative; }
.rig-svg { width: 100%; height: auto; display: block; }
.rig-label-button { position: absolute; left: 30.5%; top: 38.5%; width: 17%; height: 22%; border-radius: 50%; background: transparent; border: 2px dashed transparent; padding: 0; min-height: 0; cursor: pointer; }
.rig-label-button:hover, .rig-label-button:focus-visible { border-color: var(--teal-lit); }
.rig-plinth { fill: #15242B; stroke: var(--bench-3); stroke-width: 2; }
.rig-platter { fill: #0B1418; stroke: var(--bench-3); stroke-width: 2; }
.rig-vinyl { fill: #0E1519; }
.rig-groove { fill: none; stroke: #1A262C; stroke-width: 1; }
.rig-groove.wide { stroke: #1D2B31; stroke-width: 2.4; }
.rig-sheen { fill: var(--teal-lit); opacity: .06; }
@keyframes rig-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rig-record { transform-box: fill-box; transform-origin: center; }
.rig-record.spinning { animation: rig-spin 1.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rig-record.spinning { animation: none; } }
.rig-track-ring { fill: none; stroke: var(--teal-lit); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .7; }
.rig-label { fill: #3A2320; stroke: var(--teal-lit); stroke-width: 1.2; }
.rig-label.ours { fill: #1E3A40; }
.rig-svg text { text-anchor: middle; }
.rig-label-top { fill: var(--text); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; }
.rig-label-sub { fill: var(--teal-lit); font-size: 9.5px; }
.rig-label-side { fill: var(--text); font-size: 10px; font-weight: 700; }
.rig-label-hint { fill: var(--muted); font-size: 8px; }
.rig-dev { fill: var(--amber); font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.rig-empty { fill: var(--muted); font-size: 15px; }
.rig-spindle { fill: var(--muted); }
.rig-pivot { fill: #1B2C33; stroke: #3B5663; stroke-width: 2; }
.rig-pivot-hole { fill: #0A1418; }
.rig-arm { stroke: #C9D3D7; stroke-width: 5; stroke-linecap: round; }
.rig-weight { fill: #3B5663; stroke: #C9D3D7; stroke-width: 2; }
.rig-shell { fill: var(--teal-lit); stroke: #0A1418; }
.rig-shell-line { stroke: #0A1418; stroke-width: 1.5; }
.rig-dial-mark { fill: var(--muted); font-size: 8px; }
.rig-dial-pointer { stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.rig-dial-name { fill: var(--muted); font-size: 10px; }
.rig-dial-value { fill: var(--text); font-size: 11px; font-weight: 700; }
.rig-controls { display: flex; flex-direction: column; }
.rig-control { display: flex; flex-direction: column; gap: .3rem; padding: .55rem 0; border-bottom: 1px solid var(--bench-3); }
.rig-control-head { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .4rem; align-items: center; }
.rig-control-head .rig-value { min-width: 5.5rem; text-align: right; }
/* The slider takes the whole width between - and + (Jacob: "make sure the
   slider has sufficient width"). */
.rig-slide { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .5rem; align-items: center; }
.rig-slider { width: 100%; min-width: 0; height: 32px; margin: 0; accent-color: var(--teal-lit); cursor: pointer; }
.rig-ends { display: flex; justify-content: space-between; padding: 0 52px; font-size: 11.5px; color: var(--muted); }
.rig-n { font: 800 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--teal-lit); }
.rig-name { display: flex; flex-direction: column; font-size: 14px; }
.rig-name small { color: var(--muted); font-size: 12px; }
.rig-nudge { min-height: 44px; font-size: 20px; padding: 0; }
.rig-value { text-align: center; font: 700 14px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.rig-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.rig-switch-field { display: flex; flex-direction: column; gap: .2rem; font-size: 12.5px; color: var(--muted); }
.rig-switch { min-height: 40px; background: var(--bench-2); color: var(--text); border: 1px solid var(--line); }
.rig-switch.fault { background: #2A2112; color: #F2D7A6; border-color: var(--amber); }

/* --- THE PATCH BAY (advanced-ui.js): the library down the side (C), the
   patch bay beside it as strips (M2b) or cards. ------------------------------- */
.adv { padding: 0; overflow: hidden; }
.adv-body { display: flex; min-height: 520px; }
.adv-lib { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bench); border-right: 1px solid var(--line); }
.adv-lib-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 12px 6px; }
.adv-lib-head button { min-height: 32px; padding: 2px 10px; }
.adv-lib-close, .adv-lib-open { display: none; }
.adv-rail-name { display: none; }
.adv-search { margin: 0 10px 6px; padding: 8px 10px; background: var(--ink); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13.5px; }
.adv-tree { display: flex; flex-direction: column; overflow-y: auto; max-height: 640px; }
.adv-group-name { padding: 10px 12px 4px; font: 700 10.5px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.adv-folder { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 8px 12px; min-height: 34px; background: none; border: 0; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.adv-folder small { margin-left: auto; color: var(--muted); font-weight: 400; }
.adv-caret { color: var(--muted); width: 12px; }
.adv-row-line { display: flex; align-items: center; }
.adv-item { flex: 1; display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 7px 10px 7px 30px; min-height: 34px; background: none; border: 0; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.adv-item small { color: var(--muted); font-size: 11.5px; }
.adv-item.open { background: #0F2A30; color: var(--teal-lit); font-weight: 600; box-shadow: inset 3px 0 0 var(--teal-lit); }
.adv-item:hover, .adv-folder:hover { background: var(--bench-2); }
.adv-more { margin-right: 6px; min-height: 28px; padding: 0 8px; font-size: 12.5px; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; cursor: pointer; }
.adv-organise { display: flex; flex-direction: column; gap: 8px; margin: 4px 8px 8px 24px; padding: 10px; background: var(--bench-2); border: 1px solid var(--teal-lit); border-radius: 8px; }
.adv-empty { padding: 2px 12px 8px 30px; font-size: 12.5px; color: var(--muted); }
.adv-signin { padding: 8px 12px; }
.adv-lib-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.adv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
.adv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.adv-title h2 { margin: 0; font-size: 18px; }
.adv-title .note { margin: 2px 0 0; }
.adv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adv-paths { display: flex; flex-direction: column; gap: 10px; }
.adv-path { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bench); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.adv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adv-n { font: 700 11px/1 ui-monospace, monospace; color: var(--muted); width: 16px; }
.adv-in { padding: 6px 8px; border: 1px dashed var(--line); border-radius: 6px; font-size: 12px; color: var(--muted); }
.adv-arrow { color: var(--muted); font-size: 12px; }
.adv-chip { min-height: 32px; padding: 5px 9px; background: var(--bench-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 12.5px; cursor: pointer; }
.adv-chip.open { border-color: var(--teal-lit); background: #0F2A30; }
.adv-plus { min-height: 32px; padding: 3px 10px; background: none; color: var(--teal-lit); border: 1px dashed var(--teal-lit); border-radius: 6px; cursor: pointer; }
.adv-meter { min-height: 34px; padding: 5px 8px; background: #0F2A30; color: var(--teal-lit); border: 1px solid var(--teal-lit); border-radius: 6px; font: inherit; font-weight: 700; font-size: 13px; }
.adv-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; font-size: 12.5px; color: var(--muted); }
.adv-settings select, .adv-settings input, .adv-step select, .adv-step input { min-height: 32px; background: var(--bench-2); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; font: inherit; font-size: 12.5px; }
.adv-settings input[type=number] { width: 120px; }
.adv-remove { min-height: 32px; padding: 2px 10px; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 5px; cursor: pointer; }
.adv-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bench-2); border: 1px solid var(--teal-lit); border-radius: 8px; }
.adv-menuitem { text-align: left; padding: 8px 10px; background: var(--ink); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; }
.adv-path .adv-words { margin: 0; font-size: 12px; }
.adv-path .display canvas, .adv-path .display svg { width: 100%; height: auto; display: block; }
.adv-settings .field, .adv-pop .field { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.adv-path { position: relative; }
.adv-line { padding-right: 40px; }
.adv-remove { position: absolute; top: 10px; right: 10px; }
.adv-tree > .note { padding: 4px 12px; margin: 0; }
.adv-verdicts:empty { display: none; }
.danger { color: #F2A7A0 !important; }
.adv-dialog { max-width: 560px; width: calc(100% - 32px); background: var(--bench); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
.adv-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.adv-dialog form { display: flex; flex-direction: column; gap: 12px; }
.adv-dialog h2 { margin: 0; }
.adv-dialog input, .adv-dialog textarea, .adv-dialog select { width: 100%; box-sizing: border-box; background: var(--bench-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; }
.adv-keeps { padding: 10px 12px; background: var(--ink); border-radius: 8px; }
.adv-keeps ul { margin: 6px 0; padding-left: 18px; font: 500 12.5px/1.6 ui-monospace, monospace; }
/* Folded: a rail, with the open preset's name on it. */
.adv.folded .adv-lib { width: 52px; align-items: center; }
.adv.folded .adv-lib-head { flex-direction: column; padding: 10px 0; }
.adv.folded .adv-fold { writing-mode: vertical-rl; transform: rotate(180deg); min-height: 0; padding: 10px 4px; }
.adv.folded .adv-lib-head strong, .adv.folded .adv-search, .adv.folded .adv-tree, .adv.folded .adv-lib-foot { display: none; }
.adv.folded .adv-rail-name { display: block; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--teal-lit); font-weight: 600; font-size: 12.5px; padding: 8px 0; }
/* A phone: the library behind a button, sliding over. */
@media (max-width: 800px) {
  .adv-body { display: block; }
  .adv-lib { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: min(320px, 88vw); transform: translateX(-105%); transition: transform .2s; border-right: 1px solid var(--teal-lit); }
  .adv.lib-shown .adv-lib { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); }
  .adv-lib-open, .adv-lib-close { display: inline-flex; min-height: 44px; }
  .adv-fold { display: none; }
  .adv.folded .adv-lib { width: min(320px, 88vw); align-items: stretch; }
  .adv.folded .adv-lib-head strong, .adv.folded .adv-search, .adv.folded .adv-tree, .adv.folded .adv-lib-foot { display: flex; }
  .adv.folded .adv-rail-name { display: none; }
  .adv-settings { margin-left: 0; }
}

/* The footer, on this page too (area 1 finding 3, built once the drafts
   were approved). Same look as the app shell's, using this page's own
   tokens - this document does not load styles.css. */
.site-footer {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 24px clamp(18px, 4vw, 56px) 40px;
  color: var(--muted);
  font-size: .85rem;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--teal-lit); text-decoration: underline; }
/* Sign in without leaving Calibrate (UX area 7 finding 4). */
/* "How this is measured" (calibration/how-measured.js): a closed note in the
   house small-text style under a reading, and the audio interface page, a
   dialog dressed like the sign-in one. Quiet: it is there when asked for. */
.how-measured-host { margin: 0 0 .7rem; }
.how-measured { margin: .25rem 0 .5rem; color: var(--muted); font-size: 12.5px; }
.how-measured > summary { cursor: pointer; width: fit-content; max-width: 100%; padding: .15rem 0; }
.how-measured > summary:hover { color: var(--text); }
.how-measured p { margin: .35rem 0 0; max-width: 62ch; }
.how-measured-more a { color: var(--teal-lit); }
.how-measured-dialog { position: relative; max-width: 560px; width: min(560px, calc(100vw - 2rem)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bench-2); color: var(--text); padding: 1rem 1.2rem; }
.how-measured-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.how-measured-dialog h2 { margin: 0 2.2rem .5rem 0; }
.how-measured-dialog h2:focus { outline: none; }
.how-measured-dialog p, .how-measured-dialog ul { margin: 0 0 .6rem; }
.how-measured-dialog ul { padding-left: 1.2rem; }
.how-measured-dialog a { color: var(--teal-lit); }
.how-measured-dialog .section-number { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.how-measured-dialog .dialog-close { position: absolute; top: .6rem; right: .6rem; width: 34px; min-height: 34px; padding: 0; justify-content: center; border-radius: 50%; background: transparent; color: var(--muted); border-color: var(--line); }
.cal-signin { max-width: 440px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bench-2); color: var(--text); padding: 1rem 1.2rem; }
.cal-signin::backdrop { background: rgba(0, 0, 0, .55); }
.cal-signin h2 { margin: 0 0 .4rem; }
/* The main app's sign-in choices in the same order (index.html #auth-dialog):
   one stacked form, its fields full width. */
.cal-signin { position: relative; width: min(440px, calc(100vw - 2rem)); }
.cal-signin form, .cal-signin #cal-signin-fields, .cal-signin #cal-signin-sent { display: grid; gap: .6rem; }
.cal-signin p { margin: 0; }
.cal-signin [hidden] { display: none !important; }
.cal-signin .section-number { color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.cal-signin h2 { margin-right: 2.2rem; }
.cal-signin input { width: 100%; font: inherit; padding: .5rem .6rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bench); color: var(--text); }
.cal-signin .field-label { color: var(--muted); font-size: 13.5px; margin-bottom: -.3rem; }
.cal-signin .dialog-close { position: absolute; top: .6rem; right: .6rem; width: 34px; min-height: 34px; padding: 0; justify-content: center; border-radius: 50%; background: transparent; color: var(--muted); border-color: var(--line); }
.cal-signin .google-button { background: transparent; color: var(--text); border-color: var(--line); justify-content: center; gap: .5rem; }
.cal-signin .signin-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.cal-signin .signin-divider { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: 13px; }
.cal-signin .signin-divider::before, .cal-signin .signin-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.cal-signin .status.error { color: var(--red); }
.cal-signin a { color: var(--teal-lit); }

/* CHECK BEFORE YOU RECORD, and the "Has anything changed?" block
   (calibration/drift-view.js). Amber for changed, never red: it says
   something moved, not that anything is wrong. Wraps at any width. */
.drift-progress { margin: .6rem 0; padding: .55rem .8rem; border-radius: var(--radius); border-left: 4px solid var(--teal); background: var(--bench-2); font-weight: 600; overflow-wrap: anywhere; }
.drift-result { padding: .65rem .85rem; border-radius: var(--radius); border-left: 4px solid var(--line); background: var(--bench-2); margin: .6rem 0; overflow-wrap: anywhere; }
.drift-result.drift-changed { border-left-color: var(--amber); }
.drift-result.drift-same { border-left-color: var(--good); }
.drift-heading { margin: 0 0 .4rem; font-size: 15px; }
.drift-line { margin: .3rem 0; }
.drift-line.drift-changed { color: var(--amber); }
.drift-line.drift-step { font-weight: 600; }
.drift-line.drift-quiet, .drift-line.drift-note { color: var(--muted); font-size: 13.5px; }
.drift-card .field select { max-width: 100%; }

/* The mobile notice (site structure brief, Calibration item 5): one plain line
   above the tool at the frame's narrow breakpoint (styles.css, 700 px), and
   the sentence a hardware-only control says in its place when tapped there
   (page.js). Everything else stays exactly as on a computer. */
.mobile-notice { display: none; margin: .6rem 0 .8rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-size: 14px; line-height: 1.45; }
.mobile-notice a { color: var(--teal-lit); }
.needs-interface-note { margin: .4rem 0 0; font-size: 13px; color: var(--amber); }
@media (max-width: 700px) {
  .mobile-notice { display: block; }
}