/* ==========================================================================
   YOPROFX / 10 — THE INTAKE
   --------------------------------------------------------------------------
   /start/. A proposal filed into the catalogue, not a contact page.

   The form borrows the exhibit page's rhythm exactly — numbered blocks, a
   mono label, a hint, then the thing itself — so writing a brief feels like
   filling in a catalogue record, because that is what it is. Alongside it a
   specimen card assembles from what has been typed so far.

   Inputs follow the house rule: no boxes. A field is a hairline that
   ignites when you are in it.

   Loaded only by /start/.
   ========================================================================== */


/* ==========================================================================
   THE OPENING
   ========================================================================== */

.intake__q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--c-bone);
  max-width: 18ch;
  margin-top: var(--sp-sm);
  text-wrap: balance;
}


/* ==========================================================================
   LAYOUT
   Fields and the specimen, side by side. The specimen sticks, because the
   whole point is watching it fill in while you write.
   ========================================================================== */

.intake {
  display: grid;
  gap: var(--sp-xl);
}

@media (min-width: 64rem) {
  .intake { grid-template-columns: 7fr 4fr; gap: var(--sp-2xl); align-items: start; }
  .intake__side { position: sticky; top: calc(var(--chrome-h) + var(--sp-lg)); }
}

/* Below the split the specimen goes first: it explains what the form is
   for, which is worth knowing before you start typing into it. */
@media (max-width: 63.99rem) {
  .intake__side { order: -1; }
}

/* The honeypot. Not display:none — some bots skip what is hidden that way,
   and some assistive tech would announce it. Off-canvas and out of the tab
   order instead. */
.intake__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   FIELDS
   ========================================================================== */

.field {
  display: grid;
  gap: var(--sp-2xs) var(--sp-lg);
  padding-block: var(--sp-md);
  border-top: var(--hair) solid var(--c-line-soft);
}

@media (min-width: 40rem) {
  .field { grid-template-columns: 3rem 1fr; }
}

.field__n { color: var(--territory); padding-top: 0.5em; }

.field__c { max-width: 44rem; }

.field__l {
  display: block;
  font-family: var(--font-structure);
  font-weight: 600;
  font-stretch: 105%;
  font-size: var(--t-body);
  letter-spacing: 0.01em;
  color: var(--c-bone);
  padding: 0;
}

.field__req {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-graphite);
  margin-inline-start: 0.6em;
}

.field__hint { margin-top: var(--sp-3xs); max-width: 52ch; }

.field__err {
  display: block;
  margin-top: var(--sp-2xs);
  color: var(--t-transform);
  text-transform: none;
  letter-spacing: 0.02em;
}

.field--send { border-top-color: var(--c-line); }


/* --- inputs --------------------------------------------------------------
   No boxes. A field is a hairline that ignites when you are in it. */

.inp {
  display: block;
  width: 100%;
  margin-top: var(--sp-xs);
  padding: 0.4rem 0 0.45rem;
  background: transparent;
  border: 0;
  border-bottom: var(--hair) solid var(--c-line);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--c-bone);
  transition: border-color var(--dur-base) var(--ease-dimmer),
              background var(--dur-base) var(--ease-dimmer);
}

.inp::placeholder { color: var(--c-graphite); }

.inp:hover { border-bottom-color: var(--c-line-lit); }

.inp:focus {
  outline: none;
  border-bottom-color: var(--territory);
  background: linear-gradient(0deg, rgba(239, 234, 225, 0.04), transparent 70%);
}

/* The focus ring is the house spotlight, moved to the underline so it does
   not draw a box around a field that deliberately has none. */
.inp:focus-visible {
  outline: none;
  box-shadow: 0 1px 0 0 var(--territory), 0 6px 26px -10px var(--territory);
}

.inp[aria-invalid="true"] { border-bottom-color: var(--t-transform); }

.ta { resize: vertical; min-height: 3.5rem; line-height: 1.45; }

.inp__l {
  display: block;
  color: var(--c-graphite);
  margin-top: var(--sp-sm);
}

.inp__l + .inp { margin-top: var(--sp-2xs); }

.trio { display: grid; gap: var(--sp-sm) var(--sp-lg); }

@media (min-width: 46rem) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}


