/* Google sign-in compatibility for the original interface. */
.google-login-button {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #1f1f1f;
}

.google-login-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: none;
}

.google-login-button:hover { background: #f2f2f2; }
.google-login-button:disabled { opacity: 0.6; cursor: wait; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line-dark);
}

/* Email is the primary path. Keep the form before providers and policy links. */
.modal.login-modal { left:50%; right:auto; width:min(440px,calc(100vw - 32px)); bottom:auto; max-height:calc(var(--visual-height,100dvh) - 32px); padding:24px; border-radius:var(--radius-sheet); scroll-padding-block:16px; animation:login-appear 140ms ease-out; }
.login-modal .modal-header { gap:16px; }
.login-modal .modal-header .icon-button { flex-basis:48px; width:48px; height:48px; }
.login-modal .modal-header h2 { font-size:28px; line-height:1.2; }
.login-modal .modal-copy { margin-top:8px; font-size:14px; font-weight:500; }
.login-methods { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-top:20px; padding:4px; border:1px solid var(--line-dark); border-radius:16px; background:var(--black-raised); }
.login-methods button { min-width:0; min-height:48px; border:0; border-radius:12px; padding:10px 8px; background:transparent; color:var(--muted); font:inherit; font-size:14px; line-height:1.4; font-weight:650; cursor:pointer; }
.login-methods button[aria-pressed="true"] { background:var(--white); color:var(--black); box-shadow:0 1px 4px #0003; }
.login-methods button:disabled { opacity:.6; cursor:wait; }
.login-methods button:active:not(:disabled),.login-password-toggle:active:not(:disabled) { opacity:.75; }
.login-methods button:focus-visible,.login-password-toggle:focus-visible,.login-policy-links button:focus-visible,.login-code-actions button:focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
.login-modal .login-fields { margin-top:18px; gap:16px; }
.login-modal .login-fields label > span:not(.login-password-field) { margin:0 0 8px; font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--white); }
.login-modal .login-fields input { min-height:50px; border:1px solid #6b7069; border-radius:12px; font-size:16px; font-weight:500; scroll-margin-block:16px; }
.login-modal .login-fields input:focus { border-color:var(--acid); }
.login-modal .login-fields input[readonly] { color:var(--muted); }
.login-modal .login-fields .login-password-field { display:block; position:relative; margin:0; }
.login-password-field input { padding-right:82px; }
.login-password-toggle { position:absolute; right:3px; top:1px; min-height:48px; min-width:72px; padding:8px; border:0; border-radius:10px; color:var(--acid); background:transparent; font:inherit; font-size:14px; font-weight:650; cursor:pointer; }
.login-modal .profile-hint { margin:10px 0 0; font-size:14px; font-weight:400; line-height:1.5; }
.login-modal .login-error { font-size:14px; font-weight:500; line-height:1.5; }
.login-submit { margin-top:18px; }
.login-submit .button { width:100%; min-height:50px; font-size:16px; }
.login-modal .login-divider { margin-top:20px; font-size:13px; }
.login-providers { display:grid; gap:10px; margin-top:14px; }
.login-modal .login-providers .button { width:100%; min-height:48px; margin:0; font-size:16px; font-weight:600; }
.login-modal .login-policy-links { justify-content:center; gap:0 12px; margin-top:14px; padding:0; }
.login-modal .login-policy-links button { min-height:48px; padding:8px 0; font-size:13px; font-weight:500; color:var(--muted); }
.login-delivery { margin:14px 0 0; color:var(--muted); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.login-code-actions { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:8px; }
.login-code-actions .text-button { min-height:48px; padding:8px 0; font-size:14px; }
@keyframes login-appear { from { opacity:0; } to { opacity:1; } }
@media(max-width:820px), (max-height:500px) {
  .modal.login-modal { top:auto; bottom:calc(var(--keyboard-offset,0px) + max(12px,env(safe-area-inset-bottom))); transform:translateX(-50%); width:min(440px,calc(100vw - 24px)); max-height:calc(var(--visual-height,100dvh) - 24px - env(safe-area-inset-top)); padding:20px; }
}
@media(prefers-reduced-motion:reduce) { .modal.login-modal { animation:none; } }