/* 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); }
  }
}