/* SHARED·PAGERDOTS (1071) — the row of dots that says which card of several you are on.
 * A short row of small dots under a swipeable set; one dot is current. It holds a count and
 * an index and REPORTS position — it does not navigate (the caller wires any scroll/tap).
 *
 * Three private copies measured side by side, by what they ARE (size · gap · colour · ground),
 * never by class name:
 *   · `.mtl-dots` web/css/cards/phase/timeline.css — LIGHT, 6px dots, accent current, cream-450
 *     inactive, gap 8, sits on a light card. The ONE copy reachable in the app (migrated here).
 *   · `.tl-dots` workbench/portrait/_shared/portrait.css — ON-DARK, 6px dots, text-on-dark
 *     current, white-30% inactive, gap 8, over a photo. TEMPLATE source (never edited).
 *   · `.mf-dots` workbench/phase/_bakeoffs/milestone-firsts.html — ON-DARK, 8px dots, cream-75
 *     current, white-32% inactive, gap 8, over the viewer. TEMPLATE source (never edited).
 * Measured with: grep -rn 'dots' web/css/cards workbench/portrait/_shared/portrait.css
 *
 * The dot size is --dim-6 (the "carousel dot" size token) and the gap --space-8 in all three
 * copies; the one divergence is .mf-dot at --space-8 (8px) vs --dim-6 (6px) — 6px wins, two
 * of three copies use it and it is the token literally named for a carousel dot. Colours are
 * ground-dependent, which is why on-dark is a colour prop (--pgd-* custom properties), NOT a
 * second component.
 *
 * SPACING IS THE CALLER'S: the copies' own padding differed (timeline 8/0/12, portrait 16/0/8,
 * mf 12/0) because it separates THIS caller's carousel from THAT caller's next thing. The card
 * is just the row; the caller owns the pad around it.
 *
 * "many" (8+) is UNBOUNDED today, faithfully: every copy renders one dot per slide, no cap, no
 * truncation. 12 dots = 12×6 + 11×8 = 160px, still under a 360px card, so nothing has ever
 * needed to cap it. Stated here so the next person knows it is a non-feature, not an omission.
 */
.pgd { display: flex; justify-content: center; gap: var(--space-8); }
.pgd-dot { width: var(--dim-6); height: var(--dim-6); border-radius: var(--radius-round);
  background: var(--cream-450); border: 0; padding: 0; cursor: pointer; }
.pgd-dot.on { background: var(--accent); }
.pgd-dot:active { opacity: 0.7; }
.pgd-dot:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* on-dark — the viewer's dots sit over a photo and must stay legible. A colour prop, not a
 * second card: the caller adds .pgd-on-dark (renderer: onDark: true). */
.pgd-on-dark .pgd-dot { background: var(--cream-300-a50); }
.pgd-on-dark .pgd-dot.on { background: var(--text-on-dark); }