/* Reference pages of a course: the glossary and the one-page formula sheet. Loaded after course.css, which holds the
   tokens, the header and the formula box. Both pages are built from text the lessons already contain.
   v5 (11 Nov 2026): headings and meanings in the sans; the serif is kept for formulas and their symbols. */
.ref { max-width: 58rem; margin: 0 auto; padding: 3.5rem 1.5rem 3rem; }
.ref-head { position: relative; }
.ref-head .kicker { font: 500 0.95rem var(--sans); color: var(--ink-3); margin: 0 0 0.8rem; }
.ref-head h1 { font: 650 clamp(2.2rem, 5vw, 2.9rem)/1.1 var(--sans); letter-spacing: -0.03em; margin: 0 0 1.6rem; }
footer.site.ref-foot { max-width: 58rem; }

/* ---- glossary: letters down the margin, a term, its meaning, and the lesson that teaches it ---- */
.az { position: sticky; top: var(--head-h); z-index: 5; display: flex; flex-wrap: wrap; gap: 0.15rem; margin: 0 -0.5rem; padding: 0.4rem 0.5rem; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.az a { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 8px; font: 700 0.92rem var(--sans); color: var(--ink-2); text-decoration: none; }
.az a:hover { background: var(--tint); color: var(--ink); }
.letter { display: grid; grid-template-columns: 4.5rem 1fr; padding-top: 2.2rem; scroll-margin-top: calc(var(--head-h) + 3.2rem); }
.letter h2 { align-self: start; position: sticky; top: calc(var(--head-h) + 4.2rem); margin: 0; font: 650 2rem/1 var(--sans); color: var(--ink); }
.letter dl { margin: 0; border-top: 1px solid var(--line-2); }
.term { display: grid; grid-template-columns: 13.5rem 1fr; gap: 0.1rem 1.75rem; padding: 0.9rem 0 0.8rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.term dt { font: 650 1.02rem/1.4 var(--sans); color: var(--ink); }
.term dd { margin: 0; font: 400 1.05rem/1.5 var(--sans); color: var(--ink); }
.term dd i, .fcard i { font-style: italic; }
.term .src { display: flex; align-items: center; min-height: 32px; width: fit-content; font: 500 0.82rem var(--sans); color: var(--ink-3); text-decoration: none; }
.term .src b { font-weight: 700; color: var(--ink); margin-right: 0.4rem; font-variant-numeric: tabular-nums; }
.term .src:hover { color: var(--ink); text-decoration: underline; }
/* a term that later lessons define again: their codes, after the lesson whose definition is shown */
.term .also { display: block; font: 500 0.82rem var(--sans); color: var(--ink-3); }
.term .also a { display: inline-block; padding: 0.3rem 0.1rem; font-weight: 700; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.term .also a:hover { text-decoration: underline; }

/* ---- formula sheet: one card per formula, ruled like an index card, in columns that fill one landscape sheet ---- */
.ref.sheet { max-width: 76rem; }
.sheet .ref-head .btn { position: absolute; right: 0; bottom: 0.4rem; }
.fgrid { columns: 3 17rem; column-gap: 2rem; border-top: 1px solid var(--line-2); padding-top: 1.6rem; }
.fcard { break-inside: avoid; margin: 0 0 1.5rem; padding-top: 0.7rem; border-top: 2px solid var(--ink); }
.fcard .src { margin: 0; font: 500 0.78rem var(--sans); }
.fcard .src a { color: var(--ink-3); text-decoration: none; }
.fcard .src a:hover { color: var(--ink); text-decoration: underline; }
.fcard .src b { font-weight: 700; color: var(--ink); margin-right: 0.3rem; font-variant-numeric: tabular-nums; }
.fcard h2 { font: 650 1.05rem/1.3 var(--sans); margin: 0.15rem 0 0.2rem; }
.fcard .formula { margin: 0; border: 0; border-radius: 0; overflow: visible; }
.fcard .formula .eq { text-align: left; padding: 0.35rem 0 0.55rem; font-size: 1.18rem; line-height: 1.5; white-space: normal; overflow: visible; }
.fcard .formula .eq + .eq { padding-top: 0; }
.fcard .formula dl { background: none; border-top: 1px solid var(--line); padding: 0.5rem 0 0; gap: 0.15rem 0.7rem; font-size: 0.86rem; line-height: 1.4; }
.fcard .formula dt { font-size: 0.95rem; }
/* a rule a lesson sets as lines of code (A2's fill rules): wrapped, so no line is cut off on paper */
.fcard .formula pre { margin: 0; padding: 0.35rem 0 0.55rem; border: 0; border-radius: 0; background: none; font-size: 0.8rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

/* a symbol that is a phrase (A2's "the other side's best price") wraps, so its meaning keeps most of the card */
@media (min-width: 641px) { .fcard .formula dl { grid-template-columns: fit-content(45%) 1fr; } }
@media (max-width: 640px) {
  .ref { padding: 2.2rem 1rem 2rem; }
  .az { margin: 0 -1rem; padding: 0.3rem 0.6rem; }
  .az a { min-width: 44px; height: 44px; }
  .letter { grid-template-columns: 1fr; padding-top: 1.6rem; scroll-margin-top: calc(var(--head-h) + 6.5rem); }
  .letter h2 { position: static; font-size: 1.9rem; margin-bottom: 0.5rem; }
  .term { grid-template-columns: 1fr; }
  .term .src { min-height: 44px; }
  .term .also a { padding: 0.75rem 0.3rem; }
  .sheet .ref-head .btn { position: static; margin: -0.6rem 0 1.2rem; }
  footer.site.ref-foot { padding: 1.5rem 1rem 3rem; }
}

@media print {
  .noprint, .az { display: none !important; }
  .ref, .ref.sheet { max-width: none; padding: 0; }
  .ref-head h1 { font-size: 20pt; margin-bottom: 8pt; }
  .ref-head .kicker { margin-bottom: 2pt; }
  .letter { grid-template-columns: 2.2rem 1fr; padding-top: 10pt; }
  .letter h2 { position: static; font-size: 18pt; }
  .term { grid-template-columns: 11rem 1fr; padding: 4pt 0; break-inside: avoid; }
  .term dd { font-size: 10pt; }
  .term .src { min-height: 0; }
  .term .also a { padding: 0; }
  /* the sheet: A4 landscape, four columns, small type, so a course's formulas fit one side */
  html:has(.sheet) { font-size: 7.4pt; }
  .fgrid { columns: 4; column-gap: 14pt; padding-top: 8pt; }
  .fcard { margin-bottom: 9pt; padding-top: 4pt; border-top-width: 1.2pt; }
  .fcard .formula .eq { font-size: 1.15rem; padding: 2pt 0 3pt; }
}
@page sheet { size: A4 landscape; margin: 10mm 11mm; }
/* the footer goes on the same sheet: a page of another kind would start a new, almost empty one */
.sheet, .sheet ~ footer.site { page: sheet; }