/* PAGE DOTS (ui/PageDots.astro, which brings this file; Maayan, 2026-11-08: "very small like in ios"): tiny round dots, closely spaced, centred;
   the current one gold, the rest dim (the tertiary text colour, faded); each dot's touch target the touch height and its
   own pitch wide (::before), so a phone taps the nearest dot and never two at once. The one rounded kit element. The
   dot's rule names its list and its role so it outranks Jim's rule giving every button the tap size (body.jim-app
   :is(button, ...) { min-width; min-height }), which made these dots 44px circles. */
.g-dots { display: flex; justify-content: center; gap: var(--g-3); }
.g-dots .g-dots__dot[role="tab"] { position: relative; width: var(--g-2); height: var(--g-2); min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: var(--g-r-round); background: var(--g-text-3); opacity: .6; cursor: pointer; transition: background var(--g-fast), opacity var(--g-fast); }
.g-dots .g-dots__dot[aria-selected="true"] { background: var(--g-accent); opacity: 1; }
.g-dots__dot::before { content: ""; position: absolute; inset: calc((var(--g-2) - var(--g-touch)) / 2) calc(var(--g-3) / -2); }
.g-dots__dot:focus-visible { outline: var(--g-stroke) solid var(--g-accent); outline-offset: var(--g-1); }