/*
 * Оболочка тренажёра: поправки к сетке оригинала.
 *
 * Отдельным файлом и ПОСЛЕ trenazher-igra.css — нарочно. Правила здесь спорят
 * с правилами оригинала по одному и тому же классу, а у равной силы побеждает
 * тот, кто объявлен позже. Положи их в общий site.css — и порядок решался бы
 * тем, как Nuxt соберёт бандл: сегодня так, завтра иначе.
 *
 * Того, что можно было не трогать, здесь нет: сетка оригинала выверялась
 * долго, и переписывать её заново значит выбросить ту работу.
 */

/*
 * РАЗДЕЛОВ ЧЕТЫРЕ, А НЕ ПЯТЬ.
 *
 * В оригинале их было пять — Главная, Прогресс, Учиться, Профиль, Магазин, —
 * и число колонок записано в сетке прямо. «Учиться» стало кнопкой на главной,
 * «Профиль» превратился в «Настройки», а напоминания уехали строкой внутрь.
 * Осталось четыре, и без поправки пятая колонка зияла бы пустотой.
 *
 * Поправка только для ПОЛОСЫ СНИЗУ: там, где линейка становится рейкой слева,
 * колонка одна, и трогать её нельзя.
 */
.tab-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Телефон лёжа: рейка слева, четыре ряда вместо пяти. */
@media (orientation: landscape) and (max-height: 600px) {
  .tab-bar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 62px));
  }
}

/* Большой экран: рейка слева одной колонкой. */
@media (min-width: 1100px) and (min-height: 650px) {
  .tab-bar { grid-template-columns: 1fr; }
}

/*
 * Значок берётся из спрайта платформы, а не рисуется своим контуром.
 *
 * В оригинале контуры лежали прямо в разметке — по одному на каждую кнопку.
 * В проекте есть библиотека значков и правило «одна роль — один значок»
 * (CLAUDE.md), и рисовать рядом второй такой же незачем.
 */
.tab-icon .ico { width: 20px; height: 20px; }

/* «Магазин» — ссылка, а не кнопка: подчёркивание ей ни к чему. */
.tab-button--shop { text-decoration: none; }

/*
 * Отступ под рейку.
 *
 * В оригинале его давал класс `.app` — обёртка всего приложения, которой у
 * нас нет: её роль играет сама страница. Повторяем те же числа, что стояли
 * там, иначе содержимое залезает под рейку.
 */
@media (orientation: landscape) and (max-height: 600px) {
  .trenazher {
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
    padding-left: calc(66px + max(8px, env(safe-area-inset-left)) + 10px);
  }
}

/*
 * Знак сайта на главной тренажёра.
 *
 * Шапки у страницы нет, и без знака она выглядит ничьей: человек попал сюда
 * из магазина и должен видеть, что остался у нас. Он же и дорога назад.
 */
.trenazher__znak {
  display: inline-flex;
  margin-bottom: var(--sp-10, 10px);
  gap: 8px;
  align-items: center;
  text-decoration: none;
}

.trenazher__znak img { display: block; }
.trenazher__znak:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 8px; }

/*
 * КОНТУРНЫЕ ЗНАЧКИ ИГРЫ.
 *
 * Разметка игры несёт свои контуры прямо в себе — крестик «закрыть», стрелка
 * поворота — и рассчитывает на правило `svg { fill: none; stroke: currentColor }`,
 * которое в старом сайте стояло на голом теге. Голым тегом его сюда не
 * перенесёшь: оно стёрло бы заливку у значков магазина, которые рисуются
 * заливкой, а не обводкой.
 *
 * Поэтому — только внутри слоёв игры и только для чужих контуров: наши
 * собственные значки помечены классом .ico и красятся сами.
 */
.arcade-overlay svg:not(.ico),
.game-overlay svg:not(.ico),
.input-calibration svg:not(.ico),
/* Настройки несут те же контуры оригинала: колокольчик, часы, конверт. */
.setting-icon svg:not(.ico),
.reminder-illustration svg:not(.ico),
svg.chevron {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   ВИД ПОД МАГАЗИН
   ============================================================
   Ниже — правки поверх сетки оригинала. Сетку они не трогают: только цвет,
   шрифт и предел размера. Решения владельца.  */

/*
 * ШРИФТЫ — МАГАЗИННЫЕ, ВЕЗДЕ.
 *
 * Оригинал набран Comfortaa; на платформе её нет вовсе, и текст молча съезжал
 * на системный шрифт — на одной странице получалось три разных начертания.
 * Comfortaa упомянута в файлах движка в трёх местах: подменяем их разом, а не
 * правим сам движок — он должен остаться дословным.
 */
.trenazher,
.trenazher input,
.trenazher button,
.trenazher select,
.arcade-overlay,
.game-overlay,
.lv3-root,
.lv3-mode-root,
.input-calibration {
  font-family: Onest, system-ui, sans-serif;
}

.trenazher h1,
.trenazher h2,
.trenazher h3,
.lv3-root h1, .lv3-root h2, .lv3-root h3,
.lv3-mode-root h1, .lv3-mode-root h2, .lv3-mode-root h3,
.arcade-overlay h1, .arcade-overlay h2,
.game-overlay h1, .game-overlay h2 {
  font-family: Unbounded, sans-serif;
}

/* Ноты и знаки альтерации рисуются музыкальным шрифтом — его не трогаем. */
.grand-staff text,
.staff text {
  font-family: "Segoe UI Symbol", "Noto Music", serif;
}

/*
 * САЛАТОВЫЙ ВМЕСТО ТЁМНО-ЗЕЛЁНОГО.
 *
 * Тёмно-зелёный пришёл из старого сайта и на нашей палитре выглядит чужим:
 * у магазина ровно два своих цвета — фиолетовый и салатовый (--lime).
 *
 * Текст на салатовом — ТЁМНЫЙ. Белый по такому светлому не читается вовсе:
 * это не вкус, это контраст.
 */
.lv3-btn--play,
.play-kind-card--personal {
  background: linear-gradient(150deg, var(--lime), #b9e02f);
  box-shadow: 0 14px 28px rgba(205, 242, 79, 0.35);
  color: var(--ink);
}

.lv3-btn--play strong,
.lv3-btn--play small,
.lv3-btn--play span,
.play-kind-card--personal strong,
.play-kind-card--personal small {
  color: var(--ink);
}

/* Значок на салатовой карточке — тоже тёмный, иначе он исчезает. */
.play-kind-card--personal .play-kind-card__icon {
  background: rgba(31, 36, 48, 0.12);
  color: var(--ink);
}

.play-kind-card--personal .play-kind-card__meta {
  background: rgba(31, 36, 48, 0.14);
  color: var(--ink);
}

/*
 * КНОПКИ НЕ ГИГАНТСКИЕ И ПРИЖАТЫ КВЕРХУ.
 *
 * Оригинал растягивал «Учиться» и «Играть» по всей высоте: на телефоне это
 * верно — там кроме них ничего и нет. На большом экране те же правила
 * превращали их в два цветных полотна во весь рост, и человек искал глазами,
 * куда нажимать.
 *
 * Потолок высоты это чинил, но рождал вторую беду: освободившееся место
 * `.lv3-home__actions { align-self: center }` раскидывал поровну сверху и
 * снизу, и кнопки повисали посреди пустого экрана — на столе дыра под знаком
 * была 188 точек, на планшете 341. Правило владельца: по горизонтали — по
 * центру, по вертикали — всегда сверху, но не наезжая на знак.
 *
 * Поэтому здесь три вещи разом: ряды по содержимому вместо растягивающего
 * `1fr`, содержимое собрано по верху и блок кнопок больше не центруется.
 *
 * ПОРОГ 700, А НЕ 900. Книжные планшеты — 768, 810, 820, 834 — в прежний порог
 * не попадали, и на них кнопки по-прежнему были во весь рост. Вторая половина
 * условия обязательна: без неё под правило попадёт низкое альбомное окно, где
 * растягивание кнопок — исходный замысел.
 */
@media (min-width: 700px) and (min-height: 620px) {
  .lv3-home {
    grid-template-rows: auto auto;
    align-content: start;
  }

  .lv3-home__actions {
    height: 280px;
    max-height: 280px;
    align-self: start;
  }

  .lv3-btn { min-height: 140px; }
}

/*
 * РЕЙКА СБОКУ, КОГДА ЭКРАН ЛЁЖА.
 *
 * В оригинале это включалось только при высоте до 600 px — телефон лёжа. Окно
 * браузера на столе бывает и ниже, и шире, и там полоса снизу налезала на
 * содержимое: владелец прислал снимок, где кнопки «Главная» и «Прогресс»
 * лежат поверх карточек.
 *
 * Считаем по СООТНОШЕНИЮ, а не по числу точек: лёжа — значит шире, чем выше.
 */
@media (orientation: landscape) and (max-height: 760px) {
  .tab-bar {
    top: var(--safe-top);
    right: auto;
    bottom: var(--safe-bottom);
    left: max(8px, env(safe-area-inset-left));
    width: 66px;
    height: auto;
    align-content: center;
    padding: 7px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 62px));
    border-radius: 22px;
    transform: none;
  }

  .trenazher {
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
    padding-left: calc(66px + max(8px, env(safe-area-inset-left)) + 10px);
  }
}

/* Пустой крючок движка не должен занимать место. */
.home-title--pusto { margin: 0; min-height: 0; }

.trenazher__zagolovok {
  margin-bottom: 12px;
  font-family: Unbounded, sans-serif;
  font-size: clamp(1.4rem, 5vw, 2rem);
}

/*
 * Значки карточек «Учиться» — из библиотеки проекта, а не свои контуры.
 *
 * В оригинале они были нарисованы прямо в разметке: флажок и клавиши. Правило
 * проекта — одна роль, один значок, и рисовать рядом второй такой же незачем
 * (CLAUDE.md). Взяты `stairs-up` — «все этапы по порядку» — и `piano`.
 */
.play-kind-card__icon .ico { width: 24px; height: 24px; }

/* ------------------------------------------------------------------
   НАСТРОЙКИ

   Экран собран из строк оригинала («Профиль» и «Напоминания»), поэтому
   правила приезжают сборкой. Здесь — только то, чего в оригинале не было:
   там время выбиралось отдельным окном, а письмо не проверялось вовсе.
   ------------------------------------------------------------------ */

/*
 * Строка-кнопка без значения справа.
 *
 * В оригинале у неё было четыре столбца: значок, текст, значение, стрелка.
 * Значения («Вкл.», «19:00») мы не показываем — они переехали в подпись под
 * заголовком строки. Лишний столбец отодвигал бы стрелку от края.
 */
.trenazher .setting-row--button { grid-template-columns: auto minmax(0, 1fr) auto; }

/*
 * Время выбирается прямо в строке.
 *
 * В оригинале строка открывала окно со списком; окно жило в app.js вместе с
 * остальными окнами, а браузер и телефон умеют это сами и лучше — родное
 * колесо времени привычнее любого нашего списка.
 */
.setting-time {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--font-label);
  font-size: 1rem;
  background: var(--surface);
}

.reminder-note--otvet { color: var(--text); }

.setting-row--button[disabled] { opacity: .6; cursor: progress; }

/* Окно про тестовое письмо. Родной <dialog>: он сам закрывается Escape и сам
   гасит остальное содержимое. */
