/* Device-native typography. WebKit chooses Apple system glyphs for both
   English and Thai; do not bundle SF Pro or force a Thai fallback family. */
:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --text-heading: #172033;
  --text-body: #334155;
  /* AA on white, brand background and the blue-tinted --soft surface. */
  --text-secondary: #5f6f85;
  --text-placeholder: #64748b;
  --brand-text: var(--text-body);
  --brand-muted: var(--text-secondary);
}
body {
  color: var(--text-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.dark {
  --text-heading: #f1f5f9;
  --text-body: #dbe5f1;
  --text-secondary: #a5b5cd;
  --text-placeholder: #a5b5cd;
  --brand-muted: var(--text-secondary);
  color: var(--text-body);
}
h1 { color: var(--text-heading); font-weight: 700; }
h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: 600; }
/* Native controls and top-layer dialogs must use the same inherited family. */
button, input, textarea, select, optgroup, option, dialog, summary,
input::placeholder, textarea::placeholder { font-family: inherit; letter-spacing: normal; }
button, summary { font-weight: 500; }
input, textarea, select, optgroup, option { font-weight: 400; line-height: 1.6; }
strong, b { font-weight: 600; }
label, legend, small, .tiny, .muted, .pill, .label, .footerhint {
  font-weight: 400;
}
.label { color: var(--text-heading); font-weight: 600; }
.number, .word, .titleinput { color: var(--text-heading); font-weight: 700; }
.app > aside > nav button { color: var(--text-body); font-weight: 500; }
.app > aside > nav button.active { color: var(--accent); font-weight: 600; }
button[aria-pressed=true], button[aria-selected=true], button.primary {
  font-weight: 600;
}
.tc-stats small { font-weight: 500; }
input::placeholder, textarea::placeholder, .editor textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
  font-weight: 400;
}
/* Keep disabled labels legible without fading their children or feedback. */
button:disabled, .ss-app button:disabled, button.audio-button:disabled {
  opacity: 1;
  color: var(--muted);
}
button.primary:disabled { color: #fff; }
.practice-choices .choice-correct:disabled { color: #14532d; }
.practice-choices .choice-wrong:disabled { color: #7f1d1d; }
/* Study text stays at its native raster size, including during scrolling. */
.scroll-card.scroll-motion,
.scroll-card.scroll-motion.is-visible,
.scroll-card.scroll-motion.is-visible.is-focused {
  opacity: 1;
  transform: none;
  will-change: auto;
}