@import url('./tokens.css');
@import url('./base.css');
@import url('./components.css');

.ptt-auth-body { min-height:100vh; background:#f7f8fa; color:var(--ptt-text); display:grid; place-items:center; padding:32px 18px; }
.ptt-auth-shell { width:min(440px,100%); display:grid; gap:18px; }
.ptt-auth-brand { display:flex; align-items:center; gap:11px; }
.ptt-auth-brand strong { display:block; font-size:15px; letter-spacing:-.02em; }
.ptt-auth-brand span { display:block; color:var(--ptt-muted); font-size:10px; margin-top:2px; }
.ptt-auth-logo { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; background:#111827; color:#fff; font-weight:800; }
.ptt-auth-card { background:#fff; border:1px solid var(--ptt-border); border-radius:14px; box-shadow:0 14px 40px rgba(15,23,42,.06); padding:26px; }
.ptt-auth-kicker { display:block; color:var(--ptt-primary); font-size:9px; font-weight:800; letter-spacing:.1em; margin-bottom:8px; }
.ptt-auth-card h1 { margin:0; font-size:22px; letter-spacing:-.03em; }
.ptt-auth-card__head p { margin:8px 0 0; color:var(--ptt-muted); font-size:11px; line-height:1.6; }
.ptt-auth-form { margin-top:22px; display:grid; gap:14px; }
.ptt-auth-field { display:grid; gap:6px; }
.ptt-auth-field span { font-size:10px; font-weight:700; }
.ptt-auth-field input { width:100%; height:42px; border:1px solid var(--ptt-border-strong); border-radius:8px; padding:0 12px; outline:none; background:#fff; color:var(--ptt-text); font:inherit; }
.ptt-auth-field input:focus { border-color:var(--ptt-primary); box-shadow:0 0 0 3px var(--ptt-primary-soft); }
.ptt-auth-submit { height:42px; border:0; border-radius:8px; background:var(--ptt-primary); color:#fff; font-weight:700; cursor:pointer; }
.ptt-auth-submit:hover { background:var(--ptt-primary-hover); }
.ptt-auth-alert { margin-top:16px; display:grid; gap:3px; padding:11px 12px; border:1px solid var(--ptt-critical-border); background:var(--ptt-critical-soft); border-radius:8px; color:var(--ptt-critical); }
.ptt-auth-alert strong { font-size:10px; }.ptt-auth-alert span{font-size:10px;color:var(--ptt-text-secondary)}
.ptt-auth-security { margin-top:18px; padding-top:15px; border-top:1px solid var(--ptt-border); display:flex; flex-wrap:wrap; gap:6px; }
.ptt-auth-security span { padding:4px 6px; background:var(--ptt-bg-muted); border-radius:5px; color:var(--ptt-muted); font-size:8px; font-weight:700; }
.ptt-auth-foot { display:flex; justify-content:space-between; color:var(--ptt-faint); font-size:9px; padding-inline:2px; }

/* MASTER 12.1 — local QR based TOTP enrollment */
.ptt-auth-shell--mfa{width:min(680px,100%)}
.ptt-mfa-grid{margin-top:18px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;align-items:start}
.ptt-mfa-qr-card{display:grid;gap:9px;padding:13px;border:1px solid var(--ptt-border);border-radius:12px;background:var(--ptt-bg-muted,#f7f8fa)}
.ptt-mfa-qr{min-height:232px;display:grid;place-items:center;background:#fff;border:1px solid var(--ptt-border);border-radius:10px;padding:8px;color:var(--ptt-muted);font-size:10px}
.ptt-mfa-qr svg{display:block;width:100%;height:auto;max-width:232px}
.ptt-mfa-qr-card small{font-size:9px;line-height:1.55;color:var(--ptt-muted)}
.ptt-mfa-manual{min-width:0}
.ptt-auth-security--stack{margin-top:0;padding-top:0;border-top:0;display:grid;gap:12px}
.ptt-auth-security--stack>div,.ptt-auth-security--stack details{padding:12px;border:1px solid var(--ptt-border);border-radius:9px;background:#fff;min-width:0}
.ptt-auth-security--stack strong{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--ptt-muted);margin-bottom:5px}
.ptt-auth-security--stack span{display:block;padding:0;background:none;border-radius:0;color:var(--ptt-text);font-size:11px;font-weight:600}
.ptt-auth-security--stack code{display:block;font-size:12px;line-height:1.55;letter-spacing:.08em;word-break:break-all;color:var(--ptt-text)}
.ptt-auth-security--stack summary{cursor:pointer;font-size:10px;font-weight:700;color:var(--ptt-text-secondary)}
.ptt-auth-security--stack details code{margin-top:8px;font-size:9px;letter-spacing:0}
@media(max-width:620px){.ptt-mfa-grid{grid-template-columns:1fr}.ptt-mfa-qr-card{justify-items:center}.ptt-mfa-qr-card small{text-align:center}}
/* MFA enrollment escape hatch: safe return = sign out, never bypass mandatory MFA. */
.ptt-auth-cancel{margin-top:14px;padding-top:14px;border-top:1px solid var(--ptt-border);display:grid;gap:9px}
.ptt-auth-cancel__line{display:flex;align-items:center;gap:8px;color:var(--ptt-muted);font-size:10px;line-height:1.5}
.ptt-auth-cancel form{margin:0}
.ptt-auth-back{width:100%;height:40px;border:1px solid var(--ptt-border-strong);border-radius:8px;background:#fff;color:var(--ptt-text);font-weight:700;cursor:pointer;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.ptt-auth-back:hover{background:var(--ptt-bg-muted,#f7f8fa);border-color:#94a3b8;box-shadow:0 3px 10px rgba(15,23,42,.05)}
.ptt-auth-back:focus-visible{outline:none;border-color:var(--ptt-primary);box-shadow:0 0 0 3px var(--ptt-primary-soft)}
.ptt-auth-cancel small{color:var(--ptt-muted);font-size:9px;line-height:1.55}