/* Material treatment: frosted surfaces, edge highlights, floating navigation.
   Every color comes from tokens.css (generated from Shared/theme.json).
   Accent is reserved for actions, selection and today's data; section labels use --eyebrow;
   correct and missed answers use --success and --danger only. */
body {
  background: var(--canvas-deep);
  color: var(--text);
}
body::before {
  background:
    radial-gradient(ellipse at 76% 21%, var(--glow), transparent 42%),
    radial-gradient(ellipse at 20% 95%, var(--glow-secondary), transparent 43%),
    linear-gradient(135deg, color-mix(in srgb, var(--canvas) 70%, transparent), transparent 65%);
}
.desktop-wordmark, .wordmark { color: var(--text); }
.desktop-label, .overline, .desktop-preview-label { color: var(--muted); }
.desktop-intro h1 { font-weight: 630; }
.desktop-intro em { color: var(--accent-label); }
.desktop-intro p { color: var(--muted); }
.desktop-preview-label span {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.desktop-footnote { color: var(--muted); }
.device {
  border-color: var(--device-frame);
  background:
    radial-gradient(ellipse at 104% 2%, var(--glow), transparent 49%),
    radial-gradient(ellipse at -30% 67%, var(--glow-secondary), transparent 46%),
    var(--canvas);
  box-shadow: var(--shadow-device);
}
.island { background: #05070a; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .045); }
.status-bar { color: var(--text); }
.battery { border-color: var(--muted); }
.battery::before, .battery::after, .home-indicator { background: var(--text); }
.avatar, .profile-avatar {
  color: var(--text);
  background: var(--chip);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 var(--inset-hi);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.preview-pill { color: var(--text-soft); background: var(--chip); border-color: var(--line-strong); }
.hero, .progress-hero, .trial-card, .completion-score {
  color: var(--text);
  border: 1px solid var(--edge);
  background: linear-gradient(125deg, var(--sheen), transparent 61%), var(--hero-glass);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  backdrop-filter: blur(26px) saturate(130%);
  box-shadow: inset 0 1px 0 var(--inset-hi), var(--shadow-card);
}
.hero .eyebrow, .progress-hero .eyebrow, .trial-card .eyebrow { color: var(--eyebrow); }
.hero-description, .hero-meta, .progress-hero p, .trial-card p { color: var(--text-soft); }
.hero-footer, .progress-hero h2 small, .completion-score small { color: var(--muted); }
.hero-meta svg { color: var(--text-soft); }
.hero-divider { background: var(--muted); opacity: .6; }
/* The orbit shows today's state, so it carries the accent. */
.orbit { color: var(--accent-label); border-color: color-mix(in srgb, var(--accent-label) 24%, transparent); background: color-mix(in srgb, var(--accent-label) 4%, transparent); }
.orbit::before { border-color: color-mix(in srgb, var(--accent-label) 44%, transparent); }
.orbit::after { background: var(--accent-label); border-color: var(--hero-solid); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-label) 36%, transparent); }
.primary, .dark-button, .quiz-bottom .primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid color-mix(in srgb, var(--on-accent) 22%, var(--accent));
  box-shadow: 0 4px 18px var(--accent-glow), inset 0 1px 0 rgb(255 255 255 / .18);
  transition: background .15s, box-shadow .15s;
}
.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, white); box-shadow: 0 6px 24px var(--accent-glow); }
.primary:active:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, black); }
.primary:disabled, .quiz-bottom .primary:disabled { background: var(--disabled); color: var(--muted); border-color: var(--line); box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--accent-label); }
.mini-stat, .white-card, .answer-option, .review-item, .community-note {
  background: var(--surface-glass);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--inset-lo), var(--shadow-soft);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.text-button, .source-link { color: var(--accent-label); }
