/* 默書 App —— 基本樣式
   UI-SPEC §0 硬性要求 + §18 Responsive。由細屏行起,向上加。 */

:root {
  /* 中文用襯線(課本感),介面用無襯線(§0) */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-zh: "Noto Serif TC", "Songti TC", "SimSun", "STSong", serif;

  --bg: #f6f5f2;
  --surface: #ffffff;
  --border: #dcd7cf;
  --text: #1f1d1a;
  --muted: #6b6560;
  --accent: #2f6f4e;
  --accent-text: #ffffff;
  --danger: #a8331f;
  --focus: #1a6fd4;

  --radius: 10px;
  --gap: 12px;
  /* §0:小朋友㩒嘅掣最細 56×56 */
  --tap: 56px;

  --ui-size: 16px;      /* 家長管理畫面 */
  --study-size: 20px;   /* 學生默書/溫習畫面(§18 字級) */
}

/*
  預設淺色。之前係跟系統設定行,所以系統揀咗深色就會變深色。
  而家要深色就要自己撳個掣 —— 存喺 localStorage,下次開返仲係嗰個。
*/
[data-theme="dark"] {
  --bg: #171614; --surface: #201e1b; --border: #3a3631;
  --text: #ece8e2; --muted: #a29b93; --accent: #6fbf90;
  --accent-text: #0f1a13; --danger: #f08d7a; --focus: #7fb4f5;
}

* { box-sizing: border-box; }

/*
  ★ hidden 一定要贏。
  瀏覽器預設 [hidden]{display:none} 嘅權重同 class selector 一樣,
  所以 .d-overlay{display:flex} 排喺後面就會蓋過佢 —— 個遮罩會永遠
  顯示,擋住下面所有掣,而且冇任何錯誤訊息。踩過一次。
*/
[hidden] { display: none !important; }

body {
  margin: 0;
  /* §18:用 dvh 唔用 vh,否則 iOS 底部嘅掣會畀瀏覽器工具列食咗 */
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: var(--ui-size)/1.6 var(--font-ui);
}

/* 中文內容(題目、生字)用襯線 */
.zh, .item-text, .hanzi { font-family: var(--font-zh); }

/* §0:鍵盤 focus 一定要睇得見 */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* §0:尊重 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 版面 ──────────────────────────────────────────────── */
.app { max-width: 1100px; margin: 0 auto; padding: var(--gap); }

.topbar {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap); border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 10;
}
.topbar h1 { font-size: 1.05rem; margin: 0; flex: 1; font-weight: 600; }
/* §2:平板放喺枱面畀小朋友用,登出掣唔好擺喺順手位 */
.topbar .logout { opacity: .55; font-size: .85rem; }

/* ── 掣 ────────────────────────────────────────────────── */
button, .btn {
  min-height: var(--tap);
  padding: 0 18px;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
button:hover { border-color: var(--muted); }
button:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 600; }
.btn-danger  { color: var(--danger); }
.btn-quiet   { background: transparent; border-color: transparent; }
.btn-sm      { min-height: 40px; padding: 0 12px; font-size: .9rem; }

/* ── 表單 ──────────────────────────────────────────────── */
label { display: block; margin-bottom: 6px; font-size: .9rem; color: var(--muted); }
input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.field { margin-bottom: var(--gap); }

/* ── 卡 / list ─────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--gap); margin-bottom: var(--gap);
}
.row { display: flex; align-items: center; gap: var(--gap); }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: .88rem; }
.stack > * + * { margin-top: var(--gap); }

.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.empty button { margin-top: var(--gap); }

.error {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid var(--danger);
  border-radius: var(--radius); padding: var(--gap); margin-bottom: var(--gap);
}
.error .hint { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }

/* ── 揀小朋友(§UI-3)────────────────────────────────── */
.profile-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, 1fr);   /* sm:一行 2 個 */
}
@media (min-width: 600px)  { .profile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .profile-grid { grid-template-columns: repeat(4, 1fr); } }

.profile-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 12px; min-height: 150px;
}
.avatar {
  width: 88px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text);
  font-family: var(--font-zh); font-size: 2.2rem; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-card .name { font-family: var(--font-zh); font-size: 1.15rem; }

/* §18:冇 hover 嘅裝置,次要動作要一直見到,唔可以匿埋 */
@media (hover: hover) { .on-hover { opacity: 0; } .card:hover .on-hover { opacity: 1; } }

.spinner { padding: 40px; text-align: center; color: var(--muted); }

/* ── Chapter 一覽(§UI-4)──────────────────────────────── */
.filters { margin-bottom: 16px; }
.filter-row { flex-wrap: wrap; margin-top: 8px; }
.filter-row select { flex: 1 1 140px; }

.chapter-title { font-size: 1.15rem; }
.chapter-count { white-space: nowrap; font-size: 1.05rem; }
.chapter-actions { margin-top: 10px; }
.chapter-actions .btn:first-child { flex: 1; }

