/* apply.css
   The qualification flow: apply.html, thanks-booked.html, thanks-nurture.html.

   This file EXTENDS styles.css. Load order is not optional:

     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="apply.css">

   styles.css owns the tokens (BRAND.md sections 2 and 3), the reset, the type
   scale, the buttons, the header, the footer, and the shared components:
   .wrap .lead .note .eyebrow .mono .muted .card .badge .rtable .ruled .btn.
   Nothing here redefines any of those. What follows is only what a five step
   form and two outcome pages need on top.

   Two inherited rules to keep in mind when editing the markup:

   1. styles.css sets `section { padding: var(--sec-pad) 0; border-top: 1px solid
      var(--rule) }`. That rhythm is wanted on the outcome pages, so those use
      plain <section>. Inside the form it is not, so the progress rail and the
      reason panel are <div>, never <section>.
   2. styles.css sets `ul, ol { list-style: none; padding: 0 }`. Any list that
      needs real bullets asks for them back here.
*/

/* ---------------------------------------------------------------------------
   0. One utility styles.css does not have: content for screen readers only.
   Used by the live region that announces each step change.
   --------------------------------------------------------------------------- */

.q-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* These three pages carry no section nav in the header, only the wordmark and
   one button. styles.css drops `margin-left: auto` from that button at 900px,
   where the landing page has a nav to fill the gap. Here there is none, so the
   button would sit against the wordmark. Put the gap back. */
.site-head .btn { margin-left: auto; }

/* ---------------------------------------------------------------------------
   1. Page intro
   --------------------------------------------------------------------------- */

.q-intro { padding: clamp(28px, 5vw, 56px) 0 clamp(18px, 3vw, 28px); }
.q-intro h1 { max-width: 20ch; }
.q-intro .lead { margin-top: 16px; max-width: 62ch; }

.q-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.q-meta span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--signal);
  margin-right: 8px;
  vertical-align: 2px;
}

/* ---------------------------------------------------------------------------
   2. Two column grid: the form, and the facts panel that does not move
   --------------------------------------------------------------------------- */