.nastroyki__okno {
  max-width: 420px;
  margin: auto;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.nastroyki__okno::backdrop { background: rgba(31, 36, 48, .45); }
.nastroyki__okno h2 { margin: 0 0 12px; font-family: var(--font-heading); font-size: 1.25rem; }
.nastroyki__okno p { margin: 0 0 10px; line-height: 1.5; }
.nastroyki__okno .ios-primary-button { margin-top: 8px; }

/*
 * СТРОКА НАСТРОЙКИ ПЕРЕНОСИТСЯ, А НЕ ОБРЕЗАЕТСЯ.
 *
 * В оригинале и заголовок строки, и подпись обрезались многоточием в одну
 * строку. На нашем телефоне (350 точек, CLAUDE.md) от «Напоминать о занятии»
 * оставалось «Напоминать о заня…», а от подписи — половина: значок, текст и
 * переключатель в такую ширину в одну строку не встают.
 */
.nastroyki .setting-row strong,
.nastroyki .setting-row small {
  overflow: visible;
  white-space: normal;
}

/*
 * НА БОЛЬШОМ ЭКРАНЕ НАСТРОЙКИ — КОЛОНКОЙ.
 *
 * Настройки не игра: им не нужна вся ширина. Растянутые на весь стол, дни
 * недели превращались в семь квадратов с ладонь — ровно то, что владелец
 * вычеркнул на главной: «на десктопах и планшетах не надо делать гигантские
 * кнопки».
 */
@media (min-width: 900px) {
  .nastroyki { max-width: 620px; }
  .nastroyki .day-picker { grid-template-columns: repeat(7, 62px); }
  .nastroyki .ios-primary-button { max-width: 320px; }
}

/* Строка-ссылка выглядит строкой, а не ссылкой: подчёркивание внутри списка
   настроек читается как ошибка вёрстки. Стрелка справа и так говорит, что
   строка ведёт дальше. */
.nastroyki a.setting-row { text-decoration: none; }

/* Пояснение под строкой «Как отвечать» — тот же текст, что стоял в шапке
   окна выбора в оригинале. Окна больше нет, а объяснение нужно. */
.nastroyki__poyasnenie {
  margin: 10px 2px 8px;
  color: var(--text-3);
  font-size: .78rem;
  line-height: 1.5;
}

/*
 * Список способов и карточки проверки — из оригинала, но там они лежали в
 * нижней шторке во всю ширину. Здесь колонка настроек, и без предела список
 * растянулся бы на весь стол.
 */
@media (min-width: 900px) {
  .nastroyki .input-choice-list,
  .nastroyki .midi-test-card,
  .nastroyki .input-calibration-card { max-width: 620px; }
}

/* ------------------------------------------------------------------
   БЛОКИ НАСТРОЕК

   Ввод и напоминания обведены отдельно — решение владельца. Раньше карточки,
   переключатели и дни шли одним потоком, и глазу было не за что зацепиться:
   где кончается одна настройка и начинается другая, было видно только по
   смыслу текста.
   ------------------------------------------------------------------ */
.nastroyki__blok {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
}

.nastroyki__blok > h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
}

/* Внутри блока карточки уже обведены сами — вторая рамка была бы рамкой в
   рамке. */
.nastroyki__blok .settings-group,
.nastroyki__blok .input-choice,
.nastroyki__blok .midi-test-card { background: var(--surface-2); }

.nastroyki__blok .input-choice-list { margin-top: 12px; }
.nastroyki__blok .ios-primary-button { margin-top: 14px; }