/* --- option chips --------------------------------------------------------
   Real checkboxes and radios, visually replaced. The input keeps focus and
   keyboard behaviour; the label carries the look. */

.opts { border: 0; padding: 0; margin: 0; }

.opts__set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
  margin-top: var(--sp-md);
}

.opt { display: inline-flex; cursor: pointer; }

.opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.opt__f {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.75em 0.36em;
  border: var(--hair) solid var(--c-line);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-chalk);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-dimmer),
              border-color var(--dur-fast) var(--ease-dimmer),
              background var(--dur-fast) var(--ease-dimmer);
}

.opt__dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--territory);
  opacity: 0.35;
  transition: opacity var(--dur-fast) var(--ease-dimmer);
}

.opt:hover .opt__f { color: var(--c-bone); border-color: var(--c-line-lit); }
.opt:hover .opt__dot { opacity: 0.8; }

.opt input:checked + .opt__f {
  color: var(--c-bone);
  border-color: var(--c-line-lit);
  background: rgba(239, 234, 225, 0.06);
}

.opt input:checked + .opt__f .opt__dot { opacity: 1; }

.opt input:focus-visible + .opt__f {
  outline: var(--hair) solid var(--c-bone);
  outline-offset: 3px;
  box-shadow: 0 0 24px -4px var(--territory);
}


/* ==========================================================================
   THE LIVE SPECIMEN
   ========================================================================== */

.proposal { transition: --territory var(--dur-slow) var(--ease-dimmer); }

.proposal__cap { color: var(--c-graphite); margin-bottom: var(--sp-sm); }

.proposal__card {
  position: relative;
  padding: var(--sp-md);
  background: var(--c-plinth);
  border: var(--hair) solid var(--c-line-soft);
  overflow: hidden;
}

.proposal__rule {
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--territory);
  opacity: 0.4;
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-gate),
              opacity var(--dur-slow) var(--ease-dimmer);
}

/* The rule extends as the record fills in: a progress bar that never
   admits to being one. */
.proposal[data-fill] .proposal__rule { opacity: 1; }

.proposal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.proposal__id { color: var(--territory); }

.proposal__title {
  font-family: var(--font-structure);
  font-weight: 600;
  font-stretch: 108%;
  font-size: var(--t-title);
  line-height: 1.15;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--c-bone);
  text-wrap: balance;
}

.proposal__blurb {
  font-family: var(--font-display);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-chalk);
  margin-top: var(--sp-2xs);
  min-height: 3.2em;
}

.proposal__meta {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--sp-3xs) var(--sp-sm);
  margin: var(--sp-md) 0 0;
  padding-top: var(--sp-sm);
  border-top: var(--hair) solid var(--c-line-soft);
}

.proposal__meta dt,
.proposal__meta dd {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  line-height: var(--lh-mono);
  margin: 0;
}

.proposal__meta dt { font-weight: 500; text-transform: uppercase; color: var(--c-graphite); }
.proposal__meta dd { color: var(--c-chalk); }

.proposal__note { margin-top: var(--sp-md); max-width: 34ch; }


/* ==========================================================================
   RECEIPT + ALERT
   ========================================================================== */

.receipt {
  max-width: 44rem;
  padding: var(--sp-lg);
  border: var(--hair) solid var(--c-line);
  background: var(--c-plinth);
}

.receipt__ref { color: var(--c-graphite); margin-top: var(--sp-2xs); }

.receipt__h { margin-top: var(--sp-sm); }

.receipt__t {
  font-family: var(--font-display);
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--c-chalk);
  max-width: 46ch;
  margin-block: var(--sp-sm);
}

.receipt--warn { border-color: var(--t-transform); }
.receipt--warn .u-label { color: var(--t-transform); }

.alert {
  max-width: 44rem;
  margin-bottom: var(--sp-lg);
  padding: var(--sp-md);
  border: var(--hair) solid var(--t-transform);
}

.alert ul {
  list-style: none;
  margin: var(--sp-2xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}

.alert a {
  font-family: var(--font-display);
  font-size: var(--t-small);
  color: var(--c-bone);
  border-bottom: var(--hair) solid var(--c-line-lit);
}

.alert a:hover { border-bottom-color: var(--t-transform); }


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .proposal__rule,
  .inp,
  .opt__f { transition: none; }
}