/* Shared by the sign-up form (marketing/signup.html) and the Profile edit
   form (assets/app.js): field-level errors, suggestions, the state list, the
   password show/hide button and rule checklist. Loaded after each page's own
   stylesheet; uses the colour variables both stylesheets define. */

.field select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; color: var(--ink); background: #fff; cursor: pointer;
}
.field select:focus { outline: none; border-color: var(--tx-navy); }

/* ZIP first, then the city and state it fills in. */
.field-row-zip { display: grid; grid-template-columns: 0.9fr 1.6fr 1.3fr; gap: 14px; }
.field-row-zip .field { min-width: 0; }
@media (max-width: 480px) { .field-row-zip { grid-template-columns: 1fr 1fr; } .field-row-zip .field:first-child { grid-column: 1 / -1; } }

.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--tx-red); }
.field-error { display: none; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--tx-red); }
.field-error.show { display: block; }

.field-suggest {
  display: none; margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.5;
  background: rgba(242,177,52,0.12); border: 1px solid rgba(242,177,52,0.4); color: #6b5000;
}
.field-suggest.show { display: block; }
.field-suggest button {
  margin: 4px 8px 0 0; padding: 4px 10px; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--tx-navy); background: #fff; color: var(--tx-navy);
}
.field-suggest button.primary { background: var(--tx-navy); color: #fff; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 4px 8px;
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--tx-navy); cursor: pointer;
}
.pw-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 12.5px; color: var(--ink-soft); }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: #1f6b3a; }
.pw-rules li.ok::before { content: "✓ "; font-weight: 800; }
@media (max-width: 480px) { .pw-rules { grid-template-columns: 1fr; } }

/* A checkbox row (the Terms agreement): its error goes underneath. */
.field-check { flex-wrap: wrap; }
.field-check .field-error { flex-basis: 100%; margin: 2px 0 0 24px; }