/* =========================================================================
   Forms — the contact page, and later the return-request and review pages.
   Same seed-catalog world: ruled paper, ink labels, a stamped button.
   ========================================================================= */

.form-page {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin-block: clamp(1.75rem, 5vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .form-page { grid-template-columns: 1fr 1.15fr; }
  .form-page__intro { position: sticky; top: 2rem; }
  .examples { grid-column: 1 / -1; }
}

.form-page__intro { max-width: 42ch; }

.aside {
  margin-top: 1.75rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
  background: var(--paper-warm);
  padding: 1.1rem 1.25rem;
}

/* --- fields ------------------------------------------------------------ */

.form {
  display: grid;
  gap: 1.05rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(1.35rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) { .form { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font-size: .82rem; font-weight: 700;
  color: var(--ink-mid); letter-spacing: 0; text-transform: none;
}
.field__opt { color: var(--ink-faint); letter-spacing: .1em; }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: .6rem .75rem;
  transition: border-color .15s, background .15s;
}
.field textarea { resize: vertical; line-height: 1.55; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 145, 96, .13);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--terracotta); }

/* --- actions ----------------------------------------------------------- */

.form__actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem;
  margin-top: .35rem;
}


.form__note { margin: 0; font-size: .78rem; color: var(--ink-faint); max-width: 34ch; }

/* --- status ------------------------------------------------------------ */

.cs {
  grid-column: 1 / -1;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ink-faint);
  border-radius: 8px;
  background: var(--paper-warm);
  padding: .85rem 1.05rem;
  margin-top: .35rem;
}
.cs[data-kind='ok']      { border-left-color: #3f7d52; }
.cs[data-kind='error']   { border-left-color: var(--terracotta); }
.cs[data-kind='pending'] { border-left-color: var(--gold); }

.cs__line { margin: 0; font-size: .92rem; }
.cs[data-kind='ok'] .cs__line { color: #2f6640; }
.cs[data-kind='error'] .cs__line { color: #96412a; }

.cs__detail {
  margin: .6rem 0 0;
  font-family: var(--mono); font-size: .72rem; line-height: 1.5;
  background: var(--paper-warm); border: 1px solid var(--hairline); border-radius: 6px;
  padding: .6rem; max-height: 12rem; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* --- canned examples --------------------------------------------------- */

.examples { border-top: 1px solid var(--hairline); padding-top: 1.35rem; }


/* --- the in-page connect card ------------------------------------------
   The Tutorial Assets panel holds the same field, but it sits behind a tab on
   the screen edge. On a page whose entire point is "point this at your flow",
   the field needs a home you cannot walk past.
   ---------------------------------------------------------------------- */

.fc {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper-warm);
  padding: 1.1rem 1.25rem;
  margin-top: 1.5rem;
}
.fc[data-connected='false'] {
  border-color: #e6c9b8;
  background: linear-gradient(180deg, #fdf4ef, var(--paper-warm));
}

.fc__top { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.fc__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }
.fc[data-connected='true']  .fc__dot { background: var(--green-bright); box-shadow: 0 0 0 3px rgba(47,145,96,.16); }
.fc[data-connected='false'] .fc__dot { background: var(--terracotta); box-shadow: 0 0 0 3px rgba(194,84,47,.14); }
.fc__state { font-size: .95rem; }

.fc__hint { margin: 0 0 .9rem; font-size: .88rem; color: var(--ink-mid); line-height: 1.5; }
.fc__url {
  margin: 0 0 .9rem; font-family: var(--mono); font-size: .76rem;
  color: var(--ink-soft); overflow-wrap: anywhere;
}

.fc__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.fc__row .btn { font-size: .88rem; padding: .55rem 1.05rem; }

.fc__link {
  background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: .82rem; color: var(--green);
  text-decoration: underline; text-underline-offset: .2em;
}
.fc__link:hover { color: var(--terracotta); }