/* ============================================================
   form.css · "Start your project" brief, as a full-screen
   instrument-styled dialog. Multi-step, driven by form.js.
   ============================================================ */

.brief {
  width: min(100%, 880px);
  max-width: 880px;
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: var(--hairline) solid var(--c-line-strong);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  color: var(--c-text);
  overflow: hidden;
}
.brief::backdrop {
  background: color-mix(in oklch, var(--c-void) 80%, transparent);
  backdrop-filter: blur(8px);
}
.brief[open] {
  animation: brief-in var(--dur-2) var(--ease-instrument);
}
/* the form is the flex column parent of head/progress/body/foot.
   Its own max-height (not the dialog's) gives the scroll a definite cap. */
.brief > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 92vh;
}
.brief__head, .brief__progress, .brief__foot { flex: none; }
@keyframes brief-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brief[open] { animation: none; }
}

/* ---- Head ---- */
.brief__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  border-bottom: var(--hairline) solid var(--c-line);
}
.brief__head h2 { font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--ls-tight); }
.brief__head p { color: var(--c-muted); font-size: var(--t-small); max-width: 52ch; margin-top: var(--s-2); }
.brief__close {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: var(--hairline) solid var(--c-line-strong);
  display: grid; place-items: center;
  color: var(--c-muted);
  transition: color var(--dur-1), border-color var(--dur-1), transform var(--dur-1);
}
.brief__close:hover { color: var(--c-text); border-color: var(--c-signal); transform: rotate(90deg); }
.brief__close svg { width: 18px; height: 18px; }

/* ---- Progress ---- */
.brief__progress {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  border-bottom: var(--hairline) solid var(--c-line);
}
.brief__count { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: var(--ls-mono); color: var(--c-signal); white-space: nowrap; }
.brief__steptitle { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
.brief__track { flex: 1; height: 2px; background: var(--c-line); border-radius: 2px; overflow: hidden; }
.brief__fill { height: 100%; width: 12.5%; background: linear-gradient(to right, var(--c-signal-deep), var(--c-signal)); border-radius: 2px; transition: width var(--dur-2) var(--ease-instrument); }

/* ---- Body / steps ---- */
.brief__body {
  flex: 1 1 auto;          /* take remaining space in the flex column */
  min-height: 0;           /* allow it to shrink below content so it can scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  -webkit-overflow-scrolling: touch;
}
.brief__step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.brief__step.is-active { display: block; animation: step-in var(--dur-2) var(--ease-instrument); }
@keyframes step-in { from { opacity: 0; transform: translateX(10px);} to{opacity:1;transform:none;} }
@media (prefers-reduced-motion: reduce) { .brief__step.is-active { animation: none; } }
.brief__step > legend { font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--ls-tight); margin-bottom: var(--s-5); padding: 0; }

/* ---- Fields ---- */
.fields { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field > label, .field > .field__label {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.field .req { color: var(--c-signal); }

.input, .textarea, .select {
  width: 100%;
  font: inherit;
  font-size: var(--t-body);
  color: var(--c-text);
  background: var(--c-void);
  border: var(--hairline) solid var(--c-line-strong);
  border-radius: var(--radius);
  padding: 0.8em 0.95em;
  transition: border-color var(--dur-1) var(--ease-instrument), box-shadow var(--dur-1) var(--ease-instrument);
  appearance: none;
}
.textarea { min-height: 7em; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--c-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-signal);
  box-shadow: 0 0 0 3px var(--c-signal-soft);
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b8f9a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  padding-right: 2.4em;
  cursor: pointer;
}
.select option { background: var(--c-surface); color: var(--c-text); }

/* invalid state after a failed Next */
.input:user-invalid, .textarea:user-invalid {
  border-color: #ff6b6b;
}

/* checkbox group */
.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--s-3); }
.check {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.7em 0.9em;
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1);
  font-size: var(--t-small);
}
.check:hover { border-color: var(--c-line-strong); }
.check input { accent-color: var(--c-signal); width: 16px; height: 16px; flex: none; }
.check:has(input:checked) { border-color: var(--c-signal); background: var(--c-signal-faint); }

/* file input */
.file {
  display: flex; align-items: center; gap: var(--s-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius);
  padding: 0.9em 1em;
  color: var(--c-muted);
  font-size: var(--t-small);
  cursor: pointer;
}
.file:hover { border-color: var(--c-signal); }
/* visually hidden but keyboard-focusable (display:none would remove it from
   the tab order); the label below shows the focus ring via :focus-within */
.file input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.file:focus-within { border-color: var(--c-signal); box-shadow: 0 0 0 3px var(--c-signal-soft); }
.file__name { color: var(--c-text); }

/* ---- Footer / nav ---- */
.brief__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
  border-top: var(--hairline) solid var(--c-line);
  background: color-mix(in oklch, var(--c-surface) 70%, var(--c-void));
}
.brief__foot .spacer { flex: 1; }
.brief [hidden] { display: none !important; }

/* honeypot */
.brief__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---- Success / error state ---- */
.brief__done { display: none; padding: clamp(2rem, 1rem + 5vw, 4rem); text-align: center; }
.brief.is-done .brief__progress,
.brief.is-done .brief__body,
.brief.is-done .brief__foot { display: none; }
.brief.is-done .brief__done { display: block; }
.brief__done .mark {
  width: 64px; height: 64px; margin: 0 auto var(--s-5);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--c-signal-faint); border: var(--hairline) solid var(--c-signal);
  color: var(--c-signal);
}
.brief__done .mark svg { width: 30px; height: 30px; }
.brief__done h2 { font-size: var(--t-h2); letter-spacing: var(--ls-tight); margin-bottom: var(--s-3); }
.brief__done p { color: var(--c-muted); max-width: 44ch; margin: 0 auto var(--s-6); }
.brief__err { color: #ff8a8a; font-size: var(--t-small); margin-top: var(--s-3); min-height: 1.2em; }

/* consent checkbox at the form (point of collection) */
.brief__consent .check { align-items: flex-start; }
.brief__consent .check span { line-height: 1.45; }
.brief__consent a { color: var(--c-signal); text-decoration: underline; }

/* link in the brief header (reassurance / email path) */
.brief__head a { color: var(--c-signal); text-decoration: underline; }