/*
 * form.css — ProblemSubmissionForm styling (brief §15.7/§15.8).
 * Requires tokens.css + base.css to be loaded first (uses their custom
 * properties / helpers only — no raw hex/px values duplicated here, per
 * brief §25.3). Shared primitives (.container, .section, .section--light,
 * .eyebrow, .section-title, .btn, .btn--primary incl. its :disabled state)
 * live in components.css — this file only styles what is specific to the
 * partner form: the two "may bring / not a fit" lists, field/label/textarea,
 * the honeypot, and the success/error states.
 */

/* ---------------------------------------------------------------------- */
/* "May bring" / "Not a fit" lists (brief §15.5/§15.6)                     */
/* ---------------------------------------------------------------------- */

.partner-form-lists {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-block-start: 48px;
  margin-block-end: 48px;
}

@media (min-width: 768px) {
  .partner-form-lists {
    grid-template-columns: 1fr 1fr;
  }
}

.partner-form-list h3 {
  font-size: var(--fs-body-large);
  font-weight: var(--fw-h3);
  line-height: var(--lh-body-large);
  margin-block-end: 16px;
}

.partner-form-list ul li {
  position: relative;
  padding-inline-start: 20px;
  color: var(--text-on-light-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.partner-form-list ul li + li {
  margin-block-start: 10px;
}

.partner-form-list ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------------------------- */
/* Form layout                                                             */
/* ---------------------------------------------------------------------- */

.partner-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px; /* brief §17.3 long-content measure */
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: var(--fs-small);
  font-weight: var(--fw-body-medium);
  color: var(--text-on-light);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--card-surface);
  color: var(--text-on-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-button);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: border-color var(--transition-duration) var(--transition-easing),
    box-shadow var(--transition-duration) var(--transition-easing);
}

.form-field textarea {
  resize: vertical;
  min-height: 110px;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-on-light-muted);
}

/* Focus state — supplements the global :focus-visible outline in base.css
   with a border/ring treatment scoped to form controls. */
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Flag genuinely invalid fields only after the user has interacted with
   them (native :placeholder-shown proxies "still empty/untouched" well
   enough here since every field has a placeholder) — avoids painting every
   required field red on first paint. */
.form-field input:not(:placeholder-shown):invalid,
.form-field textarea:not(:placeholder-shown):invalid {
  border-color: var(--status-error);
}

/* ---------------------------------------------------------------------- */
/* Honeypot — off-screen, not display:none/type=hidden (brief §15.8)       */
/* ---------------------------------------------------------------------- */

.form-field--honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* Submit button + privacy note                                            */
/* ---------------------------------------------------------------------- */

#partner-form-submit {
  align-self: flex-start;
  margin-block-start: 8px;
}

@media (max-width: 767px) {
  #partner-form-submit {
    align-self: stretch;
  }
}

.form-privacy-note {
  color: var(--text-on-light-muted);
}

.form-privacy-note a {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* Success / error states (EVI-3 status colors, not the accent)            */
/* ---------------------------------------------------------------------- */

.form-state {
  padding: 16px 20px;
  border-radius: var(--radius-card);
  border-left: 3px solid transparent;
}

.form-state[hidden] {
  display: none;
}

.form-state h3 {
  font-size: var(--fs-body-large);
  margin-block-end: 4px;
}

.form-state--success {
  border-left-color: var(--status-success);
  background: var(--bg-light);
}

.form-state--success h3 {
  color: var(--status-success);
}

.form-state--error {
  border-left-color: var(--status-error);
  background: var(--bg-light);
}

.form-state--error a {
  color: var(--status-error);
  text-decoration: underline;
}