.q-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.q-aside {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  padding: 18px;
  font-size: var(--t-small);
}
.q-aside h2 {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.q-aside dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 14px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.q-aside dt { color: var(--muted); }
.q-aside dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.q-aside .note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
.q-aside .note + .note { border-top: 0; padding-top: 10px; margin-top: 0; }

/* ---------------------------------------------------------------------------
   3. Progress rail
   --------------------------------------------------------------------------- */

.q-progress { margin-bottom: 20px; }

.q-progress-bar {
  height: 3px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.q-progress-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: var(--signal);
  transition: width 180ms ease-out;
}

.q-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.q-steps li {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding-top: 7px;
  border-top: 2px solid transparent;
}
.q-steps li b { font-weight: 500; }
.q-steps li[data-state="current"] { color: var(--ink); border-top-color: var(--signal); }
.q-steps li[data-state="done"] { color: var(--signal); }

/* ---------------------------------------------------------------------------
   4. The form and its steps
   --------------------------------------------------------------------------- */

.q-form {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
}

.q-step {
  border: 0;
  margin: 0;
  padding: clamp(18px, 3.5vw, 30px);
  min-width: 0;
}
.q-step[hidden] { display: none; }
.q-step > legend {
  padding: 0;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.q-step > h2 { font-size: var(--t-h3); margin-bottom: 6px; }
.q-step .step-note {
  color: var(--muted);
  font-size: var(--t-small);
  max-width: 60ch;
  margin-bottom: 22px;
}

@media (prefers-reduced-motion: no-preference) {
  .q-step:not([hidden]) { animation: q-fade 160ms ease-out; }
  @keyframes q-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------------------
   5. Fields
   --------------------------------------------------------------------------- */

.field { margin-bottom: 22px; }
.field:last-of-type { margin-bottom: 0; }

/* A field wraps a nested fieldset when it holds a radio group. Strip the
   browser default box: the group draws its own hairlines. */
.field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.field fieldset > legend { padding: 0; }

.field > label,
.field-label {
  display: block;
  font-weight: 600;
  font-size: var(--t-small);
  margin-bottom: 8px;
}

.hint {
  display: block;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 400;
  margin-top: 6px;
}
.hint--inline { display: inline; margin: 0; }

.q-form input[type="text"],
.q-form input[type="url"],
.q-form input[type="email"],
.q-form input[type="tel"],
.q-form input[type="number"],
.q-form select {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 12px;
  line-height: 1.4;
}
.q-form input::placeholder { color: var(--muted); opacity: 1; }
.q-form input[type="url"],
.q-form input[type="email"],
.q-form input[type="tel"],
.q-form input[type="number"] {
  font-family: var(--mono);
  font-size: var(--t-mono-lg);
  font-variant-numeric: tabular-nums;
}

.q-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.q-form input:focus, .q-form select:focus { background: var(--surface); }
.q-form input[aria-invalid="true"],
.q-form select[aria-invalid="true"] {
  border-color: var(--alarm);
  background: var(--alarm-dim);
}

.field-row { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Radio and checkbox groups as ruled rows, not as cards with shadows.
   BRAND.md section 4. */
.options {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.options .opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  background: var(--surface);
  font-size: var(--t-small);
}
.options .opt + .opt { border-top: 1px solid var(--rule); }
.options .opt:hover { background: var(--paper); }
.options .opt input { margin: 3px 0 0; accent-color: var(--signal); flex: none; }
.options .opt .txt { min-width: 0; }
.options .opt .t { display: block; }
.options .opt .d { display: block; color: var(--muted); margin-top: 2px; }
.options .opt .band {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
}
.options .opt:has(input:checked) { background: var(--signal-dim); }
.options .opt:has(input:checked) .t { font-weight: 600; }
.options:has(input[aria-invalid="true"]) { border-color: var(--alarm); }

/* Honeypot. In the DOM, out of the layout, out of the tab order, hidden from
   assistive technology. Only a bot fills this in. */
.q-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   6. Errors. --alarm here describes a real state, which is the only way
   BRAND.md section 3 allows it to be used.
   --------------------------------------------------------------------------- */

.q-errors {
  display: none;
  border: 1px solid var(--alarm-line);
  border-left: 3px solid var(--alarm);
  background: var(--alarm-dim);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 22px;
  font-size: var(--t-small);
}
.q-errors[data-open="true"] { display: block; }
.q-errors h3 { font-size: var(--t-small); color: var(--alarm); margin-bottom: 8px; }
.q-errors ul { list-style: disc; padding-left: 18px; }
.q-errors li + li { margin-top: 4px; }
.q-errors a { color: var(--alarm); }

.field .err {
  display: none;
  color: var(--alarm);
  font-size: var(--t-small);
  margin-top: 8px;
}
.field .err[data-open="true"] { display: block; }

/* ---------------------------------------------------------------------------
   7. Review panel and key/value tables
   --------------------------------------------------------------------------- */

.q-review {
  margin-top: 22px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
  background: var(--paper);
}
.q-review h3 {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* A two column key/value table. .rtable is for wide tables with a head row;
   this one is for pairs, and it stacks by shrinking rather than by reflowing. */
.q-kv {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.q-kv th, .q-kv td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.q-kv th {
  font-weight: 400;
  color: var(--muted);
  width: 44%;
  padding-right: 16px;
}
.q-kv td {
  font-family: var(--mono);
  font-size: var(--t-mono-lg);
  font-variant-numeric: tabular-nums;
}
.q-kv tr:last-child th, .q-kv tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   8. Step navigation and submit
   --------------------------------------------------------------------------- */

.q-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.q-nav .spacer { flex: 1; }
.q-nav .counter {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.q-nav .btn { cursor: pointer; }
.q-nav .btn[disabled] { opacity: 0.55; cursor: progress; }

.q-submit-note {
  margin-top: 12px;
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 62ch;
}

.q-fallback,
.q-noscript {
  border: 1px solid var(--warn-line);
  border-left: 3px solid var(--warn);
  background: var(--warn-dim);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: var(--t-small);
}
.q-fallback { display: none; margin-top: 16px; }
.q-fallback[data-open="true"] { display: block; }
.q-noscript { margin-bottom: 20px; }

/* ---------------------------------------------------------------------------
   9. Outcome pages
   --------------------------------------------------------------------------- */

.q-doc { padding-top: clamp(28px, 5vw, 56px); max-width: 760px; }
.q-doc h1 { margin-top: 16px; max-width: 22ch; }
.q-doc > .lead { margin-top: 16px; max-width: 64ch; }
.q-doc section { padding: clamp(28px, 4.5vw, 48px) 0; }
.q-doc section:last-child { padding-bottom: clamp(40px, 6vw, 72px); }
.q-doc h2 { font-size: var(--t-h3); margin-bottom: 14px; }
.q-doc h3 { margin-bottom: 4px; }

/* The status pill is .badge from styles.css, including .badge--neutral and the
   .is-warn state. Nothing to add here: this file only extends, it never restates
   a rule the shared stylesheet already owns. */

.q-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 18px; }
.q-cta .btn { cursor: pointer; }

.q-embed {
  border: 1px dashed var(--rule);
  border-radius: 4px;
  background: var(--paper);
  padding: 18px;
}
.q-embed .q-cta { margin-top: 14px; }

/* Numbered checklist. The counter is CSS, so the markup carries no numbering
   that can drift out of order when an item is added. */
.q-list {
  counter-reset: q;
  border-top: 1px solid var(--rule);
  margin-top: 8px;
}
.q-list > li {
  counter-increment: q;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.q-list > li::before {
  content: counter(q, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 600;
  color: var(--signal);
  padding-top: 5px;
}
/* Every child after the counter shares the second column. Without this they
   flow into the grid in source order and the paragraph lands in the 30px
   counter column, one word per line. */
.q-list > li > * { grid-column: 2; }
.q-list > li h3 { font-size: 1rem; }
.q-list > li p { font-size: var(--t-small); color: var(--ink-soft); }
.q-list > li .where {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  color: var(--muted);
  margin-top: 8px;
}

.q-why {
  margin-top: 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  padding: 14px 16px;
  font-size: var(--t-small);
}
.q-why[hidden] { display: none; }
.q-why h3 {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.q-why ul { list-style: disc; padding-left: 18px; }
.q-why li + li { margin-top: 6px; }

/* A blank a visitor is meant to fill in on paper or in their head. Same device
   as .slot on the landing page, narrower, because it sits inside a table cell. */
.q-blank {
  display: inline-block;
  min-width: 96px;
  font-family: var(--mono);
  color: var(--muted);
  border-bottom: 1.5px dashed var(--rule);
  background: var(--paper-warm);
  border-radius: 2px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   10. Breakpoints. The form is read on a phone first: the ad opens there.
   --------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; gap: 20px; }
  .q-steps { font-size: var(--t-mono); }
}

@media (min-width: 900px) {
  .q-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: start;
  }
  .q-aside { position: sticky; top: 24px; }
}

@media (max-width: 559px) {
  /* Five labels do not fit under five rules at 375px. The current step keeps its
     name, the others keep their number. */
  .q-steps li .label { display: none; }
  .q-steps li[data-state="current"] .label { display: inline; }
  .options .opt { flex-wrap: wrap; }
  .options .opt .band { margin-left: 0; padding-left: 26px; width: 100%; }
  .q-nav .counter { order: 3; width: 100%; }
  .q-nav .btn { flex: 1 1 auto; justify-content: center; }
  .q-kv th { width: 50%; }
  .q-list > li { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
}

@media print {
  .q-aside, .q-nav, .q-progress { display: none; }
  .q-step[hidden] { display: block; }
}