/* Left and right speaker test (left_right_test). Свой вид: тёмная «студийная» сцена, левый канал —
   синий, правый — красный, оба — фиолетовый (решение владельца 2026-10-09: отдельный инструмент,
   «оформи по-своему»). Раскладка — container query по ширине самого инструмента. Префикс .lrtest. */

.lrtest {
    /* --- токены --- */
    --lr-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --lr-bg: #121829;
    --lr-bg-2: #1a2240;
    --lr-panel: #1d2645;
    --lr-panel-2: #232d52;
    --lr-border: #2e3a66;
    --lr-ink: #eef1fb;
    --lr-muted: #9ba7cb;
    --lr-dim: #56628c;
    --lr-left: #4c8dff;
    --lr-right: #ff5a62;
    --lr-both: #b18cff;
    --lr-ok: #3fd39a;
    --lr-cab: #0d1222;
    --lr-cab-edge: #39456f;
    --lr-cone: #1f2848;
    --lr-cone-edge: #4a5682;
    --lr-run-a: #5a9bff;
    --lr-run-b: #3b6fe6;
    --lr-radius: 14px;
    --lr-btn-radius: 10px;
    --lr-side-max: 150px;
    --lr-mid: 104px;
    --lr-ring-sec: 1.1s;
    --lr-board-h: 124px;

    container: lrtest / inline-size;
    max-width: 860px;
    margin: 0 auto;
    padding: 18px clamp(12px, 3vw, 22px) 20px;
    font-family: var(--lr-font);
    color: var(--lr-ink);
    background: radial-gradient(120% 90% at 50% 35%, var(--lr-bg-2) 0%, var(--lr-bg) 70%);
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius);
    -webkit-tap-highlight-color: transparent;
}

.lrtest__ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lrtest__ic .lrtest__fill { fill: currentColor; stroke: none; }

/* --- Переключатели сверху: Колонки / Наушники, Сигнал / Шум --- */
.lrtest__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.lrtest .lrtest__seg-btn {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--lr-muted);
    background: var(--lr-panel);
    border: 1px solid var(--lr-border);
}
.lrtest .lrtest__seg-btn:hover { color: var(--lr-ink); background: var(--lr-panel-2); border-color: var(--lr-border); }
.lrtest .lrtest__seg-btn.is-on { color: var(--lr-ink); background: var(--lr-panel-2); border-color: var(--lr-dim); }

/* --- Сцена --- */
.lrtest__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
    margin: 18px 0 6px;
}
.lrtest__side,
.lrtest__mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px;
    color: var(--lr-muted);
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}
.lrtest__side:focus-visible,
.lrtest__mid:focus-visible { outline: 2px solid var(--lr-dim); outline-offset: 2px; }
.lrtest__side--l { --lr-c: var(--lr-left); justify-self: end; }
.lrtest__side--r { --lr-c: var(--lr-right); justify-self: start; }
.lrtest__mid { --lr-c: var(--lr-both); }
.lrtest__art { width: 100%; max-width: var(--lr-side-max); height: auto; overflow: visible; }
.lrtest__head { width: var(--lr-mid); height: var(--lr-mid); overflow: visible; }

.lrtest__side-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--lr-ink); }
.lrtest__side-key {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: 700;
    color: var(--lr-bg);
    background: var(--lr-c);
    border-radius: 6px;
}

/* Колонка */
.lrtest__cab { fill: var(--lr-cab); stroke: var(--lr-cab-edge); stroke-width: 2; }
.lrtest__tw,
.lrtest__wf { fill: var(--lr-cone); stroke: var(--lr-cone-edge); stroke-width: 2; }
.lrtest__cone { fill: #161d38; stroke: var(--lr-cone-edge); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.lrtest__dome { fill: var(--lr-cone-edge); }
/* Наушники */
.lrtest__hband { display: none; fill: none; stroke: var(--lr-cab-edge); stroke-width: 5; stroke-linecap: round; }
.lrtest[data-device="headphones"] .lrtest__hband { display: inline; }
.lrtest.is-c .lrtest__hband { stroke: var(--lr-c); }
.lrtest__cup { fill: var(--lr-cab); stroke: var(--lr-cab-edge); stroke-width: 2; }
.lrtest__pad { fill: var(--lr-cone); stroke: var(--lr-cone-edge); stroke-width: 1.5; }
.lrtest__phones { display: none; }
.lrtest[data-device="headphones"] .lrtest__phones { display: inline; }
.lrtest[data-device="headphones"] .lrtest__speaker { display: none; }
/* Слушатель */
.lrtest__head-c,
.lrtest__head-s { fill: var(--lr-cone); stroke: var(--lr-cone-edge); stroke-width: 2; }

/* Кольца: расходятся, пока сторона звучит */
.lrtest__ring { fill: none; stroke: var(--lr-c); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Выбранная сторона (повтор) — контур её цвета */
.lrtest__side[aria-pressed="true"] .lrtest__cab,
.lrtest__side[aria-pressed="true"] .lrtest__cup,
.lrtest__mid[aria-pressed="true"] .lrtest__head-c { stroke: var(--lr-c); }

/* Звучит СЕЙЧАС (ставит JS по часам аудиографа) — свечение, конус «качается», кольца бегут */
.lrtest.is-l .lrtest__side--l,
.lrtest.is-r .lrtest__side--r,
.lrtest.is-c .lrtest__mid { color: var(--lr-c); }
.lrtest.is-l .lrtest__side--l .lrtest__art,
.lrtest.is-r .lrtest__side--r .lrtest__art,
.lrtest.is-c .lrtest__mid .lrtest__head { filter: drop-shadow(0 0 14px var(--lr-c)); }
.lrtest.is-l .lrtest__side--l :is(.lrtest__cab, .lrtest__cup),
.lrtest.is-r .lrtest__side--r :is(.lrtest__cab, .lrtest__cup),
.lrtest.is-c .lrtest__mid .lrtest__head-c { stroke: var(--lr-c); }
.lrtest.is-l .lrtest__side--l .lrtest__cone,
.lrtest.is-r .lrtest__side--r .lrtest__cone { fill: var(--lr-c); animation: lrtest-cone .12s ease-in-out infinite alternate; }
.lrtest.is-l .lrtest__side--l .lrtest__ring,
.lrtest.is-r .lrtest__side--r .lrtest__ring,
.lrtest.is-c .lrtest__mid .lrtest__ring { animation: lrtest-ring var(--lr-ring-sec) ease-out infinite; }
.lrtest .lrtest__ring--2 { animation-delay: calc(var(--lr-ring-sec) / 2) !important; }
@keyframes lrtest-ring { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes lrtest-cone { from { transform: scale(.94); } to { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
    .lrtest .lrtest__ring,
    .lrtest .lrtest__cone { animation: none !important; }
}

/* --- Табло (высота зарезервирована: подсказка, вопрос, вывод и легенда фазы меняются без прыжков) --- */
.lrtest__board {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--lr-board-h);
    margin: 10px 0 14px;
    padding: 14px 16px;
    text-align: center;
    background: var(--lr-panel);
    border: 1px solid var(--lr-border);
    border-radius: 12px;
}
.lrtest__status { margin: 0 0 10px; font-size: 16px; line-height: 1.4; color: var(--lr-ink); }
.lrtest__steps { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lrtest__step {
    padding: 4px 12px;
    font-size: 13px;
    color: var(--lr-dim);
    border: 1px solid var(--lr-border);
    border-radius: 999px;
}
.lrtest__step--l { --lr-c: var(--lr-left); }
.lrtest__step--r { --lr-c: var(--lr-right); }
.lrtest__step--c { --lr-c: var(--lr-both); }
.lrtest__step.is-on { color: var(--lr-bg); background: var(--lr-c); border-color: var(--lr-c); font-weight: 600; }
.lrtest__step.is-done { color: var(--lr-c); border-color: var(--lr-c); }
.lrtest:not([data-mode="test"]):not([data-mode="idle"]) .lrtest__steps { visibility: hidden; }

.lrtest__q { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.lrtest__answers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lrtest .lrtest__answer {
    padding: 9px 10px;
    font-size: 14px;
    line-height: 1.25;
    color: var(--lr-ink);
    background: var(--lr-panel-2);
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-btn-radius);
    white-space: normal;
}
.lrtest .lrtest__answer:hover { color: var(--lr-ink); background: var(--lr-border); border-color: var(--lr-dim); }

.lrtest__res-title { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.lrtest[data-result="ok"] .lrtest__res-title { color: var(--lr-ok); }
.lrtest__res-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--lr-muted); }

.lrtest__phase-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.lrtest__chip {
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lr-dim);
    border: 1px solid var(--lr-border);
    border-radius: 999px;
}
.lrtest__chip.is-on { color: var(--lr-bg); background: var(--lr-both); border-color: var(--lr-both); }
.lrtest__phase-hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--lr-muted); }

