/* F440 — рабочие зоны: ручка (§15), радиальная ось (§16), корреляциметр (§17).

   Семантика цвета одна на все зоны и совпадает с осью «Уровня»:
   латунь — свой ответ, зелёный — измеренное и верное, терракота — промах,
   пунктир — допуск, серый — «ещё не сказал». Состояния различимы и в
   монохроме: толщина, пунктир и подпись, а не только цвет. */

/* Слот зоны занимает ту же высоту, что и холст у «Частот»: экран между
   тренажёрами не должен прыгать, а прибор — главное на нём. */
#zoneHost {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 340px;
}
#zoneHost.hidden { display: none }
#zoneHost > * { width: 100%; max-width: 520px }
/* Корреляциметр построен на процентах, а не на SVG, и тянется по ширине
   колонки: от 280 px до полной. Ограничивать его шириной прибора незачем. */
#zoneHost > .corr { max-width: 100% }
@media (max-width: 640px) { #zoneHost { min-height: 240px } }

/* ── Замок: до первого переключения A/Б отвечать нельзя ─────────── */
.zone-lock {
  position: absolute; inset: 0; display: none; place-items: center;
  padding: var(--sp-4); text-align: center; pointer-events: none;
  background: linear-gradient(var(--stage), var(--stage));
  border-radius: var(--r-card);
}
.zone-lock span { font-size: var(--fs-small); color: var(--muted-3); max-width: 260px }
.is-locked > .zone-lock { display: grid }

/* ── §15 Ручка ─────────────────────────────────────────────────── */
.knob { position: relative; display: block; width: 100%; outline: none }
.knob-svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto;
  touch-action: none; cursor: ns-resize }
.knob.is-locked .knob-svg { cursor: default }
.knob.is-answered .knob-svg { cursor: default }
.knob:focus-visible .kb-body { stroke: var(--accent-hi); stroke-width: 2 }

.kb-body { fill: var(--panel); stroke: var(--line); stroke-width: 1.5 }
.kb-well { fill: var(--bg); stroke: var(--panel-2); stroke-width: 1 }
.kb-track { fill: none; stroke: var(--panel-3); stroke-width: 10; stroke-linecap: round }
.kb-fill { fill: none; stroke: var(--brass); stroke-width: 10; stroke-linecap: round }
.kb-tol { fill: none; stroke: var(--brass-edge); stroke-width: 3; stroke-dasharray: 5 5 }
.kb-ticks line { stroke: var(--line-2); stroke-width: 2 }
.kb-hand { stroke: var(--line-2); stroke-width: 4; stroke-linecap: round }
.kb-hand.tgt { display: none }
.kb-lbls text { fill: var(--muted-3); font-size: 18px; dominant-baseline: central }
.kb-val { fill: var(--muted-3); font-size: 42px; font-weight: 500 }
.kb-unit { fill: var(--muted-3); font-size: 15px }
/* Полная подпись — строкой под ручкой: в колодце помещается только
   число и короткая единица. */
.knob-cap { text-align: center; font-size: 12px; color: var(--muted-3); margin-top: 6px }
.knob-cap.ok { color: var(--accent-ink) }
.knob-cap.bad { color: var(--bad-ink) }

.knob.has-value .kb-hand { stroke: var(--brass); stroke-width: 5 }
.knob.has-value .kb-val { fill: var(--brass) }
.knob.is-grab .kb-body { fill: var(--panel-2); stroke: var(--accent-hi); stroke-width: 2 }

/* Разбор: цель — толстый зелёный указатель, свой ответ остаётся тонким
   пунктиром. Пунктир допуска убирается: зачёт уже состоялся. */
