/* Shared quiz UI for 二选一 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); }
.app .choices { gap: var(--space-3); }
.app .progress-wrap { margin: 0 0 var(--space-4); }
.app .choice { min-height: 62px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.app .quiz-toolbar { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-card); }
.app .footer-actions { gap: var(--space-2); flex-wrap: wrap; }
.app :is(.restart, .sound-toggle) { min-height: var(--control-height); }
.app .voice-picker { min-width: 0; flex-wrap: wrap; }
.app .voice-picker select { min-height: var(--control-height); max-width: 180px; }
@media (max-width: 600px) {
  .app .card-inner { padding: var(--space-4); }
  .app .card-footer, .app .quiz-toolbar { padding: var(--space-3) var(--space-4); }
  /* Phones: the first question and all its choices fit above the bottom tab bar on first load.
     The page name is already in the top bar and the section tabs, so the h1 stays for screen readers only. */
  body.has-app-nav main.app > .page-header { margin-bottom: var(--space-3); }
  main.app > .page-header .page-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app .progress-wrap { margin-bottom: var(--space-3); }
  /* toolbar: the score, then one row of controls (was up to four rows) */
  .app .quiz-toolbar { display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
  .app .quiz-toolbar .score { font-size: .8125rem; }
  .app .footer-actions { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-1); min-width: 0; }
  .app :is(.restart, .sound-toggle) { flex-shrink: 0; padding-inline: var(--space-2); font-size: .875rem; white-space: nowrap; }
  /* the select's visible label text is hidden on phones; it is still the select's accessible name */
  .app .voice-picker { flex: 0 1 auto; flex-wrap: nowrap; font-size: 0; gap: 0; }
  .app .voice-picker select { width: 100%; max-width: 128px; min-width: 72px; font-size: .8125rem; }
  .app .choices { gap: var(--space-2); }
  .app .choice { min-height: 52px; padding-block: var(--space-2); }
}

/* 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(--ok); }
.choice.wrong b::after { content: " ✕"; color: var(--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(--border, var(--line)); border-radius: 20px;
  background: var(--surface); box-shadow: 0 -8px 40px rgb(var(--shadow-rgb) / .18);
  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; }
.fb-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 999px; color: white; font-weight: 700; }
.fb-sheet.is-correct .fb-icon { background: #1f7a55; }
.fb-sheet.is-wrong .fb-icon { background: #b83a52; }
.fb-head strong { color: var(--ink, var(--ink)); font-size: 1.05rem; }
.fb-head .fb-face { margin-left: auto; color: var(--blue-600, var(--blue-600)); font-size: .9rem; }
.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); }
.fb-label { flex-shrink: 0; min-width: 52px; color: var(--muted, var(--muted)); font-size: .8rem; font-weight: 500; }
.fb-row b { color: var(--ink, var(--ink)); font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; 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; }
.fb-sentence { display: flex; gap: 8px; align-items: flex-start; width: 100%; min-height: 44px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--blue-200, var(--line)); border-radius: 12px; background: var(--blue-50, var(--tint-1)); color: var(--ink, var(--ink)); font: inherit; font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; line-height: 1.7; text-align: left; cursor: pointer; }
.fb-sentence:hover { border-color: var(--blue-400); }
.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 card ── */
.round-summary { display: grid; gap: 14px; justify-items: center; padding: 28px 20px; text-align: center; }
.round-summary .round-score { margin: 0; color: var(--ink, var(--ink)); font-size: 1.6rem; font-weight: 700; }
.round-summary .round-detail { margin: 0; color: var(--muted, var(--muted)); line-height: 1.7; }
.round-summary .round-snack { margin: 0; color: var(--blue-600, var(--blue-600)); font-weight: 500; }
.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, var(--blue-600)); 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(--blue-600); }
.round-share-link:focus-visible { outline: 2px solid var(--blue-600, #17769d); 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; }
}