/* §18 lg:一行擺得晒,唔使上下疊 */
@media (min-width: 1024px) {
  .chapter-row { display: flex; align-items: center; gap: var(--gap); }
  .chapter-row > .row:first-child { flex: 1; }
  .chapter-actions { margin-top: 0; flex: 0 0 auto; }
  .chapter-actions .btn:first-child { flex: 0 0 auto; }
}

/* ── Chapter 編輯(§UI-5)──────────────────────────────── */
.save-status { min-width: 70px; text-align: right; font-size: .85rem; }
.meta-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 600px)  { .meta-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .meta-grid { grid-template-columns: repeat(4, 1fr); } }

.item-list { margin-top: 8px; }
.item-row { padding: 10px 12px; }
.item-text { font-size: 1.2rem; }
.item-extra { margin-top: 8px; flex-wrap: wrap; gap: 8px; }
.item-extra > * { flex: 1 1 100%; }
.ord-buttons { display: flex; flex-direction: column; gap: 2px; }
.ord-buttons .btn { min-height: 26px; padding: 0 8px; line-height: 1; }

/*
  §18:sm 一個字一張卡(例句提示摺埋落第二行),lg 先至一行過。
  刻意唔喺手機出橫向 scroll 嘅 table —— UI-SPEC 明文禁止。
*/
@media (min-width: 1024px) {
  .item-row { display: flex; align-items: center; gap: var(--gap); }
  .item-row > .row:first-child { flex: 0 0 auto; }
  .item-extra { margin-top: 0; flex: 1; flex-wrap: nowrap; }
  .item-extra > *:nth-child(1) { flex: 2 1 0; }
  .item-extra > *:nth-child(2) { flex: 1.5 1 0; }
  .item-extra > *:nth-child(3) { flex: 0 0 130px; }
}

/* ── 貼文字批量加 ─────────────────────────────────────── */
.paste-box textarea { min-height: 110px; }
.preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cand {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 10px; background: var(--surface); cursor: pointer;
}
/* 疑似雜訊:灰啲、預設唔剔,但仲喺度畀家長反對(§UI-11) */
.cand-noise { opacity: .55; border-style: dashed; }
.cand-text {
  width: auto; min-width: 4.5em; max-width: 12em;
  min-height: auto; padding: 2px 6px; font-size: 1.05rem;
  border: none; background: transparent;
}
.cand-text:focus-visible { background: var(--bg); }
.cand-tag { font-size: .75rem; white-space: nowrap; }

/* ── 文章(背默)────────────────────────────────────────── */
.passage-box textarea { font-family: var(--font-zh); font-size: 1.05rem; }
.sentence-list { margin-top: 10px; }
.sentence {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.sentence:last-child { border-bottom: none; }
.sentence-no { flex: 0 0 2em; text-align: right; font-size: .85rem; }
.sentence-para { flex: 0 0 auto; font-size: .75rem; }

/* 底部:儲存 / 刪除。sticky 令長頁面碌到邊都撳得到 */
.footer-bar {
  position: sticky; bottom: 0;
  margin-top: 28px; padding: 12px 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  gap: var(--gap);
}
.footer-bar .btn-danger { border-color: var(--danger); }

/* ── 開始默書 設定(§UI-6)────────────────────────────────── */
.radio-row {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--tap); margin: 0; cursor: pointer;
  color: var(--text); font-size: 1rem;
}
.btn-big { min-height: 64px; font-size: 1.15rem; }
.warn {
  background: color-mix(in srgb, #b8860b 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #b8860b 45%, var(--surface));
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: var(--gap);
}

/*
  ── 默書進行中(§UI-7 / §18)──────────────────────────────
  §18:「三種尺寸 layout 完全一樣,唔好做 responsive 變化。用 vmin 落
  size,跟住短嗰邊縮放,橫置直置都啱。呢個畫面越簡單越穩陣。」
*/
.dictate {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4vmin; padding: 4vmin;
  background: var(--bg);
  /* iOS 底部工具列會食位,所以用 dvh */
  height: 100dvh;
}
.d-counter { font-size: 4vmin; color: var(--muted); letter-spacing: .05em; }
.d-cue {
  font-family: var(--font-zh);
  font-size: 7vmin; color: var(--text); min-height: 1.2em;
}
/* 「再讀一次」係最大嘅掣 —— 真實默書都係咁,舉手叫老師再讀 */
.d-replay {
  font-family: var(--font-zh);
  width: min(62vmin, 460px); height: min(34vmin, 240px);
  font-size: 7.5vmin; letter-spacing: .12em;
  border: 3px solid var(--border); border-radius: 3vmin;
  background: var(--surface); color: var(--text);
}
.d-replay:active { background: var(--bg); }
.d-row { display: flex; gap: 4vmin; }
.d-side { min-width: 26vmin; min-height: 13vmin; font-size: 4vmin; }
.d-answer {
  width: min(62vmin, 460px); height: 13vmin; min-height: 56px;
  font-size: 5vmin; text-align: center; letter-spacing: .05em;
}
.d-clock { font-size: 4.5vmin; color: var(--muted); font-variant-numeric: tabular-nums; }
/* §UI-7:剩最後一分鐘先變色,唔好成日閃 */
.d-clock-low { color: var(--danger); font-weight: 600; }

/* 暫停 = 遮住晒,防止偷望(§UI-7) */
.d-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bg);
}
.d-overlay-text { font-family: var(--font-zh); font-size: 8vmin; margin: 0 0 4vmin; }

