/* Shared identity and vault presentation. Authentication handlers remain in app.js. */
.auth-screen.auth-screen, .vault-screen.vault-screen {
  --auth-text:var(--text); --auth-secondary:var(--muted); --auth-muted:var(--faint);
  --auth-input-bg:var(--input-bg); --auth-input-border:var(--border); --auth-placeholder:var(--faint);
  --auth-provider-bg:var(--surface); --auth-provider-hover:var(--surface-strong); --auth-provider-border:var(--border);
  --auth-panel-bg:var(--surface); --auth-panel-border:var(--border-soft); --auth-button-bg:var(--product-accent);
  --auth-button-text:var(--product-on-accent); --auth-button-hover:var(--brand-primary-blue-hover);
  --auth-provider-apple:var(--text); --auth-divider:var(--border-soft);
  color:var(--text);
}
.auth-screen.auth-screen {
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  padding:0; overflow:visible; isolation:isolate;
  background:radial-gradient(ellipse at 50% 15%,var(--product-wash),transparent 65%),var(--bg);
}
.auth-screen.auth-screen::before, .auth-screen.auth-screen::after {content:none; pointer-events:none;}
.auth-screen .auth-topline {
  width:min(1200px,100%); margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:max(24px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) 20px max(28px,env(safe-area-inset-left));
}
.auth-wordmark {display:flex; align-items:center; gap:10px; color:var(--text); font:28px Georgia,serif; letter-spacing:-1px;}
.auth-wordmark svg {width:28px; height:32px; fill:var(--product-accent); stroke:none;}
.appearance-picker {display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:500;}
.appearance-picker select {
  min-height:44px; min-width:100px; max-width:100%; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--text); padding:0 12px; font:inherit; font-size:16px; cursor:pointer;
}
.auth-screen.auth-screen .auth-panel.auth-panel {
  position:relative; width:min(440px,calc(100% - 40px)); margin:auto; display:flex; flex-direction:column; gap:20px;
  padding:36px; border:1px solid var(--border); border-radius:24px;
  background:linear-gradient(145deg,var(--surface),var(--surface-muted)); color:var(--text);
  box-shadow:0 24px 80px var(--product-shadow),inset 0 1px 0 var(--product-highlight); backdrop-filter:none;
  animation:aevro-auth-card-in 240ms ease-out both;
}
.auth-screen.auth-screen .auth-panel.auth-panel::before,.auth-screen.auth-screen .auth-panel.auth-panel::after {content:none;}
.auth-screen .auth-intro {order:0; margin:0 0 4px;}
.auth-screen .auth-intro .eyebrow {font-size:10px; letter-spacing:1.6px; color:var(--product-accent); margin:0 0 18px;}
.auth-screen .auth-intro h1 {font:400 clamp(34px,6vw,42px)/1.12 Georgia,serif; letter-spacing:-1.5px; margin:0 0 12px; color:var(--text);}
.auth-screen .auth-intro p:last-child {color:var(--muted); font-size:14px; line-height:1.6; margin:0; max-width:32ch;}
.auth-screen.auth-screen :is(#auth-passkey-button,.auth-social-section,.auth-email-form,.auth-recovery-panel,.auth-recovery-trigger,.auth-status,.auth-footer,#auth-retry-button) {order:0;}
.auth-screen.auth-screen .auth-passkey-button.auth-passkey-button {
  min-height:52px; padding:12px 16px; border:1px solid var(--product-accent); border-radius:12px;
  background:var(--product-accent); color:var(--product-on-accent); box-shadow:none; font-size:14px; font-weight:600;
}
.auth-screen.auth-screen .auth-passkey-button.auth-passkey-button:hover {background:var(--brand-primary-blue-hover); box-shadow:none; transform:none;}
.auth-screen.auth-screen .auth-passkey-button > span {font-size:14px;}
.auth-screen.auth-screen .auth-passkey-button > span::after {content:none;}
.auth-screen.auth-screen .auth-social-section {display:flex; flex-direction:column; gap:20px; margin-top:-8px;}
.auth-screen.auth-screen .oauth-buttons.oauth-buttons {order:0; gap:10px;}
.auth-screen.auth-screen .oauth-button.oauth-button {
  min-height:52px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text); font-size:14px; font-weight:550;
}
.auth-screen.auth-screen .oauth-button.oauth-button:hover {background:var(--surface-strong); border-color:var(--product-accent); transform:none;}
.auth-screen.auth-screen .auth-divider.auth-divider {order:1; margin:0; color:var(--faint); font-weight:400;}
.auth-screen.auth-screen .auth-divider.auth-divider span {font-size:12px;}
.auth-screen.auth-screen .auth-divider.auth-divider span::after {content:none;}
.auth-screen.auth-screen .auth-email-form.auth-email-form {gap:12px;}
.auth-screen.auth-screen .auth-step.auth-step {font-size:12px; letter-spacing:0; text-transform:none; color:var(--muted); font-weight:400; margin:0 0 4px; order:0;}
.auth-screen.auth-screen .auth-step.auth-step::after {content:none;}
.auth-screen.auth-screen .auth-input-row {display:grid; gap:8px; min-width:0;}
.auth-screen.auth-screen .auth-input-row > span {position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; margin:0; color:var(--text); font-size:12px; font-weight:500;}
.auth-screen.auth-screen .auth-input-row > svg {display:none;}
.auth-screen.auth-screen .auth-input-row input {
  width:100%; min-width:0; min-height:52px; padding:12px 14px; font-size:16px; border:1px solid var(--border); border-radius:12px;
  background:var(--input-bg); color:var(--text); box-shadow:none; font-weight:400; border-color:var(--control-border);
}
.auth-screen.auth-screen .auth-input-row input:focus {border-color:var(--product-accent); box-shadow:0 0 0 3px var(--product-wash);}
.auth-screen.auth-screen .auth-form-actions.auth-form-actions {display:flex; flex-wrap:wrap; gap:10px;}
.auth-screen.auth-screen .auth-form-actions button {flex:1; min-height:50px; border-radius:12px; font-size:14px;}
.auth-screen.auth-screen .primary-button.primary-button {background:var(--product-accent); color:var(--product-on-accent); box-shadow:none;}
.auth-screen.auth-screen .primary-button.primary-button:hover {background:var(--brand-primary-blue-hover); transform:none; box-shadow:none;}
.auth-screen.auth-screen .auth-form-actions #auth-submit-button {background:var(--surface-strong); color:var(--text); border:1px solid var(--border);}
.auth-screen.auth-screen .auth-form-actions #auth-submit-button:hover {border-color:var(--product-accent);}
.auth-screen.auth-screen .ghost-button {color:var(--muted); min-height:44px;}
.auth-screen.auth-screen .auth-status.auth-status {font-size:12px; font-weight:400; line-height:1.55; padding:0; margin:0; border:0; background:transparent; color:var(--muted); overflow:visible;}
.auth-screen.auth-screen .auth-status.auth-status::before,.auth-screen.auth-screen .auth-status.auth-status::after {content:none; display:none;}
.auth-screen.auth-screen .auth-status.auth-status.is-loading {padding-left:24px;}
.auth-screen.auth-screen .auth-status.auth-status.is-loading::before {content:''; display:block; left:0; border-color:var(--border); border-top-color:var(--product-accent);}
.auth-screen.auth-screen .auth-status.auth-status[data-tone="danger"] {padding:12px; border:1px solid var(--danger); border-radius:10px; background:var(--surface); color:var(--danger);}
.auth-screen.auth-screen .auth-status.auth-status[data-tone="danger"]::before {display:none;}
.auth-screen.auth-screen .auth-footer.auth-footer {font-size:12px; color:var(--muted); margin:0;}
.auth-screen .auth-bottom-space {min-height:clamp(28px,6vh,72px); pointer-events:none;}
.auth-screen.auth-screen :is(button,input,select):focus-visible,.vault-screen.vault-screen :is(button,input,select):focus-visible {outline:2px solid var(--product-accent); outline-offset:4px;}
.vault-screen.vault-screen:not([hidden]) {background:radial-gradient(ellipse at 50% 20%,var(--product-wash),transparent 65%),var(--bg); align-items:safe center;}
.vault-screen.vault-screen .vault-card {background:linear-gradient(145deg,var(--surface),var(--surface-muted)); border:1px solid var(--border); box-shadow:0 24px 80px var(--product-shadow); backdrop-filter:none; animation:aevro-auth-card-in 240ms ease-out both;}
.vault-appearance {display:flex; justify-content:flex-end; margin-bottom:24px;}
.vault-screen.vault-screen .vault-mark {background:var(--product-wash); border-color:var(--border); box-shadow:none;}
.vault-screen.vault-screen #vault-title {font:400 34px/1.12 Georgia,serif; letter-spacing:-1px;}
.vault-screen.vault-screen input {font-size:16px;}
.vault-screen.vault-screen #vault-submit {box-shadow:none;}
.vault-screen.vault-screen #vault-status:not(:empty) {padding-left:12px;}
.vault-screen.vault-screen #vault-status:not(:empty)::before {display:none;}
@media(max-width:600px) {
  .auth-screen .auth-topline {padding: max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 22px max(20px,env(safe-area-inset-left));}
  .auth-screen .appearance-picker>span {position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);}
  .auth-screen.auth-screen .auth-panel.auth-panel {width:calc(100% - 32px); margin:0 auto; padding:26px 24px; border-radius:20px; gap:18px;}
  .auth-screen .auth-intro h1 {font-size:36px;}
  .auth-screen .auth-bottom-space {min-height:max(28px,env(safe-area-inset-bottom));}
  .appearance-picker select {font-size:16px;}
}
@media(max-width:360px) {
  .auth-screen.auth-screen .auth-panel.auth-panel {width:calc(100% - 24px); padding:22px 18px; gap:16px;}
  .auth-screen .auth-topline {padding-inline:16px;}
  .auth-screen .auth-intro h1 {font-size:32px;}
  .auth-screen.auth-screen .auth-passkey-button > span {font-size:13px;}
}
@media(prefers-reduced-motion:reduce) {
  .auth-screen.auth-screen *,.vault-screen.vault-screen * {animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

.auth-screen.auth-screen :is(input,select),.vault-screen.vault-screen :is(input,select),body .appearance-picker select {border-color:var(--control-border);}

.auth-screen :is(h1,p,button,span) {overflow-wrap:anywhere;}
.appearance-picker>span {white-space:nowrap; flex-shrink:0;}
.auth-screen.auth-screen .oauth-button-copy strong {font-weight:550;}