/* Reading sizes shared by desktop and mobile. Keep MCQ text at least 18px. */
:root {
  --bg: #edf1eb;
  --ink: #172b23;
  --muted: #46554c;
  --line: #cbd5c7;
}
/* Dark text on light surfaces; supporting copy stays readable, too. */
.nav-item, .nav-label, .eyebrow, .brand small,
.sidebar-note p, .local-profile small, .breadcrumb,
.date-pill, .header-tag, .page-heading p, .section-heading p,
.subject-card p, .card-bottom, .metric p, .metric strong small,
.side-card p, .side-quote, .side-quote span,
.goal-ring small, .goal-ring strong span, .goal-select,
.challenge .eyebrow, .challenge-details, .source-note,
.continue-card p, .library-tools p, .question-meta,
.practice-label, .quiz-note, .result-hero p,
.result-review .question-preview p, .progress-topic small,
.chart-day, dialog p, footer {
  color: #46554c;
}
.sidebar, .topbar, .subject-card, .question-preview, .quiz-card,
.side-card, .metric-strip, .chart-panel, .result-hero {
  background-color: #fff;
}
.subject-card, .question-preview, .quiz-card, .side-card,
.metric-strip, .chart-panel, .result-hero {
  border-color: #cbd5c7;
  box-shadow: 0 2px 5px #172b2308;
}
.sidebar-note, .challenge, .continue-card { background: #e5eedc; }
.nav-item.active { color: #17412b; background: #dcebd1; }
.filter-chip, .library-select, .goal-select select { color: #263e30; border-color: #a5b49f; }
.filter-chip.active { color: #fff; }
.tiny-tag, .badge, .nav-count { color: #2e492d; background: #e2ecd9; }
.goal-caption strong { color: #244728; }
.reading-options, .answer-option { color: #172b23; }
.reading-options p { background: #f0f3ed; }
.answer-option { border-color: #9eae98; }
.answer-letter { color: #2f4935; border-color: #a5b49f; background: #eef3e8; }
.feedback, .reveal { color: #214c2c; background: #e7f2df; }
.feedback small { color: #35563a; }
.feedback.incorrect { color: #713b20; background: #fff0e3; }
.feedback.incorrect small { color: #713b20; }
.report-link, .quiz-footer .text-button { color: #31533b; }
.hero { background: #173f31; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #173f31 0%, #173f31ee 35%, #173f3180 62%, transparent 85%); pointer-events: none; }
.hero h2 { color: #fff; }
.hero h2 em { color: #e0efbe; }
.hero p, .hero-meta, .hero .eyebrow { color: #f0f5e8; }
#search-form input { color: #172b23; }
#search-form input::placeholder { color: #526056; opacity: 1; }
#search-form button, #search-form .icon { color: #46554c; }
body { font-size: 16px; }
.nav-item { font-size: 15px; gap: 10px; }
.nav-label, .eyebrow, .hero .eyebrow, .challenge .eyebrow { font-size: 11px; letter-spacing: 1.2px; }
.sidebar { overflow-y: auto; }
.sidebar-note { margin-top: 28px; }
.sidebar-note strong, .local-profile strong { font-size: 14px; }
.sidebar-note p, .local-profile small { font-size: 13px; }
.breadcrumb, .date-pill, .header-tag { font-size: 13px; }
#search-form { flex: 1 1 250px; max-width: 340px; }
#search-form input, #search-form button { font-size: 16px; }
.page-heading p, .hero p, .section-heading p { font-size: 16px; line-height: 1.75; }
.hero p { max-width: 310px; }
.hero { min-height: 310px; }
.hero-meta { font-size: 13px; display: block; margin: 12px 0 0; }
.button, .challenge .button { font-size: 15px; min-height: 46px; }
.text-button, .section-heading .text-button { font-size: 14px; }
.metric p, .metric strong small { font-size: 13px; }
.metric strong { font-size: 26px; }
.metric { min-width: 0; }
.subject-card h3 { font-size: 18px; line-height: 1.45; }
.subject-card p, .card-bottom { font-size: 14px; line-height: 1.6; }
.subject-top { flex-wrap: wrap; gap: 8px; }
.tiny-tag { font-size: 10px; }
.side-card h3 { font-size: 18px; }
.side-card p, .side-quote { font-size: 14px; }
.side-quote span, .goal-ring small { font-size: 11px; }
.goal-caption { font-size: 14px !important; }
.goal-select { flex-wrap: wrap; gap: 8px; font-size: 14px; }
.goal-select select { font-size: 14px; max-width: 100%; }
.challenge-details, .source-note, .continue-card p { font-size: 13px; }
.continue-card strong { font-size: 16px; }
.goal-ring { width: 145px; height: 145px; }
.goal-ring strong { font-size: 32px; }
.goal-ring strong span { font-size: 19px; }
.filter-chip, .library-tools p, .question-meta, .badge { font-size: 14px; }
.filter-chip { padding: 9px 14px; }
.library-tools, .section-heading, .page-heading { flex-wrap: wrap; }
.library-select { font-size: 16px; max-width: 100%; }
.question-preview h3, .question-preview h2 { font-size: 21px; line-height: 1.65; }
.reading-options, .answer-option { font-size: 18px; line-height: 1.7; }
.reading-options p { padding: 10px 14px; }
.answer-letter, .answer-option .answer-status { font-size: 14px; }
.answer-option { min-height: 64px; }
.quiz-card h2 { font-size: 25px; line-height: 1.6; }
.feedback, .reveal, .result-review .question-preview p, dialog p { font-size: 17px; line-height: 1.8; }
.feedback small, .quiz-note, .report-link { font-size: 14px; }
.practice-label, .pagination, .result-hero p, .progress-topic { font-size: 16px; }
.chart-day, .progress-topic small, .notice, #toast { font-size: 14px; }
.question-actions { flex-wrap: wrap; }
.question-preview, .quiz-card { overflow-wrap: anywhere; }
footer, footer .text-button { font-size: 12px; }
footer { flex-wrap: wrap; }

@media (min-width: 961px) and (max-width: 1400px) {
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-tag { display: none; }
  .metric-icon { display: none; }
}
@media (min-width: 741px) and (max-width: 960px) {
  .nav-item { font-size: 14px; padding-left: 5px; padding-right: 5px; gap: 7px; }
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 740px) {
  .page-heading h1 { font-size: 30px; }
  .hero-copy { max-width: 85%; }
  .hero img { opacity: .3; }
  .metric p { font-size: 12px; }
  .quiz-footer .text-button { font-size: 14px; }
  .section-heading h2 { font-size: 22px; }
}
@media (max-width: 480px) {
  #search-form { min-width: 0; }
  #search-form input { font-size: 16px; }
  .topbar { padding: 0 14px; gap: 12px; }
  .nav-text { font-size: 11px; white-space: normal; line-height: 1.15; text-align: center; }
  .sidebar { height: 76px; overflow: visible; }
  .nav-item { width: 20%; min-width: 0; height: 62px; margin: 5px 0; }
  .workspace { padding-bottom: 76px; }
  .hero-copy { max-width: 100%; }
  .hero p { max-width: 100%; }
  .hero img { opacity: .2; }
  .hero .eyebrow { font-size: 11px; }
  .subject-card { padding: 18px 14px; }
  .subject-card h3 { font-size: 17px; }
  .subject-card p { font-size: 14px; }
  .card-bottom { font-size: 12px; }
  .tiny-tag { font-size: 9px; letter-spacing: 0; }
  .dashboard-right { grid-template-columns: 1fr; }
  .side-card { padding: 23px; }
  .challenge h3 { font-size: 22px; }
  .side-card p, .challenge-details, .goal-caption { font-size: 15px !important; }
  .goal-select { flex-direction: row; align-items: center; }
  .goal-select select { font-size: 16px; }
  .quiz-card h2 { font-size: 22px; }
  .answer-option { align-items: flex-start; flex-wrap: wrap; }
  .answer-option > span:nth-child(2) { flex: 1; min-width: 0; }
  .answer-option .answer-status { max-width: none; }
  .source-note { font-size: 13px; }
}