/* Reading module — LEARNING-STANDARD.md D2–D6 (Phase 2c), one sheet for the whole site.
   A page opts in with <body class="reading">. Link it after the subject and component sheets.

   Sizes are set on the text elements themselves rather than on <html>, because subject
   sheets size their components in rem: raising the root would scale badges and pills along
   with the reading text and still leave .92rem tile lines under the floor. */

/* Letter and word spacing are left at the font's own: Trebuchet MS is already open, and the
   extra .03em/.12em read as odd gaps to a dyslexic reader (learning standard decision 65). */
body.reading {
  line-height: 1.5;
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* D2 — 18 px floor; D3 — line height 1.5 on everything a pupil reads */
body.reading :is(p, li, dd, dt, td, th, label, summary, figcaption, blockquote),
body.reading :is(.lead, .section-sub, .section-title),
body.reading :is(.tile-name, .tile-body),
body.reading :is(.prog-rank-next, .prog-count-total) {
  font-size: max(1.125rem, 18px);
  line-height: 1.5;
}

/* paragraph spacing larger than the line gap (D3) */
body.reading :is(p, .lead) + :is(p, .lead) { margin-top: .6em; }

/* D4 — 60–70 characters a line on running text. A ch is the width of "0", wider than
   Trebuchet's average letter, so 52ch comes out at about 65 characters. */
body.reading :is(p, li, dd, blockquote, .lead, .section-sub):not([data-credit-note]) { max-width: 52ch; }
/* A credits line is read once, not scanned, so it runs the full width (RS, 29 Sep 2026). */

/* 18 px bold tile names in a 260 px tile wrap to three lines; a wider minimum keeps
   most to one or two (3 across on desktop, 2 on an iPad, 1 on a phone) */
body.reading .hub-grid:not(.few):not(.four) {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* A page's opening pair (welcome + progress, say): side by side where there is room, so the
   62ch line cap does not leave the right half of a wide screen empty; stacked on a phone.
   Wrap the two panels in <div class="panel-pair">. */
body.reading .panel-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 14px;
  align-items: stretch;
}
body.reading .panel-pair > * { margin-top: 0; margin-bottom: 0; }

/* D5 — emphasis is bold only */
body.reading :is(em, i, cite):not(var) { font-style: normal; font-weight: 800; }

/* D6 — no reading text on white: cards and panels take a faint tint in light mode.
   Dark mode is untouched; its cards are already a dark tint. */
@media (prefers-color-scheme: light) {
  body.reading { --card: #f6fbf7; }
}