shared.css

/* Rules shared by index, result/, and city/ (admin has its own smaller set):
   the vendored Space Grotesk face and the pre-mount loading placeholder.
   Each page links this before its inline <style>, so page CSS can override.
   index.html adds .grg-loading's min-height inline (full-viewport centering
   applies on the home page only). */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/vendor/fonts/space-grotesk-v22-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Loading placeholder shown until React mounts (root.render clears it). */
.grg-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px; color: #2a2620;
}
.grg-loading .grg-loading-wheel {
  transform-box: view-box; transform-origin: 32px 33px;
  animation: grg-loading-spin 1.2s linear infinite;
}
.grg-loading .grg-loading-slow {
  opacity: 0; animation: grg-loading-reveal 0.4s ease 6s forwards;
  font-size: 13px; color: #2a2620aa; max-width: 280px;
}
@keyframes grg-loading-spin { to { transform: rotate(360deg); } }
@keyframes grg-loading-reveal { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .grg-loading .grg-loading-wheel { animation: none; }
}
/* Button labels are controls, not copy: no long-press text selection on touch. */
button, .grg-hit44 { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }