/* Shared quiz UI for 易混辨析 (two-choice.html) and 语法四选一: feedback bottom sheet, round summary, answer states. */

/* The two practice modes share the same card insets, answer rows and controls. */
.app .card-inner { padding: var(--space-5); }
.app .card-footer { padding: var(--space-4) var(--space-5); flex-wrap: wrap; gap: var(--space-2); }
/* answers: at least 56px tall with an 8px gap, on every screen */
.app .choices { gap: var(--space-2); }
.app .choice { min-height: 56px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .app .card-inner { padding: var(--space-4); }
  .app .card-footer { padding: var(--space-3) var(--space-4); }
  .app .choice { padding-block: var(--space-2); }
}

/* ── Answering mode (both quizzes): one question at a time under a slim bar ──
   While a question waits (body.quiz-answering) the page shows only the bar (segmented progress + ⋯), the sentence with its
   read-aloud icon, and the answers. The page header (the h1 stays for screen readers) and the section tabs step
   aside; 「有 N 题想再看看」 and the score, 朗读, voice, 换一轮, 使用说明 and the other quiz are in the ⋯ sheet. The round summary brings the
   section tabs back; ⋯ stays. The page header is for screen readers on both (the bar starts the page). Behaviour: SandyQuiz.initAnswerMode (assets/quiz.js). */
/* one calm column, at most 640px wide, centred in the room beside the sidebar and Sandy's rail */
main.app > * { max-width: 640px; margin-inline: auto; }
main.app > .ux-bar { width: 100%; }
main.app > .page-header { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.quiz-answering .sn-local { display: none; }
body.has-app-nav main.app { padding-top: var(--space-2); }
.ux-bar { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 44px; margin: 0 0 var(--space-3); }
/* 10 segments, 4px tall, 4px apart: answered ones quiet, the current one apricot; never right / wrong colours */
.ux-dots { flex: 1; display: grid; grid-template-columns: repeat(var(--ux-total, 10), minmax(0, 1fr)); gap: 4px; }
.ux-dots i { height: 4px; border-radius: var(--radius-pill); background: var(--color-line); }
.ux-dots i.is-done { background: var(--muted); opacity: .45; }
.ux-dots i.is-now { background: var(--color-accent-deco); }
body.round-done .ux-dots { visibility: hidden; }
.ux-more { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin-left: auto; margin-right: -10px; padding: 0; border: 0; border-radius: var(--radius-control); color: var(--ink-2); background: transparent; cursor: pointer; font: inherit; font-size: 1.25rem; line-height: 1; letter-spacing: 1px; }
.ux-more:hover, .ux-more[aria-expanded="true"] { background: var(--tint-2); }
.ux-more:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }
/* the one quiet direction on a learner's very first question */
.ux-hint { margin: calc(-1 * var(--space-1)) 0 var(--space-3); color: var(--muted); font-size: .875rem; line-height: 1.7; }
/* the sentence: 1.5rem, line-height 1.8, room on the right for the 44px read-aloud icon */
.app .card-inner { position: relative; }
.app .card-inner > #question { margin: var(--space-1) 44px var(--space-5) 0; color: var(--ink); font-size: 1.5rem; font-weight: 500; line-height: 1.8; line-break: strict; }
.app .card-inner > #questionAudio { position: absolute; top: var(--space-3); right: var(--space-2); display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-control); color: var(--muted); background: transparent; cursor: pointer; }
.app .card-inner > #questionAudio:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; }
.app .card-inner > #questionAudio:disabled { opacity: .5; cursor: default; }
.app .card-inner > #questionAudio[hidden] { display: none; }
.app .card-inner > #questionAudio:hover { color: var(--ink); background: var(--tint-2); }
.app .card-inner > #questionAudio .ui-icon { width: 20px; height: 20px; }

