/* LearnEng — "night dictionary" theme.
   Warm espresso dark + paper text + lamp-gold action color.
   The word entry is typeset like a dictionary headword (serif);
   the positional root colors are the app's signature element. */

:root {
  --bg: #151110;
  --surface: #201a17;
  --surface-2: #2c2420;
  --line: #3a302a;
  --text: #ebe3d6;
  --text-dim: #a2947f;
  --gold: #d9a441;
  --good: #8fb573;
  --bad: #d97e6a;
  --easy: #b49bd6;
  --on-accent: #1c1613;
  /* Positional root colors: 1st moss, 2nd amber, 3rd clay, 4th dusty blue */
  --root-0: #8fb573;
  --root-1: #e3a455;
  --root-2: #d97e6a;
  --root-3: #82a7ce;
  --root-mute: #6f6257;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Light "day dictionary": warm paper, coffee ink, deeper accents for
   contrast. Applied when the user picks light, or picks system and the
   OS is light. data-theme="dark" always wins over the OS preference. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3ede1;
    --surface: #fbf7ee;
    --surface-2: #ece3d1;
    --line: #dbcfb8;
    --text: #3b2f24;
    --text-dim: #8a7a66;
    --gold: #a8741f;
    --good: #587f43;
    --bad: #b5503f;
    --easy: #7d5aa8;
    --on-accent: #fdfaf3;
    --root-0: #4c7a37;
    --root-1: #a8641a;
    --root-2: #b04a38;
    --root-3: #38648f;
    --root-mute: #a2937f;
  }
}
:root[data-theme="light"] {
  --bg: #f3ede1;
  --surface: #fbf7ee;
  --surface-2: #ece3d1;
  --line: #dbcfb8;
  --text: #3b2f24;
  --text-dim: #8a7a66;
  --gold: #a8741f;
  --good: #587f43;
  --bad: #b5503f;
  --easy: #7d5aa8;
  --on-accent: #fdfaf3;
  --root-0: #4c7a37;
  --root-1: #a8641a;
  --root-2: #b04a38;
  --root-3: #38648f;
  --root-mute: #a2937f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.hidden { display: none !important; }
.dim { color: var(--text-dim); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* tabs stay dead-center regardless of side widths */
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
.topbar .brand { justify-self: start; }
.topbar .tabs { justify-self: center; }
.topbar .topbar-right { justify-self: end; }

.tabs { display: flex; gap: 0.25rem; }
.tab {
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
}
.tab:hover { color: var(--text); filter: none; }
.tab.active {
  color: var(--gold);
  background: var(--surface);
  border: 1px solid var(--line);
}

.topbar-right { display: flex; align-items: center; gap: 0.8rem; }

/* Focus-time ring */
.timer { display: flex; align-items: center; gap: 0.4rem; }
.timer .ring-bg { stroke: var(--surface-2); }
.timer .ring-fg { stroke: var(--gold); transition: stroke-dashoffset 1s linear; }
.timer.done .ring-fg { stroke: var(--good); }
.timer.idle { opacity: 0.5; } /* visible on every tab, dimmed when not ticking */
#timer-text { font-size: 0.82rem; color: var(--text-dim); min-width: 4.5em; }
.brand { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0.5px; }
.badge {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 0.68rem;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  vertical-align: 2px;
  margin-left: 0.4rem;
}
.session-stats { color: var(--text-dim); font-size: 0.88rem; }

#app {
  max-width: 680px;
  margin: 0 auto;
  padding: 1.2rem;
}

/* --- Start / done screens --- */
.start-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2.2rem 2rem;
  text-align: center;
  margin-top: 6vh;
}
.start-card h1 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0 0 1.4rem;
  letter-spacing: 1px;
}

/* Progress toward the full word list */
.progress-wrap { margin: 0 auto 1.4rem; max-width: 420px; }
.progress-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.bar-seg { height: 100%; transition: width 0.6s ease; }
.bar-mastered { background: var(--good); }
.bar-started { background: var(--gold); }
.progress-label { margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-dim); }

.stat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  color: var(--text-dim);
  line-height: 2;
}
.stat-list span { color: var(--text); font-weight: 700; }

/* --- Buttons --- */
button {
  font: inherit;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--on-accent);
  background: var(--gold);
  padding: 0.6rem 1.2rem;
  transition: filter 0.15s;
}
button:hover { filter: brightness(1.1); }
button.big { font-size: 1.12rem; padding: 0.85rem 2.4rem; }
button.small { font-size: 0.85rem; padding: 0.35rem 0.8rem; }
button.ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
}
button.primary { display: block; margin: 0 auto 0.8rem; }
button.rate-again { background: var(--bad); }
button.rate-good { background: var(--good); }
button.rate-easy { background: var(--easy); }
.maint-row {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
#btn-triage { display: block; margin: 0 auto 0.8rem; }

.voice-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0 1rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.voice-row select {
  font: inherit;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  max-width: 260px;
}

/* --- Card --- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.2rem 1.5rem 1.6rem;
  min-height: 320px;
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.6rem;
}
.card-type {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 2px;
}

/* Gentle entry motion for freshly rendered card content */
#card-body > *, #triage-body > * {
  animation: rise 0.28s ease both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #card-body > *, #triage-body > * { animation: none; }
  .bar-seg { transition: none; }
}

/* Dictionary-style headword */
.word-display {
  font-family: var(--serif);
  font-size: 2.9rem;
  font-weight: 600;
  text-align: center;
  margin: 1.1rem 0 0.35rem;
  letter-spacing: 0.5px;
  word-break: break-word;
}
.word-display .root-0 { color: var(--root-0); }
.word-display .root-1 { color: var(--root-1); }
.word-display .root-2 { color: var(--root-2); }
.word-display .root-3 { color: var(--root-3); }
.word-display .root-mute { color: var(--root-mute); }
/* Cloze scaffold: letters kept for exact width but made invisible,
   with a dashed rule in the hidden root's own color. */
.word-display .blank { color: transparent !important; }
.word-display .root-0.blank { border-bottom: 3px dashed var(--root-0); }
.word-display .root-1.blank { border-bottom: 3px dashed var(--root-1); }
.word-display .root-2.blank { border-bottom: 3px dashed var(--root-2); }
.word-display .root-3.blank { border-bottom: 3px dashed var(--root-3); }
.word-display .root-mute.blank { border-bottom: 3px dashed var(--root-mute); }
/* Letter-level cloze for words without a root breakdown. */
.word-display .blank.letter { border-bottom: 3px dashed var(--text-dim); margin: 0 1px; }

/* Ladder difficulty badge under the masked word. */
.level-badge {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  margin: 0.2rem 0 0.4rem;
}

/* Masked target word inside test-face example sentences. */
.example .en .blank {
  color: transparent;
  border-bottom: 2px dashed var(--text-dim);
}

.ipa { text-align: center; color: var(--text-dim); margin-bottom: 0.6rem; }
.speak-btn {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  margin: 0 auto;
}

.meaning {
  text-align: center;
  font-size: 1.35rem;
  margin: 1rem 0;
}
.meaning .pos {
  color: var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  margin-right: 0.5rem;
}

/* Root breakdown chips */
.roots-box {
  margin: 1.2rem 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.root-chip {
  display: inline-block;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  margin: 0.2rem 0.3rem 0.2rem 0;
  font-size: 0.95rem;
}
.root-chip b { font-family: var(--serif); font-size: 1.08rem; margin-right: 0.45rem; }
.root-chip.c0 b { color: var(--root-0); }
.root-chip.c1 b { color: var(--root-1); }
.root-chip.c2 b { color: var(--root-2); }
.root-chip.c3 b { color: var(--root-3); }
.root-chip .root-meaning { color: var(--text-dim); }
.root-story { color: var(--text-dim); font-size: 0.95rem; margin: 0.5rem 0 0; }

.example { margin: 0.9rem 0 0; line-height: 1.65; }
.example .sense {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  margin-bottom: 0.15rem;
}
.example .en { display: block; font-family: var(--serif); font-size: 1.02rem; }
.example .zh { display: block; color: var(--text-dim); font-size: 0.9rem; }

/* Memory hook: last-resort aid, kept typographically quiet —
   no box, footnote-sized, dim. Roots and examples stay primary. */
details.hook {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  text-align: right; /* tucked to the corner, clearly apart from examples */
}
details.hook[open] { text-align: left; }
details.hook summary {
  cursor: pointer;
  color: var(--text-dim);
  opacity: 0.65;
}
details.hook summary:hover { opacity: 1; }
details.hook p {
  margin: 0.4rem 0 0.1rem;
  line-height: 1.55;
  color: var(--text-dim);
}
/* Regenerate button kept deliberately quiet: plain dim text, link-like */
details.hook .regen {
  display: block;
  margin: 0.35rem 0 0 auto;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  color: var(--text-dim);
  text-decoration: underline dotted;
  opacity: 0.7;
}
details.hook .regen:hover { opacity: 1; filter: none; }

/* Spelling / learn-card input */
.spell-input {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 1.1rem auto 0.3rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  text-align: center;
  padding: 0.55rem;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--text);
  letter-spacing: 2px;
}
.spell-input:focus { outline: none; border-color: var(--gold); }
.spell-input.error { border-color: var(--bad); }
.spell-hint { text-align: center; color: var(--text-dim); font-size: 0.85rem; }

