/* Bass test (bass_test). Свой вид: графитовый «усилитель» с янтарной подсветкой (решение владельца
   2026-10-09: отдельный инструмент, «оформи по-своему»). Раскладка — container query по ширине самого
   инструмента: широкая — сабвуфер слева, управление справа; узкая — столбиком. Префикс .basst. */

.basst {
    /* --- токены --- */
    --bs-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-bg: #17181b;
    --bs-bg-2: #222327;
    --bs-panel: #232428;
    --bs-panel-2: #2c2d32;
    --bs-border: #36373d;
    --bs-ink: #f3f1ec;
    --bs-muted: #a3a09a;
    --bs-dim: #64625e;
    --bs-amber: #ffb020;
    --bs-amber-2: #ff8a00;
    --bs-amber-ink: #1b1306;
    --bs-glow: rgba(255, 166, 0, .35);
    --bs-box: #101114;
    --bs-box-edge: #2e2f35;
    --bs-cone: #1b1c20;
    --bs-cone-ring: #2b2c31;
    --bs-surround: #0b0b0d;
    --bs-cap: #2a2b30;
    --bs-lost: #e5534b;
    --bs-radius: 14px;
    --bs-btn-radius: 10px;
    --bs-sub: 260px;
    --bs-bar-h: 92px;

    container: basst / inline-size;
    max-width: 860px;
    margin: 0 auto;
    padding: 20px clamp(12px, 3vw, 24px) 20px;
    font-family: var(--bs-font);
    color: var(--bs-ink);
    background: linear-gradient(180deg, var(--bs-bg-2) 0%, var(--bs-bg) 100%);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    -webkit-tap-highlight-color: transparent;
}

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

/* --- Верх: сабвуфер | управление --- */
.basst__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 28px;
}

/* Сабвуфер */
.basst__sub { width: var(--bs-sub); }
.basst__sub-svg { display: block; width: 100%; height: auto; overflow: visible; }
.basst__box { fill: var(--bs-box); stroke: var(--bs-box-edge); stroke-width: 2; }
.basst__screw { fill: var(--bs-cone-ring); }
.basst__frame { fill: #0d0e10; stroke: var(--bs-box-edge); stroke-width: 3; }
.basst__cone { transform-box: view-box; transform-origin: 120px 120px; }
.basst__surround { fill: var(--bs-surround); stroke: var(--bs-cone-ring); stroke-width: 6; }
.basst__cone-body { fill: var(--bs-cone); }
.basst__cone-ring { fill: none; stroke: var(--bs-cone-ring); stroke-width: 2; }
.basst__cap { fill: var(--bs-cap); stroke: var(--bs-box-edge); stroke-width: 1.5; }
.basst[data-playing="1"] .basst__frame { stroke: var(--bs-amber); }
.basst[data-playing="1"] .basst__sub-svg { filter: drop-shadow(0 0 18px var(--bs-glow)); }
.basst[data-playing="1"] .basst__cap { stroke: var(--bs-amber); }

/* Частота */
.basst__readout { display: flex; align-items: center; justify-content: center; gap: 14px; }
.basst__num { display: inline-flex; align-items: baseline; }
.basst__hz {
    width: 4.2ch;
    padding: 0;
    font-family: var(--bs-font);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--bs-ink);
    caret-color: var(--bs-amber);
    background: none;
    border: 0;
    outline: none;
}
.basst__hz::selection { background: var(--bs-amber); color: var(--bs-amber-ink); }
.basst__unit { margin-left: 8px; font-size: 26px; font-weight: 600; color: var(--bs-muted); }
.basst[data-playing="1"] .basst__hz { color: var(--bs-amber); }

.basst .basst__step {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--bs-ink);
    background: var(--bs-panel);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-btn-radius);
}
.basst .basst__step svg { width: 14px; height: 14px; fill: currentColor; }
.basst .basst__step:hover { color: var(--bs-ink); background: var(--bs-panel-2); border-color: var(--bs-border); }

/* Пуск */
.basst .basst__play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 50px;
    margin-top: 14px;
    font-size: 17px;
    font-weight: 700;
    color: var(--bs-amber-ink);
    background: linear-gradient(180deg, var(--bs-amber), var(--bs-amber-2));
    border: 0;
    border-radius: var(--bs-btn-radius);
}
.basst .basst__play:hover { color: var(--bs-amber-ink); background: var(--bs-amber); }
.basst__ic-stop { display: none; }
.basst .basst__play[aria-pressed="true"] .basst__ic-stop { display: block; }
.basst .basst__play[aria-pressed="true"] .basst__ic-play { display: none; }

/* Ползунок со шкалой */
.basst__slider { position: relative; margin-top: 18px; padding-bottom: 20px; }
.basst__range { display: block; width: 100%; height: 24px; background: none; }
.basst__range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bs-amber-2) 0%, var(--bs-amber) calc(var(--p, .5) * 100%), var(--bs-border) calc(var(--p, .5) * 100%));
}
.basst__range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--bs-border); }
.basst__range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--bs-amber); }
.basst__range::-webkit-slider-thumb { width: 14px; height: 26px; margin-top: -9px; background: var(--bs-ink); border: 0; border-radius: 4px; }
.basst__range::-moz-range-thumb { width: 14px; height: 26px; background: var(--bs-ink); border: 0; border-radius: 4px; }
.basst .basst__range:focus::-webkit-slider-thumb { box-shadow: none; }
.basst .basst__range:focus::-moz-range-thumb { box-shadow: none; }
.basst__scale { position: absolute; left: 7px; right: 7px; bottom: 0; height: 16px; }
.basst__tick {
    position: absolute;
    left: calc(var(--p) * 100%);
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--bs-muted);
    font-variant-numeric: tabular-nums;
}