/* ── 批改(§UI-8)───────────────────────────────────────── */
.grade-list { padding-bottom: 90px; }
.grade-row { padding: 10px 12px; }
.grade-row.is-wrong { border-color: var(--danger); }
.grade-no { flex: 0 0 2.2em; text-align: right; }
.grade-text { font-size: 1.25rem; }
.grade-marks { flex: 0 0 auto; gap: 8px; }
.mark {
  width: var(--tap); min-width: var(--tap); height: var(--tap);
  padding: 0; font-size: 1.4rem; line-height: 1;
}
.mark-on { background: var(--accent); color: var(--accent-text); border-color: transparent; }
.grade-row.is-wrong .mark-on { background: var(--danger); color: #fff; }
.grade-tags { flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-left: 2.2em; }

/* 碌嘅時候頂部要有 sticky 條顯示「錯咗 3 個」同「交卷」(§18) */
.grade-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--gap);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.grade-bar .grow { font-size: 1rem; }

/* §18 lg:兩欄並排,一屏睇晒三十題 */
@media (min-width: 1024px) {
  .grade-list { columns: 2; column-gap: var(--gap); }
  .grade-row { break-inside: avoid; }
}

/* ── 成績(§UI-9)───────────────────────────────────────── */
.result-score {
  font-size: clamp(3.5rem, 18vmin, 7rem); text-align: center;
  margin: 24px 0 4px; font-variant-numeric: tabular-nums; line-height: 1;
}
.result-compare { text-align: center; font-size: 1rem; }
.result-compare .up { color: var(--accent); font-weight: 600; }
.result-perfect { text-align: center; font-size: 1.5rem; margin-top: 28px; color: var(--accent); }
.wrong-row { display: flex; align-items: center; gap: var(--gap); padding: 10px 0; }
.wrong-row.sep { border-top: 1px solid var(--border); }
.wrong-text { font-size: 1.4rem; }

/* 中斷後繼續(§UI-7) */
.resume-card { border-color: var(--accent); border-width: 2px; }

/* ── 默書畫面新加嘅嘢 ────────────────────────────────────── */
.d-title { font-size: 4.5vmin; color: var(--text); opacity: .75; }

/* 語音播放時嘅跳動指示。冇聲嗰陣會靜止,所以一眼睇到係咪讀緊 */
.d-wave { display: flex; align-items: flex-end; gap: 1.2vmin; height: 7vmin; }
.d-wave span {
  width: 1.4vmin; height: 1.4vmin; border-radius: 1vmin;
  background: var(--border); transition: background .2s;
}
.d-wave.is-on span {
  background: var(--accent);
  animation: d-bounce .9s ease-in-out infinite;
}
@keyframes d-bounce {
  0%, 100% { height: 1.4vmin; }
  50%      { height: 7vmin; }
}
/* §0 硬性要求:尊重 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .d-wave.is-on span { animation: none; height: 4vmin; }
}

/* 底部進度條(用家要求加,原 spec §UI-7 係唔要嘅) */
.d-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.4vmin; background: var(--border);
}
.d-bar-fill {
  height: 100%; width: 0; background: var(--accent);
  transition: width .35s ease;
}

/* 「開始默生字」「所有默書已完成」大字報 */
.d-banner {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.d-banner-text { font-size: 9vmin; letter-spacing: .08em; text-align: center; padding: 6vmin; }

/* ── 逐個字批改 ─────────────────────────────────────────── */
.grade-title { margin: 4px 0 2px; font-size: 1.5rem; }
.grade-section { margin-top: 22px; }
.grade-head { margin-bottom: 6px; }
.grade-head h3 { margin: 0; }
.grade-line { align-items: flex-start; }
.grade-sub { margin-top: 6px; padding-left: 2.2em; }

.char-row { display: flex; flex-wrap: wrap; gap: 4px; }
/* 每個字一粒,撳得。§0:小朋友撳嘅掣要夠大 */
.char {
  font-family: var(--font-zh);
  min-width: 46px; height: 46px; padding: 0 4px;
  font-size: 1.35rem; line-height: 1;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.char-wrong {
  background: var(--danger); color: #fff; border-color: transparent; font-weight: 600;
}
/* 英文一個字母一粒會太碎,所以窄啲 */
.grade-row .char { min-width: 34px; }
.grade-row .char:only-child { min-width: 46px; }

/* 成績頁:錯字 highlight */
.wrong-block { flex-direction: column; align-items: flex-start; gap: 4px; }
.char-bad {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger); font-weight: 700;
  border-radius: 4px; padding: 0 2px;
}
.char-count { font-size: .55em; vertical-align: sub; opacity: .85; margin-left: 1px; }

/* 語音挑選頁 */
.voice-row {
  display: flex; align-items: center; gap: var(--gap);
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.voice-row:last-child { border-bottom: none; }