.verdict { text-align: center; font-size: 1.2rem; margin: 0.8rem 0 0.2rem; font-weight: 700; }
.verdict.ok { color: var(--good); }
.verdict.ng { color: var(--bad); }
.your-answer {
  text-align: center;
  color: var(--bad);
  text-decoration: line-through;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 1px;
}

/* Action row under the card */
.actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
.actions button { font-size: 1.02rem; padding: 0.7rem 1.4rem; }
.key-hint { display: block; font-size: 0.68rem; opacity: 0.75; margin-top: 0.15rem; }

/* --- Panels (stats / settings tabs) --- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
}
.panel h2 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0 0 1.2rem;
  letter-spacing: 1px;
}

/* Settings rows: one shared control scale (0.88rem / 2.2rem height) so
   selects, inputs and buttons all sit on the same typographic rhythm. */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.setting-row:first-of-type { padding-top: 0.4rem; }
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 0.95rem; }
.setting-desc {
  display: block;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
  line-height: 1.5;
  max-width: 330px;
}
.setting-control { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.setting-control select,
.setting-control input,
.setting-control button {
  font-size: 0.88rem;
  height: 2.2rem;
  border-radius: 8px;
  box-sizing: border-box;
}
.setting-control input[type="number"] {
  width: 4.5em;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0 0.4rem;
  text-align: center;
}
.setting-control input[type="password"] {
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0 0.7rem;
  width: 220px;
}
.setting-control select {
  font-family: inherit;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0 0.6rem;
  max-width: 230px;
}
.setting-control button { padding: 0 1rem; }
.check-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  cursor: pointer;
}
.setting-control input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--gold);
}
#key-status { font-size: 0.82rem; }

/* Stats table */
.chip-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.chip b { color: var(--text); margin-right: 0.2rem; }
.chip.c-mastered b { color: var(--good); }
.chip.c-learning b { color: var(--gold); }
.chip.c-lapse b { color: var(--bad); }

/* Stats toolbar: same 0.88rem / 2.2rem control scale as settings */
.stats-toolbar {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.stats-toolbar input[type="search"],
.stats-toolbar select {
  font-family: inherit;
  font-size: 0.88rem;
  height: 2.2rem;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 0.7rem;
}
.stats-toolbar input[type="search"] { flex: 1; min-width: 150px; }
.stats-toolbar select { background: var(--surface-2); }

.undo-skip {
  background: none;
  border: none;
  padding: 0 0.2rem;
  font-size: 0.76rem;
  color: var(--text-dim);
  text-decoration: underline dotted;
  opacity: 0.7;
}
.undo-skip:hover { opacity: 1; filter: none; }

.table-wrap { overflow-x: auto; }
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.stats-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.stats-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap; /* keep "學習中 ・ 已到期" on one natural line */
}
.stats-table td.zh {
  max-width: 7.5em;
  overflow: hidden;
  text-overflow: ellipsis; /* long glosses truncate instead of wrapping */
}
.stats-table .w { font-family: var(--serif); font-size: 1rem; }
.st-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  font-size: 0.78rem;
  border: 1px solid var(--line);
  color: var(--text-dim);
}
.st-chip.mastered { color: var(--good); border-color: var(--good); }
.st-chip.learning { color: var(--gold); border-color: var(--gold); }
.st-chip.lapse { color: var(--bad); border-color: var(--bad); }
.due-now { color: var(--gold); }
.small-note { font-size: 0.8rem; margin-top: 0.8rem; }

/* In-card utility buttons: barely-there text, never compete with content */
.card-top-btns { display: flex; gap: 0.9rem; }
.card-top-btns button {
  background: none;
  border: none;
  padding: 0.15rem 0.2rem;
  font-size: 0.76rem;
  color: var(--text-dim);
  opacity: 0.55;
}
.card-top-btns button:hover { opacity: 1; filter: none; }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px #0009;
  opacity: 0.97;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 10;
}