/* On-site reader, worksheets, and quizzes. */
.reader-text,
.sheet-work {
  font-family: Georgia, "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  line-height: 1.75;
  max-width: 40rem;
}
html[data-reader="sm"] .reader-text { font-size: 1.05rem; }
html[data-reader="md"] .reader-text { font-size: 1.28rem; }
html[data-reader="lg"] .reader-text { font-size: 1.6rem; }
.reader-text p { margin: 0 0 1em; }
.reader-bar,
.reader-next {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
.reader-jump { max-width: 100%; }
.reader-credit { font-size: 0.85rem; margin: 8px 0 0; }
.reader-saved { font-size: 0.85rem; }
.sheet-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; font-size: 1.25rem; }
.sheet-row input { width: 5rem; font-size: 1.1rem; padding: 6px 8px; }
.trace-grid, .paint-wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.trace-card { position: relative; width: 160px; height: 180px; }
.trace-glyph {
  position: absolute; inset: 0;
  font-size: 120px; line-height: 160px; text-align: center;
  color: #cbd5e1; font-family: Georgia, serif; user-select: none;
}
.trace-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.paint-wrap svg { width: min(100%, 420px); height: auto; background: #fff; border: 1px solid #e5e7eb; }
.paint { cursor: pointer; }
.swatches { display: flex; gap: 8px; margin: 8px 0; }
.swatches button { width: 36px; height: 36px; border-radius: 8px; border: 2px solid #111; }
@media (max-width: 640px) {
  .reader-next a, .reader-bar a.btn { flex: 1 1 100%; text-align: center; }
}
@media print {
  header, footer, .reader-bar, .vsh-ad, .swatches, .no-print { display: none !important; }
  .reader-text { font-size: 12pt; max-width: none; }
}