/* Geist (SIL OFL 1.1, by Vercel), the OZAV site font, served from this site: the CSP allows fonts only from 'self'. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-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;
}
:root {
  color-scheme: light;
  --bg: #f7f7f5;
  --ink: #0a0a0a;
  --ink-card: #2b2b29;
  --muted: #6b6b66;
  --line: rgba(10, 10, 10, .10);
  --bad: #c2362f;
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
main {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.25rem;
  padding: max(2rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom));
}
h1 { margin: 0; font-size: 1rem; font-weight: 450; letter-spacing: -.01em; color: var(--muted); }

/* The card, landscape, ID-1 proportions (85.6 x 53.98 mm), laid out on the card art template's grid. */
.card {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 1.586;
  container-type: inline-size;
  border-radius: 4.5% / 7.1%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 12px 32px -12px rgba(10,10,10,.18);
  overflow: hidden;
}
.logo { position: absolute; top: 7.5cqw; height: 10cqw; width: 37cqw; }
.logo-left { left: 3.5cqw; }
.logo-right { right: 3.5cqw; }
.chip { position: absolute; left: 12cqw; top: 21cqw; width: 13cqw; height: auto; }
.network { position: absolute; right: 3.5cqw; bottom: 4.5cqw; width: 22cqw; height: 11cqw; }

dl { position: absolute; left: 12cqw; right: 3.5cqw; bottom: 6cqw; margin: 0; display: grid; gap: 2.4cqw; }
dt { font-size: max(.625rem, 2.4cqw); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .6cqw; }
/* Fixed heights: the issuer draws each field in its own iframe, which must not push the card around. */
dd { margin: 0; height: 6cqw; min-height: 1.25rem; overflow: hidden; color: var(--ink-card); font-size: max(.875rem, 4.2cqw); font-weight: 450; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pan dd { height: 7.5cqw; min-height: 1.5rem; font-size: max(1rem, 5.6cqw); letter-spacing: .1em; }
.row { display: flex; gap: 9cqw; }
/* Empty field while loading: a quiet placeholder bar. */
dd:empty { position: relative; }
dd:empty::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 1.8cqw; width: 14cqw; border-radius: 999px; background: rgba(10,10,10,.07); }
.pan dd:empty::after { width: 52cqw; }
.card[aria-busy="true"] dd:empty::after { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

#status { margin: 0; min-height: 1.25rem; font-size: .8125rem; color: var(--muted); text-align: center; max-width: 26rem; }
#status.error { color: var(--bad); }
.note { margin: 0; display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; color: var(--muted); }
.note svg { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .card[aria-busy="true"] dd:empty::after { animation: none; } }