/* Bisdata Card additions — everything else comes from styles.css (Pro canon, synced). */

/* The hidden attribute must always win, even against classes that set display
   (e.g. .tag's inline-flex) — page scripts toggle visibility via el.hidden. */
[hidden] { display: none !important; }

/* Punch grid — the product's signature visual */
.punch-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sp-3); max-width: 340px; margin-inline: auto; }
.punch { position: relative; aspect-ratio: 1/1; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); display: grid; place-items: center; }
.punch .pn { font-size: 12px; font-weight: 700; color: var(--muted); }
.punch.filled { border-color: var(--accent); background: none; }
.punch.filled svg { width: 100%; height: 100%; color: var(--accent); display: block; }
.punch.filled.pop svg { animation: punchIn .3s var(--ease-spring) both; }
@keyframes punchIn { from { transform: scale(.2); } }
.punch.seal { border-style: dashed; border-color: var(--good); color: var(--good); }
.punch.seal svg { width: 46%; height: 46%; }
.punch.seal.ready { border-style: solid; background: rgba(201,162,74,.14); }
.punch-grid.sm { gap: var(--sp-2); max-width: 260px; }
@media (prefers-reduced-motion: reduce) { .punch.filled.pop svg { animation: none; } }

/* Scan stage (staff scanner) */
.scan-stage { position: relative; width: 100%; aspect-ratio: 1/1; max-height: 62dvh; background: var(--sunken); border: 1px solid var(--line-2); overflow: hidden; }
.scan-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--accent); opacity: .9; }
.scan-corner.c1 { inset-block-start: 10%; inset-inline-start: 10%; border-block-start-width: 3px; border-inline-start-width: 3px; }
.scan-corner.c2 { inset-block-start: 10%; inset-inline-end: 10%; border-block-start-width: 3px; border-inline-end-width: 3px; }
.scan-corner.c3 { inset-block-end: 10%; inset-inline-start: 10%; border-block-end-width: 3px; border-inline-start-width: 3px; }
.scan-corner.c4 { inset-block-end: 10%; inset-inline-end: 10%; border-block-end-width: 3px; border-inline-end-width: 3px; }
.scan-status { position: absolute; inset-block-start: var(--sp-3); inset-inline: 0; display: flex; justify-content: center; }
.stamp-btn { width: 100%; min-height: 60px; font-size: 17px; }

/* Toast (uses --z-toast from tokens) */
.toast { position: fixed; inset-block-end: calc(var(--sp-5) + env(safe-area-inset-bottom)); inset-inline: var(--sp-4); z-index: var(--z-toast); margin-inline: auto; max-width: 420px; display: flex; align-items: center; gap: var(--sp-3); background: var(--raised); border: 1px solid var(--line-2); color: var(--ink); font-size: 14px; font-weight: 600; padding: var(--sp-3) var(--sp-4); opacity: 0; transform: translateY(8px); transition: opacity .22s var(--ease-out), transform .22s var(--ease-out); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.toast.good { border-color: var(--good); }
.toast.bad { border-color: var(--bad); }

/* Live QR plate (real scannable QR, dark modules on white) */
.qr-live { display: grid; place-items: center; padding: var(--sp-4); background: #fff; width: min(68vw, 260px); aspect-ratio: 1/1; margin-inline: auto; }
.qr-live svg, .qr-live canvas, .qr-live img { width: 100%; height: 100%; display: block; }
.code-line { text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); margin-block-start: var(--sp-3); }