/* Email authentication reuses the shared field and button system. */
.email-auth .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus-visible {
  outline: var(--focus-width) solid var(--brand);
  outline-offset: var(--focus-offset);
}
.email-auth .field input:not([type=checkbox]):not([type=radio]):not([type=hidden])[aria-invalid=true] {
  border-color: var(--red);
}
.email-auth .hint, .email-auth .form-error {
  overflow-wrap: anywhere;
}
.email-auth .consent-field label {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}
.email-auth .consent-field input[type=checkbox]:focus-visible {
  outline: var(--focus-width) solid var(--brand);
  outline-offset: var(--focus-offset);
}
.email-auth .consent-field.invalid input[type=checkbox],
.email-auth .consent-field input[type=checkbox][aria-invalid=true] {
  border-color: var(--red);
}

/* Account forms extend the existing fields without changing the visual theme. */
.account-auth { max-width: var(--modal-width); margin-right: auto; margin-left: auto; }
#root > .account-auth { margin: var(--space-40) auto; padding: 0 var(--page-gutter); }
.account-auth > .panel { background: var(--card); border-radius: var(--web-surface-radius); box-shadow: var(--web-surface-shadow); }
.account-auth h2 { font-size: var(--font-size-section-title); }
.account-auth .auth-intro { margin-bottom: var(--space-18); }
.auth-modes { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-20); }
.auth-modes a { display: inline-flex; align-items: center; min-height: var(--touch-target-min); padding: var(--space-6) var(--space-16); border: var(--border-width) solid var(--line); border-radius: var(--radius-pill); background: var(--card); color: var(--ink-2); font-size: var(--font-size-small); }
/* Keep navigation hover states above the shared filter-chip hover rule. */
.auth-modes .chip:hover:not([aria-current=page]) { background: var(--brand-soft); }
.auth-modes .chip[aria-current=page] { background: var(--brand); border-color: var(--brand); color: var(--card); font-weight: var(--font-weight-semibold); }
.auth-modes .chip[aria-current=page]:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--card); }
.auth-sections { gap: var(--space-4); padding-bottom: var(--space-18); margin-bottom: var(--space-20); border-bottom: var(--border-width) solid var(--line); }
.auth-sections a { padding: var(--space-9) var(--space-22); border-color: transparent; background: transparent; font-size: var(--font-size-body); }
.auth-code-row, .auth-captcha-row { display: flex; align-items: stretch; gap: var(--space-10); min-width: 0; }
.auth-code-row input, .auth-captcha-row input { flex: 1; min-width: 0; width: 0; min-height: var(--touch-target-min); }
.auth-code-row .btn { flex: none; min-height: var(--touch-target-min); }
.auth-password-row { position: relative; min-width: 0; }
.auth-password-row input { display: block; width: 100%; min-width: 0; }
/* Reserve text space above the shared field-padding rule in components.css. */
.email-auth .field .auth-password-row input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: var(--touch-target-min); padding-right: calc(var(--touch-target-min) + var(--space-8)); }
.auth-password-row .auth-password-toggle { position: absolute; right: var(--space-2); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: var(--touch-target-min); height: var(--touch-target-min); padding: 0; border: 0; border-radius: var(--radius-input); background: transparent; color: var(--ink-2); box-shadow: none; cursor: pointer; transition: color var(--motion-duration) var(--motion-easing); }
.auth-password-toggle:hover:not(:disabled) { color: var(--brand); }
.auth-password-toggle:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-offset); }
.auth-password-toggle:disabled { color: var(--ink-3); cursor: not-allowed; }
.auth-password-toggle svg { width: var(--space-20); height: var(--space-20); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.auth-password-toggle .auth-password-slash { display: none; }
.auth-password-toggle[aria-pressed=true] .auth-password-slash { display: block; }
@media (prefers-reduced-motion: reduce) {
  .auth-password-row .auth-password-toggle { transition: none; }
}
.auth-captcha-image { flex: none; display: flex; align-items: center; justify-content: center; width: calc(var(--space-80) * 2); min-height: var(--touch-target-min); padding: 0; overflow: hidden; border: var(--border-width) solid var(--line); border-radius: var(--radius-input); background: var(--bg); color: var(--ink-2); font: inherit; font-size: var(--font-size-small); cursor: pointer; }
.auth-captcha-image img { display: block; width: 100%; height: auto; }
.auth-captcha-image:hover:not(:disabled) { border-color: var(--brand); }
.auth-captcha-image:active:not(:disabled) { transform: translateY(var(--press-offset)); }
.auth-captcha-image:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-offset); }
.auth-captcha-image:disabled { cursor: default; }
.account-auth .consent-field label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-height: var(--touch-target-min); }
.account-auth .consent-field input[type=checkbox] { flex: none; margin-right: var(--space-4); }
.account-auth form > .btn { width: 100%; min-height: var(--touch-target-min); margin-top: var(--space-12); box-shadow: var(--web-surface-shadow); }
.comment-item, #projectComments, #demandComments { scroll-margin-top: calc(var(--topbar-height) + var(--space-20)); }
.comment-reply-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-bottom: var(--space-10); color: var(--ink-2); font-size: var(--font-size-small); overflow-wrap: anywhere; }
.comment-reply-context[hidden] { display: none; }
.comment-reply-context .text-link { min-width: var(--touch-target-min); min-height: var(--touch-target-min); }
@media (prefers-reduced-motion: reduce) {
  .auth-modes .chip:active { transform: none; }
}
@media (max-width: 640px) {
  .auth-captcha-row { flex-wrap: wrap; }
  .auth-captcha-row input { flex-basis: 100%; width: 100%; }
  .auth-code-row { flex-wrap: wrap; }
  .auth-code-row input { flex-basis: 100%; width: 100%; }
}