.mini-stat .stat-icon { color: var(--muted); }
.focus-chip, .category-pill, .review-chip {
  color: var(--text-soft);
  background: var(--chip);
  border-color: var(--line-strong);
}
.focus-chip:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.reminder-banner { border-color: var(--line); }
.reminder-banner > svg { color: var(--info); }
.navigation {
  margin: 0 11px 14px;
  height: 66px;
  padding: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--nav-glass);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  backdrop-filter: blur(28px) saturate(130%);
  box-shadow: inset 0 1px 0 var(--inset-lo), var(--shadow-nav);
  z-index: 5;
}
.nav-item { color: var(--muted); border: 1px solid transparent; border-radius: 15px; }
.nav-item.active { color: var(--accent-label); background: var(--accent-soft); border-color: var(--accent-line); }
.nav-item.active::before { display: none; }
.icon-button { color: var(--text-soft); background: var(--chip); border-color: var(--line-strong); }
.bar-track { border-bottom-color: var(--line); }
.bar-fill { background: var(--chart-past); }
.chart-day.today .bar-fill { background: var(--accent); }
.chart-day.today { color: var(--text); }
.chart-value { color: var(--text-soft); }
.community-center { color: var(--accent-label); background: var(--hero-glass); border: 1px solid var(--edge); box-shadow: var(--shadow-card), inset 0 1px 0 var(--inset-hi); }
.community-orbit, .community-orbit::before { border-color: var(--line-strong); }
.community-dot { background: var(--surface-raised); border-color: var(--canvas); color: var(--text-soft); }
.community-dot.three { background: var(--accent); color: var(--on-accent); }
.secondary { color: var(--text); background: var(--chip); border-color: var(--line-strong); }
.switch { background: var(--switch-off); }
.switch::before { background: var(--on-accent); box-shadow: 0 1px 3px var(--shadow); }
.switch.on { background: var(--accent); }
.switch.on::before { background: var(--on-accent); }
.quiz-progress i { background: var(--track); }
.quiz-progress i.done { background: var(--accent); }
.quiz-progress i.current { background: var(--accent-label); }
.question-stem, .feedback p, .rationale p { color: var(--text-soft); }
.answer-option { color: var(--text); background: var(--surface-strong); }
.answer-letter { color: var(--muted); border-color: var(--line-strong); background: var(--chip); }
/* Selection is accent. Results use success and danger, never the accent. */
.answer-option.selected { background: var(--accent-soft); border-color: var(--accent); }
.answer-option.selected .answer-letter { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.answer-option.correct { background: var(--success-soft); border-color: var(--success-line); }
.answer-option.correct .answer-letter { background: var(--success); border-color: var(--success); color: var(--on-success); }
.answer-option.correct .option-status { color: var(--success); }
.answer-option.incorrect { background: var(--danger-soft); border-color: var(--danger-line); }
.answer-option.incorrect .answer-letter { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.answer-option.incorrect .option-status { color: var(--danger); }
.feedback, .rationale { border-color: var(--line); }
.quiz-bottom {
  background: color-mix(in srgb, var(--canvas) 94%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  z-index: 3;
}
/* The clinical pearl is a tip, not an action: it uses the info tint. */
.pearl { background: var(--info-soft); border: 1px solid var(--info-line); }
.pearl .eyebrow { color: var(--info); }
.pearl p { color: var(--text-soft); }
.completion-badge { background: var(--accent); border-color: var(--badge-ring); color: var(--on-accent); outline-color: var(--accent-line); box-shadow: 0 0 45px var(--accent-glow); }
.completion-score > div + div { border-left-color: var(--line); }
.toast { color: var(--text); background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow-nav); }
.modal-overlay { background: var(--overlay); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.modal {
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--inset-lo), 0 -12px 50px var(--shadow);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}
.modal-handle { background: var(--line-strong); }
.modal-icon { background: var(--accent-soft); color: var(--accent-label); border: 1px solid var(--accent-line); }
.form-field input, .form-field select { color: var(--text); background: var(--input); border-color: var(--line-strong); }
.benefit { color: var(--text-soft); }
.benefit svg { color: var(--accent-label); }
.danger { color: var(--danger); border-color: var(--danger-line); }
.brand-icon { background: var(--accent); }
@media (max-width: 500px) {
  body { background: var(--canvas); }
  .device { border: 0; box-shadow: none; }
  .navigation { margin-bottom: max(12px, env(safe-area-inset-bottom)); height: 66px; padding: 7px; }
  .modal { padding-bottom: max(29px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .hero, .progress-hero, .trial-card, .completion-score { background: var(--hero-solid); }
  .mini-stat, .white-card, .answer-option, .review-item, .community-note, .navigation, .modal, .toast { background: var(--surface-solid); }
  .answer-option.selected { background: color-mix(in srgb, var(--accent) var(--tint-soft), var(--surface-solid)); }
  .answer-option.correct { background: color-mix(in srgb, var(--success) var(--tint-soft), var(--surface-solid)); }
  .answer-option.incorrect { background: color-mix(in srgb, var(--danger) var(--tint-soft), var(--surface-solid)); }
  .pearl { background: color-mix(in srgb, var(--info) 7%, var(--surface-solid)); }
  .quiz-bottom { background: var(--canvas); }
}
@media (prefers-contrast: more) {
  .answer-option, .mini-stat, .white-card, .review-item, .setup-choice { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}