.knob.is-locked .kb-track { stroke: var(--panel-2); stroke-dasharray: 4 8 }
.knob.is-locked .kb-ticks, .knob.is-locked .kb-lbls { display: none }
.knob.is-answered .kb-fill { stroke: var(--accent) }
.knob.is-answered .kb-hand { stroke-width: 3; stroke-dasharray: 6 5 }
.knob.is-answered .kb-hand.tgt { display: block; stroke: var(--accent-ink); stroke-width: 5; stroke-dasharray: none }
.knob.is-answered .kb-val { fill: var(--accent-ink) }
.knob.is-answered .kb-unit { fill: var(--muted-3) }
.knob.is-miss .kb-hand:not(.tgt) { stroke: var(--bad) }
.knob.is-miss .kb-unit { fill: var(--bad-ink) }

/* ── §16 Радиальная ось ────────────────────────────────────────── */
.arc { position: relative; display: block; width: 100%; outline: none }
.arc-svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto;
  touch-action: none; cursor: crosshair }
.arc.is-locked .arc-svg, .arc.is-answered .arc-svg { cursor: default }
.arc:focus-visible .ar-band { stroke: var(--accent-hi) }

.ar-band { fill: none; stroke: var(--panel-3); stroke-width: 2.5 }
.arc.is-locked .ar-band { stroke: var(--line-2); stroke-dasharray: 7 7 }
.ar-floor { stroke: var(--panel-2); stroke-width: 1.5 }
.ar-up { stroke: var(--line-2); stroke-width: 2.5 }
.ar-head { fill: none; stroke: var(--line-2); stroke-width: 2 }
.ar-head-dot { fill: var(--line-2) }
.ar-ray { stroke: var(--brass); stroke-width: 2.5; display: none }
.ar-mark { fill: none; stroke: var(--brass); stroke-width: 9; stroke-linecap: round; display: none }
.ar-dot { fill: var(--brass); display: none }
.ar-tol { fill: var(--brass-wash); stroke: var(--brass-edge); stroke-width: 1.5; stroke-dasharray: 6 6 }
.ar-lbls text { fill: var(--muted-3); font-size: 17px }
.ar-lbls .mid { fill: var(--muted) }
.ar-val { fill: var(--brass); font-size: 18px }
.ar-sub { fill: var(--muted-3); font-size: 17px }

.arc.has-value .ar-ray:not(.tgt), .arc.has-value .ar-mark, .arc.has-value .ar-dot:not(.tgt) { display: block }
.arc.is-answered .ar-ray:not(.tgt) { stroke-width: 2 }
.arc.is-answered .ar-dot:not(.tgt) { r: 8 }
.arc.is-answered .ar-mark { stroke: var(--accent-ink) }
.arc.is-answered .ar-ray.tgt, .arc.is-answered .ar-dot.tgt { display: block; stroke: var(--accent-ink); fill: var(--accent-ink) }
.arc.is-answered .ar-tol { fill: var(--accent-wash); stroke: var(--accent-edge) }
.arc.is-answered .ar-val { fill: var(--accent-ink) }
.arc.is-miss .ar-ray:not(.tgt), .arc.is-miss .ar-dot:not(.tgt) { stroke: var(--bad); fill: var(--bad) }
.arc.is-miss .ar-sub { fill: var(--bad-ink) }

/* Полоса под слушателем: тот же угол, но линейным движением мыши.
   По дуге рука ходит по окружности и на краях промахивается. */
.arc-slide {
  position: relative; height: 26px; margin: var(--sp-2) auto 0; max-width: 520px;
  background: var(--panel-3); border-radius: var(--r-pill); cursor: ew-resize; touch-action: none;
}
.arc.is-locked .arc-slide, .arc.is-answered .arc-slide { cursor: default }
.arc-slide-mid { position: absolute; left: 50%; top: 5px; bottom: 5px; width: 2px;
  background: var(--line-2); transform: translateX(-1px) }
.arc-slide-fill { position: absolute; top: 8px; bottom: 8px; background: var(--brass); border-radius: var(--r-pill) }
.arc-slide-knob { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%;
  background: var(--knob-off); box-shadow: var(--knob-shadow); transform: translate(-50%, -50%) }
.arc.has-value .arc-slide-knob { background: var(--brass) }
.arc.is-answered .arc-slide-fill { background: var(--accent) }
.arc.is-answered .arc-slide-knob { background: var(--accent-ink) }
.arc.is-miss .arc-slide-knob { background: var(--bad) }
.arc.is-locked .arc-slide-knob { background: var(--line-2) }
.arc-slide-x { display: flex; justify-content: space-between; max-width: 520px; margin: 5px auto 0;
  font-size: 11px; color: var(--muted-3) }
.arc:focus-visible .arc-slide { outline: 2px solid var(--accent-hi); outline-offset: 2px }

/* Кнопки под дугой — замена клавиатурным стрелкам там, где клавиатуры
   нет: пальцем градус не доводится. */
.arc-keys { display: none; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-2) }
.arc-keys .btn { min-height: var(--tap-row); padding: 10px 14px; font-size: var(--fs-small) }
@media (hover: none), (max-width: 720px) { .arc-keys { display: flex } }
.arc.is-locked .arc-keys, .arc.is-answered .arc-keys { display: none }

/* ── §17 Корреляциметр ─────────────────────────────────────────── */
.corr { position: relative; display: grid; gap: 10px; width: 100%; outline: none }
.corr-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2) }
.corr-hint { font-size: 12px; color: var(--muted-3); text-align: right }
.corr.is-answered .corr-hint { color: var(--accent-ink) }

.corr-track {
  position: relative; height: 92px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  cursor: ew-resize; touch-action: none;
}
.corr.is-locked .corr-track { cursor: default; border-style: dashed; border-color: var(--line-2);
  background: repeating-linear-gradient(135deg, rgba(58, 76, 87, .1) 0 6px, transparent 6px 12px) }
.corr.is-answered .corr-track { cursor: default }
.corr:focus-visible .corr-track { outline: 2px solid var(--accent-hi); outline-offset: 2px }

/* Ноль — не «ничего не происходит», а «широко и рискованно»: линия толще
   остальных делений и подписана словом. */
.cr-zero { position: absolute; top: 10px; bottom: 10px; width: 2px; background: var(--line-2); transform: translateX(-1px) }
.cr-tol { position: absolute; top: 6px; bottom: 6px; background: var(--brass-wash);
  border: 1px dashed var(--brass-edge); border-radius: var(--r-xs) }
.corr.is-answered .cr-tol { background: var(--accent-wash); border-color: var(--accent-edge) }
.cr-hand { position: absolute; top: 8px; bottom: 8px; width: 2px; background: var(--brass); display: none }
.cr-dot { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
  background: var(--brass); transform: translate(-50%, -50%); display: none }
.cr-badge { position: absolute; bottom: 8px; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; color: var(--brass); display: none }
.corr.has-value .cr-hand:not(.tgt), .corr.has-value .cr-dot:not(.tgt), .corr.has-value .cr-badge:not(.tgt) { display: block }
.corr.is-answered .cr-hand:not(.tgt) { width: 1px; background: var(--brass) }
.corr.is-answered .cr-dot:not(.tgt) { width: 9px; height: 9px }
.corr.is-answered .cr-hand.tgt, .corr.is-answered .cr-dot.tgt, .corr.is-answered .cr-badge.tgt { display: block }
.cr-hand.tgt { background: var(--accent-ink) }
.cr-dot.tgt { background: var(--accent-ink) }
.cr-badge.tgt { color: var(--accent-ink); bottom: auto; top: 8px }
.corr.is-miss .cr-hand:not(.tgt), .corr.is-miss .cr-dot:not(.tgt) { background: var(--bad) }
.corr.is-miss .cr-badge:not(.tgt) { color: var(--bad-ink) }

.corr-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-3) }
@media (max-width: 520px) {
  .corr-scale span:nth-child(1)::after, .corr-scale span:nth-child(2)::after, .corr-scale span:nth-child(3)::after { content: "" }
  .corr-scale span { font-size: 10px }
}

