/* Sign-in and the workspace chooser (design 3; 11). Wholly inside @layer app. */
@layer app {
  .login, .chooser { max-width: 560px; margin: 0 auto; }
  .chooser-list { display: flex; flex-direction: column; gap: var(--touch-gap); }
  .chooser-list .btn { text-decoration: none; }
  .login section { margin: var(--space-4) 0; padding: var(--space-4); background: var(--surface); border-radius: var(--radius-m); border: 1px solid var(--border); }
  .login .bootstrap { border-color: var(--accent); }
  .boot-errors { list-style: none; margin: var(--space-2) 0; padding: 0; }
  .device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--touch-gap); }
  /* Batch J (j1; BATCH-J-PLAN J-D5, J-D24): the language footer at the end of every sign-in view, set apart by a rule. */
  .login-lang { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
  /* Batch H (h7): the PIN switch on shared phones and the till: the roster, the dots and a 3 x 4 keypad; batch I1
     (i1, I1-D9): from the medium tier the keypad is capped at 360 px and centred in the 560 px column with 64 px keys
     (114.67 by 64 px at 744 instead of 159.33 by 56), the phone's keys unchanged (102.67 by 56 at 390). */
  .pin-roster { display: flex; flex-direction: column; gap: var(--touch-gap); margin: var(--space-3) 0; }
  .pin-dots { font-size: var(--font-size-600); text-align: center; margin: var(--space-2) 0; }
  .pin-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--touch-gap); margin: var(--space-3) 0; }
  .pin-pad .key { font-size: var(--font-size-500); }
  @media (min-width: 600px) {
    .pin-pad { max-width: 360px; margin-inline: auto; }
    .pin-pad .key { min-height: var(--touch-primary); }
  }
  /* Batch L (l1; BATCH-L-PLAN 9.1 item 4, L-D5): the test mode section set apart as the first-owner screen is. */
  .login .open-signin { border-color: var(--accent); }
  /* Batch LOGIN-2 (E1, Michel TG 12499 "shake"): a wrong PIN on the PIN alone shakes its four dots for 360 ms
     (web/login/pin.js SHAKE_MS, which ends it), and a device that asks for less motion gets none: the rule below turns the
     animation off, and the page, finding none running (web/login/app.js shakeOff), empties the dots at once. The freed
     cell of the pad (.key-gap, where Enter was) declares nothing: one grid track, as the key. */
  .pin-shake { animation: pin-shake 360ms ease-in-out; }
  @keyframes pin-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(calc(-1 * var(--space-2))); }
    40%, 80% { transform: translateX(var(--space-2)); }
  }
  @media (prefers-reduced-motion: reduce) { .pin-shake { animation: none; } }
}