/* Shared base for the customer page, owner screen and QR cards. Uses tokens.css only. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-md)/1.45 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.display { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.01em; }

/* The table plate: the one bold element, borrowed from tram-stop number signs. */
.plate {
  display: inline-grid; place-items: center; align-content: center; gap: 1px;
  min-width: 64px; padding: 6px 10px 7px; border-radius: var(--r-md);
  background: var(--brand); color: var(--brand-ink);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), inset 0 0 0 4px var(--brand);
  line-height: 1; text-align: center;
}
.plate small { font: 700 12px/1 var(--font-display); font-stretch: 112%; letter-spacing: .06em; opacity: .9; }
.plate b { font: 900 30px/1 var(--font-display); font-stretch: 112%; color: var(--signal); font-variant-numeric: tabular-nums; }
.plate.lg { min-width: 96px; padding: 10px 14px 12px; border-radius: var(--r-lg); }
.plate.lg small { font-size: 13px; }
.plate.lg b { font-size: 48px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5); border: 0; border-radius: var(--r-md);
  background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: var(--t-md);
  text-decoration: none; transition: background-color .15s;
}
.btn:hover { background: var(--brand-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn.wide { width: 100%; }
.btn.quiet { background: var(--surface); color: var(--ink); }
.btn.quiet:hover { background: var(--surface-2); }
.btn.outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}