/* Floating WFD practice window. Positions come from the page layout tokens in summary-preview.html. */
.dock{position:fixed;z-index:20;left:calc(var(--side) + var(--content-w) + var(--gap));top:var(--dock-y,var(--dock-top));width:var(--dock-w);max-height:calc(100dvh - var(--dock-y,var(--dock-top)) - 16px);display:flex;flex-direction:column;background:#151620;color:#f7f6ff;border:1px solid #363446;border-radius:18px;box-shadow:0 14px 40px #15233830;overflow:hidden;transform-origin:center}
.dock[hidden]{display:none!important}
.dockhead{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px 10px 22px;cursor:grab;touch-action:none;user-select:none}
.dockhead strong{font-size:14px;color:#d9d3e6;letter-spacing:.3px}
.dock-title{display:flex;align-items:baseline;gap:10px}
.grip{width:8px;height:13px;fill:#6f6880;align-self:center;margin-right:-2px}
.place-row{display:flex;align-items:center;gap:4px;border-top:1px solid #3a3346;margin-top:4px;padding:6px 6px 2px;font-size:11px;color:#9a90ab}
.place-row span{margin-right:auto}
.more-menu .place-row button{width:26px;padding:4px 0;text-align:center;border:1px solid #3d3549;border-radius:6px}
.more-menu .place-row button[aria-pressed=true]{background:#5b4a78;border-color:#8a72b0;color:#fff}
@media(max-width:900px){.place-row,.grip{display:none}}.dock-count{font-size:12px;color:#8f86a0;font-variant-numeric:tabular-nums}
.dock-tools{display:flex;gap:6px}
#expand .icon-shrink,.dock.immersive #expand .icon-expand{display:none}.dock.immersive #expand .icon-shrink{display:block}
.dock-min{width:32px;height:32px;padding:0;border:0;border-radius:9px;background:#262533;color:#cfc8de;display:grid;place-items:center}
.dock-min:hover{background:#34313f}.dock-min svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dragging{user-select:none!important;transition:none!important;cursor:grabbing}

.stage{flex:1;min-height:0;overflow:auto;padding:6px 22px 14px;scrollbar-width:thin;scrollbar-color:#494451 transparent}
.hint{display:flex;align-items:center;gap:10px;min-height:30px;color:#8f86a0;font-size:12px}
.mode-toggle{display:inline-flex;align-items:center;gap:5px;border:1px solid #9d7bcb70;background:#aa83df22;color:#dec5ff;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:600;line-height:1.5}
.mode-toggle:before{content:'⇄';font-size:13px}.mode-toggle:hover{background:#aa83df40;border-color:#b995e9}.mode-toggle[hidden]{display:none}
.phrase-nav{display:flex;gap:6px;margin-left:auto}.phrase-nav[hidden]{display:none}
.phrase-nav button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #393242;border-radius:9px;background:#211d29;color:#d4c5e7}
.phrase-nav button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.phrase-nav button:not(:disabled):hover{background:#34283f;border-color:#9072b1}.phrase-nav button:disabled{opacity:.28;cursor:default}

/* Per-phrase cheer (Perfect × 3), shown in the gap above the cue for about a second. */
.stage{position:relative}
.cheer{position:absolute;left:50%;top:38px;transform:translateX(-50%);z-index:2;white-space:nowrap;pointer-events:none;font:italic 800 22px/1.2 system-ui,"Segoe UI",sans-serif;letter-spacing:.5px;color:#4fd8e8;text-shadow:0 0 14px #4fd8e899}
.cheer[hidden]{display:none}
.cheer[data-level=Perfect]{color:#ffd65c;text-shadow:0 0 16px #ffc83d99}.cheer[data-level=Good],.cheer[data-level=Done]{color:#b9a8dc;text-shadow:0 0 12px #9d7bcb66}

.cue-card{text-align:center;padding:34px 4px 6px}
.mistake-reference{font:600 17px/1.55 ui-monospace,Consolas,monospace;color:#ece5fa;margin:0 0 6px;overflow-wrap:anywhere}
.mistake-reference[hidden]{display:none}
.chinese-cue{font-size:19px;font-weight:500;color:#e6deed;line-height:1.6}
.mistake-reference:not([hidden])+.chinese-cue{font-size:15px;color:#b9aecb}

/* Typing happens directly on the word lines: a transparent input lies over the rendered slots. */
.line-input{position:relative;cursor:text;margin:14px 0 6px}
.words{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px 9px;min-height:64px;padding:8px 0;pointer-events:none}
.word{font:21px/1.45 ui-monospace,Consolas,monospace;white-space:pre;text-align:center;padding:2px 2px 1px;border-bottom:2px solid #565365;color:#f1edf8;max-width:100%}
.word.current{border-color:#8f78b3}
.line-input:focus-within .word.current{border-color:#b58aff}
.line-input:focus-within .word.current:after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:1px;background:#c6a4f6;vertical-align:-3px;animation:line-caret 1s steps(1) infinite}
.word.correct{color:#79d9b5;border-color:#79d9b5}
.word.wrong{color:#ff8d99;border-color:#ff7888;text-decoration:line-through;text-decoration-thickness:1.5px}
.word.missing{border-color:#ff788899}
/* Annotated (passed) words: IPA above, gloss and part of speech below, underline coloured by part of speech. */
.words.annotated-line{gap:14px 12px;align-items:flex-start}
.word.annotated{display:inline-flex;flex-direction:column;align-items:center;border-bottom:0;padding:0;color:#f4f1fa;--pos:#79d9b5}
.word.annotated .ipa{font:12px/1.3 "Segoe UI","Lucida Sans Unicode",system-ui,sans-serif;color:#9d97ad;margin-bottom:2px;white-space:nowrap}
.word.annotated .w{font-family:"Segoe UI",system-ui,sans-serif;padding:0 3px 2px;border-bottom:3px solid var(--pos);border-radius:1px;line-height:1.3}
.word.annotated .gloss{font:13px/1.4 system-ui,"Microsoft YaHei",sans-serif;color:#e8e3f1;margin-top:5px;white-space:nowrap}
.word.annotated .pos{font:10px/1.3 system-ui,"Microsoft YaHei",sans-serif;color:#8a849a;white-space:nowrap}
.pos-noun{--pos:#4c8dff!important}.pos-verb{--pos:#ff6b6b!important}.pos-aux{--pos:#ff9f5a!important}.pos-adj{--pos:#b36bff!important}.pos-adv{--pos:#ffc53d!important}
.pos-prep{--pos:#3ecf8e!important}.pos-det{--pos:#1fc5b0!important}.pos-pron{--pos:#ff7eb6!important}.pos-conj{--pos:#5ccfe6!important}.pos-num{--pos:#a3b3c7!important}.pos-part{--pos:#9a94b0!important}
.dock.immersive .word.annotated .w{font-size:48px;border-bottom-width:4px;padding:0 4px 4px}
.dock.immersive .word.annotated .ipa{font-size:16px;margin-bottom:4px}.dock.immersive .word.annotated .gloss{font-size:17px;margin-top:8px}.dock.immersive .word.annotated .pos{font-size:12px}
.dock.immersive .words.annotated-line{gap:26px 22px}
.typing{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;outline:none;opacity:1}
.typing::selection{background:transparent}.dock .typing:focus,.dock .typing:focus-visible{outline:none}
@keyframes line-caret{50%{opacity:0}}

.status{min-height:0;margin:6px 0 0;text-align:center;color:#bbb2d3;font-size:12px}.status:empty{display:none}
/* Question settlement card. */
.result{text-align:center;margin-top:12px;animation:result-in .32s cubic-bezier(.2,.8,.2,1)}.result[hidden]{display:none}
.result-title{font:italic 800 30px/1.2 system-ui,"Segoe UI",sans-serif;color:#4fd8e8;text-shadow:0 0 18px #4fd8e899}
.result-title[data-level=Perfect]{color:#ffd65c;text-shadow:0 0 20px #ffc83d99}.result-title[data-level=Good],.result-title[data-level=完成]{color:#c7b5ec;text-shadow:0 0 14px #9d7bcb66}
.result-stats{margin-top:6px;color:#a79dba;font-size:12px}.result-stats b{color:#ece5fa;font-weight:600}.result-stats .sep{margin:0 8px;color:#5b5468}
.result-note{margin:10px auto 0;max-width:34em;padding:7px 12px;border-radius:9px;background:#f54a4514;color:#ff9b96;font-size:12px;line-height:1.6;white-space:pre-line;text-align:left}.result-note:empty{display:none}
.result-actions{display:flex;justify-content:center;gap:10px;margin-top:12px}
.result-actions button{border:1px solid #454053;background:#252532;color:#ded8eb;border-radius:9px;padding:6px 14px;font-size:13px}
.result-actions .primary{background:#9d68ed;border-color:#9d68ed;color:#fff}
@keyframes result-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

.actions{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 18px 14px;border-top:1px solid #2a2936}
.actions>button{border:0;background:transparent;color:#b3a8c4;border-radius:9px;padding:7px 11px;font-size:13px;white-space:nowrap}
.actions>button:hover:not(:disabled){background:#252331;color:#e4dcf1}
.actions .listen{display:flex;align-items:center;gap:7px;background:#2a2340;color:#e2d2fb;font-weight:600;padding:8px 14px}
.actions .listen span{font-size:18px;line-height:1;color:#c5a1f4}.actions .listen:disabled{opacity:.4;cursor:default}
#show[aria-pressed=true]{background:#2a2340;color:#e2d2fb}#show[hidden]{display:none}
.practice-more{position:relative;margin-left:auto}
.practice-more summary{cursor:pointer;list-style:none;color:#a99bb9;font-size:20px;width:32px;text-align:center;border-radius:8px}
.practice-more summary::-webkit-details-marker{display:none}.practice-more summary:hover{background:#252331}
.more-menu{position:absolute;bottom:38px;right:0;background:#24202f;border:1px solid #494052;box-shadow:0 8px 26px #0005;border-radius:10px;padding:6px;width:180px;z-index:25;display:flex;flex-direction:column}
.more-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#d7cde6;font-size:12px;padding:8px 11px;border-radius:7px;white-space:nowrap}
.more-menu button:hover{background:#372c45}.prefs{border-top:1px solid #3a3346;margin-top:4px;padding-top:4px}.prefs button{color:#b9aacb}
.dock:has(.practice-more[open]){overflow:visible}

/* Collapsed state: a small keyboard bubble placed beside the reading column. */
.practice-bubble{position:fixed;z-index:21;left:calc(var(--side) + var(--content-w) + var(--gap));top:var(--dock-top);width:48px;height:48px;padding:0;border-radius:50%;border:1px solid #61566e;background:#37333f;color:#cbcbd0;box-shadow:0 6px 18px #14141c30;display:grid;place-items:center;cursor:grab;touch-action:none;transition:background .15s,transform .15s}
.practice-bubble[hidden]{display:none}.practice-bubble:hover{background:#433d4d;transform:scale(1.06)}.practice-bubble.dragging{transform:none}
.practice-bubble svg{width:29px;height:25px}

/* Edge snapping (wide screens): top or bottom full-width bar; the page reserves the bar's space. */
:root{--bar-h:200px}
.snap-preview{position:fixed;z-index:19;pointer-events:none;border:2px dashed #9d7bcb;background:#9d7bcb1f;border-radius:16px}
.snap-preview[hidden]{display:none}
.snap-preview[data-zone=right]{left:calc(var(--side) + var(--content-w) + var(--gap));top:var(--dock-y,var(--dock-top));width:var(--dock-w);height:340px}
.snap-preview[data-zone=left]{left:var(--side);top:var(--dock-y,var(--dock-top));width:var(--dock-w);height:340px}
.snap-preview[data-zone=top]{left:16px;right:16px;top:12px;height:var(--bar-h)}
.snap-preview[data-zone=bottom]{left:16px;right:16px;bottom:12px;height:var(--bar-h)}
@media(min-width:901px){
 /* Collapsed: the reading column widens and re-centres, smoothly. */
 body.dock-collapsed{--content-w:min(1100px,calc(100vw - 48px));--side:max(24px,calc((100vw - var(--content-w)) / 2))}
 main,header{transition:margin .3s ease,width .3s ease,padding .3s ease}
 body.dock-collapsed[data-dock-place] main{margin-left:var(--side);margin-bottom:40px}
 body.dock-collapsed[data-dock-place=top]{padding-top:0}
 .dock[data-place=left]:not(.immersive){left:var(--side)}
 .dock:not(.immersive){cursor:grab}.dock:not(.immersive) :is(.line-input,.more-menu){cursor:auto}
 body[data-dock-place=top]{padding-top:calc(var(--bar-h) + 12px)}
 body[data-dock-place=bottom] main{margin-bottom:calc(var(--bar-h) + 40px)}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive){left:16px;right:16px;width:auto;height:var(--bar-h);max-height:none;display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"head stage" "actions stage"}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .dock-title{white-space:nowrap}
 .dock[data-place=top]:not(.immersive){top:12px}
 .dock[data-place=bottom]:not(.immersive){top:auto;bottom:12px}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .dockhead{grid-area:head;padding:14px 14px 4px 20px}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .actions{grid-area:actions;flex-wrap:wrap;align-content:flex-start;border-top:0;padding:6px 14px 12px}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .practice-more{margin-left:0}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .stage{grid-area:stage;display:grid;grid-template-columns:minmax(150px,26%) minmax(0,1fr);grid-template-areas:"hint hint" "cue words" "status status" "result result";align-content:center;column-gap:24px;padding:10px 24px;border-left:1px solid #2a2936}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .hint{grid-area:hint}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .cue-card{grid-area:cue;text-align:left;padding:0}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .line-input{grid-area:words;margin:0}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .words{justify-content:flex-start;min-height:48px}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .status{grid-area:status}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .result:not([hidden]){grid-area:result;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:4px}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .result-title{font-size:24px}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .result-stats,.dock:is([data-place=top],[data-place=bottom]):not(.immersive) .result-actions{margin-top:0}
 .dock:is([data-place=top],[data-place=bottom]):not(.immersive) .cheer{top:8px}
 .dock[data-place=top]:not(.immersive) .more-menu{bottom:auto;top:38px}
}

/* Immersive mode: the same window fills the screen, 句乐部-style large lines and shortcut hints. */
.immersive-only{display:none}
html.immersive-open{overflow:hidden}
.dock.immersive{inset:0!important;width:auto!important;max-height:none;border:0;border-radius:0;z-index:40;background:#111218;box-shadow:none}
.dock.immersive #minimize{display:none}
.dock.immersive .dockhead{cursor:default;padding:18px 28px;border-bottom:1px solid #22212c}
.dock.immersive .dockhead strong{font-size:15px}.dock.immersive .dock-count{font-size:13px}
.dock.immersive .stage{display:flex;flex-direction:column;justify-content:center;width:min(1000px,100%);margin:0 auto;padding:24px 32px}
.dock.immersive .hint{font-size:13px}
.dock.immersive .cheer{position:fixed;top:13vh;font-size:44px}
.dock.immersive .result-title{font-size:44px}.dock.immersive .result-stats{font-size:14px;margin-top:10px}.dock.immersive .result-actions{margin-top:18px}
.dock.immersive .cue-card{padding:56px 0 8px}
.dock.immersive .chinese-cue{font-size:24px}.dock.immersive .mistake-reference{font-size:24px;margin-bottom:10px}
.dock.immersive .mistake-reference:not([hidden])+.chinese-cue{font-size:18px}
.dock.immersive .line-input{margin:30px 0 14px}
.dock.immersive .words{gap:22px 18px;min-height:130px}.dock.immersive .word{font-size:38px;padding:2px 4px 3px}
.dock.immersive .status{font-size:14px}
.dock.immersive .actions{justify-content:center;gap:12px;border-top:0;padding:10px 28px 6px}
.dock.immersive .actions .immersive-only{display:inline-block;color:#9a90ab}
.dock.immersive .practice-more{margin-left:0}
.dock.immersive .shortcut-hints{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;padding:12px 28px 22px;color:#7f778f;font-size:12px}
.shortcut-hints span{display:flex;align-items:center;gap:6px}
.shortcut-hints kbd{font:11px ui-monospace,Consolas,monospace;color:#c9c1d8;background:#1f1d29;border:1px solid #3a3646;border-bottom-width:2px;border-radius:5px;padding:1px 6px}

@media(max-width:900px){
 .dock.immersive{bottom:0!important;max-height:none}
 .dock.immersive .stage{padding:16px 18px;justify-content:flex-start}
 .dock.immersive .cue-card{padding:28px 0 6px}.dock.immersive .chinese-cue{font-size:20px}
 .dock.immersive .words{min-height:80px;gap:14px 12px}.dock.immersive .word{font-size:26px}
 .dock.immersive .shortcut-hints{display:none}
 .dock.immersive .actions{gap:2px;padding:8px 8px calc(12px + env(safe-area-inset-bottom))}
 .dock.immersive .actions>button{padding:7px 8px}
}
@media(max-width:900px){
 .dock{left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-height:46dvh;border-radius:16px}
 .dockhead{cursor:default;padding:10px 14px 4px 18px}
 .stage{padding:4px 16px 8px}
 .cue-card{padding:10px 4px 2px}.chinese-cue{font-size:17px}.mistake-reference{font-size:15px}
 .line-input{margin:8px 0 2px}.words{min-height:40px;gap:8px 7px}.word{font-size:18px}
 .actions{padding:8px 14px 10px}
 .practice-bubble{left:auto;top:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(max-width:900px){.dock.immersive .cheer{font-size:30px;top:9vh}.dock.immersive .result-title{font-size:34px}}
@media(prefers-reduced-motion:reduce){main,header{transition:none!important}.line-input .word.current:after,.result{animation:none}.practice-bubble,.row{transition:none}}