/* Practice player (pratique.html). Uses the tokens from style.css. */
.ko-sub{font-weight:700;font-size:1.1rem;color:var(--accent)}
nav.levels{display:flex;flex-wrap:wrap;gap:6px}
nav.levels button{font:inherit;font-size:.9rem;border:1.5px solid var(--grid);background:var(--sheet);color:var(--ink);padding:7px 12px;border-radius:999px;cursor:pointer}
nav.levels button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}

.progress{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--muted)}
.progress .bar{flex:1;height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
.progress .bar i{display:block;height:100%;background:var(--accent);transition:width .25s}

.item{display:flex;flex-direction:column;gap:18px}
.kind{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.fr{font-size:1.2rem;line-height:1.45}
.fr.small{font-size:1rem;color:var(--muted)}
.fr mark{background:#FFE58A;color:inherit;padding:0 3px;border-radius:4px}
.fr .pour{font-weight:800;color:var(--pen)}
@media (prefers-color-scheme: dark){.fr mark{background:#6B5A10}}

.q{display:flex;flex-direction:column;gap:10px}
.q p{font-weight:600}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices button{font:inherit;font-size:1rem;padding:11px 16px;border-radius:10px;border:1.5px solid var(--grid);background:var(--sheet);color:var(--ink);cursor:pointer;min-height:44px}
.choices button:hover:not(:disabled){border-color:var(--accent)}
.choices button.ok{border-color:var(--accent);background:var(--soft);color:var(--accent);font-weight:700}
.choices button.no{border-color:var(--pen);color:var(--pen);text-decoration:line-through}
.choices button:disabled{cursor:default}
.choices .k{font-size:.75rem;color:var(--muted);margin-right:6px}

.koline{font-size:1.35rem;line-height:2;font-weight:500;word-break:keep-all}
.koline .hint{color:var(--muted);font-weight:400}
.koline .blank{display:inline-block;min-width:5.5em;border-bottom:2.5px solid var(--accent);text-align:center;color:var(--accent);font-weight:700;margin:0 4px}
.koline input{font:inherit;font-weight:700;font-size:1.2rem;width:9em;max-width:60vw;padding:4px 8px;margin:0 4px;border:none;border-bottom:2.5px solid var(--accent);background:var(--soft);color:var(--ink);border-radius:6px 6px 0 0}
.koline input.no{border-bottom-color:var(--pen)}
.koline b.chunk{color:var(--accent)}

.pfb{border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;border:1.5px solid var(--grid)}
.pfb.good{border-color:var(--accent);background:var(--soft)}
.pfb.bad{border-color:var(--pen)}
.pfb.retry{border-color:var(--warn);border-style:dashed}
.pfb .head{font-weight:800;font-family:var(--display)}
.pfb .ko{font-size:1.15rem}
.pfb .ptip{font-size:.95rem}
.pfb .why{font-size:.95rem}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.end{display:flex;flex-direction:column;gap:16px}
.end .pscore{font-family:var(--display);font-size:2.6rem;font-weight:800;color:var(--accent)}
.end ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:8px}
.end li .ko{display:block}

/* first visit: self-assessment and recommendation */
.selfs{display:flex;flex-direction:column;gap:8px}
button.self{display:flex;gap:12px;align-items:flex-start;text-align:left;font:inherit;padding:12px 14px;border-radius:12px;border:1.5px solid var(--grid);background:var(--sheet);color:var(--ink);cursor:pointer}
button.self:hover{border-color:var(--accent)}
button.self .emo{font-size:1.5rem;line-height:1.2}
button.self .txt{display:flex;flex-direction:column;gap:2px}
button.self .d{font-size:.95rem}
button.self .p{font-size:.8rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair .big{font-family:var(--display);font-weight:800;font-size:1.1rem}
button.linkish{border:none;background:none;color:var(--muted);text-decoration:underline;font:inherit;font-size:.85rem;cursor:pointer;padding:7px 4px}
.choices button.picked{border-color:var(--ink);font-weight:700}

/* level 5 countdown */
.clock{height:4px;border-radius:999px;background:var(--soft);overflow:hidden}
.clock i{display:block;height:100%;width:100%;background:var(--warn);transform-origin:left;animation:clock linear forwards}
.clock.stopped i{animation-play-state:paused}
@keyframes clock{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){.clock i{animation:none}}

/* T6 sentence box */
.koline.wide textarea{font:inherit;font-weight:500;font-size:1.15rem;width:100%;min-height:3.2em;padding:8px 10px;border:1.5px solid var(--grid);border-bottom:2.5px solid var(--accent);border-radius:8px;background:var(--soft);color:var(--ink);resize:vertical}
.koline.wide textarea.no{border-bottom-color:var(--pen)}

/* explanation before a series */
.lesson h2{font-size:1.35rem}
.lesson .lq{font-weight:700;font-size:1.08rem;padding:10px 14px;border-left:4px solid var(--pen);background:var(--soft);border-radius:0 8px 8px 0}
.lesson .lnext{color:var(--muted);font-size:.95rem}
.lblock{display:flex;flex-direction:column;gap:6px}
.lblock.rule{border:1.5px solid var(--grid);border-radius:12px;padding:12px 14px}
.lblock.warn{border:1.5px dashed var(--warn);border-radius:12px;padding:12px 14px}
.lhead{font-family:var(--display);font-weight:800}
.lhead b{color:var(--accent)}
ul.ex{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
ul.ex li{display:flex;flex-direction:column}
ul.ex li [lang="ko"]{font-size:1.1rem}
ul.ex li b{color:var(--accent)}
table.rules{border-collapse:collapse;width:100%;font-size:.92rem}
table.rules th,table.rules td{border:1.5px solid var(--grid);padding:8px 10px;text-align:left;vertical-align:top}
table.rules thead th{background:var(--soft);font-weight:600}
table.rules td{font-size:1.05rem}
table.rules b.new{color:var(--pen)}
table.rules b.new::after{content:" nouveau";font-size:.7rem;font-weight:700;color:var(--pen);vertical-align:super}

/* lesson: visible labels on words (many students don't know grammar terms) — <ruby> keeps baselines aligned */
.lesson h2,.plan h2,.course h2{display:flex;flex-direction:column;gap:2px}
h2 .tko{font-family:var(--body);font-weight:900;color:var(--accent)}
h2 .tfr{font-size:1.05rem}
.frex,.koex{display:block;line-height:2.4}
ruby.tag{ruby-position:under;-webkit-ruby-position:after;padding:1px 2px;border-radius:4px}
ruby.tag rt{font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-family:var(--body);line-height:1.1;padding-top:1px}
.tag-v{background:#E3F0FF;color:#0B4C8C}
.tag-n{background:#FFF1D6;color:#7A4B00}
.tag-p{font-weight:800;color:var(--pen)}
.tag.plain{padding:1px 6px;border-radius:5px;font-weight:700}
@media (prefers-color-scheme: dark){.tag-v{background:#16304D;color:#A9CFFF}.tag-n{background:#3D2F12;color:#FFD58A}}
.koex .form,.koex b.form{color:var(--accent)}
.lblock.words ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.lblock.double{border:1.5px solid var(--accent);border-radius:12px;padding:12px 14px;background:var(--soft)}
.lblock.double .why{font-size:.85rem}
/* « pour » ↔ the goal in Korean, side by side (one column on phones) */
.lblock.compare .cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.lblock.compare .cmp{grid-template-columns:1fr}}
.cside{border:1.5px solid var(--grid);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.cside .chead{font-family:var(--display);font-weight:800;font-size:1.1rem;margin:0}
.cside .csub{font-weight:700;color:var(--pen);margin:0}
.cside .csense{font-weight:700;color:var(--accent);margin:0}
.cside .csense p{margin:0}
.cside .csense ul{margin:2px 0 0;padding-left:1.2em;font-weight:600}
table.ctab td{font-size:.95rem}
table.ctab td[lang="ko"]{font-weight:700;white-space:pre-line;word-break:keep-all}
table.ctab td[lang="ko"]:nth-child(2){white-space:pre}
table.ctab tr.ok td{background:var(--soft)}
table.ctab tr.later td{color:var(--muted)}
.fr .parhint{display:block;font-size:.82rem;color:var(--muted);font-weight:400;margin-top:4px}
.endhint{margin:6px 0 0;font-size:.88rem;font-weight:600;color:var(--pen)}
.lesson .lrecap{font-size:.95rem;padding:8px 12px;border:1.5px dashed var(--grid);border-radius:10px;margin:0}
details.gloss{font-size:.92rem}
details.gloss summary{cursor:pointer;color:var(--muted);font-weight:600}
details.gloss table{border-collapse:collapse;margin-top:6px}
details.gloss td{border-bottom:1px solid var(--grid);padding:3px 12px 3px 0;vertical-align:top}
details.gloss td[lang="ko"]{font-weight:700;white-space:nowrap}

/* Korean words never break in the middle (운동해|요) */
.lesson,.pfb,.end,.item .fr,.koline{word-break:keep-all;overflow-wrap:anywhere}

/* rhythm form (mails) */
.plan .field{display:flex;flex-direction:column;gap:6px}
.plan .field>span:first-child{font-weight:700;font-size:.9rem}
.plan input,.plan select{font:inherit;font-size:1rem;padding:10px 12px;border:1.5px solid var(--grid);border-radius:10px;background:var(--sheet);color:var(--ink);max-width:100%}
.plan .days button{min-width:3.2rem;justify-content:center}
.plan .days button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.plan .small{font-size:.8rem}
.plan .days button[aria-pressed="true"],.plan .mins button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.plan .check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.45}
.plan .check input{width:20px;height:20px;margin-top:2px;flex:none}

/* course: kind banner (보강, 다시 시작…), "Ton parcours" */
.kindban{border-left:4px solid var(--accent);background:var(--grid);padding:10px 12px;border-radius:8px;margin:0 0 14px;word-break:keep-all}
.kindban b{display:block}
.course ul{padding-left:1.1rem;line-height:1.6}
.course .big{font-size:1.3rem;font-weight:700}