/* GSA Connect — shared base styles. Template look lives in style.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Content fades in once card.json is bound, so empty hooks never flash. */
.gc-loading main, .gc-loading .card-root { opacity: 0; }
.gc-ready main, .gc-ready .card-root { opacity: 1; transition: opacity .35s ease; }

/* Wallet buttons — swap for official badge artwork if you prefer (see docs/WALLET-SETUP.md). */
.wallet { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wbtn {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  min-height: 48px; padding: 8px 14px; border-radius: 10px;
  background: #000; color: #fff; text-decoration: none; font: 600 15px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border: 1px solid rgba(255,255,255,.18);
}
.wbtn small { display: block; font-size: 10px; font-weight: 500; opacity: .8; letter-spacing: .02em; }
.wbtn .icon { width: 22px; height: 22px; }
.wbtn:focus-visible { outline: 3px solid var(--accent, #BA0C2F); outline-offset: 2px; }

.qr svg { width: 100%; height: auto; display: block; }

.gc-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  background: #111; color: #fff; padding: 10px 16px; border-radius: 999px; font: 500 14px/1 system-ui, sans-serif;
  opacity: 0; pointer-events: none; transition: .25s ease; z-index: 99;
}
.gc-toast.show { opacity: 1; transform: translate(-50%, 0); }
.gc-error { margin: 16px; padding: 12px 14px; border-radius: 8px; background: #fff4d6; color: #5c4300; font: 14px/1.45 system-ui, sans-serif; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}