/* F440 — экран тренажёра. Источник: «Экран Уровень - F440.dc.html».

   Каркас один на все семь: шапка, вопрос, режимы, материал, рабочая зона,
   транспорт — слева; уровень, ответ, разбор и действия — справа на
   panel-response. Три фазы (прослушивание, ответ, разбор) не перестраивают
   экран: меняется содержимое колонки ответа. */

/* ── Шапка ───────────────────────────────────────────────────── */
.tr-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.tr-title { font-size: var(--fs-h3); font-weight: 600; margin: 0 }
.tr-pills { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex-wrap: wrap }
.pill-mono {
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--panel-2); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  white-space: nowrap;
}
.pill-mono.brass { color: var(--brass) }
.pill-mono.ok { background: var(--accent-wash); border-color: var(--accent-edge); color: var(--accent-ink) }

/* ── Две колонки. Колонка ответа отделяется от прибора фоном,
      а не обводкой: panel-response ровно для этого и заведён. ── */
.tr-body { display: grid; gap: var(--sp-4) }
@media (min-width: 1000px) {
  .tr-body {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 0;
    border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
    align-items: stretch;
    /* Рабочей зоне нужен воздух: без заданной высоты она сжимается
       по содержимому, а прибор — главное на экране. */
    min-height: min(680px, calc(100vh - 150px));
  }
  .tr-work { padding: 22px 24px; border-right: 1px solid var(--line) }
  .tr-resp { padding: 22px 20px; background: var(--panel-response); overflow-y: auto }
}
.tr-work { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0 }
.tr-resp { display: flex; flex-direction: column; gap: 14px; min-width: 0 }

.tr-ask h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 3px }
.tr-ask p { font-size: 14px; color: var(--muted); margin: 0 }
@media (max-width: 640px) { .tr-ask h3 { font-size: var(--fs-h3) } }

/* ── Сегмент-контрол режимов. Выбранный на panel-3 с обводкой,
      не зелёная заливка: это выбор режима, а не подтверждение. ── */
.seg { display: flex; gap: 3px; padding: 3px; align-self: flex-start; flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-pill) }
.seg .mode {
  padding: 7px 14px; border-radius: var(--r-pill); border: 0;
  background: transparent; color: var(--muted-2);
  font-family: inherit; font-size: 12px; cursor: pointer;
  transition: background var(--t-press) var(--ease), color var(--t-press) var(--ease);
}
.seg .mode.on { background: var(--panel-3); color: var(--text) }
.seg .mode.locked { color: var(--muted-3); cursor: default }
@media (hover: hover) { .seg .mode:not(.on):not(.locked):hover { color: var(--text) } }

.srcrow { display: flex; align-items: center; gap: 10px; min-width: 0 }
.srcrow-lbl { flex-shrink: 0 }
.tut { font-size: var(--fs-small); color: var(--muted); line-height: 1.6;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px }
.tut b { color: var(--text); font-weight: 600 }

/* ── Рабочая зона ────────────────────────────────────────────── */
.zone {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--stage); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px 14px;
}
.zone-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px }
.zone-meta { font-size: 11px; color: var(--muted-2) }
.zone-meta.pending { color: var(--brass) }
.zone-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center }
.canvas-wrap { position: relative; touch-action: none; user-select: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden }
canvas { width: 100%; height: 300px; display: block }
@media (max-width: 640px) { canvas { height: 220px } }
.cv-tag { position: absolute; top: 10px; left: 12px; font-size: 11px; color: var(--muted-3);
  letter-spacing: .05em; pointer-events: none }
.cv-tag.r { left: auto; right: 12px; color: var(--accent-ink) }

/* ── Ось разницы ─────────────────────────────────────────────── */
.axis { display: grid; gap: 10px }
.axis:focus-visible { outline: none }
.axis:focus-visible .axis-plot { outline: 2px solid var(--accent-hi); outline-offset: 2px }
.axis-ends { display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted-2) }
.axis-ends .mid { color: var(--muted-3) }

.axis-plot {
  position: relative; height: 150px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  cursor: ew-resize;
}
@media (max-width: 640px) { .axis-plot { height: 118px } }
.axis.is-locked .axis-plot {
  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);
}
.axis.is-answered .axis-plot { cursor: default }

.axis-mid { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--panel-3) }
.axis-tick { position: absolute; top: 40%; bottom: 40%; width: 1px; background: var(--panel-3) }
.axis-tick.axis-zero { top: 16px; bottom: 16px; background: var(--line-2) }

/* Зона допуска: пока отвечают — латунью за ручкой, в разборе — зелёным
   вокруг цели. Латунь здесь и значит то же, что везде: значение есть,
   но окончательным его считать рано. */
.axis-band { position: absolute; top: 0; bottom: 0; display: none;
  background: var(--brass-wash); border-left: 1px dashed var(--brass-edge); border-right: 1px dashed var(--brass-edge) }
.axis.is-locked .axis-band { display: none !important }
.axis.is-answered .axis-band { background: rgba(31, 122, 31, .14);
  border-left-color: var(--accent-edge-2); border-right-color: var(--accent-edge-2) }

.axis-hand { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--brass); display: none }
.axis-dot { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%;
  margin: -8px 0 0 -8px; background: var(--brass); display: none }
.axis-badge { position: absolute; top: 12px; transform: translateX(-50%); display: none;
  padding: 4px 9px; border-radius: 6px; background: var(--brass); color: var(--bg);
  font-size: 13px; font-weight: 500; white-space: nowrap }
.axis-edge { position: absolute; bottom: 8px; transform: translateX(-50%); display: none;
  font-size: 10px; color: var(--brass) }
.axis.has-value:not(.is-locked) .axis-hand:not(.tgt),
.axis.has-value:not(.is-locked) .axis-dot:not(.tgt),
.axis.has-value:not(.is-locked) .axis-badge:not(.tgt),
.axis.has-value:not(.is-locked) .axis-edge { display: block }

/* В разборе допуск и его края относятся к цели, поэтому красятся зелёным. */
.axis.is-answered .axis-edge { color: var(--accent-ink) }
.axis.is-answered .axis-badge:not(.tgt) { transform: translateX(-100%) }
.axis-hand.tgt, .axis-dot.tgt { background: var(--accent-ink) }
.axis-badge.tgt { background: var(--accent); color: var(--text); transform: translateX(0) }
.axis-dev { position: absolute; bottom: 8px; transform: translateX(-50%); display: none;
  font-size: 10px; color: var(--accent-ink) }
.axis.is-answered .axis-hand.tgt,
.axis.is-answered .axis-dot.tgt,
.axis.is-answered .axis-badge.tgt,
.axis.is-answered .axis-dev { display: block }

.axis-lock { position: absolute; inset: 0; display: none; place-items: center; padding: 0 16px; text-align: center }
.axis-lock span { font-size: 13px; color: var(--muted-2); background: var(--stage); padding: 0 10px }
.axis.is-locked .axis-lock { display: grid }

.axis-scale { position: relative; height: 16px; font-size: 11px; color: var(--muted-2) }
.axis-scale span { position: absolute; transform: translateX(-50%) }
.axis-scale span.on { color: var(--muted) }

/* ── Транспорт ───────────────────────────────────────────────── */
.transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.play {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text);
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-press) var(--ease), border-color var(--t-press) var(--ease);
}
/* Заливка зелёным у play — из тех двух мест, где она разрешена. */
.play.on { border-color: var(--accent); background: var(--accent-deep); color: var(--on-accent) }
.ab { display: flex; gap: 3px; padding: 3px; flex: 1; min-width: 230px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-pill) }
.ab button {
  flex: 1; padding: 10px 16px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); font-family: inherit; font-size: 13px;
  cursor: pointer; transition: background var(--t-press) var(--ease), color var(--t-press) var(--ease);
}
/* Нейтральный вариант — серая заливка, изменённый — зелёная: человек по
   цвету помнит, что именно слушает, не сверяясь с подписью. В ABX кнопка X
   всегда серая — подсветить её значило бы выдать ответ. */
.ab button.on { background: var(--panel-3); color: var(--text) }
.ab button.on.b { background: var(--accent); color: var(--on-accent) }
.tr-keys { margin-left: auto; font-size: 11px; color: var(--muted-2) }
.meterbox { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted-2) }
.meter { width: 70px; height: 5px; background: var(--panel-3); border-radius: var(--r-pill); overflow: hidden }
.meter i { display: block; height: 100%; width: 0; background: var(--accent) }

/* ── Колонка ответа ──────────────────────────────────────────── */
.lvlbar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 15px }
.lvlbar.stepped { border-color: var(--accent-edge-2) }
.lvlbar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap }
.lvlbar-top b { font-size: 14px; font-weight: 600 }
.lvlbar-top span { font-family: var(--font-mono); font-size: 12px; color: var(--muted) }
.lvlbar-track { height: 4px; background: var(--panel-3); border-radius: var(--r-pill); overflow: hidden; margin-top: 9px }
.lvlbar-track i { display: block; height: 100%; width: 0; background: var(--accent); transition: width var(--t-bar) var(--ease) }
/* Пока порог не измерен, полоса штрихуется латунью и пульсирует: значение
   предварительное. Как только замер закончен — ровная зелёная. */
