/* Kaiwhai Office — the locks (security.js): the two-step code screen, the
   Settings tile, leaving show mode and the auto-lock warning. Kept out of
   styles.css, which two tests pin byte for byte. Colours come from the theme
   tokens, so light mode needs nothing of its own. */
.set-twostep { grid-column: 1 / span 8; } /* beside Appearance, under the globe figures */
@media (max-width: 1000px) { .set-twostep { grid-column: 1 / -1; } }
.ts-state { margin: 0 0 6px; font-weight: 600; color: var(--band-text); }
.ts-state.ok { color: color-mix(in srgb, var(--mint) 82%, var(--band-text)); }
.ts-steps { margin: 0 0 12px; padding-left: 20px; font-size: 14px; }
.ts-steps li { margin: 0 0 14px; }
.ts-or { font-size: 13px; }
/* white behind the code: a phone camera can't read it on the dark theme */
.ts-qr { display: block; width: 176px; height: 176px; margin: 10px 0 0; padding: 8px; border-radius: 10px; background: #fff; }
.ts-key { display: inline-block; margin: 6px 8px 6px 0; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; word-break: break-all; }
.ts-code { max-width: 12ch; font-family: var(--mono); font-size: 20px; letter-spacing: .3em; }
#view-mfa .hint { margin: 0 0 14px; }
/* the show mode PIN: digits hidden as dots without making it a password field,
   so no password manager offers to save it */
.pin-input { -webkit-text-security: disc; max-width: 9ch; font-family: var(--mono); font-size: 24px; letter-spacing: .5em; }
.pin-modal .btn-link { margin: 0 0 8px; padding-left: 0; }
.idle-warn {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  max-width: min(560px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--toast-bg);
  color: var(--toast-text);
  font-size: 14px;
  box-shadow: var(--shadow);
}