/* ASM prototype — P2e: auth + account + team page styles (the real auth.css / team.css / account.css).
   Auth pages are the only routes that hold from 360 px (ADR 0075), so the < 1024 px notice is
   suppressed while an auth route (app--bare) is shown. Loaded after pages.css; additive only. */

/* ---------- auth card (auth.css) ---------- */
.auth-page { min-height: 100%; display: grid; place-items: center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 440px; padding: 24px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--text); letter-spacing: .06em; }
.auth-card .page-title { font-size: var(--text-2xl); color: var(--text); margin: 0 0 14px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field + .field { margin-top: 0; }
.auth-form p { margin: 0; }
.auth-email { overflow-wrap: anywhere; }
.auth-alert { margin: 0; color: var(--negative); font-size: var(--text-sm); }
.auth-form .auth-alert { margin: 0; }
.auth-note { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.auth-card .link-btn { align-self: flex-start; min-height: 24px; }
.auth-card .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.auth-username { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.password-field { display: flex; gap: 8px; }
.password-field .input { flex: 1; min-width: 0; }
.auth-choices { display: flex; flex-direction: column; gap: 10px; }
.auth-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 44px; padding: 12px 14px;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--raised);
}
.auth-choice:hover { border-color: var(--accent); background: var(--hover); }
.auth-choice span { font-size: var(--text-sm); }
.auth-dev { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.auth-dev .signin__users { padding: 6px; }
.auth-proto { display: flex; gap: 6px; align-items: flex-start; font-size: var(--text-2xs); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); color: var(--text-faint); }
.auth-proto a { color: var(--link); }
.auth-form section[aria-label] { display: flex; flex-direction: column; gap: 10px; }

/* TOTP setup (TotpSetup.tsx) */
.totp-setup__qr { display: flex; justify-content: center; }
.qr-code { width: min(240px, 100%); height: auto; border: 1px solid var(--border); border-radius: var(--radius-control); }
.totp-setup__key { text-align: center; }
.totp-setup__key code { display: inline-block; max-width: 100%; padding: 8px 12px; overflow-wrap: anywhere; font-size: var(--text-lg); letter-spacing: .06em; word-spacing: .35em; background: var(--sunken); border-radius: var(--radius-control); user-select: all; }
.totp-setup__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Recovery codes (RecoveryCodes.tsx) */
.recovery-codes { display: flex; flex-direction: column; gap: 4px; }
.recovery-codes__list { padding-left: 2em; font-family: var(--font-mono); margin: 0; }
.recovery-codes__list li { padding: 4px; overflow-wrap: anywhere; }
.recovery-codes__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.recovery-codes .check { margin: 12px 0; }
.recovery-codes > .btn--primary { width: 100%; height: 38px; }

/* Auth routes work from 360 px (ADR 0075): no desktop notice, touch-sized controls. */
#app.app--bare ~ .narrow-notice { display: none; }
@media (max-width: 1023.98px) {
  .auth-card .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
  .auth-choice { min-height: 44px; }
  .auth-card .tenant-row { min-height: 44px; }
}
@media (max-width: 480px) {
  .auth-card { padding: 16px; }
  .auth-page { padding: 16px 8px; }
  .totp-setup__actions .btn { flex: 1 1 100%; }
}

/* ---------- Team Members (team.css) ---------- */
.team-search { width: 240px; max-width: 40%; }
.team-status { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.team-status__note { font-size: var(--text-xs); }
.team-actions { text-align: right; }
.team-roles { gap: 8px; }
.team-role { display: block; padding: 9px 12px; margin: 0; cursor: pointer; }
.team-role__desc { display: block; font-size: var(--text-xs); margin: 3px 0 0 24px; }

/* ---------- My account (account.css) ---------- */
.account-name { font-weight: 650; color: var(--text); }
.account-action { text-align: right; }
.account-scopes { padding: 12px 14px; border-top: 1px solid var(--border-subtle); }
.account-empty { padding: 12px 14px; margin: 0; }
.account-permissions__scope { font-size: var(--text-xs); }
.card__head .account-permissions__scope { margin-left: 12px; }