/* ── The ⋯ sheet: a bottom sheet above the tab bar on phones, a popover under ⋯ on desktop; rows on hairlines ── */
.ux-scrim { position: fixed; inset: 0; z-index: calc(var(--z-popover) - 1); background: rgb(var(--shadow-rgb) / .18); }
.ux-sheet { position: fixed; z-index: var(--z-popover); left: 8px; right: 8px; bottom: calc(var(--sn-bottom-bar, 66px) + 8px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - var(--sn-bottom-bar, 66px) - 88px); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1) var(--space-4) var(--space-2); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-float); text-align: left; animation: fb-up .2s ease-out; }
.ux-scrim[hidden], .ux-sheet[hidden] { display: none; }
.ux-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); min-height: 52px; margin: 0; border-top: 1px solid var(--color-line); font-size: .9375rem; line-height: 1.5; }
.ux-row[hidden] { display: none; }
.ux-sheet > .ux-row:first-child { border-top: 0; }
.ux-row.ux-stat { min-height: 44px; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.ux-row .link-arrow { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-link); font-size: .875rem; font-weight: 500; text-decoration: none; }
.ux-row .link-arrow:hover { text-decoration: underline; }
.ux-row .link-arrow:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; border-radius: 6px; }
.ux-switch-row { justify-content: flex-end; }
/* 朗读: a switch (track ≥3:1 off, the text-safe accent on) */
.ux-switch { position: relative; flex-shrink: 0; width: 56px; height: 44px; margin-right: -6px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ux-switch::before { content: ""; position: absolute; top: 9px; left: 6px; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--control-line); transition: background .16s ease; }
.ux-switch::after { content: ""; position: absolute; top: 12px; left: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .25); transition: transform .16s ease; }
.ux-switch[aria-checked="true"]::before { background: var(--color-accent); }
.ux-switch[aria-checked="true"]::after { transform: translateX(18px); }
.ux-switch:disabled { cursor: default; opacity: .5; }
.ux-switch:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 0; border-radius: var(--radius-pill); }
/* the real voice select, moved in from the old toolbar (site.css's input rule sets `font: inherit`, so size it here) */
.app .ux-sheet .voice-picker select { height: var(--control-height); min-height: var(--control-height); min-width: 0; max-width: 220px; flex: 0 1 220px; padding: 0 var(--space-2); border: 1px solid var(--control-line); border-radius: var(--radius-input); color: var(--ink); background: var(--surface); font-size: .875rem; line-height: 1.3; text-overflow: ellipsis; }
/* 换一轮: the whole row is the button; mid-round it asks first (「这一轮还没做完，要换一轮吗？」) */
.ux-row-btn { flex: 1; min-height: 52px; margin: 0; padding: 0; border: 0; color: var(--ink); background: transparent; cursor: pointer; font: inherit; text-align: left; }
.ux-row-btn:hover { color: var(--color-link); }
.ux-row-btn:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: -2px; border-radius: 6px; }
.ux-confirm { padding: var(--space-3) 0; }
.ux-confirm p { flex: 1 1 100%; margin: 0; color: var(--ink-2); }
.ux-confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* 使用说明: the page's help fold (assets/help.js) moved into its row */
.ux-help-row { display: block; }
.ux-help-row .study-help { margin: 0; }
.ux-help-row .study-help > summary { width: 100%; min-height: 52px; margin: 0; padding: 0; justify-content: space-between; color: var(--ink); font-size: .9375rem; }
.ux-help-row .study-help[open] { padding-bottom: var(--space-2); }
.ux-help-row .study-help p { margin: 0 0 var(--space-1); color: var(--ink-2); font-size: .875rem; line-height: 1.7; }
/* Sandy is silent through a round and on its summary (the rest line is the one voice): her bubble only shows while she
   answers the learner (a tap, a snack, 💤), on every width. Her hops and tilts stay. */
body .sandy:not(.is-talking) .sandy-speech { display: none; }
/* while a sheet is open Sandy stays where she is; only her speech bubble steps aside */
body.has-sandy-dock.more-open .sandy .sandy-speech,
body.has-sandy-dock.more-open .sandy.is-talking .sandy-speech, body.more-open .sandy-speech { display: none; }
@media (min-width: 901px) {
  /* desktop: an anchored popover under ⋯; a tap outside still closes it */
  .ux-scrim { background: transparent; }
  .ux-sheet { position: absolute; top: calc(100% + 4px); right: -10px; bottom: auto; left: auto; width: 360px; max-height: min(560px, calc(100vh - 160px)); }
}

/* Answer buttons: a visible boundary (≥3:1) and an icon, not colour alone, for correct / wrong */
.choice { border-color: var(--control-line); }
.choice.correct b::after { content: " ✓"; color: var(--color-ok); }
.choice.wrong b::after { content: " ✕"; color: var(--color-bad); }

/* ── Feedback sheet ── */
.fb-sheet {
  position: fixed; z-index: var(--z-popover); bottom: 20px; left: var(--sn-sidebar-width, 0px); right: 0;
  width: min(640px, calc(100% - var(--sn-sidebar-width, 0px) - 32px)); max-height: 62vh; margin: 0 auto; overflow-y: auto;
  padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius-dialog);
  background: var(--surface); box-shadow: var(--shadow-float);
  animation: fb-up .2s ease-out;
}
body:not(.has-app-nav) .fb-sheet { left: 0; width: min(640px, calc(100% - 32px)); }
.fb-sheet[hidden] { display: none; }
@keyframes fb-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fb-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* ✓ / ✕ disc: the くすみ sage / dusty-rose answer colours (set per palette in assets/appearance.css); the mark is
   --color-on-status (white in light, the page colour in dark, where ok / bad turn light), ≥4.5:1 in every palette */
