/* Page stage and shared helpers */
body { margin: 0; min-height: 100vh; background: #8E9196; font-family: var(--font-sans); }
.stage {
  min-height: 100vh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-6); padding: var(--space-6) var(--space-3);
}
.cards { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--space-6); width: 100%; }
.sr-only { text-transform: none; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pending { font-style: italic; border-bottom: 1px dashed currentColor; }

/* ---------- Phase 7: responsive layout ----------
   Each face sits in a "shell" that carries the shadow. The face itself is
   clipped to rounded corners, so the shadow follows the rounded shape. */
.card-shell {
  width: min(100%, 30rem);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)) drop-shadow(0 16px 22px rgba(0,0,0,.32));
}
/* Tablets and up: front and back side by side, as in the mockup. */
@media (min-width: 720px) {
  .cards { flex-wrap: nowrap; gap: clamp(1rem, 3vw, 2rem); }
  .card-shell { width: min(30rem, calc((100vw - 4rem) / 2)); }
}
/* Very small phones: a little less page padding so the card stays larger. */
@media (max-width: 360px) {
  .stage { padding: var(--space-4) var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }