/* css/pager.css — the pager screen (SCREEN 8b) and the pager card on the
 * payment-success screen.
 *
 * Created for finding #2 (venue, 2026-08-11). `style.css` is FROZEN
 * (00-contracts.md §5 [A3]) and already owns `.pager-title` / `.pager-sub` /
 * `.pager-emoji` / `.pager-display` / `.pager-keypad`; everything NEW that the
 * pager screen needs lives here instead. This sheet is linked after style.css
 * in index.html, so a rule here wins by cascade order without !important.
 *
 * The venue calls the device a "pager", never a "csipogó" — that rename is
 * markup and copy, not CSS, and is done in index.html / app.js / operator.html.
 */

/* ===== THE DRAWN PAGER =====
 * Replaces `.pager-emoji` (`📟`, 84px in the frozen style.css), which drew a
 * belt beeper rather than the coaster the venue actually hands out. Sized a
 * little larger than the emoji it replaces: it is the first thing on the screen
 * and it has to be recognisable as the object sitting in a stack beside the
 * kiosk. `height: auto` so the viewBox keeps its own proportions. */
.pager-illustration {
  display: block;
  width: 190px;
  height: auto;
  margin: 0 auto 20px;
}

/* ===== WHERE THE PAGERS ARE =====
 * The one thing the old screen never said. Sits between the 40px title and the
 * 21px grey `.pager-sub`, and is deliberately closer to the title: it is part
 * of the instruction, not a footnote to it. Dark rather than `--mid-gray` for
 * the same reason — F3's lesson was that grey small print at 1080x1920 is not
 * read at all. */
.pager-where {
  font-size: 25px;
  font-weight: 600;
  color: var(--dark);
  max-width: 800px;
  margin: -2px 0 18px;
  line-height: 1.3;
}