.fb-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; color: var(--color-on-status); font-weight: 700; }
.fb-sheet.is-correct .fb-icon { background: var(--color-ok); }
.fb-sheet.is-wrong .fb-icon { background: var(--color-bad); }
/* 「考点 · 动词自他」: one muted line under the title, in line with it (past the 32px disc + 10px gap) */
.fb-topic { margin: -6px 0 12px 42px; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.fb-head strong { color: var(--ink); font-size: 1.05rem; font-weight: 500; }
.fb-head .fb-face { margin-left: auto; color: var(--color-accent); font-family: var(--font-body); font-size: .9rem; font-weight: 500; }
.fb-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.fb-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); }
.fb-row.is-picked { background: var(--bad-bg); }
/* 「✓ 正解」 / 「✕ 你选」 take the state colour (AA on the tint); the glyph says it without colour */
.fb-row .fb-label { color: var(--color-ok); }
.fb-row.is-picked .fb-label { color: var(--color-bad); }
.fb-label { flex-shrink: 0; min-width: 52px; color: var(--muted); font-size: .8rem; font-weight: 500; }
.fb-row b { color: var(--ink); font-family: var(--font-ja); font-size: 1.05rem; }
.fb-row > *, .fb-sentence > * { min-width: 0; overflow-wrap: anywhere; }
.fb-why { margin: 0 0 10px; padding: 0 2px; color: var(--ink-2); line-height: 1.75; }
.fb-why .fb-label { display: block; margin-bottom: 2px; }
/* the example is a soft-filled (tertiary) row on the sheet: no second border inside the sheet's own */
.fb-sentence { display: flex; gap: 8px; align-items: flex-start; width: 100%; min-height: 44px; margin: 0 0 14px; padding: 10px 12px; border: 0; border-radius: var(--radius-input); background: var(--tint-2); color: var(--ink, var(--ink)); font: inherit; font-family: var(--font-ja); line-height: 1.7; text-align: left; cursor: pointer; }
.fb-sentence:hover { background: var(--tint-3); }
.fb-sentence:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }
.fb-continue { min-height: 48px; font-size: 1rem; }
/* Correct answers get a compact sheet: verdict, sentence, continue */
.fb-sheet.is-correct .fb-why { display: none; }
body.fb-open .celebration { display: none; }

/* ── Round summary: the rest moment first (the companion asleep + 「这一轮辛苦啦，休息一下吧～」), then a quiet score ── */
.round-summary { display: grid; gap: 12px; justify-items: center; padding: 4px 0 8px; text-align: center; }
.round-summary .rest-moment { margin: 0 auto; padding: 0; }
.round-summary .round-rest-line { margin: 0; color: var(--ink-2); line-height: 1.7; }
/* The score is study data, said quietly: no big number, no "only 3 / 10" */
.round-summary .round-score { margin: 0; color: var(--muted); font-family: var(--font-body); font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }
/* 「有 3 题想再看看」: the round's questions to look at again, folded on hairlines (a +/− disclosure, never a box) */
.round-review { width: 100%; max-width: 480px; border-block: 1px solid var(--color-line); text-align: left; }
.round-review > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-1); color: var(--ink-2); font-weight: 500; cursor: pointer; }
.round-review > summary:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; border-radius: 6px; }
.round-review-list { margin: 0; padding: 0 var(--space-1) var(--space-2); list-style: none; }
.round-review-list li { display: grid; gap: 2px; padding: var(--space-2) 0; border-top: 1px solid var(--color-line); color: var(--ink); line-height: 1.7; overflow-wrap: anywhere; }
.round-review-answer { color: var(--muted); font-size: .875rem; }
.round-review-answer b { color: var(--ink); font-weight: 500; }
/* the round's misses: a quiet 「已放进错题本」 with the review icon, never red */
.round-review-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .8125rem; }
.round-review-mark .ui-icon { width: 16px; height: 16px; }
.round-summary .round-detail { margin: 0; color: var(--muted); line-height: 1.7; }
.round-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* the share card: a quiet text link on its own line, not a third button */
.round-share { margin: -6px 0 0; }
.round-share-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: .9rem; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; cursor: pointer; }
.round-share-link:hover { color: var(--color-link); }
.round-share-link:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; border-radius: 6px; }


@media (max-width: 900px) {
  .fb-sheet { left: 0; right: 0; bottom: calc(var(--sn-bottom-bar, 66px) + 8px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 16px); max-height: 60vh; border-radius: 18px; }
  /* Sandy stays in her dock in the tab bar (assets/sandy.css), below the sheet; only her speech bubble steps aside */
  body.fb-open:not(.has-sandy-dock) .sandy { visibility: hidden; }
}