.nastroyki__podpis {
  margin: 16px 2px 8px;
  color: var(--text-3);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Значок способа ответа — контурный, как остальные значки тренажёра. */
.input-choice > i svg { width: 22px; height: 22px; }
.input-choice > i svg:not(.ico) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * Строка способа с кнопкой рядом.
 *
 * Кнопку «Настроить» нельзя положить внутрь карточки-кнопки: кнопка в кнопке —
 * недопустимая разметка, и браузер разберёт её как попало. Поэтому у этой
 * строки два ребёнка: выбор и настройка.
 */
.input-choice--s-knopkoy {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: default;
}

.input-choice__vybor {
  display: grid;
  padding: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.input-choice--s-knopkoy > .secondary-button {
  width: auto;
  min-height: 40px;
  padding: 0 16px;
  white-space: nowrap;
}

/* На телефоне кнопка уезжает под строку: рядом ей места нет. */
/* ==================================================================
   МАСТЕР УЖИМАЕТСЯ ПО ВЫСОТЕ ОКНА, А НЕ ПО ЕГО ШИРИНЕ

   Прежние поправки стояли на ширине — «телефон» и «лёжа». Но не влезает
   мастер не в узкое окно, а в НИЗКОЕ: на 1024×600 и 900×600 окно широкое,
   поэтому заголовок набирался тремя сантиметрами (clamp от ширины), а высоты
   под него не было. Разворот по пятнадцати размерам показал это сразу.

   Поэтому здесь один порог по высоте, и он работает на любой ширине.
   ================================================================== */
@media (max-height: 740px) {
  .input-calibration__header { min-height: 0; padding-top: 12px; padding-bottom: 8px; }
  .input-calibration__footer { min-height: 0; }

  .calibration-hero-icon { width: 54px; height: 54px; margin-bottom: 8px; font-size: 1.6rem; }
  .calibration-panel h1 { margin: 4px 0 8px; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
  .calibration-panel--intro > p,
  .calibration-panel--summary > p { font-size: .82rem; line-height: 1.4; }

  .calibration-rules { margin-top: 12px; gap: 8px; }
  .calibration-rules span { padding: 9px 10px; }
  .calibration-rules b { width: 26px; height: 26px; margin-bottom: 6px; }
  .calibration-panel .calibration-privacy { margin-top: 10px; }

  .calibration-summary-stats { margin-top: 12px; }
  .calibration-summary-stats span { padding: 9px 8px; }
  .calibration-summary-stats strong { font-size: clamp(1.1rem, 2.2vw, 1.5rem); }
  .calibration-offkeys { margin-top: 8px; }
  .calibration-diagnosis { margin-top: 8px; padding: 10px 12px; font-size: .74rem; }

  .calibration-note-card { min-height: 56px; }
  .calibration-note-card strong { font-size: 1.5rem; }
  .calibration-detected { min-height: 40px; padding: 7px 10px; }
}


@media (max-width: 420px) {
  .input-choice--s-knopkoy { grid-template-columns: minmax(0, 1fr); }
  .input-choice--s-knopkoy > .secondary-button { width: 100%; }
}

/*
 * Плитка значка у строки с кнопкой.
 *
 * Правило оригинала целит в прямого ребёнка `.input-choice > i`, а здесь
 * значок лежит на уровень глубже — внутри кнопки выбора. Без этой строки у
 * микрофона пропадала вся плитка: значок был, а фона и размера у него не было.
 */
.input-choice__vybor > i {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 15px;
  color: var(--violet);
  background: var(--violet-soft);
  font-style: normal;
}

.input-choice__vybor > i svg { width: 22px; height: 22px; }
.input-choice__vybor > i svg:not(.ico) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * РАЗДЕЛЫ ПРОКРУЧИВАЮТСЯ НА БОЛЬШОМ ЭКРАНЕ.
 *
 * В оригинале на столе `.app-view` получал `height: 100vh; overflow: hidden`
 * — и это было верно: «Профиль» там раскладывался в две колонки и умещался в
 * экран. Наши «Настройки» — один столбец, и на окне 1240×900 из 1332 точек
 * содержимого 432 просто отрезались: ни полосы, ни колеса, ни возможности
 * добраться до нижних настроек. На телефоне правило не действует, поэтому
 * беда была видна только на столе.
 *
 * Прокрутка ВНУТРИ раздела, а не у страницы: тренажёр — приложение с рейкой
 * сбоку, и уезжающая вместе со страницей рейка выглядела бы поломкой.
 *
 * Бьём по `data-view`, а не по `.app-view`: на главной прокрутки быть не
 * должно — она умещается в экран нарочно.
 */
@media (min-width: 1100px) and (min-height: 650px) {
  [data-view="settings"].app-view,
  [data-view="progress"].app-view {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ------------------------------------------------------------------
   МАСТЕР КАЛИБРОВКИ НА БОЛЬШОМ ЭКРАНЕ — КАРТОЧКА, А НЕ ЦЕЛАЯ СТРАНИЦА

   В оригинале мастер жил в полноэкранной раскладке: шапка сверху, кнопка
   внизу, содержимое посередине. На телефоне это верно — там экран и есть
   карточка. На столе получалось полотно во весь монитор с заголовком в три
   сантиметра, дырой в пол-экрана и кнопкой у самого низа.

   Поэтому на широком и высоком окне тот же мастер собирается в карточку по
   центру: содержимое сверху, кнопка сразу под ним. Разметка и опознаватели
   узлов не меняются — только рамка вокруг.
   ------------------------------------------------------------------ */
@media (min-width: 700px) and (min-height: 620px) {
  .input-calibration {
    display: grid;
    padding: 24px;
    place-items: center;
  }

  .input-calibration__shell {
    width: min(100%, 860px);
    height: auto;
    min-height: 0;
    max-height: min(88dvh, 780px);
    border: 1px solid var(--border);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: var(--shadow);
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .input-calibration__header { min-height: 0; padding: 18px 26px 12px; }
  .input-calibration__content { padding: 8px 26px 16px; }

  /* Кнопка идёт сразу за содержимым, а не приклеена к низу монитора. */
  .input-calibration__footer {
    min-height: 0;
    padding: 12px 26px 18px;
    background: none;
  }

  /* Панель собирается по верху: тянуть её на всю высоту больше нечем и
     незачем — высоту теперь задаёт сама карточка. */
  .calibration-panel { min-height: 0; }
  .calibration-panel--intro,
  .calibration-panel--summary { justify-content: flex-start; }

  /*
   * Заголовок по карточке, а не по монитору.
   *
   * clamp(…, 5vw, 3rem) на широком окне давал 48 точек — на всю ширину и в
   * две строки. В карточке столько незачем.
   */
  .calibration-panel h1 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
  .calibration-hero-icon { width: 64px; height: 64px; margin-bottom: 12px; font-size: 1.9rem; }
  .calibration-rules { margin-top: 18px; }
}

/* ------------------------------------------------------------------
   ДВЕ ПОЛОСКИ СО СЧЁТОМ — СПРЯТАНЫ, А НЕ ВЫРЕЗАНЫ

   «Открыто нот · Уверенность · Скорость» на главной и «Завершение 400 ·
   Точность до 300 · Скорость до 200 · Без ошибок до 100» на выборе обучения.
   Решение владельца: цифры ничего не говорят ни ему, ни человеку — вернём,
   когда сами решим, что именно показываем.

   ИМЕННО СПРЯТАНЫ. Рисует их движок занятия, который переносится дословно;
   вырезать оттуда разметку значит развести нашу копию с оригиналом ради
   строки, которую собирались вернуть. Снять — убрать эти два правила.
   ------------------------------------------------------------------ */
.lv3-home__info,
.route-score-formula { display: none; }

/* ------------------------------------------------------------------
   КЛАВИАТУРА МАСТЕРА — ТА ЖЕ, ЧТО В ЗАНЯТИИ

   Внутри `.calibration-piano` теперь лежат два узла движка: октава
   настоящими клавишами и карта всех 88 с подсвеченной октавой. Оригинальная
   рамка рассчитана на одну картинку в абсолютных координатах — переводим её
   в колонку, иначе карта ложится поверх клавиш и не видна вовсе.
   ------------------------------------------------------------------ */
.calibration-piano {
  display: flex;
  padding: 10px;
  gap: 8px;
  flex-direction: column;
  background: var(--surface);
}

/* Клавиши занимают всё, что осталось; карта — своей высотой. */
.calibration-piano > .answer-keyboard { flex: 1 1 auto; min-height: 120px; }
.calibration-piano > .keymap-88 { flex: 0 0 auto; }

/*
 * Подсказка «эта клавиша» видна и на клавишах, и на карте.
 *
 * В занятии `.is-target` показывает правильный ответ ПОСЛЕ ошибки, и цвет там
 * приглушённый. Здесь это единственная цель на экране: человек ищет глазами,
 * какую клавишу нажать, и она должна быть заметна сразу.
 */
.calibration-piano .ak-white.is-target {
  background: linear-gradient(180deg, #fff, var(--acid));
  box-shadow: inset 0 0 0 2px var(--violet);
}

.calibration-piano .ak-black.is-target,
.calibration-piano .km-black.is-target { background: var(--violet); }
.calibration-piano .km-white.is-target { background: var(--acid); }

/*
 * НА ТЕЛЕФОНЕ ПРОХОД ВЛЕЗАЕТ ЦЕЛИКОМ.
 *
 * Карта всех 88 клавиш прибавила экрану высоты, и на 350×650 под ней уезжала
 * строка «Слушаю инструмент…» — та самая, ради которой человек и смотрит на
 * экран: по ней видно, услышали ли ноту. Ужимаем то, что можно ужать:
 * пояснение под заголовком повторяет карточку цели, а клавишам хватает
 * меньшей высоты.
 */
@media (max-width: 420px) {
  .calibration-run-copy p { display: none; }
  .calibration-run-copy h1 { font-size: 1.25rem; }
  .calibration-note-card { min-height: 70px; }
  .calibration-note-card strong { font-size: 1.9rem; }
  .calibration-detected { min-height: 44px; }
}

/* ------------------------------------------------------------------
   ПЕРВЫЙ ЭКРАН МАСТЕРА ВЛЕЗАЕТ ЦЕЛИКОМ

   Решение владельца: всё на один экран, без прокрутки. На телефоне проекта
   (350×650) не помещалось 134 точки — обрезалось третье правило, «Приватно»,
   и подпись про разрешение; лёжа (650×350) не помещалось 317 — заголовок
   уезжал под кнопку.

   Урезаем то, что можно урезать, ничего не выбрасывая: значок мельче,
   заголовок мельче, правила из трёх карточек в столбик становятся тремя
   строками.
   ------------------------------------------------------------------ */
@media (max-width: 420px) {
  .calibration-hero-icon { width: 54px; height: 54px; margin-bottom: 10px; font-size: 1.6rem; }
  .calibration-panel--intro h1,
  .calibration-panel--summary h1 { margin: 4px 0 8px; font-size: 1.3rem; }
  .calibration-panel--intro > p { font-size: .8rem; line-height: 1.4; }
  .calibration-rules { margin-top: 14px; gap: 7px; }
  .calibration-rules span { min-height: 0; padding: 8px 10px; row-gap: 1px; }
  .calibration-rules b { width: 26px; height: 26px; }
  .calibration-rules small { margin-top: 1px; line-height: 1.25; }
  .calibration-panel .calibration-privacy { margin-top: 10px; font-size: .64rem; }
  .input-calibration__footer { min-height: 0; padding-top: 8px; }
}

/*
 * ЛЁЖА — В ДВА СТОЛБЦА.
 *
 * В высоту 350 точек столбик из значка, заголовка, абзаца и трёх правил не
 * влезает никакими шрифтами. Раскладываем поперёк: слева рассказ, справа
 * правила — так же, как оригинал делает с экраном прохода.
 */
@media (orientation: landscape) and (max-height: 560px) {
  .calibration-panel--intro {
    display: grid;
    gap: 6px 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start;
    text-align: left;
  }

  .calibration-panel--intro .calibration-hero-icon { display: none; }

  .calibration-panel--intro h1 {
    margin: 0;
    grid-column: 1;
    font-size: 1.2rem;
  }

  .calibration-panel--intro > p {
    margin: 0;
    grid-column: 1;
    font-size: .74rem;
    line-height: 1.35;
  }

  .calibration-panel--intro .calibration-rules {
    margin: 0;
    grid-column: 2;
    grid-row: 1 / span 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-content: start;
  }

  .calibration-panel--intro .calibration-rules span {
    display: grid;
    min-height: 0;
    padding: 6px 9px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 9px;
    text-align: left;
  }

  .calibration-panel--intro .calibration-rules b { width: 22px; height: 22px; margin: 0; grid-row: 1 / 3; }
  .calibration-panel--intro .calibration-rules small { margin-top: 0; font-size: .6rem; line-height: 1.2; }

  .calibration-panel .calibration-privacy { margin: 0; grid-column: 1 / -1; font-size: .62rem; }
  .input-calibration__footer { min-height: 0; padding-top: 6px; padding-bottom: 8px; }
}

/*
 * ЭКРАН ПРОХОДА И ИТОГ — ТОЖЕ В ОДИН ЭКРАН.
 *
 * Карта всех 88 клавиш прибавила высоты, и на телефоне под низ уезжала полоска
 * пройденных клавиш, а лёжа — сама карта. Итог лёжа не влезал вовсе: значок,
 * заголовок, три числа и диагноз столбиком в 350 точек не помещаются.
 */
@media (max-width: 420px) {
  .calibration-meter { margin-top: 4px; }
  .calibration-key-progress { height: 8px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  /* Проход: клавиатуре хватает меньшего, карта нужна вся. */
  .calibration-note-card { min-height: 62px; }
  .calibration-note-card strong { font-size: 1.5rem; }

  /* Итог: то же лекарство, что у первого экрана, — два столбца. */
  .calibration-panel--summary {
    display: grid;
    gap: 6px 18px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start;
    text-align: left;
  }

  .calibration-panel--summary .calibration-hero-icon { display: none; }
  .calibration-panel--summary .micro-label { grid-column: 1; }
  .calibration-panel--summary h1 { margin: 0; grid-column: 1; font-size: 1.2rem; }
  .calibration-panel--summary > p { margin: 0; grid-column: 1; font-size: .74rem; line-height: 1.35; }

  .calibration-panel--summary .calibration-summary-stats {
    margin: 0;
    grid-column: 2;
    grid-row: 1 / span 3;
    align-content: start;
  }

  .calibration-panel--summary .calibration-summary-stats span { padding: 8px 10px; }
  .calibration-panel--summary .calibration-diagnosis {
    margin: 0;
    grid-column: 1 / -1;
    padding: 8px 10px;
    font-size: .68rem;
  }
}

/* Последние тридцать точек на телефоне: под ними лежит полоска пройденных
   клавиш — по ней человек видит, сколько осталось. */
@media (max-width: 420px) {
  .calibration-run-copy h1 { margin: 0 0 4px; font-size: 1.15rem; }
  .calibration-note-card { min-height: 58px; padding: 8px 10px; }
  .calibration-note-card strong { font-size: 1.6rem; }
  .calibration-note-card small { font-size: .62rem; }
  .calibration-panel--run { row-gap: 8px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .calibration-run-copy h1 { margin: 0 0 3px; font-size: 1.05rem; }
  .calibration-note-card { min-height: 54px; padding: 6px 9px; }
  .calibration-note-card strong { font-size: 1.35rem; }
  .calibration-panel--run { row-gap: 6px; column-gap: 12px; }
  .calibration-key-progress { height: 7px; }
}

/*
 * ЛЁЖА ПРОХОД РАСКЛАДЫВАЕТСЯ ПОПЕРЁК ЦЕЛИКОМ.
 *
 * В оригинале три нижние полосы — «слушаю», уровень сигнала и пройденные
 * клавиши — лежали через всю ширину, одна под другой. В 350 точек высоты они
 * не влезают. Уводим «слушаю» и уровень в левый столбец под карточку цели, а
 * полоску клавиш оставляем внизу через всю ширину: по ней видно, сколько
 * пройдено, и она тонкая.
 */
@media (orientation: landscape) and (max-height: 560px) {
  .calibration-panel--run {
    grid-template-areas:
      "copy piano"
      "note piano"
      "detected piano"
      "meter piano"
      "keys keys";
    align-content: start;
  }

  .calibration-detected { min-height: 38px; padding: 5px 9px; }
}

/* Лёжа высоту задаёт ЛЕВЫЙ столбец, а клавиши тянутся за ним. Ужимаем его:
   надпись про проход, карточку цели и строку «слушаю». */
@media (orientation: landscape) and (max-height: 560px) {
  .calibration-run-copy .micro-label { margin-bottom: 2px; font-size: .58rem; }
  .calibration-detected { min-height: 0; padding: 6px 9px; }
  .calibration-detected strong { font-size: .78rem; }
  .calibration-detected small { margin-top: 0; font-size: .6rem; line-height: 1.2; }
  .calibration-panel--run { row-gap: 5px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .calibration-run-copy h1 { font-size: .95rem; line-height: 1.08; }
  .calibration-note-card { min-height: 46px; padding: 5px 9px; }
  .calibration-note-card strong { font-size: 1.2rem; }
  .calibration-note-card small { font-size: .58rem; }
  .calibration-detected { padding: 5px 8px; }
}

/*
 * Лёжа надпись «ПРЯМОЙ ПРОХОД» уходит: в 350 точек высоты за неё платят
 * полоской пройденных клавиш. Направление всё равно видно — стрелкой в
 * карточке цели и счётом в шапке.
 */
@media (orientation: landscape) and (max-height: 560px) {
  .calibration-run-copy .micro-label { display: none; }
  .input-calibration__content { padding-top: 4px; padding-bottom: 8px; }
}

/* Последняя точка: полоска клавиш вплотную к краю — ей хватает. */
@media (orientation: landscape) and (max-height: 560px) {
  .calibration-panel--run { row-gap: 4px; }
}

/*
 * ЧИСЛА ИТОГА НЕ ВЫЛЕЗАЮТ ИЗ КАРТОЧЕК.
 *
 * Размер задан как clamp(1.2rem, 4vw, 2rem) — от ширины ОКНА. Лёжа окно
 * широкое (650), а карточки узкие: они стоят в правом столбце втроём. «100%»
 * набиралось двадцатью шестью точками и не влезало в свою карточку.
 */
@media (orientation: landscape) and (max-height: 560px) {
  .calibration-summary-stats { gap: 6px; }
  .calibration-summary-stats span { padding: 7px 5px; }
  .calibration-summary-stats strong { font-size: 1.1rem; }
  .calibration-summary-stats small { margin-top: 1px; font-size: .58rem; line-height: 1.2; }
}

/* ------------------------------------------------------------------
   КАРТА ИНСТРУМЕНТА В ИТОГЕ

   Та же карта 88 клавиш, что на проходе, но помечены расстроенные — те, про
   которые человек сам сказал «да, у меня так звучит». Числа говорят «пять
   клавиш выбиваются», карта говорит какие.
   ------------------------------------------------------------------ */
.calibration-offkeys {
  width: 100%;
  margin-top: 14px;
}

.calibration-offkeys .km-white.is-detuned { background: var(--orange-soft); box-shadow: inset 0 -8px 0 var(--orange); }
.calibration-offkeys .km-black.is-detuned { background: var(--orange); }

/* Кнопка «да, у меня так звучит» стоит между «Назад» и «Пропустить» и не
   должна выглядеть главной: главная тут — продолжить проход. */
#calibrationOffKeyButton { white-space: nowrap; }

@media (max-width: 420px) {
  .input-calibration__footer { flex-wrap: wrap; }
  #calibrationOffKeyButton { font-size: .78rem; }
}

/*
 * ПОДВАЛ МАСТЕРА НА ТЕЛЕФОНЕ — В ДВА РЯДА.
 *
 * Кнопок стало три, и в 350 точек ширины они не встают в строку. Наверху —
 * «да, у меня так звучит»: это ответ на то, что человек прямо сейчас слышит.
 * Внизу — «Назад» и «Пропустить».
 */
@media (max-width: 420px) {
  .input-calibration__footer {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
  }

  #calibrationOffKeyButton { grid-column: 1 / -1; }
  .input-calibration__footer .secondary-button,
  .input-calibration__footer .ios-primary-button { min-height: 40px; }

  /* Место под второй ряд забираем у прохода. */
  .calibration-note-card { min-height: 50px; }
  .calibration-note-card strong { font-size: 1.4rem; }
  .calibration-detected { min-height: 40px; padding: 6px 9px; }

  /* Итог: карта прибавила высоты — ужимаем числа и вывод. */
  .calibration-summary-stats { margin-top: 14px; gap: 6px; }
  .calibration-summary-stats span { padding: 8px 6px; }
  .calibration-offkeys { margin-top: 10px; }
  .calibration-diagnosis { margin-top: 10px; padding: 10px 12px; font-size: .72rem; line-height: 1.4; }
  .calibration-panel--summary h1 { margin: 2px 0 6px; }
  .calibration-panel--summary > p { font-size: .78rem; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .calibration-offkeys { margin-top: 6px; }
  .calibration-diagnosis { margin-top: 6px; padding: 7px 9px; }
}

/*
 * НА КЛАВИШАХ — ТОЛЬКО РУССКИЕ ИМЕНА.
 *
 * Рисователь движка подписывает каждую клавишу дважды: «До» и под ней «C2».
 * Латиница в проекте остаётся только для аккордов — решение владельца, — а
 * цифра октавы в подписи клавиши и вовсе лишняя: октава написана над
 * клавиатурой словом.
 *
 * Прячем стилем, а не правкой рисователя: он общий с занятием и переносится
 * дословно. Вернуть — снять это правило.
 */
.trenazher .ak-white small { display: none; }

/*
 * ПОДВАЛ РАСТЁТ ТОЛЬКО ТОГДА, КОГДА НУЖЕН.
 *
 * Кнопка «да, у меня так звучит» появляется лишь на несовпадении. Пока её
 * нет, подвал остаётся в одну строку — иначе за неё платили бы высотой все
 * четыре экрана, включая те, где её не бывает.
 */
@media (max-width: 420px) {
  .input-calibration__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  #calibrationOffKeyButton { order: -1; flex: 1 0 100%; }
  .input-calibration__footer .secondary-button:not(#calibrationOffKeyButton) { flex: 0 1 auto; }
  .input-calibration__footer .ios-primary-button { flex: 1 1 auto; }

  /* Проход: место под вторую строку подвала берём у всего понемногу. */
  .calibration-run-copy h1 { font-size: 1.05rem; }
  .calibration-piano .keymap-octaves { height: 9px; margin-bottom: 2px; }
  .calibration-piano .keymap-keys { height: 22px; }
  .calibration-note-card { min-height: 44px; }
  .calibration-note-card strong { font-size: 1.3rem; }
  .calibration-detected { min-height: 34px; padding: 5px 8px; }

  /* Итог: карта инструмента прибавила высоты. */
  .calibration-offkeys { margin-top: 6px; }
  .calibration-offkeys .keymap-keys { height: 24px; }
  .calibration-diagnosis { margin-top: 8px; padding: 9px 11px; font-size: .7rem; }
  .calibration-summary-stats { margin-top: 10px; }
  .calibration-summary-stats span { padding: 6px 5px; }
  .calibration-hero-icon { width: 46px; height: 46px; margin-bottom: 6px; font-size: 1.4rem; }
  .calibration-panel--intro > p { font-size: .76rem; }
  .calibration-rules { margin-top: 10px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .calibration-piano .keymap-octaves { height: 9px; margin-bottom: 2px; }
  .calibration-piano .keymap-keys { height: 22px; }
  .calibration-offkeys .keymap-keys { height: 22px; }
  #calibrationOffKeyButton { font-size: .74rem; }
}

/* Последние точки лёжа: подвал в одну строку и всё то же по мелочи. */
@media (orientation: landscape) and (max-height: 560px) {
  .input-calibration__footer { gap: 8px; padding-top: 8px; padding-bottom: 10px; }
  .input-calibration__footer .secondary-button,
  .input-calibration__footer .ios-primary-button { min-height: 36px; }
  .calibration-summary-stats span { padding: 5px 4px; }
  .calibration-summary-stats strong { font-size: 1rem; }
  .calibration-diagnosis { font-size: .66rem; line-height: 1.35; }
  .calibration-detected { min-height: 34px; }
}

/* Две последние точки лёжа на проходе. */
@media (orientation: landscape) and (max-height: 560px) {
}

@media (orientation: landscape) and (max-height: 560px) {
  .calibration-run-copy h1 { font-size: 1rem; }
  .calibration-panel--run { row-gap: 3px; }
}

/*
 * Три кнопки в подвале мастера на телефоне.
 *
 * Оригинал задавал каждой `width: min(100%, 360px)` — при трёх кнопках они
 * вставали друг под другом в три ряда. Нужны два: сверху «да, у меня так
 * звучит» во всю ширину, снизу «Назад» и «Пропустить» пополам.
 */
@media (max-width: 420px) {
  .input-calibration__footer button { width: auto; }
  .input-calibration__footer .secondary-button:not(#calibrationOffKeyButton) { max-width: none; flex: 1 1 0; }
  .input-calibration__footer .ios-primary-button { flex: 1 1 0; }
  #calibrationOffKeyButton { max-width: none; }
}

/* ==================================================================
   ЭКРАН ПРОХОДА ПОДГОНЯЕТСЯ ПОД ЛЮБОЕ ОКНО САМ

   Всё, что выше про высоты клавиатуры, было подгонкой под два размера —
   350×650 и 650×350. Между ними окон бесконечно много, и на 707×370 экран
   снова поехал: заголовок ушёл под шапку, а снизу не поместилось ничего.

   Правильное лекарство не в числах, а в раскладке: пусть КЛАВИАТУРА забирает
   ровно то, что осталось, а всё остальное стоит по содержимому. Тогда экран
   складывается под любую высоту сам, и подгонять больше нечего.
   ================================================================== */
.calibration-panel--run {
  height: 100%;
  align-content: stretch;
  /* Ряды: строка «нажмите» — гибкий ряд с клавиатурой — «слушаю» — уровень —
     клавиши. Клавиатура растянута на первые два ряда, поэтому гибким делаем
     второй: слабину получает она, а не карточка цели. */
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

/* Пол у клавиатуры маленький: лучше тесная клавиатура, чем уехавший за край
   экран. Ниже этого она уже нечитаема — тогда пусть появится прокрутка. */
.calibration-note-card { align-self: start; }

@media (max-width: 680px) {
  /* Один столбец: клавиатура третьим рядом. */
  .calibration-panel--run { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; }
}

.calibration-piano { min-height: 76px; }
.calibration-piano > .answer-keyboard { min-height: 44px; }

/*
 * Кнопка «да, у меня так звучит» не обрезается.
 *
 * Оригинал держал все второстепенные кнопки подвала уже 160 точек — под
 * «Назад» этого хватало с запасом. Наша подпись длиннее и обрезалась на всех
 * размерах, кроме телефона.
 */
#calibrationOffKeyButton {
  width: auto;
  max-width: none;
  padding-right: 16px;
  padding-left: 16px;
  white-space: nowrap;
}

/* Два последних размера из развёртки: телефон стоя и лёжа. */
@media (max-width: 420px) {
  .calibration-panel--intro > p { font-size: .74rem; line-height: 1.35; }
  .calibration-rules { margin-top: 8px; gap: 6px; }
  .calibration-rules span { padding: 7px 9px; }
  .calibration-panel .calibration-privacy { margin-top: 8px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .calibration-panel--summary > p { font-size: .7rem; }
  .calibration-summary-stats { gap: 5px; }
  .calibration-summary-stats span { padding: 4px 4px; }
  .calibration-diagnosis { padding: 6px 8px; font-size: .64rem; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .calibration-panel--summary .micro-label { font-size: .56rem; }
  .calibration-panel--summary h1 { font-size: 1.1rem; }
  .calibration-offkeys { margin-top: 4px; }
}

/*
 * «Сохранить напоминание» — САЛАТОВАЯ.
 *
 * У магазина два своих цвета, и фиолетовый на этом экране уже занят: им
 * покрашены дни недели и выбранный способ ввода. Кнопка среди них терялась —
 * решение владельца сделать её акцентной.
 *
 * Текст тёмный: белый по салатовому не читается вовсе — это не вкус, это
 * контраст.
 */
.nastroyki__blok .ios-primary-button {
  color: var(--ink);
  background: linear-gradient(150deg, var(--lime), #b9e02f);
  box-shadow: 0 12px 24px rgba(205, 242, 79, .35);
}

/*
 * ГАЛОЧКА «ОЗВУЧИВАТЬ РОЯЛЕМ» — ЗНАЧОК ИЗ БИБЛИОТЕКИ.
 *
 * Родную галочку браузер рисует по-своему в каждой системе: свой синий
 * квадрат, свои углы, свой размер. Рядом с нашими контурными значками она
 * выглядела чужой.
 *
 * Сам `input` остаётся в разметке, только спрятан: на нём держатся обход
 * клавиатурой, диктор и переключение пробелом. Видимая часть — `i-checkbox` и
 * `i-square` из библиотеки проекта.
 */
.midi-audition-toggle > .ico {
  width: 22px;
  height: 22px;
  color: var(--text-3);
}

.midi-audition-toggle:has(input:checked) > .ico { color: var(--violet); }

/* Обвод при обходе клавиатурой — на значке: сам ввод спрятан. */
.midi-audition-toggle input:focus-visible + .ico {
  border-radius: 6px;
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

/* Значок связи вместо крутящейся точки, когда искать уже нечего. */
.midi-test-status__znak { width: 22px; height: 22px; color: var(--text-3); }
.midi-test-status.is-connected .midi-test-status__znak { color: var(--green); }
.midi-test-status.is-error .midi-test-status__znak { color: var(--red); }

/* «Обновить подключение» с значками провода и Bluetooth. */
.midi-test-card__obnovit {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.midi-test-card__obnovit .ico { width: 18px; height: 18px; }

/* ==================================================================
   ШРИФТ НА КЛАВИШАХ — НАШ

   Движок подписывает клавиши и заголовки карточек шрифтом Comfortaa; на
   платформе его нет вовсе, и браузер подставлял системный. Рядом с Unbounded
   и Onest это читалось как «съехало»: на одном экране три разных начертания.

   Пять мест в learning-v3.css задают Comfortaa прямо в правиле — общая
   подмена по `.trenazher` их не перебивает, потому что у них своя, более
   точная цель. Перечисляем поимённо.
   ================================================================== */
.trenazher .ak-white strong,
.trenazher .lv3-card h2,
.trenazher .program-modules h2,
.trenazher .lv3-ring-number { font-family: Onest, sans-serif; }

.trenazher .lv3-btn strong { font-family: Unbounded, sans-serif; }

/* ==================================================================
   КЛАВИАТУРА БЕЗ КОРОБКИ

   Оригинал держал её в белом прямоугольнике со скруглением 28 точек. Внутри
   клавиши скруглены сами, карта — своим радиусом, и вместе это читалось как
   каша из вложенных овалов. Решение владельца: коробку убрать.
   ================================================================== */
.calibration-piano {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Две кнопки в строке микрофона: настроить и сбросить. */
.input-choice__knopki {
  display: flex;
  gap: 8px;
  align-items: center;
}

.input-choice__knopki .secondary-button {
  width: auto;
  min-height: 40px;
  max-width: none;
  padding: 0 16px;
  white-space: nowrap;
}

.input-choice__sbros { color: var(--text-3); }

@media (max-width: 420px) {
  .input-choice__knopki { width: 100%; }
  .input-choice__knopki .secondary-button { flex: 1 1 0; padding: 0 10px; }
}

/* Своё окно вопроса вместо браузерного confirm. */
.nastroyki__okno--vopros { max-width: 380px; }
.nastroyki__okno--vopros p { margin: 0 0 18px; font-size: .95rem; line-height: 1.5; }

.nastroyki__otvety {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.nastroyki__otvety .secondary-button,
.nastroyki__otvety .ios-primary-button {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
}

/*
 * Строка «слушаю» не растёт вверх без предела.
 *
 * В обратном проходе её текст длиннее, и лёжа он выталкивал полоску
 * пройденных клавиш за край экрана. Две строки — потолок, дальше многоточие:
 * главное в ней первое слово, а не подробность.
 */
@media (orientation: landscape) and (max-height: 560px) {
  .calibration-detected small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .calibration-note-card small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .calibration-detected { min-height: 30px; padding: 4px 8px; }
  .calibration-panel--run { row-gap: 2px; }
}

/*
 * ПРОВЕРКА КЛАВИАТУРЫ — ЧАСТЬ СТРОКИ MIDI, А НЕ САМА ПО СЕБЕ.
 *
 * Карточка стояла ниже строки микрофона и того же цвета, что общий блок: со
 * стороны читалось, будто клавиатуру ищут для микрофона. Теперь она приросла
 * к своей строке и отличается бледно-зелёным — тем же, каким мастер
 * показывает добрые вести.
 */
.nastroyki__blok .midi-test-card {
  margin-top: -4px;
  border: 1px solid rgba(29, 187, 121, .3);
  border-radius: 20px;
  background: rgba(29, 187, 121, .08);
}

/* Внутренние карточки на зелёном — белые, иначе всё сливается в один пласт. */
.nastroyki__blok .midi-test-card .midi-test-status,
.nastroyki__blok .midi-test-card .midi-test-note { background: var(--surface); }

/* Заголовок прохода лёжа в три строки не помещался — «слушаю» наезжало на
   полоску клавиш. Две строки хватает. */
@media (orientation: landscape) and (max-height: 560px) {
  .calibration-run-copy h1 { font-size: .9rem; line-height: 1.12; }
  .calibration-detected { min-height: 0; }
}