/* Daily skills practice (practice.html). Builds on styles.css and free-demo-landing-v68.css. */
.practice-page{--dp-ink:#102b40;--dp-muted:#4f6575;--dp-teal:#086a72;--dp-mint:#dff4ef;--dp-line:#d5e0e3;--dp-wrong:#b04a2a;--dp-wrong-bg:#fbeee9;--dp-caution:#fff3d6;--dp-caution-ink:#6b4a00}
.practice-page [hidden]{display:none!important}
.dp-main{max-width:760px;margin:0 auto;padding:36px 22px 64px;color:var(--dp-ink)}

.dp-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px}
.dp-top h1{font-size:clamp(1.6rem,4.4vw,2.4rem);line-height:1.1;letter-spacing:-.03em;margin:0;color:var(--dp-ink)}
.dp-stats{display:flex;gap:10px;margin:0}
.dp-stats>div{min-width:104px;border:1px solid var(--dp-line);border-radius:12px;background:#fff;padding:8px 14px}
.dp-stats dt{font-size:.78rem;font-weight:700;color:var(--dp-muted)}
.dp-stats dd{margin:0;font-size:1.6rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.dp-stats dd small{font-size:.85rem;font-weight:700;color:var(--dp-muted)}
.dp-streak-note{margin:10px 0 22px;color:var(--dp-muted);font-size:.95rem}

.dp-drill{background:#fff;border:1px solid var(--dp-line);border-radius:18px;padding:24px;scroll-margin-top:12px}
.dp-drill:focus{outline:none}
.dp-kicker{margin:0;font-size:.9rem;font-weight:700;color:var(--dp-teal)}
.dp-drill h2{font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.15;letter-spacing:-.02em;margin:4px 0 6px;color:var(--dp-ink)}
.dp-instructions{margin:0 0 16px;color:var(--dp-muted)}

.dp-sequence{list-style:none;counter-reset:dp;margin:0 0 16px;padding:0;display:grid;gap:6px}
.dp-slot{counter-increment:dp;position:relative;min-height:44px;padding:10px 12px 10px 48px;border:1px dashed #b9ccd3;border-radius:10px;background:#f6f9fa;color:var(--dp-ink);font-size:.95rem;line-height:1.4}
.dp-slot::before{content:counter(dp);position:absolute;left:10px;top:9px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e3ecef;color:var(--dp-muted);font-weight:800;font-size:.85rem}
.dp-slot.dp-filled{border-style:solid;border-color:var(--dp-teal);background:var(--dp-mint)}
.dp-slot.dp-filled::before{background:var(--dp-teal);color:#fff}
.dp-slot.dp-next-slot{color:var(--dp-muted);font-size:.88rem}

.dp-choices{display:grid;gap:8px}
.dp-choice{display:block;width:100%;min-height:48px;padding:12px 14px;border:1px solid #b9ccd3;border-radius:10px;background:#fff;color:var(--dp-ink);font:inherit;font-size:.98rem;line-height:1.4;text-align:left;cursor:pointer}
.dp-choice:hover{border-color:var(--dp-teal);background:#f6fbfb}
.dp-choice:focus-visible{outline:3px solid #8bd6cf;outline-offset:2px}
.dp-choice.dp-wrong{border-color:var(--dp-wrong);background:var(--dp-wrong-bg);animation:dp-shake .32s ease}
.dp-choice.dp-hint{border:2px solid var(--dp-teal);box-shadow:0 0 0 3px #cdebe6}
@keyframes dp-shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.dp-status{min-height:1.4em;margin:12px 0 0;font-weight:650;color:var(--dp-ink)}

.dp-result{margin-top:4px;padding-top:16px;border-top:1px solid var(--dp-line)}
.dp-result h3{font-size:1.35rem;margin:0 0 8px;color:var(--dp-ink)}
.dp-result h3:focus{outline:none}
.dp-meter-row{display:flex;align-items:center;gap:10px;color:var(--dp-muted);font-size:.95rem}
.dp-meter{display:inline-flex;gap:4px;flex:0 0 auto}
.dp-meter i{display:block;width:22px;height:8px;border-radius:4px;background:#dbe6ea}
.dp-meter i.on{background:var(--dp-teal)}
.dp-keep{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:var(--dp-caution);color:var(--dp-caution-ink)}
.dp-keep h4{margin:0 0 6px;font-size:.95rem}
.dp-keep ul{margin:0;padding-left:1.2em}
.dp-keep li{margin:3px 0;line-height:1.45}
.dp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.practice-page .dp-actions .btn{min-height:46px}

.dp-all{margin-top:36px}
.dp-all h2,.dp-account h2{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 6px;color:var(--dp-ink)}
.dp-all-note{margin:0 0 14px;color:var(--dp-muted)}
.dp-group+.dp-group{margin-top:16px}
.dp-group h3{font-size:.95rem;margin:0 0 8px;color:var(--dp-muted)}
.dp-skill-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dp-skill-list button{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name meter" "status status";align-items:center;gap:4px 10px;min-height:56px;padding:10px 12px;border:1px solid var(--dp-line);border-radius:10px;background:#fff;color:var(--dp-ink);font:inherit;text-align:left;cursor:pointer}
.dp-skill-list button b{grid-area:name;font-size:.95rem;line-height:1.3}
.dp-skill-list button .dp-meter{grid-area:meter}
.dp-skill-list button .dp-meter i{width:14px;height:6px}
.dp-skill-status{grid-area:status;font-size:.8rem;color:var(--dp-muted)}
.dp-skill-list button:hover{border-color:var(--dp-teal)}
.dp-skill-list button[aria-pressed="true"]{border-color:var(--dp-teal);box-shadow:inset 0 0 0 1px var(--dp-teal);background:#f6fbfb}

.dp-account{margin-top:36px;padding:22px;border-radius:18px;background:var(--dp-ink);color:#fff}
.dp-account h2{color:#fff}
.dp-account p{color:#d7e4ea;line-height:1.6}
.practice-page .dp-account .btn{background:#fff;color:var(--dp-ink)}
.dp-fineprint{font-size:.86rem;margin:0}
.dp-disclaimer{margin:22px 0 0;font-size:.86rem;line-height:1.55;color:var(--dp-muted)}

@media(max-width:650px){
 .practice-page .demo-site-logo{min-width:0;flex:0 1 auto}
 .practice-page .demo-site-links{flex:0 0 auto}
 .practice-page .demo-site-links a:not(.demo-nav-cta){display:none}
 .practice-page .demo-nav-cta{white-space:nowrap}
 .dp-main{padding:18px 16px 48px}
 .dp-top{align-items:flex-start}
 .dp-stats{width:100%}
 .dp-stats>div{flex:1 1 0;padding:6px 12px}
 .dp-stats dd{font-size:1.35rem}
 .dp-streak-note{margin:8px 0 16px;font-size:.9rem}
 .dp-drill{padding:18px 16px;border-radius:14px}
 .dp-skill-list{grid-template-columns:1fr}
 .dp-actions .btn{flex:1 1 100%}
}
@media(max-width:380px){
 .practice-page .demo-site-logo small{display:none}
 .practice-page .demo-nav-cta{font-size:.82rem;padding:9px 11px}
}
@media(prefers-reduced-motion:reduce){.dp-choice.dp-wrong{animation:none}}