/* forms.css — page-scoped additions for technical-setup.html + the two private questionnaires (agent E). Loads after site.css and home.css; consume tokens, never redefine them. KIT 2026-09-13. */

/* ─────────────────────────────────────────────────────────────
   The console. The wizard host is the panel now (.xe-glass + .xe-brackets
   in the markup); the rendered .step inside it is stripped back to layout
   so there is one surface, not a card inside a card. Same grammar as the
   book-a-dj console: glass shell, corner ticks, a lit progress track,
   a bevelled checked state. One backdrop-filter surface on the page.
   ───────────────────────────────────────────────────────────── */
.wizard.xe-glass { padding: clamp(20px, 3vw, 34px); }
.wizard.xe-glass > .step {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Progress track: the kit rule in site.css already carries --edge plus the 6 % ring, so both
   consoles inherit the same one bare grey object. Only the spacing is page-scoped. */
.wizard .progress { margin-bottom: 20px; }

/* Nothing inside the console may set its own min-content floor: a grid item defaults to
   min-width auto, so one wide track inside .yn used to push the whole step past the panel
   (the refund questionnaire scrolled sideways at 360). */
.wizard .step,
.wizard .step > *,
.wizard .qs,
.wizard .field,
.wizard .field > * { min-width: 0; }
.wizard .yn { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }

/* Section head: the eyebrow sits directly under the track. */
.wizard .step > div:first-child { display: grid; gap: 10px; }
.wizard .step .eyebrow { display: inline-block; }

/* Controls read as machined objects: the edge light on every surface the
   finger lands on. Set, never tweened (house rule: no animated box-shadow). */
.wizard .field input,
.wizard .field textarea,
.wizard .datefield .dateface,
.wizard .upload,
.wizard .choice span { box-shadow: var(--edge); }

/* The checked state is the lit one: bevel + the existing bloom. */
.wizard .choice input:checked + span { box-shadow: var(--bevel), 0 0 16px rgba(255, 255, 255, .35); }
.wizard .choice span:active { transform: scale(.97); }

/* The date face is the label on the most important control in the console; --faint reads
   4.36:1 on the field's ink, under the 4.5:1 floor. One step up, still a placeholder. */
.wizard .datefield .dateface { color: #8A8A8A; }
.wizard .datefield .dateface.set { color: var(--text); }

/* Money never breaks mid-number. The budget track is widened on its own so the long
   bracket sits on one line; every other choice grid keeps the 150px track. */
.wizard .field[data-q="budget"] .choices { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Two native affordances that survived inside the console: the diagonal resize grip
   (a drag pushed the box outside the panel) and the OS number stepper. */
.wizard textarea { resize: vertical; min-height: 110px; }
.wizard input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.wizard input[type="number"]::-webkit-outer-spin-button,
.wizard input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Upload: the whole dashed box is the target and the house pill is the face. Chrome's
   grey "Choose Files" chip was the one object in the console nobody designed. */
.wizard .upload { position: relative; cursor: pointer; }
.wizard .upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.wizard .upload .pick {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--ink-1);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--edge);
  transition: transform var(--t-fast) var(--ease-spring), border-color var(--t-fast);
}
.wizard .upload:hover .pick { transform: translateY(-1px); border-color: var(--faint); }
.wizard .upload:active .pick { transform: scale(.97); }
.wizard .upload:focus-within .pick { outline: 2px solid var(--accent); outline-offset: 3px; }
.wizard .upload .files { color: var(--text); font-weight: 600; font-size: .92rem; }
.wizard .upload .files:empty { display: none; }

/* Skip is a way past, not a second Next: it stands with Back, and Next is the only lit
   action on the screen. The target still clears 44px on a phone. */
.wizard .step-actions .left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wizard .step-actions .left button.xe-more {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.wizard .step-actions .left button.xe-more:hover,
.wizard .step-actions .left button.xe-more:focus-visible { color: var(--text); }
.wizard .step-actions .left button.xe-more:active { opacity: .72; }

/* Review: each answered section becomes a lit card instead of a loose list. */
.wizard .summary.xe-lit {
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .022);
}
.wizard .summary.xe-lit .line:last-child { border-bottom: 0; }
.wizard .step h3 { margin: 18px 0 8px; }
.wizard .answer { box-shadow: var(--sh-1); }

/* ── Tips band on the wedding questionnaire ───────────────────
   The prose keeps its measure; the band gets the waveform strip so the page
   reads as two rooms (answer here, read there) rather than one scroll. */
body[data-page="wedding-pack"] .section.alt {
  margin-top: clamp(36px, 5vw, 64px);
  padding-inline: clamp(18px, 3vw, 34px);
  border: 0;
  border-radius: var(--r-lg);
}
body[data-page="wedding-pack"] .section.alt > .prose { max-width: 68ch; }
body[data-page="wedding-pack"] .section.alt .prose li { margin-bottom: 10px; }
body[data-page="wedding-pack"] .paperwork {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .022);
}
body[data-page="wedding-pack"] .paperwork h3 { margin-top: 0; }
body[data-page="wedding-pack"] .paperwork p:last-child { margin-bottom: 0; }

/* Phones: the shell stays glass, everything inside stays flat (one
   backdrop-filter surface per section is the house limit). */
@media (max-width: 899px) {
  .wizard.xe-glass { padding: 16px 14px; border-radius: var(--r-md); }
  .wizard.xe-brackets::after { inset: -5px; }
}