.lvlbar.pending .lvlbar-track i { background: var(--hatch-pending); animation: f440-pulse var(--t-pulse) ease-in-out infinite }
@keyframes f440-pulse { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .lvlbar.pending .lvlbar-track i { animation: none } }
.lvlbar-note { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted); line-height: 1.5 }
.lvlbar-note .t-num { color: var(--muted-2); white-space: nowrap }

.resp-card { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 15px }
.resp-card.answering { border-color: var(--brass-edge) }
.resp-card.done { border-color: var(--accent-edge-2) }
/* Место под число зарезервировано заранее: цифры не должны сдвигать layout. */
.resp-ans { min-height: 76px; display: grid; place-items: center; text-align: center; margin-top: 11px }
.resp-ans .empty { font-size: 13px; color: var(--muted-2); max-width: 210px;
  border: 1px dashed var(--line-2); border-radius: var(--r); padding: 18px 14px }
.resp-ans .val { font-family: var(--font-mono); font-size: 32px; font-weight: 500;
  color: var(--brass); font-variant-numeric: tabular-nums; line-height: 1.1 }
.resp-ans .val.ok { color: var(--accent-ink) }
.resp-ans .val.bad { color: var(--bad-ink) }
.resp-ans .sub { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); margin-top: 4px }

.heard { display: flex; gap: 8px; margin-top: 8px }
.heard span { flex: 1; padding: 9px; border-radius: var(--r-s); background: var(--panel-2);
  text-align: center; font-size: 12px; color: var(--muted) }
.heard span.cold { color: var(--muted-3) }
.heard-note { font-size: 12px; color: var(--muted-2); margin-top: 8px; min-height: 18px }
.resp-stats { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px;
  font-size: 12px; color: var(--muted-2) }
.resp-stats b { color: var(--text); font-weight: 500 }
.resp-stats b.brass { color: var(--brass) }
.resp-stats b.ok { color: var(--accent-ink) }

/* ── Варианты ответа. Живут в колонке ответа: там же, где кнопка,
      которой ответ подтверждают. ── */
.opts { display: grid; gap: 7px; margin-top: 11px }
.opts.two, .opts.three { grid-template-columns: 1fr }
.opt {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 13px; text-align: left; color: var(--text); font-family: inherit; font-size: 14px;
  min-height: var(--tap-row); cursor: pointer;
  transition: background var(--t-press) var(--ease), border-color var(--t-press) var(--ease);
}
.opt small { display: block; color: var(--muted-2); font-size: 12px; margin-top: 2px }
@media (hover: hover) { .opt:not(:disabled):hover { border-color: var(--line-2) } }
.opt:disabled { cursor: default }
.opt.ok { border-color: var(--accent-edge-2); background: rgba(31, 122, 31, .12) }
.opt.bad { border-color: var(--bad-edge-2); background: var(--bad-wash) }
.opt.dim { opacity: .45 }
.knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 11px }

/* ── Разбор. Слово, знак и толстая левая граница — три канала на один
      исход: если убрать цвет целиком, смысл сохраняется. ── */
.fb { display: none; border-radius: var(--r-card); padding: 14px 15px;
  border: 1px solid var(--line); border-left: 3px solid var(--line-2); background: var(--panel) }
.fb.show { display: block }
.fb.ok { background: rgba(31, 122, 31, .12); border-color: var(--accent-edge-2); border-left-color: var(--accent-hi) }
.fb.near { background: var(--brass-wash); border-color: var(--brass-edge); border-left-color: var(--brass) }
.fb.bad { background: var(--bad-wash); border-color: var(--bad-edge-2); border-left-color: var(--bad) }
.fb-top { display: flex; gap: 8px; align-items: center; margin-bottom: 5px }
.fb-top b { font-size: var(--fs-h3); font-weight: 600 }
.fb-top .dev { margin-left: auto; font-family: var(--font-mono); font-size: 11px }
.fb.ok .fb-top, .fb.ok .fb-top b, .fb.ok .dev { color: var(--accent-ink) }
.fb.near .fb-top, .fb.near .fb-top b, .fb.near .dev { color: var(--brass) }
.fb.bad .fb-top, .fb.bad .fb-top b, .fb.bad .dev { color: var(--bad-ink) }
.fb-main { font-size: 14px; color: var(--text); margin-bottom: 6px }
.fb-sub { font-size: 13px; color: var(--muted) }

.tr-acts { display: grid; gap: var(--sp-2); margin-top: auto; padding-top: 4px }
.acts-row { display: flex; gap: var(--sp-2) }
.tr-acts .acts-row .btn { flex: 1; min-height: var(--tap-row); padding: 12px; font-size: 13px }
.tr-acts .btn--primary { padding: 14px; border-radius: var(--r-m) }

/* Подсказки по клавишам — только там, где есть клавиатура. На телефоне
   они занимают строку и обещают то, чего нет. */
@media (hover: none), (max-width: 720px) { .tr-keys { display: none } }