/* The two password pages: /signin/password/ (sign in) and
   /signin/password/new/ (create an account from an email sign-up link).
   Moved out of the sign-in page's own <style> when the second page came
   (2026-10-30). Theme variables only; the card itself is .signin-card. */
.pw-signin-form { display: grid; gap: 12px; margin-top: 8px; text-align: start; }
.pw-signin-form label,
.pw-signin-field { display: grid; gap: 6px; font-size: 0.9rem; color: var(--text); }
.pw-signin-form input {
  width: 100%; padding: 10px 12px; font-size: max(16px, 1rem);
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pw-signin-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.pw-signin-form button[type="submit"] {
  margin-top: 4px; padding: 11px 16px; font-weight: 600; font-size: 1rem; cursor: pointer;
  color: var(--accent-contrast, #09051a); background: var(--accent); border: 0; border-radius: 10px;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.pw-signin-form button[type="submit"]:hover { filter: brightness(1.08); }
.pw-signin-form button[type="submit"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-signin-form button[type="submit"][disabled] { opacity: 0.6; cursor: default; }
.pw-signin-error { margin: 4px 0 0; color: var(--danger); font-size: 0.9rem; }
.pw-signin-done { margin-top: 8px; }
.pw-signin-note { margin: 8px 0 0; color: var(--text-dim); font-size: 0.85rem; }

/* Password with a Show/Hide button inside its right edge. */
.pw-field { position: relative; }
.pw-field input { padding-inline-end: 72px; }
.pw-show {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  min-height: 32px; padding: 4px 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  color: var(--accent); background: transparent; border: 0; border-radius: 8px;
  transition: background-color 0.2s ease;
}
.pw-show:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pw-show:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-hint { color: var(--text-dim); font-size: 0.8rem; }