/* 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 H (h7): the PIN switch on shared phones and the till: the roster, the dots and a 3 x 4 keypad. */
  .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); }
}