/* Copyright Ayers Electronics Inc. All rights reserved. */

/* The PIN pad a person meets when their profile carries one (js/pin-pad.js, pages/select-profile.html):
   the face, the heading, four dots, a ten-wide digit row and under it Delete and Back, each half the
   row's width, then the one message line in a slot of its own. Its keys wear the picker's accent ring,
   as Select a Profile and its editor do. Every colour is a token. */
#profilePinPad {
  --focus-ring-outset: 0 0 0 var(--focus-ring-width) var(--accent);
  z-index: 47;
}
.pin-pad-face {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-round);
  background: var(--panel);
}
.pin-pad-face img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-round);
}
.pin-pad-dots {
  display: flex;
}
.pin-pad-dots > * + * {
  margin-left: var(--family-inline-gap);
}
/* An empty dot is an open ring in the border token, 3:1 or better on the ground; an entered one is
   the accent, filled, at the same size. */
.pin-pad-dot {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-round);
  background: transparent;
}
.pin-pad-dot.on {
  background: var(--accent);
  border-color: var(--accent);
}
.pin-pad-dots.pin-pad-shake {
  animation: pin-pad-shake 240ms ease-in-out 1;
}
@keyframes pin-pad-shake {
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pin-pad-dots.pin-pad-shake {
    animation: none;
  }
}
.pin-pad-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--family-row-gap);
  width: 560px;
}
.pin-pad-grid .key {
  height: var(--family-row-height);
  font: inherit;
  font-size: var(--type-heading);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer;
}
.pin-pad-grid .key.pin-pad-action {
  grid-column: span 5;
  font-size: var(--type-body);
}
.pin-pad-forgot {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--type-body);
  color: var(--accent-text);
  text-decoration: underline;
  cursor: pointer;
}
/* The message line keeps its slot while empty, so a mismatch or a wrong try never moves the pad. */
.pin-pad-limited {
  margin: 0;
  min-height: 1.5em;
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--muted);
}
#pinPadLimited.hidden {
  display: block !important;
  visibility: hidden;
}