/* /perl-request/ / SYSTEM v3 LIGHT LUXURY (perl-request.css?v=3)
   Unlisted questionnaire page for organic social traffic. One question per
   screen, same bank and routing as the Meta lead form.
   The .cform field rules below are copied verbatim from contact.css so this
   page stands alone, the same way contact.css stands alone from book.css. */

/* ==========================================================
   1. HERO
   ========================================================== */
.pq-hero .lead { max-width: 56ch; }
.pq-hero h1 { margin-bottom: 1rem; }

.callout-note {
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--brass);
  background: var(--panel);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ==========================================================
   2. PROGRESS
   ========================================================== */
.pq__bar {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.pq__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brass);
  transition: width .35s var(--ease);
}

/* ==========================================================
   3. FIELDS (copied from contact.css .cform)
   ========================================================== */
.cform { display: grid; gap: 1.1rem; max-width: 34rem; }
.cform__field { display: grid; gap: 0.4rem; }
.cform label {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brass-deep);
}
.cform input,
.cform select,
.cform textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cform input:focus,
.cform select:focus,
.cform textarea:focus {
  border-color: var(--brass-deep);
  box-shadow: 0 0 0 3px oklch(66.5% 0.083 78 / 0.18);
  outline: none;
}
.cform textarea { min-height: 8rem; resize: vertical; }

/* ==========================================================
   4. QUESTION STEPS
   ========================================================== */
.pq { max-width: 40rem; gap: 0; }
.pq__step { display: grid; gap: 1rem; }
.pq__step[hidden] { display: none; }

.pq__count {
  margin: 0;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brass-deep);
}
.pq__q {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.22;
  max-width: 24ch;
}
/* The step heading is focused in script so assistive tech announces the new
   question. That is programmatic, not keyboard navigation, so it should not
   paint a focus ring; :focus-visible still does for real keyboard users. */
.pq__q:focus { outline: none; }
.pq__q:focus-visible { outline: 2px solid var(--brass-deep); outline-offset: 4px; }

.pq__help {
  margin: -0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 48ch;
}

/* Answers read as a stacked list, not a card grid. */
.pq__opts { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.pq__opt {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 0.95rem 1.15rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s ease, background .2s ease;
}
.pq__opt::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--brass);
  transform: rotate(45deg);
  transition: background .2s ease;
}
.pq__opt:hover,
.pq__opt:focus-visible {
  border-color: var(--brass-deep);
  background: var(--panel-2);
  transform: translateX(3px);
  outline: none;
}
.pq__opt:hover::before,
.pq__opt:focus-visible::before { background: var(--brass); }

.pq__continue { justify-self: start; margin-top: 0.2rem; }

.pq__back {
  justify-self: start;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  min-height: 44px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
.pq__back:hover { color: var(--brass-deep); text-decoration-color: var(--brass); }
.pq__back[hidden] { display: none; }

/* ==========================================================
   5. CONTACT STEP
   ========================================================== */
.pq__grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.pq__grid .cform__field:nth-child(3),
.pq__grid .cform__field:nth-child(4) { grid-column: 1 / -1; }

.cform .pq__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: 0.5rem;
  font-family: var(--font-b);
  font-size: 0.82rem;
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
}
.cform .pq__consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--brass-deep);
}
.pq__submit { justify-self: start; margin-top: 0.75rem; }
.pq__submit[disabled] { opacity: .55; cursor: progress; }

.pq__err {
  margin: 0;
  padding: 0.8rem 1rem;
  border-left: 2px solid var(--brass-deep);
  background: var(--panel);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  color: var(--ink);
}
.pq__err[hidden] { display: none; }

/* ==========================================================
   6. ENDINGS
   ========================================================== */
.pq__end { gap: 1.1rem; }
.pq__endbody { margin: 0; max-width: 52ch; color: var(--ink-soft); }
.pq__end .btn { justify-self: start; }

/* ==========================================================
   7. RESPONSIVE
   ========================================================== */
@media (max-width: 640px) {
  .cform, .pq { max-width: 100%; }
  .pq__grid { grid-template-columns: 1fr; }
  .pq__grid .cform__field:nth-child(3),
  .pq__grid .cform__field:nth-child(4) { grid-column: auto; }
  .pq__q { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pq__fill { transition: none; }
  .pq__opt:hover, .pq__opt:focus-visible { transform: none; }
}