/* Fluency Spot: free practice dashboard. Scoped under .fsp, built on the fs-design tokens. */
.fsp{--fsp-line:var(--fs-line,#EBD9E1);--fsp-ok:#0b7a5a;--fsp-ok-bg:#E3F3F1;--fsp-no:#a32a2a;--fsp-no-bg:#FCE8EC}
.fsp *{box-sizing:border-box}
.fsp .fsp-section{padding-block:clamp(28px,5vw,64px)}
.fsp-root{max-width:960px;margin-inline:auto}
.fsp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fsp h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.8rem);line-height:1.08;margin:0 0 .3em}
.fsp h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);line-height:1.15;margin:0 0 .4em}
.fsp p{max-width:60ch}
.fsp button{font-family:var(--fs-body);cursor:pointer}
.fsp button:focus-visible,.fsp input:focus-visible,.fsp select:focus-visible,.fsp a:focus-visible{outline:3px solid var(--fs-teal);outline-offset:3px}
.fsp-dash{display:flex;flex-direction:column;gap:20px}
.fsp-hero{display:grid;gap:22px;padding:clamp(22px,3.5vw,34px);border-radius:var(--fs-radius);background:linear-gradient(135deg,var(--fs-cream),#fff);border:1px solid var(--fsp-line);align-items:center}
@media(min-width:760px){.fsp-hero{grid-template-columns:1.2fr 1fr}}
.fsp-hero .fsd-kicker{margin:0 0 6px}
.fsp-hero p{margin:0}
.fsp-level__row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px;font-size:.95rem;line-height:1.35}
.fsp-level__row span{color:var(--fs-muted)}
.fsp-bar{height:12px;border-radius:99px;background:#f0dbe5;overflow:hidden}
.fsp-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--fs-pink),#e85a9f);transition:width .5s ease}
.fsp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fsp-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 10px;border-radius:var(--fs-radius);background:#fff;border:1px solid var(--fsp-line);text-align:center;line-height:1.2}
.fsp-stat b{font:600 clamp(1.7rem,1.3rem + 1.2vw,2.3rem)/1 var(--fs-display)}
.fsp-stat span{font-size:.84rem;color:var(--fs-muted)}
.fsp-ring{position:relative;width:78px;height:78px;display:grid;place-items:center}
.fsp-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.fsp-ring circle{fill:none;stroke-width:8}
.fsp-ring .bg{stroke:#f0dbe5}
.fsp-ring .fg{stroke:var(--fs-teal);stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.fsp-ring b{font:600 1.05rem var(--fs-display)}
.fsp-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:14px 18px;border-radius:18px;background:var(--fs-pink-tint);line-height:1.4}
.fsp-note--soft{background:var(--fs-cream)}
.fsp-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.fsp-head h2{margin:0}
.fsp-link{background:none;border:0;padding:6px 2px;color:var(--fs-pink);font-weight:600;font-size:1rem;text-decoration:underline;text-underline-offset:3px}
.fsp-link:hover{color:var(--fs-pink-dark)}
.fsp-cards{display:grid;gap:16px}
@media(min-width:680px){.fsp-cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.fsp-card{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--fs-radius);background:#fff;border:1px solid var(--fsp-line);border-top:6px solid var(--fs-pink);box-shadow:var(--fs-shadow)}
.fsp-card--en{border-top-color:var(--fs-teal)}
.fsp-card.is-done{box-shadow:none;background:var(--fs-cream)}
.fsp-card__top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fsp-lang{font:600 1.5rem/1.1 var(--fs-display)}
.fsp-chip{display:inline-block;padding:4px 12px;border-radius:99px;background:var(--fs-pink-tint);color:var(--fs-pink-dark);font-weight:600;font-size:.82rem;white-space:nowrap}
.fsp-card--en .fsp-chip{background:var(--fs-teal-tint);color:#006b66}
.fsp-card__meta{margin:0;color:var(--fs-muted);line-height:1.4}
.fsp-check{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--fs-teal);color:#fff;font-size:.8rem;margin-right:4px}
.fsp-card .fsd-btn{align-self:flex-start;margin-top:auto}
.fsp-soon{display:flex;flex-wrap:wrap;gap:10px}
.fsp-soon__item{padding:10px 16px;border-radius:99px;border:1px dashed var(--fsp-line);color:var(--fs-muted)}
.fsp-soon__item em{font-style:normal;font-size:.82rem;margin-left:4px}
.fsp-foot{margin:6px 0 0;font-size:.95rem}
/* settings */
.fsp-panel{padding:clamp(22px,4vw,38px);border-radius:var(--fs-radius);background:#fff;border:1px solid var(--fsp-line);box-shadow:var(--fs-shadow);max-width:680px;margin-inline:auto}
.fsp-langs{display:grid;gap:10px;margin:20px 0 26px}
.fsp-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;border:1px solid var(--fsp-line);background:#fff}
.fsp-row.is-on{border-color:var(--fs-pink);background:var(--fs-cream)}
.fsp-row.is-off{opacity:.65}
.fsp-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--fs-pink);flex:none}
.fsp-row label{flex:1;font-weight:600;font-size:1.05rem}
.fsp-row label em{font-style:normal;font-weight:400;color:var(--fs-muted);font-size:.85rem;margin-left:6px}
.fsp-row select{padding:8px 12px;border-radius:12px;border:1px solid var(--fsp-line);background:#fff;font:inherit;min-height:44px}
.fsp-goalset h2{margin-bottom:.2em}
.fsp-goalopts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.fsp-opt{padding:12px 20px;border-radius:99px;border:2px solid var(--fsp-line);background:#fff;font-weight:600;font-size:1rem;min-height:48px}
.fsp-opt.is-on{border-color:var(--fs-pink);background:var(--fs-pink);color:#fff}
.fsp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
/* player */
.fsp-player{max-width:720px;margin-inline:auto;padding:clamp(18px,3.5vw,32px);border-radius:var(--fs-radius);background:#fff;border:1px solid var(--fsp-line);box-shadow:var(--fs-shadow)}
.fsp-player__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.fsp-dots{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex:1;justify-content:center;max-width:220px}
.fsp-dot{flex:1;height:8px;border-radius:99px;background:#f0dbe5}
.fsp-dot.is-done{background:var(--fs-teal)}
.fsp-dot.is-cur{background:var(--fs-pink)}
.fsp-tp{margin:0 0 6px;color:var(--fs-muted);font-size:.86rem;text-transform:uppercase;letter-spacing:.05em}
.fsp-q{font:600 clamp(1.35rem,1.1rem + 1.1vw,1.9rem)/1.25 var(--fs-display)!important;margin:0 0 18px!important;outline:none}
.fsp-blank{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--fs-pink);text-align:center;padding:0 6px;margin:0 4px;color:var(--fs-pink-dark)}
.fsp-blank.is-right{border-color:var(--fsp-ok);color:var(--fsp-ok)}
.fsp-blank.is-wrong{border-color:var(--fsp-no);color:var(--fsp-no)}
.fsp-opts{display:grid;gap:10px}
@media(min-width:600px){.fsp-opts{grid-template-columns:1fr 1fr}}
.fsp-opts--chips{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.fsp-option{min-height:56px;padding:14px 18px;border-radius:16px;border:2px solid var(--fsp-line);background:#fff;color:var(--fs-ink);font-size:1.05rem;line-height:1.3;text-align:left;transition:border-color .15s,background .15s,transform .1s}
.fsp-option--chip{text-align:center;font-weight:600}
.fsp-option:hover:not(:disabled){border-color:var(--fs-pink);background:var(--fs-cream)}
.fsp-option:active:not(:disabled){transform:translateY(1px)}
.fsp-option.is-right{border-color:var(--fsp-ok);background:var(--fsp-ok-bg);color:#064c38}
.fsp-option.is-wrong{border-color:var(--fsp-no);background:var(--fsp-no-bg);color:#6c1b1b}
.fsp-option.is-right::after{content:" ✓"}
.fsp-option.is-wrong::after{content:" ✕"}
.fsp-option:disabled{cursor:default}
.fsp-option.is-pick{border-color:var(--fs-pink);background:var(--fs-pink-tint)}
.fsp-option.is-matched{border-color:var(--fsp-ok);background:var(--fsp-ok-bg);color:#064c38}
.fsp-match{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fsp-mcol{display:grid;gap:10px;align-content:start}
.fsp-match .fsp-option{text-align:center;font-size:1rem;padding:12px 10px}
.fsp-listen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.fsp-shown{font-style:italic;color:var(--fs-muted)}
.fsp-textonly{margin:0}
.fsp-type{display:flex;gap:10px;flex-wrap:wrap}
.fsp-type input{flex:1;min-width:180px;min-height:52px;padding:10px 16px;border-radius:16px;border:2px solid var(--fsp-line);font:inherit;font-size:1.1rem}
.fsp-hint{margin:10px 0 0;font-size:.9rem}
.fsp-fb{margin-top:18px;padding:0;border-radius:16px;line-height:1.45}
.fsp-fb.is-ok,.fsp-fb.is-no{padding:14px 18px}
.fsp-fb.is-ok{background:var(--fsp-ok-bg);color:#064c38}
.fsp-fb.is-no{background:var(--fsp-no-bg);color:#6c1b1b}
.fsp-next{margin-top:16px}
.fsp-earn{margin:14px 0 6px}
.fsp-earn__big{font:600 2.2rem/1 var(--fs-display);color:var(--fs-pink);margin:0 0 10px}
.fsp-earn__list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:320px}
.fsp-earn__list li{display:flex;justify-content:space-between;padding:8px 14px;border-radius:12px;background:var(--fs-cream)}
.fsp-goalmsg{margin:14px 0 0;font-weight:600;color:var(--fsp-ok)}
.fsp-total{margin:14px 0 0;color:var(--fs-muted)}
@keyframes fsp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fsp-option.is-shake{animation:fsp-shake .35s;border-color:var(--fsp-no)}
@media(prefers-reduced-motion:reduce){.fsp *{animation:none!important;transition:none!important}}
@media(max-width:420px){.fsp-match{gap:8px}.fsp-stats{gap:8px}}
/* theme buttons force white text: set ours explicitly */
.fsp .fsp-opt:not(.is-on){color:var(--fs-ink)!important;background:#fff!important}
.fsp .fsp-opt.is-on{color:#fff!important}
.fsp .fsp-option{color:var(--fs-ink)!important}
.fsp .fsp-option.is-right{color:#064c38!important}
.fsp .fsp-option.is-wrong{color:#6c1b1b!important}
.fsp .fsp-option.is-matched{color:#064c38!important}
.fsp .fsp-link{color:var(--fs-pink)!important;background:none!important}