/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Teacher and Me — French reading list (static pages, generated by
   scripts/reading-texts/plugin.ts). The page chrome (header, footer, buttons,
   tables, tokens) comes from /placement-assets/placement.css, which every
   tool page loads first; this file holds only what the list adds: the band
   groups (<details>), the books table and the excerpts. No script.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.reading-section { margin-bottom: var(--space-8); }
.band-scale { color: var(--color-text-secondary); }

.band {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
}
.band > summary {
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  list-style-position: inside;
}
.band > summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-lg, 12px); }
.band[open] > summary { border-bottom: 1px solid var(--color-border); }
.band-tag {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-left: var(--space-2);
}
.band-meta { font-weight: 500; font-size: 0.95rem; color: var(--color-text-secondary); margin-left: var(--space-2); }
.band > .table-scroll { padding: 0 var(--space-2) var(--space-2); }

.reading-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding: var(--space-3) var(--space-2) var(--space-2);
}
.reading-table th[scope="row"] { font-weight: 600; white-space: normal; min-width: 12rem; }
.reading-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reading-table td.people { min-width: 12rem; font-size: 0.95rem; }
.reading-table abbr[title] { text-decoration: underline dotted; cursor: help; }
.reading-table td.excerpt-cell { min-width: 16rem; }

.excerpt > summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.excerpt-body { margin: var(--space-2) 0 0; }
/* The excerpt is a <q> (inline, so the Markdown twin keeps it in its table cell), shown as a block quote. */
.excerpt-body q {
  display: block;
  quotes: none;
  margin: 0 0 var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-background, #fff);
  font-size: 0.95rem;
  line-height: 1.6;
}
.source-line { display: block; font-size: 0.85rem; color: var(--color-text-secondary); margin: var(--space-1) 0; }
.book-link { display: inline-block; }

.reading-method h3 { margin-top: var(--space-5); }
.reading-cta { margin-top: var(--space-8); }

/* The ways on from the list (scripts/reading-texts/template.ts): after the
   lead, for tutors and for learners, and after band 1. */
.reading-note {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.reading-note a { font-weight: 700; }