/* ==========================================================================
   YoureNX — forms
   The shared form vocabulary: fields, inputs, validation state, alerts.
   Extracted from auth.css so the marketing contact form and the auth screens
   render identical inputs from one definition rather than two copies.

   Layered on site.css, which owns the tokens. Nothing here defines a token.
   Load order is always: site.css → forms.css → (auth.css | pages.css).
   ========================================================================== */

.form{ display:grid; gap: 1.15rem; }

.form__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  font-size: var(--step--1);
}

.form__pair{ display:grid; gap:1.15rem; }

.fieldset{
  border:0;
  padding:0;
  margin:0;
  display:grid;
  gap:1.15rem;
}

.fieldset__legend{
  font-family: var(--mono);
  font-size: var(--step--1);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
  padding:0;
  margin-bottom:.35rem;
}

/* --- Field --------------------------------------------------------------- */

.field{ display:grid; gap:.4rem; }

.field__label{
  font-size: var(--step--1);
  font-weight:600;
  display:flex;
  align-items:baseline;
  gap:.5rem;
}

.field__opt{
  font-family: var(--mono);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--on-paper-dim);
}

.field__required{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--nx-purple);
}

.field__hint{
  font-size: var(--step--1);
  color: var(--on-paper-mid);
  margin:0;
}

.field__input{
  width:100%;
  padding:.85rem 1rem;
  font:inherit;
  font-size: var(--step-0);
  color: var(--on-paper);
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:0;                 /* square, to match the editorial rules */
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.field__input:focus-visible{
  outline:none;
  border-color: var(--ink-3);
  box-shadow: 0 0 0 3px rgb(13 19 33 / .12);
}

.field__input:read-only{
  background: var(--paper-2);
  color: var(--on-paper-mid);
}

/* Monospaced and tracked out, so six digits are easy to check before submitting. */
.field__input--code{
  font-family: var(--mono);
  font-size: var(--step-1);
  letter-spacing:.4em;
  text-align:center;
}

.field--bad .field__input{ border-color:#B3261E; }
.field--bad .field__input:focus-visible{ box-shadow:0 0 0 3px rgb(179 38 30 / .16); }

.field__error{
  font-size: var(--step--1);
  color:#B3261E;
  margin:0;
}

select.field__input{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--on-paper-mid) 50%),
    linear-gradient(135deg, var(--on-paper-mid) 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.5rem;
}

/* resize:vertical only — horizontal dragging breaks out of the grid column. */
textarea.field__input{
  resize:vertical;
  min-height:9rem;
  line-height:1.6;
}

/* --- Checkboxes ---------------------------------------------------------- */

.check{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size: var(--step--1);
  color: var(--on-paper-mid);
  cursor:pointer;
}

.check input{
  flex:none;
  width:1.05rem;
  height:1.05rem;
  margin-top:.15rem;
  accent-color: var(--nx-purple);
}

.check--block{ color: var(--on-paper); }

/* The label is a sibling rather than a wrapper, so that it can carry `for` and
   stay a persistent label. That moves the pointer target onto the label. */
.check label{ cursor:pointer; }

/* --- Buttons — .btn comes from site.css; only these variants are new. ----- */

.btn--block{
  width:100%;
  justify-content:center;
  border:0;
  cursor:pointer;
}

.link{
  color: var(--nx-purple);
  font-weight:500;
  text-underline-offset:.2em;
}
.link:hover{ text-decoration:none; }

/* --- Alerts -------------------------------------------------------------- */

.alert{
  padding:1rem 1.1rem;
  margin:0 0 1.5rem;
  border-left:3px solid;
  font-size: var(--step--1);
}
.alert--bad{ background:#FDECEA; border-color:#B3261E; color:#5F1512; }
.alert--good{ background:#E7F4EC; border-color:#1E7B45; color:#14522E; }
.alert--info{ background:var(--paper-2); border-color:var(--nx-purple); color:var(--on-paper); }

.alert__title{ font-weight:600; margin:0 0 .35rem; }
.alert__list{ margin:0; padding-left:1.1rem; }
.alert__list li + li{ margin-top:.25rem; }

/* --- Notes --------------------------------------------------------------- */

.note{
  background: var(--paper-2);
  padding:1.1rem 1.2rem;
  font-size: var(--step--1);
  color: var(--on-paper-mid);
}
.note__title{
  font-weight:600;
  color: var(--on-paper);
  margin:0 0 .4rem;
}
.note p{ margin:0; }
.note p + p{ margin-top:.5rem; }

@media (min-width: 62rem){
  .form__pair{ grid-template-columns: 1fr 1fr; }
}