/* ========== Auth Grid ========== */
/* 3 columns: label | input | button/spacer */
.auth-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  column-gap: 10px;
  row-gap: 8px;
  align-items: center;
}

.auth-group {
  display: contents; /* children participate in .auth-grid columns */
}

/* ---------- Labels ---------- */
.username-label,
.password-label,
.confirm-label {
  grid-column: 1;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Inputs ---------- */
.username-input,
.password-input {
  grid-column: 2;
  min-width: 0;
  padding: 6px 10px;
  line-height: 1.2;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
}

.username-input:focus,
.password-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.username-input:invalid,
.password-input:invalid {
  border-color: #d92d20;
}
.username-input:valid,
.password-input:valid {
  border-color: #12b76a;
}

/* ---------- Show Button + Spacer ---------- */
.password-toggle,
.username-spacer {
  grid-column: 3;
  justify-self: start;
  align-self: center;
  white-space: nowrap;
}

.password-toggle {
  width: var(--auth-toggle-w, 64px);
  border: none;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus,
.password-toggle[aria-pressed='true']:hover,
.password-toggle[aria-pressed='true']:focus {
  background-color: var(--login-btn-bg-hover, #1e40af);
  outline: none;
}

/* Keep pressed style visually consistent */
.password-toggle[aria-pressed='true'] {
  background-color: #2563eb;
}

/* ---------- Password Policy ---------- */
.password-policy {
  grid-column: 2;
  font-size: 0.85rem;
  color: #555;
  margin-top: 4px;
  margin-bottom: 4px;
  line-height: 1.3;
}

/* ---------- Errors ---------- */
.username-error,
.password-error,
.confirm-error {
  grid-column: 2;
  display: none;
  color: #d92d20;
  font-size: 0.9rem;
  margin-top: 4px;
}

/* show built-in validity errors */
.auth-group:has(.username-input:invalid) .username-error {
  display: block;
}
.auth-group:has(#password:invalid) .password-error {
  display: block;
}
/* Show confirm error when field is natively invalid (e.g., empty but required) */
.auth-group:has(#confirm:invalid) .confirm-error {
  display: block;
}

/* confirm uses customValidity, we reveal it via aria-invalid in JS */
#confirm[aria-invalid='true'] ~ .confirm-error {
  display: block;
}

/* Also show email/password error if JS toggles aria-invalid */
.username-input[aria-invalid='true'] ~ .username-error {
  display: block;
}
.password-input[aria-invalid='true'] ~ .password-error {
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .auth-grid {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .password-toggle,
  .username-spacer {
    grid-column: 2;
    margin-top: 6px;
  }
}