/* Voice Frequency Test 1.0.0 – scoped to .vht */
.vht{--vht-ink:#1d2330;--vht-muted:#5a6272;--vht-line:#dde1e8;--vht-soft:#f7f9fc;--vht-accent:#2455c3;--vht-accent-soft:#e7eefc;--vht-you:#c0561b;--vht-err:#b42318;box-sizing:border-box;max-width:820px;margin:1.2em 0;padding:18px;background:#fff;color:var(--vht-ink);border:1px solid var(--vht-line);border-radius:12px;box-shadow:0 1px 3px rgba(20,30,50,.06);font-size:16px;line-height:1.5}
.vht *,.vht *::before,.vht *::after{box-sizing:inherit}
.vht [hidden]{display:none!important}
.vht .vht-title{margin:0 0 4px;font-size:1.4em;line-height:1.25;color:var(--vht-ink)}
.vht .vht-intro{margin:0 0 12px;color:var(--vht-muted)}
.vht .vht-modes{margin:0 0 10px;padding:0;border:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.vht .vht-modes legend{padding:0;margin:0 0 4px;font-weight:600;font-size:.95em;width:100%}
.vht .vht-modes label{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:600}
.vht .vht-modes label span{font-weight:400;color:var(--vht-muted)}
.vht .vht-modes input{width:18px;height:18px;margin:0;accent-color:var(--vht-accent)}
.vht .vht-prompt p{margin:0 0 12px;padding:10px 12px;background:var(--vht-soft);border-left:3px solid var(--vht-accent);border-radius:0 8px 8px 0}
.vht .vht-prompt q{quotes:"“" "”"}
.vht .vht-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.vht .vht-btn{min-height:44px;padding:9px 18px;font:inherit;font-weight:600;line-height:1.2;color:var(--vht-ink);background:#fff;border:1px solid #b9c0cc;border-radius:8px;cursor:pointer}
.vht .vht-btn:hover{border-color:var(--vht-accent)}
.vht .vht-btn-primary{color:#fff;background:var(--vht-accent);border-color:var(--vht-accent)}
.vht .vht-btn-primary:hover{background:#1c469f}
.vht .vht-btn:disabled{opacity:.5;cursor:not-allowed}
.vht button:focus-visible,.vht input:focus-visible,.vht summary:focus-visible{outline:3px solid #8fb0f0;outline-offset:2px}
.vht .vht-status{margin:0 0 12px;min-height:1.5em;font-size:.95em;color:var(--vht-muted)}
.vht .vht-error{color:var(--vht-err)!important;font-weight:600}
.vht .vht-live{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 16px;padding:12px 14px;background:var(--vht-soft);border:1px solid var(--vht-line);border-radius:10px}
.vht .vht-label{display:block;font-size:.8em;color:var(--vht-muted)}
.vht .vht-live-main output{font-size:2.4em;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums}
.vht .vht-unit{margin-left:4px;font-weight:600;color:var(--vht-muted)}
.vht .vht-live-side{display:flex;gap:18px;font-variant-numeric:tabular-nums}
.vht .vht-live-side output{font-size:1.25em;font-weight:700}
.vht .vht-meter{flex-basis:100%;height:6px;background:#e3e7ee;border-radius:3px;overflow:hidden}
.vht .vht-meter span{display:block;height:100%;width:0;background:var(--vht-accent)}
.vht .vht-trace{display:block;width:100%;height:160px;margin:12px 0;background:#fff;border:1px solid var(--vht-line);border-radius:10px}
.vht .vht-result{padding:14px;border:2px solid var(--vht-accent-soft);border-radius:10px}
.vht .vht-summary{margin:0 0 12px;font-size:1.15em;font-weight:700}
.vht .vht-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.vht .vht-metrics div{padding:8px 10px;background:var(--vht-soft);border-radius:8px;min-width:0}
.vht .vht-metrics .vht-key{grid-column:1/-1;background:var(--vht-accent-soft)}
.vht .vht-metrics dt{font-size:.82em;color:var(--vht-muted)}
.vht .vht-metrics dd{margin:2px 0 0;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vht .vht-metrics .vht-key dd{font-size:1.35em}
.vht .vht-meaning{margin:0 0 12px}
.vht .vht-meaning:empty{display:none}
.vht .vht-scale{position:relative;height:58px;margin:4px 4px 26px;border-bottom:2px solid #b9c0cc}
.vht .vht-band{position:absolute;top:22px;height:24px;display:flex;align-items:center;justify-content:center;font-size:.72em;font-weight:700;white-space:nowrap;overflow:hidden;color:var(--vht-accent);background:var(--vht-accent-soft);border:1px solid var(--vht-accent);border-radius:5px}
.vht .vht-marker{position:absolute;top:0;bottom:-2px;width:0;border-left:3px solid var(--vht-you)}
.vht .vht-marker span{position:absolute;top:-2px;left:4px;font-size:.75em;font-weight:700;color:var(--vht-you);white-space:nowrap}
.vht .vht-tick{position:absolute;bottom:-20px;transform:translateX(-50%);font-size:.72em;color:var(--vht-muted)}
.vht .vht-legend{margin:0 0 10px;padding-left:18px;font-size:.85em;color:var(--vht-muted)}
.vht .vht-manual{margin:14px 0 0;padding:10px 12px;border:1px solid var(--vht-line);border-radius:10px}
.vht .vht-manual summary{cursor:pointer;font-weight:600;min-height:28px}
.vht .vht-manual-form{margin:10px 0 0}
.vht .vht-manual-form label{display:block;font-weight:600;font-size:.95em;margin:0 0 4px}
.vht .vht-inline{display:flex;flex-wrap:wrap;gap:8px}
.vht .vht-inline input{flex:1 1 140px;min-height:44px;padding:8px 10px;font:inherit;border:1px solid #b9c0cc;border-radius:8px}
.vht .vht-manual-out{display:block;margin:8px 0 0}
.vht .vht-small{margin:12px 0 0;font-size:.85em;color:var(--vht-muted)}
@media (max-width:480px){.vht{padding:14px}.vht .vht-metrics{grid-template-columns:1fr}.vht .vht-live-main output{font-size:2em}}
