/* Static learning resources; the app's existing buttons, lesson rows and tokens. */
.resource-page { width: 100%; max-width: 800px; margin: 0 auto; padding: 80px var(--sp-5) var(--sp-15); }
.resource-page h1 { font-size: var(--fs-h1); line-height: var(--lh-body); }
.resource-page .lessons-kicker { color: var(--text); background: var(--surface); }
.resource-page h2 { font-size: var(--fs-h2); line-height: var(--lh-body); }
.resource-page p, .resource-page li, .resource-page td, .resource-page th { font-size: max(1rem, var(--fs-body)); line-height: 1.8; }
.resource-page p { color: var(--text-sub); }
.resource-page section, .resource-page article, .resource-page > header { margin-block-end: var(--sp-10); }
.resource-page h2 { margin-block-end: var(--sp-5); }
.resource-page .lesson-card { text-decoration: none; }
.resource-page .lesson-card-title, .resource-page .lesson-card-sub { display: block; }
.resource-page .lesson-card-sub { font-size: max(0.875rem, var(--fs-muted)); }
.resource-page .lesson-list { margin-block-start: var(--sp-5); }
.resource-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-block: var(--sp-5); }
.resource-actions .btn { min-height: 44px; white-space: normal; text-align: center; }
.resource-links { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-block: var(--sp-5); }
.resource-links a { color: var(--text); text-underline-offset: 4px; }
.keyboard-chart { margin: var(--sp-5) 0; }
.keyboard-chart img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.keyboard-chart figcaption { margin-block-start: var(--sp-3); font-size: var(--fs-muted); color: var(--text-muted); line-height: var(--lh-body); }
.resource-table { width: 100%; border-collapse: collapse; margin-block: var(--sp-5); }
.resource-table th, .resource-table td { padding: var(--sp-3); border-block-end: 1px solid var(--border); text-align: start; vertical-align: top; }
.resource-table th { font-weight: 600; }
.resource-table a { color: var(--text); text-underline-offset: 4px; }
.resource-table caption { text-align: start; margin-block-end: var(--sp-3); color: var(--text-sub); }
.print-sheet .record-cell { min-width: 3rem; }
.resource-page .tip-box { margin-block: var(--sp-5); }
.play-cta-hero .game-preview { flex-wrap: nowrap; width: 100%; max-width: 300px; }
.play-cta-hero .game-preview .wordle-tile { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 1; font-size: var(--fs-h2); }
@media (max-width: 520px) {
  .resource-actions .btn { flex: 1 1 auto; }
  .resource-table th, .resource-table td { padding: var(--sp-2); }
}
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  html, html.light { --bg: #fff; --text: #111; --text-sub: #333; --text-muted: #444; --border: #bbb; --surface: #fff; }
  body { background: var(--bg); color: var(--text); min-height: auto; }
  #site-nav, .site-footer, #auth-modal, .resource-actions, .resource-links, .no-print { display: none !important; }
  .resource-page { max-width: none; padding: 0; }
  .resource-page > header, .resource-page section { margin-block-end: 4mm; }
  .resource-page h1 { font-size: 19pt; }
  .resource-page h2 { font-size: 13pt; margin-block-end: 2mm; }
  .resource-page p, .resource-page th, .resource-page td { font-size: 10pt; line-height: 1.5; }
  .keyboard-chart { margin: 3mm 0; break-inside: avoid; }
  .keyboard-chart img { max-height: 95mm; object-fit: contain; }
  .resource-table { margin: 2mm 0; }
  .resource-table th, .resource-table td { padding: 2mm; }
  .resource-table tr { break-inside: avoid; }
}