/*
 * NEXONOMY · CONTACT
 * The contact form. Sits in the quiet register (about.css) reading column.
 * Monochrome inputs on the flat base, accent only on focus and the submit CTA.
 */

.cform { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; max-width: 600px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform__field { display: flex; flex-direction: column; gap: 7px; }
.cform__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.cform__input {
  font-family: var(--font-body); font-size: 14px; color: var(--color-text-primary);
  background: var(--color-surface-0); border: 1px solid var(--color-border);
  border-radius: 9px; padding: 11px 13px;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.cform__input::placeholder { color: var(--color-text-muted); }
.cform__input:focus { outline: none; border-color: var(--color-accent); }
.cform__select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239b9ea8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
.cform__select option { background: var(--color-surface-1); color: var(--color-text-primary); }
.cform__textarea { resize: vertical; min-height: 112px; line-height: 22px; }
.cform__submit { align-self: flex-start; margin-top: 4px; }
/* this page does not load product.css, so size + stroke the submit icon here */
.cform__submit .icon {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.cform__note { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--color-text-secondary); }

/* submit, while sending */
.cform__submit:disabled { opacity: 0.6; cursor: progress; }

/* inline status — errors only; success replaces the form (.cform__done) */
.cform__status {
  font-family: var(--font-body); font-size: 14px; line-height: 21px;
  padding: 11px 14px; border-radius: 9px; border: 1px solid var(--color-border);
}
.cform__status--error {
  color: var(--color-signal);
  border-color: rgba(240, 77, 101, 0.40);   /* --color-signal @ 40% */
  background: rgba(240, 77, 101, 0.08);
}

/* sent confirmation — replaces the form, sealed/affirm register */
.cform__done {
  margin-top: 36px; max-width: 600px; padding: 22px 24px;
  border-left: 2px solid var(--color-affirm);
  background: rgba(16, 185, 129, 0.06);      /* --color-affirm @ 6% */
  border-radius: 0 9px 9px 0; outline: none;
}
.cform__done-h {
  font-family: var(--font-display); font-size: 20px;
  font-weight: var(--weight-semibold); color: var(--color-text-primary);
}
.cform__done-p { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--color-text-secondary); }

@media (max-width: 600px) {
  .cform__row { grid-template-columns: 1fr; }
}