/* ============================================================
   Dream Quarters — form craft layer (creation/edit flows)
   Plain CSS (Tailwind build is purged). Tokens from dq_feedback.css.
   ============================================================ */

/* ---------- sections: rhythm + occasion ---------- */
.dq-section { margin: 2.25rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--dq-hairline); }
.dq-section:first-of-type { margin-top: 1rem; padding-top: 0; border-top: 0; }
.dq-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dq-leather); margin: 0 0 .3rem;
}
.dq-section-title { font-size: 1.15rem; font-weight: 700; color: var(--dq-ink); margin: 0 0 .35rem; }
.dq-section-sub { font-size: .88rem; color: var(--dq-ink-soft); margin: 0 0 1.1rem; line-height: 1.5; }

/* ---------- fields ---------- */
.dq-field { margin-bottom: 1.1rem; }
.dq-field label { display: block; font-size: .86rem; font-weight: 600; color: var(--dq-ink); margin-bottom: .35rem; }
.dq-field input[type="text"], .dq-field input[type="number"], .dq-field input[type="email"],
.dq-field input[type="tel"], .dq-field input[type="date"], .dq-field input[type="url"],
.dq-field select, .dq-field textarea,
.dq-input {
  width: 100%; font-size: 1rem; color: var(--dq-ink);
  background: #FFFFFF; border: 1px solid var(--dq-hairline); border-radius: .625rem;
  padding: .6rem .8rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.dq-field input:focus, .dq-field select:focus, .dq-field textarea:focus, .dq-input:focus {
  outline: none; border-color: var(--dq-leather);
  box-shadow: 0 0 0 3px rgba(107, 66, 38, .12);
}
.dq-field--error input, .dq-field--error select, .dq-field--error textarea {
  border-color: var(--dq-error);
  box-shadow: 0 0 0 3px rgba(163, 53, 43, .10);
}
.dq-error-msg { display: block; font-size: .8rem; color: var(--dq-error); margin-top: .3rem; }
.dq-hint { display: block; font-size: .8rem; color: var(--dq-ink-soft); margin-top: .3rem; line-height: 1.4; }
.dq-char-count { float: right; font-size: .75rem; color: var(--dq-ink-soft); font-variant-numeric: tabular-nums; margin-top: .3rem; }
.dq-char-count--warn { color: var(--dq-amber); font-weight: 600; }

/* ---------- wizard progress ---------- */
.dq-progress { margin: 0 0 1.75rem; }
.dq-progress__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; color: var(--dq-ink-soft); margin-bottom: .45rem;
}
.dq-progress__label b { color: var(--dq-ink); font-weight: 700; }
.dq-progress__bar { height: 6px; border-radius: 99px; background: var(--dq-hairline); overflow: hidden; }
.dq-progress__fill {
  height: 100%; border-radius: 99px; background: var(--dq-leather);
  transition: width .45s cubic-bezier(.2, .8, .3, 1);
}

/* ---------- step transitions ---------- */
.dq-step-in { animation: dq-step-in .28s cubic-bezier(.2, .8, .3, 1); }
@keyframes dq-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .dq-step-in { animation: none; } }