/* ── Второй вопрос: всегда в одном и том же слоте панели ───────── */
.ask2 { display: grid; gap: var(--sp-2) }
.ask2-lbl { font-size: 11px }
.ask2-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.ask2-opts.four { grid-template-columns: 1fr 1fr }
.ask2 .opt { min-height: var(--tap-row); padding: 10px 12px; font-size: var(--fs-small);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); text-align: left }
.ask2 .opt.on { border-color: var(--accent-edge); background: var(--accent-wash); color: var(--accent-ink) }
.ask2 .opt.ok { border-color: var(--accent-edge-2); background: var(--accent-wash); color: var(--accent-ink) }
.ask2 .opt.bad { border-color: var(--bad-edge-2); background: var(--bad-wash); color: var(--bad-ink) }
.ask2 .opt:disabled { cursor: default }

/* ── Приборы разбора (третья фаза) ─────────────────────────────
   В фазе прослушивания их нет ни одного: прибор ответил бы мгновенно
   и за уши. Единственное исключение — кривая передачи компрессии:
   она следует за ручкой, а не за звуком. */
.zone-body.has-extra { flex-direction: row; align-items: stretch; gap: var(--sp-4) }
.zone-body.has-extra > #zoneHost { flex: 0 1 auto; min-width: 0 }
@media (max-width: 900px) {
  .zone-body.has-extra { flex-direction: column }
  .zone-body.has-extra > #zoneHost { min-height: 220px }
}
.zone-extra { flex: 1 1 320px; min-width: 0; display: grid; gap: var(--sp-3); align-content: center }
.zone-extra.hidden { display: none }

.rv-box { display: grid; gap: 7px }
.rv-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2) }
.rv-head .t-num { font-size: 11px; color: var(--muted-3) }
.rv-note { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5 }

.rv-curve { display: block; width: 100%; max-width: 132px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xs) }
.rv-grid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4 }
.rv-line { fill: none; stroke: var(--brass); stroke-width: 2.5; vector-effect: non-scaling-stroke }

.rv-env { display: block; width: 100%; height: 54px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xs) }
.rv-env polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke }
.rv-dry { stroke: var(--line-2) }
.rv-wet { stroke: var(--accent) }
.rv-gr { stroke: var(--brass) }
.rv-ans { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke }
.rv-ir { height: 60px }
.rv-pre { fill: var(--brass-wash); stroke: none }

.rv-bars { display: grid; gap: 6px }
.rv-bar { display: flex; align-items: center; gap: var(--sp-2); font-size: 11px; color: var(--muted-3) }
.rv-bar span:first-child { width: 52px; flex-shrink: 0 }
.rv-bar span:last-child { width: 58px; text-align: right; flex-shrink: 0 }
.rv-bar i { flex: 1; height: 8px; background: var(--panel-3); border-radius: var(--r-pill); overflow: hidden }
.rv-bar b { display: block; height: 100%; background: var(--accent) }
.rv-bar.is-worst b { background: var(--bad) }
.rv-bar.is-worst span:last-child { color: var(--bad-ink) }

/* Ширина источника: точка — узкая метка, размытый — растянутая. */
.rv-width { height: 14px; background: var(--panel-3); border-radius: var(--r-pill); position: relative }
.rv-width i { position: absolute; top: 0; bottom: 0; left: 50%; width: 12px; transform: translateX(-50%);
  background: var(--accent); border-radius: var(--r-pill) }
.rv-width.is-wide i { width: 74% }

/* Спектр гармоник: чётные зелёные, нечётные серые — по этой картинке
   тип узнают глазами, и её же надо научиться слышать. */
.rv-harm { display: flex; align-items: flex-end; gap: 5px; height: 64px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 6px }
.rv-harm i { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; background: var(--line-2) }
.rv-harm i.base { background: var(--muted-3) }
.rv-harm i.even { background: var(--accent) }
.rv-harm i.odd { background: var(--line-2) }
.rv-harm-x { display: flex; gap: 5px; font-size: 10px; color: var(--muted-3) }
.rv-harm-x span { flex: 1; text-align: center }