/*
 * Shared, theme-neutral base. Each theme imports this first, then its own
 * theme.css. Anything visual (color, type, layout flavor) lives in the theme;
 * only resets, the page-center frame, the digit animation, and accessibility
 * floors live here.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 48px);
  -webkit-font-smoothing: antialiased;
  --progress: 1; /* 1 = full window, 0 = expired; set live by app.js */
}

.stage {
  width: min(440px, 100%);
}

.code {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* The progress ring is decorative; let clicks pass through to the code. */
.ring {
  pointer-events: none;
}

/* Click-to-copy feedback: a quick grow-shrink pulse on the code. */
.code--copied {
  animation: code-pop 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes code-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

.code__digit {
  display: inline-block;
}

.code__gap {
  display: inline-block;
  width: 0.4em;
}

.code__digit--tick {
  animation: digit-tick 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes digit-tick {
  from {
    opacity: 0;
    transform: translateY(-0.3em);
    filter: blur(1px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .code__digit--tick,
  .code--copied {
    animation: none;
  }
}