/* Hearing test (hearing_test). Свой вид: светлый «аудиометр» — мятная подложка, бирюзовый акцент,
   циферблат 8-20 кГц со стрелкой; услышанное — бирюзовой дугой, неуслышанная ступень — коралловой
   точкой. Стадии (idle | calib | test | result) переключают кнопки панели через data-stage.
   Раскладка — container query по ширине самого инструмента. Префикс .hrtest. */

.hrtest {
    /* --- токены --- */
    --hr-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --hr-bg: #f4fbf9;
    --hr-bg-2: #e6f3ef;
    --hr-panel: #ffffff;
    --hr-border: #cfe3dd;
    --hr-ink: #12302c;
    --hr-muted: #587570;
    --hr-dim: #9db5b0;
    --hr-track: #d8e9e4;
    --hr-teal: #0f8f86;
    --hr-teal-2: #0b726b;
    --hr-teal-ink: #ffffff;
    --hr-teal-soft: rgba(15, 143, 134, .14);
    --hr-glow: rgba(15, 143, 134, .45);
    --hr-miss: #e0634e;
    --hr-warn-bg: #fff3e6;
    --hr-warn-ink: #8a4b12;
    --hr-radius: 14px;
    --hr-btn-radius: 10px;
    --hr-dial-w: 500px;
    --hr-panel-min: 168px;

    container: hrtest / inline-size;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px clamp(12px, 3vw, 24px) 18px;
    font-family: var(--hr-font);
    color: var(--hr-ink);
    background: linear-gradient(180deg, var(--hr-bg) 0%, var(--hr-bg-2) 100%);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-radius);
    -webkit-tap-highlight-color: transparent;
    transition: border-color .25s, box-shadow .25s;
}
/* Идёт тест — вся рамка инструмента бирюзовая с ореолом: режим видно с первого взгляда */
.hrtest[data-stage="test"] { border-color: var(--hr-teal); box-shadow: 0 0 0 3px var(--hr-teal-soft); }

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

/* --- Циферблат --- */
.hrtest__dial {
    position: relative;
    max-width: var(--hr-dial-w);
    margin: 0 auto;
}
.hrtest__dial-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hrtest__track { fill: none; stroke: var(--hr-track); stroke-width: 14; stroke-linecap: round; }
.hrtest__heard {
    fill: none; stroke: var(--hr-teal); stroke-width: 14; stroke-linecap: round;
    transition: stroke-dasharray .35s ease;
}
.hrtest__tick { stroke: var(--hr-dim); stroke-width: 2; stroke-linecap: round; }
.hrtest__lbl { fill: var(--hr-muted); font-size: 13px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.hrtest__dot { fill: var(--hr-panel); stroke: var(--hr-dim); stroke-width: 2; transition: fill .2s, stroke .2s; }
.hrtest__dot.is-heard { fill: var(--hr-teal); stroke: var(--hr-teal-2); }
.hrtest__dot.is-missed { fill: var(--hr-miss); stroke: var(--hr-miss); }
.hrtest__dot.is-on { stroke: var(--hr-teal); stroke-width: 3.5; }
.hrtest[data-pulse="1"] .hrtest__dot.is-on { fill: var(--hr-teal); filter: drop-shadow(0 0 6px var(--hr-glow)); }

.hrtest__needle {
    transform-box: view-box;
    transform-origin: 200px 200px;
    transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.hrtest__needle path { fill: var(--hr-ink); stroke: var(--hr-ink); stroke-width: 2; stroke-linejoin: round; }
.hrtest[data-stage="test"] .hrtest__needle path { fill: var(--hr-teal); stroke: var(--hr-teal); }

/* Число в середине: над центром стрелки */
.hrtest__readout {
    position: absolute;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    width: 58%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none;
}
.hrtest__freq {
    font-size: 44px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hrtest__unit { font-size: 20px; font-weight: 600; color: var(--hr-muted); }
.hrtest__sub { margin-top: 2px; min-height: 1.35em; font-size: 14px; color: var(--hr-muted); }
.hrtest__waves { width: 30px; height: 30px; margin-bottom: 2px; color: var(--hr-dim); transition: color .12s; }
.hrtest__waves svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hrtest__waves circle { fill: currentColor; stroke: none; }
.hrtest[data-pulse="1"] .hrtest__waves { color: var(--hr-teal); }

/* --- Панель под циферблатом --- */
.hrtest__panel {
    margin-top: 10px;
    padding: 16px;
    background: var(--hr-panel);
    border: 1px solid var(--hr-border);
    border-radius: 12px;
    min-height: var(--hr-panel-min);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Плашка стадии: в каждой стадии своя иконка и свой цвет; высота одна, панель не прыгает */
.hrtest__status {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    min-height: 28px;
    padding: 3px 13px 3px 10px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--hr-bg-2);
    color: var(--hr-teal-2);
    white-space: nowrap;
}
.hrtest__status .hrtest__ic { width: 17px; height: 17px; }
.hrtest__st-dot, .hrtest__st-ok { display: none; }
.hrtest__st-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: hrtest-blink 1.1s ease-in-out infinite; }
.hrtest[data-stage="test"] .hrtest__status { background: var(--hr-teal); color: var(--hr-teal-ink); }
.hrtest[data-stage="test"] .hrtest__st-hp, .hrtest[data-stage="result"] .hrtest__st-hp { display: none; }
.hrtest[data-stage="test"] .hrtest__st-dot { display: block; }
.hrtest[data-stage="result"] .hrtest__st-ok { display: block; }
.hrtest__progress { font-weight: 500; opacity: .9; font-variant-numeric: tabular-nums; }
.hrtest__progress:empty { display: none; }
.hrtest__progress::before { content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 8px 0 1px; vertical-align: -1px; background: currentColor; opacity: .5; }

.hrtest__msg { margin: 0; min-height: 2.8em; font-size: 15px; line-height: 1.4; color: var(--hr-ink); text-align: center; }
.hrtest[data-stage="result"] .hrtest__msg { display: none; }
/* Во время теста вопрос крупнее, а стрелка под ним качается вниз — к кнопкам ответа */
.hrtest[data-stage="test"] .hrtest__msg { font-size: 16.5px; font-weight: 600; min-height: calc(2.8 * 15px); }
.hrtest[data-stage="test"] .hrtest__msg::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    vertical-align: -3px;
    background: var(--hr-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M5.5 12.5L12 19l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M5.5 12.5L12 19l6.5-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: hrtest-bob 1s ease-in-out infinite;
}

/* Кнопки ответа во время теста — в «дышащей» рамке: сюда жать. Рамка — outline, места не занимает */
.hrtest[data-stage="test"] .hrtest__btns--test {
    border-radius: 12px;
    background: var(--hr-teal-soft);
    box-shadow: 0 0 0 6px var(--hr-teal-soft);
    outline: 2px dashed var(--hr-teal);
    outline-offset: 6px;
    animation: hrtest-ring 1.6s ease-in-out infinite;
}
/* Уточняющая ступень: плашка янтарная — «ещё одна проверка», а не конец */
.hrtest[data-refine="1"] .hrtest__status { background: var(--hr-warn-bg); color: var(--hr-warn-ink); }

@keyframes hrtest-blink { 50% { opacity: .25; } }
@keyframes hrtest-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes hrtest-ring { 0%, 100% { outline-color: var(--hr-teal); } 50% { outline-color: rgba(15, 143, 134, .25); } }

.hrtest__result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.hrtest__result[hidden] { display: none; }
.hrtest__age-lbl { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hr-muted); }
.hrtest__age { font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--hr-teal-2); }
.hrtest__limit { max-width: 560px; font-size: 14.5px; line-height: 1.45; color: var(--hr-muted); }
.hrtest[data-unsure="1"] .hrtest__limit { color: var(--hr-warn-ink); }
.hrtest__tip { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; max-width: 560px; font-size: 13.5px; line-height: 1.4; color: var(--hr-teal-2); text-align: left; }
.hrtest__tip[hidden] { display: none; }
.hrtest__tip .hrtest__ic { width: 18px; height: 18px; }
.hrtest[data-stage="result"][data-age=""] #hrtest-share { display: none; }

.hrtest__btns { display: none; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 56px; }
.hrtest[data-stage="idle"] .hrtest__btns--idle,
.hrtest[data-stage="calib"] .hrtest__btns--idle,
.hrtest[data-stage="test"] .hrtest__btns--test,
.hrtest[data-stage="result"] .hrtest__btns--result { display: flex; }

.hrtest__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    min-width: 170px;
    padding: 8px 20px;
    border-radius: var(--hr-btn-radius);
    font-size: 16px;
    font-weight: 600;
    border: 1.5px solid var(--hr-border);
    background: var(--hr-panel);
    color: var(--hr-ink);
    box-shadow: 0 1px 2px rgba(18, 48, 44, .08);
}
@media (hover: hover) { .hrtest__btn:hover { border-color: var(--hr-teal); color: var(--hr-teal-2); } }
.hrtest__btn--main, .hrtest__btn--yes {
    background: var(--hr-teal);
    border-color: var(--hr-teal);
    color: var(--hr-teal-ink);
}
@media (hover: hover) { .hrtest__btn--main:hover, .hrtest__btn--yes:hover { background: var(--hr-teal-2); border-color: var(--hr-teal-2); color: var(--hr-teal-ink); } }
.hrtest__btn--yes, .hrtest__btn--no { min-width: 200px; min-height: 56px; font-size: 18px; }
@media (hover: hover) { .hrtest__btn--no:hover { border-color: var(--hr-miss); color: var(--hr-miss); } }
.hrtest__btn--ghost[aria-pressed="true"] { border-color: var(--hr-teal); background: var(--hr-teal-soft); color: var(--hr-teal-2); }
.hrtest__btn:active { transform: translateY(1px); }

/* Низ панели: громкость | стоп (только во время теста) */
.hrtest__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--hr-track);
}
.hrtest__vol { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--hr-muted); }
.hrtest__vol-lbl { font-size: 14px; margin: 0; }
.hrtest__vol-track { flex: 1 1 auto; min-width: 80px; max-width: 280px; display: flex; }
/* место под «Стоп» держится всегда (visibility), чтобы панель не прыгала между стадиями */
.hrtest__stop { display: inline-flex; visibility: hidden; }
.hrtest[data-stage="test"] .hrtest__stop { visibility: visible; }
.hrtest__stop {
    padding: 4px 12px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid var(--hr-border);
    background: transparent;
    color: var(--hr-muted);
}
@media (hover: hover) { .hrtest__stop:hover { color: var(--hr-miss); border-color: var(--hr-miss); } }

/* Ползунок громкости: дорожка и заливка по --p */
.hrtest__range { height: 22px; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.hrtest__range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, var(--hr-teal) calc(var(--p) * 100%), var(--hr-track) calc(var(--p) * 100%));
}
.hrtest__range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--hr-track); }
.hrtest__range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--hr-teal); }
.hrtest__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
    background: var(--hr-panel); border: 2px solid var(--hr-teal); box-shadow: none;
}
.hrtest__range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--hr-panel); border: 2px solid var(--hr-teal); }
.hrtest__vol-track .hrtest__range { width: 100%; }

/* --- Узко --- */
@container hrtest (max-width: 520px) {
    .hrtest__freq { font-size: 34px; }
    .hrtest__unit { font-size: 16px; }
    .hrtest__sub { font-size: 12.5px; }
    .hrtest__waves { width: 24px; height: 24px; }
    .hrtest__readout { width: 64%; bottom: 11%; }
    .hrtest__panel { padding: 12px; }
    .hrtest__msg { min-height: 4.2em; font-size: 14.5px; }
    .hrtest__btns { flex-wrap: nowrap; gap: 8px; }
    .hrtest__btn, .hrtest__btn--yes, .hrtest__btn--no {
        flex: 1 1 0; min-width: 0; min-height: 56px; padding: 6px 10px; font-size: 15.5px; line-height: 1.2; white-space: normal;
    }
    .hrtest__btn--yes, .hrtest__btn--no { font-size: 16.5px; }
    .hrtest__age { font-size: 26px; }
    .hrtest__foot { flex-wrap: wrap; gap: 8px 12px; }
    .hrtest__vol { flex: 1 1 auto; }
    .hrtest__stop { margin-left: auto; }
    .hrtest__status { font-size: 12.5px; }
    .hrtest[data-stage="test"] .hrtest__msg { font-size: 15.5px; min-height: calc(4.2 * 14.5px); }
    .hrtest__vol-track { max-width: none; }
}
@container hrtest (max-width: 380px) {
    .hrtest__freq { font-size: 28px; }
    .hrtest__sub { font-size: 12px; }
    .hrtest__readout { bottom: 9%; width: 70%; }
}

@media (prefers-reduced-motion: reduce) {
    .hrtest__needle, .hrtest__heard, .hrtest__dot { transition: none; }
    .hrtest__st-dot, .hrtest[data-stage="test"] .hrtest__msg::after, .hrtest[data-stage="test"] .hrtest__btns--test { animation: none; }
}