/* Voice tools (/voice, /vocal-range-test, /hum-to-score, /ear-test). Loaded only by those pages, after system.css. */
/* Voice range (/vocal-range-test): the voice dial, scoped to its page. Its own short names map onto the theme tokens. */
.voice-range { --bg:var(--ground); --card:var(--paper); --line:var(--border); --line2:#c9d4e0; --ink:var(--text); --ink2:var(--secondary); --mut:var(--secondary); --a1:var(--action); --a2:var(--link); --a3:var(--action); --ok:#2f855a; --bad:#c2410c; --on:#fff; --display:var(--serif); --ui:var(--sans); --dim:rgba(16,35,66,.07); --soft:transparent; --acc-soft:rgba(57,116,174,.07); --acc-line:rgba(57,116,174,.35); --acc-text:var(--link); --shadow:0 10px 30px #17385a12; }
[data-theme="dark"] .voice-range { --line2:#3a4048; --dim:rgba(255,255,255,.08); --ok:#4fbf8f; --acc-soft:rgba(143,184,224,.08); --acc-line:rgba(143,184,224,.35); --shadow:0 10px 30px rgba(0,0,0,.4); }
.voice-range { padding-block:1.5rem 3rem; }
.voice-range .breadcrumbs a { color:var(--secondary); }
.voice-range .voice-range-title { text-align:center; max-width:40rem; margin:0 auto; }
.voice-range .voice-range-title h1 { margin:1rem 0 .4rem; }
.voice-range .voice-range-title p { color:var(--secondary); margin:0 0 1.25rem; }
.voice-range .card { max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:1.2rem 1.1rem 1.1rem; }
.voice-range .kicker { margin:0; font-size:.72rem; color:var(--mut); font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-align:center; }
.voice-range #big { margin:.25rem 0 0; font-family:var(--display); font-size:clamp(1.9rem,8vw,2.5rem); font-weight:500; letter-spacing:-.03em; line-height:1.1; min-height:1.15em; text-align:center; }
.voice-range #big .r { color:var(--link); }
.voice-range #big .t { font-family:var(--ui); font-size:.42em; color:var(--ink2); font-weight:550; letter-spacing:0; }
.voice-range #big .near { display:block; font-family:var(--ui); font-size:.32em; color:var(--mut); letter-spacing:0; margin-top:.3rem; }
.voice-range #dial { display:block; width:100%; height:auto; margin:.8rem 0 .3rem; touch-action:manipulation; }
.voice-range .types { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.3rem; }
.voice-range .types span { text-align:center; font-size:.7rem; font-weight:550; color:var(--mut); border:1px solid var(--line); border-radius:99px; padding:.32rem .1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.voice-range .types span.on { background:var(--action); color:#fff; border-color:var(--action); }
.voice-range .types span.near { border-color:var(--link); color:var(--link); }
.voice-range #status { text-align:center; min-height:1.5em; margin:.9rem 0 .2rem; font-family:var(--serif); font-size:1.1rem; color:var(--ink); }
.voice-range #status.ok { color:var(--ok); }
.voice-range #status.wow { color:var(--link); }
.voice-range #hint { text-align:center; color:var(--mut); font-size:.9rem; margin:0 0 .7rem; }
.voice-range .btns { display:grid; gap:.5rem; margin-top:.5rem; }
.voice-range button { font:inherit; font-weight:550; border-radius:6px; border:1px solid transparent; min-height:2.875rem; padding:.7rem 1rem; cursor:pointer; font-size:.95rem; -webkit-tap-highlight-color:transparent; }
.voice-range button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.voice-range .main { color:#fff; background:var(--action); border-color:var(--action); }
.voice-range .main:hover { background:var(--action-hover); }
.voice-range .main.soft { background:var(--paper); color:var(--link); border-color:#9eb6d2; }
[data-theme="dark"] .voice-range .main.soft { border-color:#45576b; }
.voice-range .main.rec { background:var(--paper); color:var(--text); border-color:var(--line2); }
.voice-range .ghost { background:transparent; color:var(--link); }
.voice-range .foot { color:var(--mut); font-size:.78rem; text-align:center; margin:1rem auto 0; max-width:560px; }
.voice-range .ver { font-size:.62rem; border:1px solid var(--line); border-radius:99px; padding:0 .4rem; margin-left:.3rem; }
.voice-range dialog#res { width:min(440px, calc(100vw - 24px)); margin:auto; max-height:calc(100vh - 96px); max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border:1px solid var(--line); border-radius:10px; padding:0; overflow:auto; background:var(--card); color:var(--ink); box-shadow:0 20px 50px rgba(10,20,40,.25); }
.voice-range dialog#res::backdrop { background:rgba(10,18,32,.55); }
.voice-range .m-top { padding:1.1rem 1.1rem .9rem; text-align:center; position:sticky; top:0; z-index:3; background:var(--card); border-bottom:1px solid var(--line); }
.voice-range .m-acts { display:flex; gap:.5rem; justify-content:center; margin-top:.75rem; }
.voice-range .m-acts button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
.voice-range .m-acts .soft { background:var(--paper); color:var(--link); border-color:#9eb6d2 !important; }
[data-theme="dark"] .voice-range .m-acts .soft { border-color:#45576b !important; }
.voice-range .m-acts #m-save { flex:1.4; max-width:220px; }
.voice-range .m-acts #m-again { flex:1; max-width:160px; }
.voice-range .m-top .x { position:absolute; right:.45rem; top:.4rem; background:transparent; color:var(--ink2); font-size:1.4rem; min-height:0; padding:.2rem .6rem; }
.voice-range .m-top small { display:block; font-weight:600; color:var(--mut); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.voice-range #m-range { font-family:var(--display); font-size:2.4rem; font-weight:500; letter-spacing:-.03em; line-height:1.1; margin:.25rem 0 .1rem; color:var(--link); }
.voice-range #m-type { font-family:var(--serif); font-size:1.15rem; }
.voice-range #m-type span { display:block; font-family:var(--sans); font-size:.8rem; color:var(--mut); }
.voice-range #m-cheer { margin:.45rem auto 0; max-width:26em; font-size:.9rem; line-height:1.4; color:var(--ink); text-wrap:balance; }
.voice-range #m-cheer small { display:block; color:var(--ink2); font-size:.82rem; margin-top:.15rem; text-transform:none; letter-spacing:0; font-weight:400; }
.voice-range .m-body { padding:.8rem 1.2rem 1.8rem; }
.voice-range #m-banner { text-align:center; font-weight:600; color:#fff; background:var(--action); border-radius:6px; padding:.5rem .7rem; margin-bottom:.9rem; }
.voice-range .m-h { margin:.8rem 0 .3rem; font-family:var(--serif); font-size:1.05rem; font-weight:500; }
.voice-range .match { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 .6rem; align-items:center; padding:.45rem 0; border-top:1px solid var(--line); }
.voice-range .match b { font-weight:600; }
.voice-range .match small { grid-column:1; color:var(--mut); font-size:.76rem; }
.voice-range .match .pct { grid-row:1 / span 2; grid-column:2; font-weight:650; color:var(--link); font-variant-numeric:tabular-nums; }
.voice-range .match .bar { grid-column:1 / -1; position:relative; height:6px; margin-top:.3rem; border-radius:99px; background:var(--dim); }
.voice-range .match .bar i { position:absolute; top:0; bottom:0; border-radius:99px; }
.voice-range .match .bar .s { background:var(--line2); }
.voice-range .match .bar .u { background:var(--action); height:3px; top:1.5px; }
.voice-range .m-note { color:var(--mut); font-size:.72rem; margin:.6rem 0 0; }
.voice-range .m-facts { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:1rem 0 .2rem; }
.voice-range .m-facts div { border:1px solid var(--line); border-radius:6px; padding:.6rem .75rem; }
.voice-range .m-facts small { display:block; color:var(--mut); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.voice-range .m-facts b { font-family:var(--serif); font-size:1.15rem; font-weight:500; }
.voice-range .m-badges { display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; margin:1rem 0; }
.voice-range .m-badges span { font-size:.76rem; font-weight:550; border-radius:99px; padding:.3rem .7rem; color:var(--link); border:1px solid var(--acc-line); background:var(--acc-soft); }
.voice-range .m-badges span.no { color:var(--mut); border-color:var(--line); background:transparent; }
.confetti { position:fixed; top:-1rem; width:7px; height:13px; border-radius:2px; pointer-events:none; z-index:2147483647; animation:voice-range-fall linear forwards; }
@keyframes voice-range-fall { to { transform:translateY(110vh) rotate(600deg); } }
.voice-range .voice-guide { max-width:60rem; margin:3rem auto 0; border-top:1px solid var(--border); padding-top:1.5rem; }
.voice-range .voice-guide > p { color:var(--secondary); max-width:65ch; }
.voice-range .voice-guide dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem 2rem; margin:1.25rem 0 0; }
.voice-range .voice-guide dt { font-family:var(--serif); font-size:1.2rem; }
.voice-range .voice-guide dd { margin:.25rem 0 0; color:var(--secondary); font-size:.9rem; line-height:1.55; }
@media (max-width:700px) { .voice-range .voice-guide dl { grid-template-columns:1fr; }
.voice-range .voice-range-title h1 { font-size:2rem; } }
@media (max-width:420px) { .voice-range #m-range { font-size:2.1rem; }
.voice-range .m-top { padding:.9rem .9rem .8rem; } }
/* hub and cross-links */
.voice-tools { list-style:none; margin:1.5rem auto 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; max-width:64rem; }
.voice-tools a { display:flex; flex-direction:column; gap:.5rem; height:100%; padding:1.4rem 1.3rem; border:1px solid var(--border); border-radius:8px; background:var(--paper); color:var(--text); text-decoration:none; transition:box-shadow .2s, transform .2s; }
.voice-tools a:hover { box-shadow:0 10px 30px #17385a12; transform:translateY(-2px); }
.voice-tools h2 { margin:.2rem 0 0; font-size:1.5rem; }
.voice-tools p { margin:0; color:var(--secondary); font-size:.92rem; line-height:1.6; flex:1; }
.voice-tools .journey-cta { color:var(--link); font-size:.85rem; }
.voice-tools .tool-icon svg { width:34px; height:34px; color:var(--link); }
.voice-more { max-width:60rem; margin:2.5rem auto 0; border-top:1px solid var(--border); padding-top:1.25rem; }
.voice-more h2 { font-size:1.3rem; margin:0 0 .75rem; }
.voice-more ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.voice-more a { display:block; padding:.9rem 1rem; border:1px solid var(--border); border-radius:6px; background:var(--paper); color:var(--text); text-decoration:none; }
.voice-more a:hover { border-color:var(--link); }
.voice-more b { display:block; font-family:var(--serif); font-weight:500; font-size:1.1rem; color:var(--link); }
.voice-more span { color:var(--secondary); font-size:.85rem; }
@media (max-width:700px) { .voice-tools, .voice-more ul { grid-template-columns:1fr; } }
/* hum to score */
.voice-hum .hum-card { text-align:center; padding:2rem 1.2rem 1.4rem; }
.voice-hum .hum-rec { --lvl:0; width:112px; height:112px; border-radius:50% !important; padding:0 !important; display:inline-grid; place-items:center; color:#fff; background:var(--action); border:0; box-shadow:0 0 0 calc(6px + var(--lvl) * 26px) rgba(57,116,174,.16); transition:box-shadow .08s linear, background .15s; }
.voice-hum .hum-rec svg { width:46px; height:46px; }
.voice-hum .hum-rec.on { background:#c2410c; box-shadow:0 0 0 calc(6px + var(--lvl) * 26px) rgba(194,65,12,.18); }
.voice-hum .hum-rec:hover { filter:brightness(1.06); }
.voice-hum .hum-label { margin:.9rem 0 0; font-weight:600; }
.voice-hum .hum-time { margin:.2rem 0 0; font-variant-numeric:tabular-nums; color:var(--secondary); }
.voice-hum .hum-status { margin:.9rem 0 .4rem; font-family:var(--serif); font-size:1.1rem; min-height:1.5em; }
.voice-hum .hum-tips { list-style:none; margin:.6rem 0 0; padding:0; color:var(--secondary); font-size:.82rem; line-height:1.7; }
.voice-hum .hum-result { margin:2rem auto 0; max-width:64rem; }
.voice-hum .hum-result-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem; }
.voice-hum .hum-result-head h2 { margin:0; }
.voice-hum #hum-meta { margin:.25rem 0 0; color:var(--secondary); font-size:.9rem; }
.voice-hum .hum-cheer { margin:.3rem 0 0; font-family:var(--serif); font-size:1.05rem; }
.voice-hum .hum-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.voice-hum .hum-score { background:var(--paper); border:1px solid var(--border); border-radius:8px; padding:1rem; min-height:160px; }
@media (max-width:700px) { .voice-hum .hum-actions { width:100%; } .voice-hum .hum-actions button { flex:1 1 45%; } }
/* ear test */
.voice-ear .ear-card { text-align:center; min-height:22rem; }
.voice-ear .ear-steps { list-style:none; display:flex; justify-content:center; gap:.4rem; margin:0 0 1.2rem; padding:0; counter-reset:s; }
.voice-ear .ear-steps li { counter-increment:s; font-size:.72rem; padding:.25rem .7rem; border:1px solid var(--border); border-radius:99px; color:var(--secondary); }
.voice-ear .ear-steps li::before { content:counter(s) " · "; }
.voice-ear .ear-steps li.on { color:var(--link); border-color:var(--link); font-weight:650; }
.voice-ear .ear-steps li.done { color:var(--ok); border-color:var(--ok); }
.voice-ear .ear-count { margin:0; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--secondary); font-weight:600; }
.voice-ear .ear-big { font-family:var(--serif); font-size:1.6rem; margin:.5rem 0 .3rem; }
.voice-ear .ear-head { font-family:var(--serif); font-size:2.2rem; color:var(--link); margin:.4rem 0 .2rem; }
.voice-ear .ear-say { color:var(--secondary); min-height:1.5em; margin:.3rem auto .9rem; max-width:32em; }
.voice-ear .ear-new { font-weight:600; color:var(--link); }
.voice-ear .ear-choice { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:.4rem 0; }
.voice-ear .ear-choice button { min-height:3.6rem; font-size:1.1rem; }
.voice-ear .m-acts { display:flex; gap:.5rem; justify-content:center; margin-top:1rem; }
.voice-ear .m-acts button { flex:1; max-width:200px; }
.voice-ear .m-acts .soft { background:var(--paper); color:var(--link); border-color:#9eb6d2; }
.voice-ear .m-facts small { display:block; }