/* --- Действия --- */
.lrtest__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lrtest .lrtest__run,
.lrtest .lrtest__act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--lr-btn-radius);
}
.lrtest .lrtest__run { min-width: 210px; color: #fff; background: linear-gradient(180deg, var(--lr-run-a), var(--lr-run-b)); border: 1px solid var(--lr-run-b); }
.lrtest .lrtest__run:hover { color: #fff; background: linear-gradient(180deg, var(--lr-run-a), var(--lr-run-a)); border-color: var(--lr-run-b); }
.lrtest .lrtest__act { color: var(--lr-ink); background: var(--lr-panel); border: 1px solid var(--lr-border); }
.lrtest .lrtest__act:hover { color: var(--lr-ink); background: var(--lr-panel-2); border-color: var(--lr-dim); }
.lrtest .lrtest__act[aria-pressed="true"] { color: var(--lr-bg); background: var(--lr-both); border-color: var(--lr-both); }
.lrtest__ic-stop { display: none; }
.lrtest .lrtest__run[aria-pressed="true"] .lrtest__ic-stop { display: block; }
.lrtest .lrtest__run[aria-pressed="true"] .lrtest__ic-play { display: none; }

/* --- Громкость --- */
.lrtest__vol { display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 16px auto 0; color: var(--lr-muted); }
.lrtest__vol-lbl { flex: none; font-size: 14px; }
.lrtest__vol-track { flex: 1 1 auto; min-width: 0; }
.lrtest__range { display: block; width: 100%; height: 22px; background: none; }
.lrtest__range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--lr-left) 0%, var(--lr-both) calc(var(--p, .5) * 100%), var(--lr-border) calc(var(--p, .5) * 100%));
}
.lrtest__range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--lr-border); }
.lrtest__range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--lr-both); }
.lrtest__range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; background: var(--lr-ink); border: 0; border-radius: 50%; }
.lrtest__range::-moz-range-thumb { width: 18px; height: 18px; background: var(--lr-ink); border: 0; border-radius: 50%; }
.lrtest .lrtest__range:focus::-webkit-slider-thumb { box-shadow: none; }
.lrtest .lrtest__range:focus::-moz-range-thumb { box-shadow: none; }

/* ================= Узкая раскладка ================= */
@container lrtest (max-width: 560px) {
    .lrtest__stage { --lr-mid: 72px; }
    .lrtest__board { --lr-board-h: 192px; }
    .lrtest__stage { column-gap: 6px; margin-top: 14px; }
    .lrtest__side-lbl { font-size: 14px; gap: 6px; }
    .lrtest__answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lrtest .lrtest__answer { padding: 8px 6px; font-size: 13px; }
    .lrtest__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lrtest .lrtest__run { grid-column: 1 / -1; min-width: 0; height: 52px; font-size: 17px; }
    .lrtest .lrtest__act { padding: 0 8px; font-size: 14px; }
    .lrtest__top { justify-content: center; }
}
@container lrtest (max-width: 360px) {
    .lrtest .lrtest__seg-btn { padding: 6px 10px; font-size: 13px; }
}