/* PIN keypad (pin-pad.js). Revealed only by script; `hidden` is the no-JS state.
 * The 3x3 grid is the point — thumb-sized targets, digits where a phone dialer
 * puts them. Touch-action avoids the double-tap zoom a fast typist triggers. */
.pin-pad { margin-block: 0.5rem 1rem; }
.pin-pad[hidden], .pin-switch [hidden], .field[data-pin-field][hidden] { display: none; }
.pin-label { font-size: var(--sn-type-body-2-size); color: var(--sn-on-surface-variant); margin: 0 0 0.75rem; }
.pin-dots { display: flex; justify-content: center; gap: 0.875rem; margin-bottom: 1.25rem; }
.pin-dot {
  width: 0.875rem; height: 0.875rem; border-radius: 50%;
  border: 2px solid var(--sn-outline); background: transparent;
  transition: background var(--sn-motion-duration-short), border-color var(--sn-motion-duration-short);
}
.pin-dot.is-on { background: var(--sn-primary); border-color: var(--sn-primary); }
.pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; max-width: 18rem; margin-inline: auto; }
.pin-key {
  height: 3.75rem; border-radius: 0.75rem; touch-action: manipulation; cursor: pointer;
  font: inherit; font-size: var(--sn-type-h5-size); font-variant-numeric: tabular-nums;
  color: var(--sn-on-surface); background: var(--sn-surface-container-low);
  border: 1px solid var(--sn-outline-variant);
}
.pin-key:hover { background: var(--sn-surface-container); }
.pin-key:active { background: var(--sn-surface-container-high); }
.pin-key:focus-visible { outline: 2px solid var(--sn-primary); outline-offset: 2px; }
.pin-key-back { font-size: var(--sn-type-body-1-size); }
.pin-switch { margin: 0.5rem 0 0; text-align: center; }
.pin-hint { font-size: var(--sn-type-body-2-size); color: var(--sn-on-surface-variant); text-align: center; margin: 0 0 1rem; }
.field[hidden] { display: none; }