/* Shared answer/overview layout. Colors inherit the host's existing theme. */
.qa-layout{display:flex;min-height:0;min-width:0;flex:1;gap:8px;overflow:visible}
.qa-layout>.qa-viewport{flex:1;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-anchor:none;scroll-behavior:auto;scrollbar-width:none}
.qa-layout>.qa-viewport::-webkit-scrollbar{display:none}
/* Match the page picker's A–Z-style numeric scrub rail, not button cards. */
.qa-index{position:relative;flex:none;align-self:stretch;width:38px;touch-action:none;cursor:ns-resize;display:flex;align-items:stretch;color:var(--label-2,rgb(var(--ink-rgb) / 65%));font-size:10px;line-height:14px;font-weight:500;font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none}
.qa-numbers{width:100%;align-self:center;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;pointer-events:none}
.qa-numbers [data-current]{color:var(--accent,var(--amber,#c4a464))}
.qa-bubble{position:absolute;z-index:4;top:clamp(22px,calc(var(--picker-position,0)*100%),calc(100% - 22px));right:40px;min-width:48px;height:44px;padding:0 10px;display:none;align-items:center;justify-content:center;background:var(--fill,var(--paper));border-radius:12px;font-size:24px;font-weight:500;color:var(--label,var(--ink));transform:translateY(-50%);pointer-events:none}
.qa-index.dragging .qa-bubble{display:flex}.qa-index:focus-visible{outline:2px solid var(--accent,var(--amber,#c4a464));outline-offset:2px}.stage .qa-index{font-size:1.7vh;line-height:1.9vh}
/* A shared visual contract; each mini-app owns its renderer and lifecycle.
   No bottom hint row. Content ends above the host controls and their spacing. */
.stage:is(.spelling,.cn-listen,.dict,.bs-overview){--practice-text-size:var(--classroom-word-size,4vh);--cn-word-size:var(--practice-text-size);--cn-py-size:var(--practice-text-size);--cn-number-size:2.2vh;--number-gutter:2.8vw}
.stage.spelling,.stage.cn-listen,.stage.dict{--practice-font:var(--classroom-word-font,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif);--practice-accent:var(--amber,#E8A13D);--practice-accent-rgb:var(--amber-rgb,232 161 61);display:grid;grid-template-rows:5vh minmax(0,1fr);row-gap:2vh;padding:5vh 5vw calc(var(--ey,5vh) + var(--row,5.6vh) + 2vh);box-sizing:border-box}
.stage:is(.spelling,.cn-listen,.dict) .dt-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2vw;min-height:5vh}
.stage:is(.spelling,.cn-listen,.dict) .dt-title{display:flex;align-items:baseline;gap:1.2vh;min-width:0;white-space:nowrap}
.stage:is(.spelling,.cn-listen,.dict) .dt-title b{font:600 3.4vh/1 "TL Serif","Songti SC","STSong","SimSun",serif;letter-spacing:.12em}
.stage:is(.spelling,.cn-listen,.dict) .dt-title span{font-size:2.2vh;color:rgb(var(--ink-rgb) / 55%);overflow:hidden;text-overflow:ellipsis}
.stage:is(.spelling,.cn-listen,.dict) .dt-chip{font-size:2.1vh;font-weight:700;color:rgb(var(--ink-rgb) / 62%);font-variant-numeric:tabular-nums;padding:.8vh 2vh;border-radius:99px;background:rgb(var(--ink-rgb) / 6%)}
.stage:is(.spelling,.dict) .dt-area,.stage.cn-listen .qa-viewport,.stage.cn-listen .cnl-viewport{container-type:size;padding:0;min-height:0;position:relative}
.stage:is(.spelling,.dict) .dt-area{font-size:var(--cn-word-size)}
.stage:is(.spelling,.dict) :is(.dt-flow,.dt-list),.stage.cn-listen .cnl-grid{--tile-gap:1.2cqh;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;justify-content:flex-start;gap:var(--tile-gap) 1vw;margin:0;width:100%;columns:auto}
.stage:is(.spelling,.dict) :is(.prompt-card,.dt-list .li),.stage.cn-listen .cnl-card{position:relative;box-sizing:border-box;flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:0;width:max-content;max-width:100%;min-height:calc(91.6cqh/8);padding:0 0 0 var(--number-gutter);border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;line-height:1.25}
.stage:is(.spelling,.dict) .dt-area>*{margin:0;flex:none}
.stage:is(.spelling,.dict) :is(.question-no,.li>em),.stage.cn-listen .cnl-no{position:absolute;left:0;right:auto;top:1vh;bottom:auto;padding:0;width:calc(var(--number-gutter) - .5vw);text-align:right;font:600 var(--cn-number-size)/1 ui-monospace,Consolas,monospace;font-style:normal;color:rgb(var(--ink-rgb) / 55%);opacity:1;white-space:nowrap}
.stage.spelling :is(.prompt-zi,.pyl,.answer-zh),.stage.cn-listen :is(.cnl-answer>b,.cnl-hidden){font:600 var(--cn-word-size)/1.25 var(--practice-font);letter-spacing:0}
.stage.spelling .answer-py,.stage.cn-listen .cnl-py{font:400 var(--cn-py-size)/1.35 var(--practice-font);letter-spacing:0}
/* All prompt faces use the English whole-word card, independent of the
   eight-row wrapper. Language changes the content, not the face geometry. */
.stage.spelling .prompt-text,.stage.cn-listen .cnl-face,.stage.dict .prompt-card>.t{box-sizing:border-box;display:flex;align-items:center;justify-content:center;font:600 var(--cn-word-size)/1.25 var(--practice-font);padding:var(--classroom-word-padding,.2em .35em);min-height:var(--classroom-word-min,1.8em);min-width:var(--classroom-word-min,1.8em);border-radius:var(--classroom-word-radius,.35em);background:rgb(var(--ink-rgb) / 7%);width:auto;max-width:100%;overflow-wrap:anywhere;white-space:normal}
.stage.spelling .prompt-text{flex-shrink:1;opacity:1;transform:none;position:static;translate:none;color:var(--ink)}
.stage.spelling .prompt-card:has(.pyl){max-width:none}
.stage.spelling .prompt-text.pyl{width:max-content;max-width:none;flex-shrink:0;white-space:nowrap;overflow-wrap:normal}
.stage.spelling .dt-area.cn-paged{overflow-x:auto}
.stage:is(.spelling,.dict) .prompt-card.cur>:is(.prompt-text,.t),.stage.cn-listen .cnl-card.current>.cnl-face{box-shadow:inset 0 0 0 2px var(--practice-accent);background:rgb(var(--practice-accent-rgb) / 30%)}
.stage:is(.spelling,.dict) .prompt-card.done>:is(.prompt-text,.t),.stage.cn-listen .cnl-card.done>.cnl-face{background:rgb(var(--ink-rgb) / 14%)}
.stage.spelling .dt-list .li .ln{min-width:0;display:flex;align-items:center;padding:.8vh 1.2vw;border-radius:.8vh;background:rgb(var(--ink-rgb) / 7%)}
.stage.spelling .dt-list .li .w,.stage.cn-listen .cnl-answer{display:flex;flex-direction:row;align-items:baseline;justify-content:center;gap:1.2vw;max-width:100%;min-width:0;text-align:left;flex-wrap:wrap}
.stage.spelling :is(.answer-zh,.answer-py),.stage.cn-listen :is(.cnl-answer>b,.cnl-py){max-width:100%;overflow-wrap:anywhere}
.stage.spelling .dt-list.dealing .answer-py,.stage.cn-listen .dealing .cnl-py{opacity:0}.stage.spelling .dt-list.dealing .w::before{display:none}
.stage:is(.spelling,.dict) .dt-foot,.stage.cn-listen .cnl-foot{min-height:0;justify-content:center}
.stage.cn-listen .cnl-viewport{overflow:auto;scrollbar-width:none}.stage.cn-listen .cnl-viewport::-webkit-scrollbar{display:none}
.stage.cn-listen .answers .cnl-face{width:auto}
.stage.cn-listen .cnl-hidden{color:transparent}
.stage.dict .prompt-card>.t{width:auto;color:inherit;font-size:var(--cn-word-size)}
.stage.dict .prompt-card{color:transparent;font-size:var(--cn-word-size);font-weight:600;animation:none}
.stage.dict .prompt-card.paused>.bars{left:var(--number-gutter)}
.stage.dict .dt-list .li{align-items:center}
.stage.dict .dt-list .ln{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5vw 1.2vw;padding:.8vh 1.2vw}
.stage.dict .dt-list .w{font-size:var(--cn-word-size);padding:0;background:transparent}
.stage.dict .dt-list small{font-size:var(--cn-py-size);max-width:100%;padding:0}
.stage.dict .dt-list:not(.cn) small{font-size:3vh}

.stage.dict .dt-done-btn{position:static}
/* The turn and the text's appearing are two animations: the turn alone (transform) is run by the
   graphics card; one animation that also changes colour is computed frame by frame on the main
   thread (2026-11-01, Win7). The text stays hidden while the back of the card faces the class. */
.stage .qa-flip{animation:qa-face-turn .34s ease-out both,qa-face-ink .34s linear both}
.stage.cn-listen .qa-flip .cnl-hidden{color:inherit}
@keyframes qa-face-turn{0%{transform:rotateY(-180deg)}100%{transform:rotateY(0)}}
@keyframes qa-face-ink{0%,49.9%{color:transparent}50%,100%{color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.stage .qa-flip{animation:none}}

.stage:is(.dict,.spelling,.cn-listen) [hidden]{display:none!important}

.stage.spelling .dt-list.flat .li>.ln,.stage.cn-listen .cnl-grid.flat .cnl-face{background:transparent;transition:background .22s ease}

.stage:is(.spelling,.dict) .prompt-card>.question-no,.stage.cn-listen .cnl-card>.cnl-no,.stage:is(.spelling,.dict) .dt-list .li>em{top:50%;transform:translateY(-50%)}
.stage.dict .prompt-card.paused>.bars{height:1em}

.stage:is(.dict,.spelling,.cn-listen)[hidden]{display:none!important}
.stage:is(.dict,.spelling) .dt-list{animation:none}

/* Ten actual text lines, not ten question boxes. Wrapped definitions
   consume whole line slots, keeping the viewport edge between glyph lines.
   Materials remain complete in one continuous scroll sheet. */
.stage:is(.dict,.spelling,.cn-listen) .qa-sheet{--answer-line:10cqh;display:grid;grid-template-columns:repeat(var(--qa-cols,1),minmax(0,1fr));grid-auto-rows:minmax(var(--answer-line),auto);gap:0 2vw;align-content:start;align-items:stretch}
.stage:is(.dict,.spelling,.cn-listen) .qa-sheet>:is(.li,.cnl-card){width:auto;min-width:0;min-height:0;align-items:flex-start;justify-content:flex-start;padding:0 0 0 var(--number-gutter);border:0;background:none;box-shadow:none}
.stage:is(.dict,.spelling,.cn-listen) .qa-sheet>:is(.li,.cnl-card)>:is(em,.cnl-no){top:calc((var(--answer-line) - var(--cn-word-size))/2);transform:none}
.stage:is(.dict,.spelling) .qa-sheet .li>.ln,.stage.cn-listen .qa-sheet .cnl-face{width:100%;min-width:0;box-sizing:border-box;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.stage.dict .qa-sheet .li>.ln,.stage.spelling .qa-sheet .li .w,.stage.cn-listen .qa-sheet .cnl-answer{display:block;min-width:0;width:100%;text-align:left;line-height:var(--answer-line)}
.stage.dict .qa-sheet .li>.ln>.w,.stage.spelling .qa-sheet .answer-zh,.stage.cn-listen .qa-sheet .cnl-answer>b{margin-inline-end:.4em}
.stage.dict .qa-sheet :is(.w,.t,small),.stage.spelling .qa-sheet :is(.answer-zh,.answer-py),.stage.cn-listen .qa-sheet :is(.cnl-answer>b,.cnl-py){display:inline}
.stage:is(.dict,.spelling,.cn-listen) .qa-sheet :is(.w,.t,.answer-zh,.answer-py,.cnl-answer>b,.cnl-py,small){min-width:0;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;background:none;box-shadow:none}
.stage:is(.dict,.spelling,.cn-listen) .qa-sheet [data-answer-current]>:is(em,.cnl-no){color:var(--accent,var(--theme-accent,var(--amber,#c4a464)))}

/* Center a short sheet as a group. Auto margins become zero when its actual
   height exceeds the viewport, so long sheets still start at the top. */
.stage:is(.dict,.spelling) .dt-area:not(.list):not(.answer-scroll){justify-content:center}
.stage.cn-listen .cnl-viewport{display:flex;flex-direction:column;justify-content:center}
.stage.cn-listen .cnl-viewport>.cnl-grid{flex:none}
.stage:is(.dict,.spelling,.cn-listen) .qa-viewport{display:flex;flex-direction:column;font-size:var(--cn-word-size)}
.stage:is(.dict,.spelling,.cn-listen) .qa-viewport>.qa-sheet{margin:auto 0;flex:none}