/* Кнопки-частоты и проход */
.basst__presets { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.basst .basst__preset,
.basst .basst__sweep {
    height: 40px;
    padding: 0 6px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-ink);
    background: var(--bs-panel);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-btn-radius);
}
.basst .basst__preset:hover,
.basst .basst__sweep:hover { color: var(--bs-ink); background: var(--bs-panel-2); border-color: var(--bs-dim); }
.basst .basst__preset.is-on,
.basst .basst__sweep.is-on { color: var(--bs-amber-ink); background: var(--bs-amber); border-color: var(--bs-amber); }
.basst .basst__sweep { display: inline-flex; align-items: center; justify-content: center; gap: 8px; grid-column: 1 / -1; font-weight: 500; }

/* --- Лесенка --- */
.basst__ladder {
    margin-top: 20px;
    padding: 14px 16px 12px;
    background: var(--bs-panel);
    border: 1px solid var(--bs-border);
    border-radius: 12px;
}
.basst__ladder-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.basst__ladder-title { font-size: 16px; font-weight: 700; }
.basst__ladder-btns { display: flex; gap: 8px; }
.basst .basst__lad-run,
.basst .basst__lad-lost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--bs-btn-radius);
}
.basst .basst__lad-run { color: var(--bs-ink); background: var(--bs-panel-2); border: 1px solid var(--bs-dim); }
.basst .basst__lad-run:hover { color: var(--bs-ink); background: var(--bs-border); border-color: var(--bs-dim); }
.basst .basst__lad-run[aria-pressed="true"] { color: var(--bs-amber); border-color: var(--bs-amber); }
.basst .basst__lad-lost { color: var(--bs-amber-ink); background: var(--bs-amber); border: 1px solid var(--bs-amber); }
.basst .basst__lad-lost:hover { color: var(--bs-amber-ink); background: var(--bs-amber-2); border-color: var(--bs-amber-2); }
.basst .basst__lad-lost:disabled { color: var(--bs-dim); background: transparent; border-color: var(--bs-border); opacity: 1; }

.basst__bars {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 6px;
    height: calc(var(--bs-bar-h) + 22px);
    margin-top: 14px;
}
/* Столбик — кнопка: клик запускает лесенку с этой ступени */
.basst__bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    min-width: 0;
    height: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.basst__bar:focus-visible { outline: 2px solid var(--bs-dim); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) {
    .basst__bar:hover .basst__bar-col { border-color: var(--bs-amber); }
    .basst__bar:hover .basst__bar-lbl { color: var(--bs-ink); }
}
.basst__bar-col {
    display: block;
    height: calc(var(--h) * var(--bs-bar-h));
    background: var(--bs-panel-2);
    border: 1px solid var(--bs-border);
    border-radius: 6px 6px 3px 3px;
    transition: background-color .15s, border-color .15s;
}
.basst__bar-lbl { margin-top: 4px; font-size: 12px; text-align: center; color: var(--bs-muted); font-variant-numeric: tabular-nums; }
.basst__bar.is-heard .basst__bar-col { background: rgba(255, 176, 32, .35); border-color: var(--bs-amber-2); }
.basst__bar.is-on .basst__bar-col { background: var(--bs-amber); border-color: var(--bs-amber); box-shadow: 0 0 14px var(--bs-glow); }
.basst__bar.is-on .basst__bar-lbl { color: var(--bs-amber); font-weight: 700; }
.basst__bar.is-lost .basst__bar-col { background: transparent; border-style: dashed; border-color: var(--bs-dim); }
.basst__bar.is-lost:not(.is-lost ~ .is-lost) .basst__bar-col { border-color: var(--bs-lost); }

.basst__verdict { min-height: 3em; margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--bs-muted); }
.basst[data-verdict] .basst__verdict { color: var(--bs-ink); }

/* --- Громкость --- */
.basst__vol { display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 16px auto 0; color: var(--bs-muted); }
.basst__vol-lbl { flex: none; font-size: 14px; }
.basst__vol-track { flex: 1 1 auto; min-width: 0; }
.basst__range--vol { height: 22px; }
.basst__range--vol::-webkit-slider-runnable-track { height: 6px; }
.basst__range--vol::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; }
.basst__range--vol::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
    .basst__cone { transform: none !important; }
}

/* ================= Узкая раскладка ================= */
@container basst (max-width: 640px) {
    .basst__main { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .basst__sub { --bs-sub: 190px; justify-self: center; }
    .basst__hz { font-size: 54px; }
    /* кнопки-частоты на мобайле не нужны (владелец 2026-10-09): частоту ставят ползунок, стрелки и лесенка; проход остаётся */
    .basst__presets { grid-template-columns: minmax(0, 1fr); }
    .basst .basst__preset { display: none; }
    .basst .basst__lad-run,
    .basst .basst__lad-lost { height: auto; min-height: 40px; padding: 6px 8px; white-space: normal; line-height: 1.2; }
    .basst__ladder-btns { width: 100%; }
    .basst .basst__lad-run,
    .basst .basst__lad-lost { flex: 1 1 0; justify-content: center; padding: 0 8px; }
    .basst__bars { gap: 3px; --bs-bar-h: 76px; }
    .basst__bar-lbl { font-size: 10px; }
    .basst__verdict { min-height: 4.4em; }
}