/* pin-gate.css — shared PIN keypad + touch/zoom hardening.
 *
 * Theme per app by overriding the --pg-* variables on :root or on the
 * .pin-gate element. Do NOT edit the structural rules below; they are what
 * keeps every app's gate behaving identically.
 */

.pin-gate {
  /* --- themeable knobs (override these per app) --- */
  --pg-bg:        #0e0f13;
  --pg-fg:        #f2f3f5;
  --pg-muted:     #8a8f98;
  --pg-accent:    #4f8cff;
  --pg-key-bg:    rgba(255, 255, 255, 0.06);
  --pg-key-press: rgba(255, 255, 255, 0.14);
  --pg-dot:       var(--pg-accent);
  --pg-error:     #ff5c5c;
  --pg-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- structure --- */
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--pg-bg);
  color: var(--pg-fg);
  font-family: var(--pg-font);

  /* touch/zoom hardening — uniform across every app */
  touch-action: manipulation;          /* kills double-tap-to-zoom */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

/* Belt-and-suspenders: block text selection anywhere inside the gate. */
.pin-gate * {
  -webkit-user-select: none;
  user-select: none;
}

.pin-gate__title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--pg-muted);
  letter-spacing: 0.02em;
}

.pin-gate__dots {
  display: flex;
  gap: 0.9rem;
  min-height: 1rem;
}

.pin-gate__dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1.5px solid var(--pg-muted);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.pin-gate__dot--filled {
  background: var(--pg-dot);
  border-color: var(--pg-dot);
  transform: scale(1.08);
}

.pin-gate__pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.pin-gate__key {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  border: none;
  background: var(--pg-key-bg);
  color: var(--pg-fg);
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.08s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.pin-gate__key:active {
  background: var(--pg-key-press);
  transform: scale(0.94);
}

.pin-gate__key--action {
  background: transparent;
  font-size: 1rem;
  color: var(--pg-muted);
}

.pin-gate__key--spacer {
  visibility: hidden;
  pointer-events: none;
}

.pin-gate__msg {
  min-height: 1.2rem;
  font-size: 0.9rem;
  color: var(--pg-error);
  text-align: center;
  padding: 0 1.5rem;
}

/* error shake on the dots row */
.pin-gate__dots--error {
  animation: pin-gate-shake 0.4s ease;
}

@keyframes pin-gate-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-9px); }
  40%, 80% { transform: translateX(9px); }
}

.pin-gate[hidden] { display: none; }

@media (prefers-color-scheme: light) {
  .pin-gate {
    --pg-bg:        #f5f6f8;
    --pg-fg:        #14161a;
    --pg-muted:     #6b7280;
    --pg-key-bg:    rgba(0, 0, 0, 0.05);
    --pg-key-press: rgba(0, 0, 0, 0.12);
  }
}