/* Shared component contracts. Loaded after layout styles. */
:root {
  --paper: var(--color-canvas);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --green: var(--color-brand);
  --orange: var(--color-accent);
  --line: var(--color-border);
  --white: var(--color-surface);
  --radius: var(--radius-lg);
  font-family: var(--font-body);
  color: var(--color-ink);
}
[hidden] { display: none !important; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, select { min-height: var(--size-touch); }
.level-button { min-height: var(--size-touch); }
a.nav-item, a.help-button, a.footer-help, a.secondary-button, a.primary-button { min-height: var(--size-touch); }
a.secondary-button { display: inline-flex; align-items: center; }
.public-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }
.seo-guide { margin-top: var(--space-8); }
.seo-guide h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--font-size-body); }
.seo-guide p + p { margin-top: var(--space-3); }
.content-panel p + h2 { margin-top: var(--space-6); }
.content-panel a:not([class]), .lesson-links a, .content-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.lesson-links { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--space-3); padding-left: var(--space-5); font-size: var(--font-size-small); }
.content-breadcrumb { margin-bottom: var(--space-6); color: var(--color-muted); font-size: var(--font-size-caption); line-height: 1.8; }
.memo-table caption { text-align: left; color: var(--color-muted); padding-bottom: var(--space-3); }
.memo-table th { text-align: left; font-weight: 600; border-bottom: 1px solid var(--color-border); padding: var(--space-2); }
.memo-table tbody th { width: 30%; color: var(--color-muted); }
button { font-family: var(--font-body); }
:where(button, a, summary, select):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: var(--space-1);
}
.hero :focus-visible { outline-color: var(--color-gold); }
.primary-button, .secondary-button {
  min-height: var(--size-touch);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-small);
  font-weight: 700;
  padding: var(--space-3) var(--space-6);
  transition: background var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
.primary-button { color: var(--color-on-brand); background: var(--color-accent); box-shadow: var(--shadow-button); }
.primary-button:hover { background: var(--color-accent-hover); }
.secondary-button { color: var(--color-brand); background: var(--color-surface); border: 1px solid var(--color-border-strong); }
.secondary-button:hover { background: var(--color-surface-soft); }
.primary-button:disabled, .secondary-button:disabled {
  color: var(--color-muted); background: var(--color-surface-soft); box-shadow: none; transform: none; cursor: not-allowed;
}
.lesson, .mode, .answer { border: 1px solid var(--color-border-strong); }
.lesson { border-radius: var(--radius-md); }
.lesson:hover { box-shadow: var(--shadow-card); }
.lesson.selected { border: 2px solid var(--color-success); padding: 19px; box-shadow: var(--shadow-selected); }
.lesson h3 { font-size: var(--font-size-body); }
.lesson p, .lesson-bottom, .mode small, .section-title .step,
.greeting p, .page-intro, .content-panel p, .history-row small,
.date-label, .help-button, .sidebar-footer, .sidebar-note p,
.breadcrumb, .level-button, .badge-item, .page-footer,
.privacy-note, .goal-message, .daily-card > p, .daily-bottom,
.tip-card p, .tip-card .eyebrow, .goal-ring small, .session-meta,
.question-instruction, .quiz-status, .quiz-actions small, .results > p,
.result-stats span, .review-item small, .memo-table td:first-child {
  color: var(--color-muted);
}
.lesson p, .lesson-bottom, .mode small { font-size: var(--font-size-caption); }
.mode strong, .nav-item { font-size: var(--font-size-small); }
.mode.active { border-color: var(--color-success); background: var(--color-surface-soft); }
.nav-item.active { color: var(--color-brand); background: var(--color-surface-soft); }
.level-button.active { color: var(--color-brand); }
.text-link, .tip-card button { color: var(--color-brand); font-size: var(--font-size-caption); }
.close-button { width: var(--size-touch); height: var(--size-touch); }
.feedback { background: var(--color-success-soft); color: var(--color-success); }
.feedback.incorrect { background: var(--color-error-soft); color: var(--color-error); }
.feedback small { font-size: var(--font-size-caption); color: var(--color-ink); }
.answer.correct { border-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success); }
.answer.wrong { border-color: var(--color-error); background: var(--color-error-soft); color: var(--color-error); }
.answer:disabled { opacity: 1; color: var(--color-muted); }
.answer.correct:disabled { color: var(--color-success); }
.answer.wrong:disabled { color: var(--color-error); }
.quiz-timer.urgent { color: var(--color-error); }
.goal-denominator { font-size: var(--font-size-body); color: var(--color-muted); font-weight: 500; }
.spaced-action { margin-top: var(--space-5); }
.goal-ring-inner strong { font-size: var(--font-size-title); }
.goal-ring-inner { text-align: center; }
.goal-ring-inner strong { white-space: nowrap; }
.goal-ring-inner small { max-width: 84px; line-height: 1.35; }
.mode.active .mode-text strong::after { content: ' ✓'; }
.goal-ring { flex-shrink: 0; }
.quiz-actions small { font-size: var(--font-size-caption); }
.review-list summary { min-height: var(--size-touch); display: list-item; padding: var(--space-3) 0; cursor: pointer; }
.hero h2, .greeting h1, .section-title h2, .question-verb { font-family: var(--font-heading); }
dialog { box-shadow: var(--shadow-dialog); }
@media (max-width: 700px) {
  .nav-item { font-size: var(--font-size-caption); }
  .lesson { padding: var(--space-4); }
  .lesson.selected { padding: 15px; }
  .lesson h3 { font-size: var(--font-size-small); }
  .mode strong { font-size: var(--font-size-caption); }
  .mode small { line-height: 1.5; }
  .mode { align-items: flex-start; }
  .mode-text { min-width: 0; }
  .mode > svg { flex-shrink: 0; margin-top: 2px; }
  .section-title .step { display: none; }
  .goal-ring strong { font-size: var(--font-size-section); }
  .goal-denominator { font-size: var(--font-size-small); }
  .goal-ring { width: 112px; height: 112px; }
  .topbar { z-index: 6; }
}
@media (max-width: 380px) {
  .lesson { padding: var(--space-3); }
  .lesson.selected { padding: 11px; }
  .nav-item { font-size: var(--font-size-caption); gap: var(--space-1); }
  .nav-item svg { display: none; }
  .hero-copy { width: 100%; }
  .hero h2 { max-width: 220px; }
  .hero p { max-width: 190px; }
  .quiz-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}