/* Shared page styles. Linked after each page's own <style>, so these win at equal specificity. */

/* ── Self-hosted fonts (Google Fonts is blocked in mainland China). Built by scripts/subset-fonts.py. ── */
@font-face { font-family: "Noto Sans SC"; src: url("fonts/noto-sans-sc-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans JP"; src: url("fonts/noto-sans-jp-400-700.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* The hidden attribute always wins over component display rules */
[hidden] { display: none !important; }

/* ── Typography ── */
/* Tags, chips and pills: medium weight so they sit with the body text instead of shouting */
.tag-chip, .notebook-chip, .category, .category-group-select, .tag-group-select,
.tag, .freq, .grammar-tag, .badge, .answer,
.mobile-tab-btn, .mobile-tab-badge, .sidebar-badge, .tag-summary-pill,
.filter-summary, .category-summary, .tag-summary, .category-count, .tag-count {
  font-weight: 500;
}

/* Chips that show Japanese words: Japanese font first so kana/kanji use Japanese glyphs */
.notebook-chip {
  font-family: "Noto Sans JP", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Page heading: one style on every page ── */
.page-header { margin: 4px 0 18px; text-align: left; }
.page-title { margin: 0 0 6px; color: var(--ink); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.page-desc { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border, var(--line)); border-radius: var(--radius-control, 10px); background: var(--surface); color: var(--ink, var(--ink)); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--blue-50, var(--tint-1)); }
.btn-primary { border-color: transparent; background: var(--btn-grad); color: white; }
.btn-primary:hover { background: var(--btn-grad); filter: brightness(1.06); }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--blue-600, #17769d); outline-offset: 2px; }

/* Toolbar toggles (语音 / 收藏 / 自动听读): off = white with outline, on = light-blue fill. Never a "disabled" grey. */
.toolbar button.sound-toggle, .toolbar button.favorite-filter, .toolbar button.scroll-toggle, .toolbar button.auto-toggle {
  border: 1px solid var(--border, var(--line)); border-radius: var(--radius-control, 10px); background: var(--surface); color: var(--ink, var(--ink)); box-shadow: none; font-weight: 500;
}
.toolbar button.sound-toggle[aria-pressed="true"], .toolbar button.favorite-filter[aria-pressed="true"],
.toolbar button.scroll-toggle[aria-pressed="true"], .toolbar button.auto-toggle[aria-pressed="true"] {
  border-color: var(--control-line); background: var(--blue-100, var(--tint-2)); color: var(--blue-600, var(--blue-600));
}
/* Toolbars wrap as complete controls; search must never collapse to 20px.
   List-specific phone layouts live in list.css. Tag review has only two actions. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-card); }
.toolbar > * { min-width: 0; }
.toolbar .search { flex: 1 1 240px; width: auto; min-height: var(--control-height); }
.toolbar .voice-picker { flex: 1 1 200px; justify-content: space-between; }
.toolbar .voice-picker select { min-width: 0; max-width: 180px; min-height: var(--control-height); }
.toolbar > button { min-height: var(--control-height); }
.toolbar:has(.list-toggle) { align-items: stretch; }
.toolbar:has(.list-toggle) .search { flex-basis: calc(100% - 260px); align-self: center; }
.toolbar:has(.list-toggle) .voice-picker { flex: 0 1 240px; align-items: center; flex-wrap: nowrap; }
.toolbar:has(.list-toggle) .voice-picker select { flex: 1 1 100px; max-width: 130px; }
.toolbar:has(.list-toggle) > button { flex: 1 1 0; white-space: normal; }
@media (min-width: 601px) {
  .toolbar:has(.list-toggle) > button { padding: 8px 12px; font-size: .86rem; line-height: 1.5; }
}
.app-layout .main-toolbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); padding: var(--space-3); }
.app-layout .search, .app-layout .tag-toggle-btn, .app-layout .action-btn { min-height: var(--control-height); }

/* Common panel rhythm; quiz and review keep their own content, not new spacing rules. */
.app .list, .app-layout .list { gap: var(--space-3); }
.app .card, .app-layout .card { border-radius: var(--radius-card); }
.app #list > .card, .app-layout #list > .card { padding: var(--space-4); gap: var(--space-3); }
.app .card-head, .app-layout .card-head { gap: var(--space-3); }
.app .card-head > *, .app-layout .card-head > * { min-width: 0; }
.app .actions, .app-layout .card-actions { flex-wrap: wrap; gap: var(--space-2); }
.app .actions .action, .app-layout .card-actions .action-btn { min-height: var(--control-height); display: inline-flex; align-items: center; justify-content: center; }
.app #list .card .title, .app-layout #list .card .title { overflow-wrap: anywhere; }
.settings-app .settings-panel { padding: var(--space-5); border-radius: var(--radius-card); }
.settings-app .settings-layout { gap: var(--space-5); }
.settings-app .settings-controls { gap: var(--space-4); }

/* ── Filter panels (标签筛选): label left, summary + chevron together on the right ── */
.category-toggle, .filter-toggle, .tag-toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.app :is(.category-panel, .filter-panel, .tag-panel) { border-radius: var(--radius-card); margin-bottom: var(--space-4); }
.app :is(.category-toggle, .filter-toggle, .tag-toggle) { padding: var(--space-3); gap: var(--space-2); }
.category-toggle > span:first-child, .filter-toggle > span:first-child, .tag-toggle > span:first-child { margin-right: auto; }
.category-toggle .chevron, .filter-toggle .chevron, .tag-toggle .chevron { display: inline-grid; place-items: center; width: 24px; height: 24px; font-size: 1.1rem; }

/* ── Touch targets (≥44px) ── */
.favorite-button { min-width: 44px; min-height: 44px; }
.wrongbook-clear, .wrongbook-link { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 8px; }
.wrongbook-link { margin-left: auto; color: var(--blue-600); font-size: .82rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.wrongbook-link:hover { text-decoration: underline; }
.app .wrongbook { padding: var(--space-4); border-radius: var(--radius-card); }
.app .wrongbook-head { flex-wrap: wrap; gap: var(--space-2); }
.app .wrongbook-head > * { min-width: 0; }
@media (max-width: 600px) {
  .app .wrongbook-head h2 { flex: 1 1 100%; }
  .app .wrongbook-link { flex: 1 1 0; margin-left: 0; white-space: normal; }
  .app .wrongbook-clear { flex: 0 0 auto; }
}

/* ── Phone toolbar on list pages: search, then one row of buttons, then the voice picker ── */
@media (max-width: 600px) {
  .toolbar { display: flex !important; flex-wrap: wrap; gap: 8px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar .sound-toggle, .toolbar .favorite-filter, .toolbar .scroll-toggle, .toolbar .auto-toggle, .toolbar .refresh {
    flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px; font-size: .8rem; line-height: 1.2; white-space: normal; text-wrap: balance;
  }
  .toolbar .voice-picker { order: 1; flex: 1 1 100%; justify-content: space-between; font-size: .78rem; }
  .settings-app .settings-panel { padding: var(--space-4); }
  .app-layout .main-toolbar { grid-template-columns: minmax(0, 1fr); }
  .app .card-head, .app-layout .card-head { flex-wrap: wrap; }
}

/* ── Respect the system "reduce motion" setting everywhere ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}