/* Math Quest AI — student PWA styles (M3).
   iPad-first: touch targets at least 44px, large type, no hover-dependent
   controls, no Apple Pencil dependency. */
* { box-sizing: border-box; }
/* M5 fix: the UA stylesheet hides [hidden] as display:none, but author
   rules beat it — `label { display: block }` below made every hidden
   <label> (e.g. the "Your answer" text field on non-short-answer
   questions) visible in real rendering, and `.options { display: grid }`
   did the same to the hidden options divs. This rule restores hidden
   for every element. */
[hidden] { display: none !important; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f8fafc;
  font-size: 18px;
}
header h1 { font-size: 1.8rem; margin: 0.5rem 0 0; }
.sub { color: #475569; margin: 0 0 1rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.view { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem; }
label { display: block; margin: 0.75rem 0; font-weight: 600; }
input[type="text"], input[type="password"] {
  display: block;
  width: 100%;
  min-height: 52px;
  font-size: 1.15rem;
  padding: 0.6rem 0.8rem;
  margin-top: 0.25rem;
  border: 2px solid #94a3b8;
  border-radius: 10px;
}
textarea, select {
  display: block;
  width: 100%;
  min-height: 52px;
  font-size: 1.1rem;
  padding: 0.6rem 0.8rem;
  margin-top: 0.25rem;
  border: 2px solid #94a3b8;
  border-radius: 10px;
  font-family: inherit;
}
textarea { min-height: 120px; }
input[type="file"] {
  display: block;
  width: 100%;
  min-height: 52px;
  font-size: 1rem;
  margin-top: 0.25rem;
}
input[type="checkbox"] { width: 28px; height: 28px; min-height: 28px; accent-color: #2563eb; }
label.check { display: flex; align-items: center; gap: 0.6rem; font-weight: 400; margin: 0.4rem 0; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0.75rem 0; }
table.data th, table.data td { border: 1px solid #cbd5e1; padding: 0.4rem 0.5rem; text-align: left; vertical-align: top; }
table.data th { background: #f1f5f9; }
.tag-new { color: #15803d; font-weight: 700; }
.tag-changed { color: #b45309; font-weight: 700; }
.tag-unchanged { color: #475569; }
.tag-error { color: #b91c1c; font-weight: 700; }
button {
  font-size: 1.1rem;
  min-height: 52px;
  min-width: 52px;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 2px solid #2563eb;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}
button.secondary { background: #fff; color: #2563eb; }
button.small { min-height: 44px; font-size: 0.95rem; background: #fff; color: #334155; border-color: #94a3b8; }
button:disabled { opacity: 0.5; cursor: default; }
button.big { width: 100%; margin-top: 0.75rem; }
.row { display: flex; gap: 0.75rem; }
.row > button { flex: 1; }
.error { color: #b91c1c; min-height: 1.2em; }
.note { color: #475569; font-size: 0.95rem; }
.answer {
  min-height: 64px;
  font-size: 1.6rem;
  font-weight: 700;
  border: 2px solid #94a3b8;
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin: 0.75rem 0;
  background: #f8fafc;
  word-break: break-all;
}
.keyboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin: 0.75rem 0;
}
.keyboard button {
  min-height: 60px;
  font-size: 1.4rem;
  background: #eef2ff;
  color: #1e3a8a;
  border-color: #c7d2fe;
}
.keyboard button.wide { grid-column: span 2; }
.options { display: grid; gap: 0.6rem; margin: 0.75rem 0; }
.options button {
  min-height: 60px;
  text-align: left;
  background: #fff;
  color: #1a1a1a;
  border-color: #94a3b8;
}
.options button.selected { border-color: #2563eb; background: #dbeafe; }
.hint {
  border: 2px solid #f59e0b;
  background: #fffbeb;
  border-radius: 10px;
  padding: 0.9rem;
  margin-top: 0.75rem;
  white-space: pre-wrap;
}
.feedback { border-radius: 10px; padding: 0.9rem; margin-top: 0.75rem; font-weight: 600; }
.feedback.correct { background: #dcfce7; border: 2px solid #16a34a; }
.feedback.incorrect { background: #fee2e2; border: 2px solid #dc2626; }
.feedback.needs_review { background: #fef3c7; border: 2px solid #d97706; }
.feedback.unanswered { background: #e2e8f0; border: 2px solid #64748b; }
#plan-list li { margin: 0.5rem 0; }
#plan-list button {
  width: 100%;
  text-align: left;
  background: #fff;
  color: #1a1a1a;
  border-color: #94a3b8;
  min-height: 56px;
}
#plan-list button.done { border-color: #16a34a; background: #f0fdf4; }

/* M5: worksheets, game, rewards. */
#ws-list li, #g-list li, #par-children li, #par-ws-list li { margin: 0.5rem 0; }
#par-ws-list a {
  display: inline-block;
  min-height: 52px;
  line-height: 52px;
  padding: 0 1rem;
  border-radius: 10px;
  border: 2px solid #2563eb;
  background: #fff;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
#ws-list a {
  display: inline-block;
  min-height: 52px;
  line-height: 52px;
  padding: 0 1rem;
  border-radius: 10px;
  border: 2px solid #2563eb;
  background: #fff;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.level-line { font-size: 1.15rem; font-weight: 700; }
#g-timer { text-align: center; font-size: 3rem; font-weight: 700; }
#g-timer.low { border-color: #dc2626; background: #fee2e2; }

/* M5: printable A4 worksheets. The worksheet page (server-rendered from
   lib/worksheets.js) uses this print CSS. On screen it looks like a
   normal page; on paper it is A4 with the app chrome hidden. */
@page { size: A4; margin: 18mm 16mm; }
.ws-print { background: #fff; }
.ws-head { border-bottom: 2px solid #1a1a1a; margin-bottom: 12pt; padding-bottom: 6pt; }
.ws-head h1 { font-size: 18pt; }
.ws-head p { margin: 2pt 0; }
.ws-q { break-inside: avoid; margin: 0 0 14pt; }
.ws-qtext { font-size: 12pt; margin: 0 0 4pt; }
.ws-skill { color: #475569; font-size: 9pt; margin: 2pt 0 0; }
.ws-answer-line { min-height: 26pt; border-bottom: 1px solid #cbd5e1; margin-top: 6pt; }
.ws-options { display: flex; flex-wrap: wrap; gap: 8pt; margin: 4pt 0; }
.ws-opt { border: 1px solid #94a3b8; border-radius: 6pt; padding: 2pt 8pt; }
.ws-foot { border-top: 1px solid #94a3b8; margin-top: 12pt; padding-top: 6pt; color: #475569; font-size: 10pt; }
.ws-key { break-before: page; }
.ws-key-table { width: 100%; border-collapse: collapse; font-size: 11pt; }
.ws-key-table th, .ws-key-table td { border: 1px solid #94a3b8; padding: 4pt 6pt; text-align: left; vertical-align: top; }
@media print {
  body { background: #fff; max-width: none; padding: 0; font-size: 12pt; }
  header, .no-print { display: none !important; }
  .view { border: none; padding: 0; }
  button { display: none !important; }
  .ws-print a { text-decoration: none; color: #1a1a1a; }
}