/* Shared PIN sign-in: KIJI Club (owner of this file) and the KIJI order printer.
   Copy pin-signin.css and pin-signin.js verbatim; tell the other app when you change them.
   Uses the iOS tokens from base.css (--label, --label2, --label3, --fill, --tint, --red, --thumb). */
.ps { --ps-w: 260px; /* the keypad's width: 3 keys of 72px + 2 gaps of 22px; the name field matches it */
  max-width: 20rem; margin: 14vh auto 0; padding: 0 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ps-icon svg { display: block; width: 26px; color: var(--label); }
.ps h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: 0.011em; margin: 12px 0 0; text-wrap: balance; }
.ps-pin { display: flex; flex-direction: column; align-items: center; width: var(--ps-w); margin-top: 24px; }
/* "Type your name" above the PIN (optional `people`), like the Superb OS kiosk */
.ps-who { position: relative; width: var(--ps-w); margin-top: 24px; }
.ps-who .ps-glass { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--label2); pointer-events: none; }
.ps-name { width: 100%; height: 44px; border: 0; border-radius: 10px; background: var(--fill); padding: 0 40px 0 38px; font: inherit; font-size: 17px; color: var(--label); -webkit-appearance: none; appearance: none; }
.ps-name::placeholder { color: var(--label2); }
.ps-name.set { font-weight: 600; }
.ps-clear { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.ps-clear svg { width: 17px; height: 17px; color: var(--label3); }
.ps-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; list-style: none; margin: 0; padding: 4px 0; max-height: 264px; overflow-y: auto;
  background: var(--cell); border-radius: 12px; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 0.5px var(--sep); }
.ps-list button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 11px 16px; border: 0; background: none; font: inherit; font-size: 17px; color: var(--label); text-align: left; cursor: pointer; }
.ps-list [aria-selected="true"] button, .ps-list button:active { background: var(--fill); }
.ps-list small { font-size: 12px; letter-spacing: 0.06em; color: var(--label2); flex: none; }
.ps-list .ps-none { padding: 11px 16px; font-size: 15px; color: var(--label2); }
.ps-hint { margin: 0 0 12px; font-size: 15px; line-height: 20px; color: var(--label2); }
.ps-dots { display: flex; gap: 14px; justify-content: center; height: 14px; }
.ps-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--label2); }
.ps-dots i.on { background: var(--label); border-color: var(--label); }
.ps-dots.shake { animation: ps-shake 400ms cubic-bezier(.36, .07, .19, .97); }
@keyframes ps-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.ps-err { color: var(--red); font-size: 13px; line-height: 18px; min-height: 18px; margin: 8px 0 10px; }
.ps-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; justify-content: center; width: var(--ps-w); }
.ps-pad button { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--fill); font: inherit; font-size: 30px; font-weight: 400; color: var(--label); cursor: pointer; touch-action: manipulation; }
.ps-pad button:active { background: var(--label3); }
.ps-pad button.ghost { background: none; font-size: 17px; color: var(--tint); }
.ps-pad .blank { visibility: hidden; }
.ps-pick { width: var(--ps-w); margin-top: 24px; text-align: left; }
.ps-pick p { text-align: center; margin: 0 0 8px; font-size: 15px; color: var(--label2); }
.ps-pick ul { list-style: none; margin: 0; padding: 0; background: var(--cell); border-radius: 10px; overflow: hidden; }
.ps-pick li + li { border-top: 0.5px solid var(--sep); }
.ps-pick button { display: block; width: 100%; border: 0; background: none; text-align: left; color: var(--tint); font: inherit; padding: 11px 16px; min-height: 44px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .ps-dots.shake { animation: none; } }