/* The landing and the questions (V-11), in the Label direction. Tokens from
   design.css; no colour, size or space here that design.css does not name.
   One question per screen, big targets (44px and more), no motion beyond the
   floor's view transition. */

.idea {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--rule-heavy) solid var(--text);
  font-size: clamp(2.5rem, 11vw, var(--font-size-3xl));
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.idea span { display: block; margin-top: var(--space-3); font-size: 0.5em; line-height: 1.15; color: var(--text-muted); }

.hero { margin-bottom: var(--space-6); }
.first-q, .q-page, .building, .decline-page { margin-bottom: var(--space-7); }
.how { padding-top: var(--space-4); border-top: var(--rule-light) solid var(--border); }
.how h2 { font-size: var(--font-size-lg); }

.question fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.question legend { padding: 0; margin-bottom: var(--space-2); }
.question .legend { display: block; margin: 0; font-family: var(--font-family-display); font-weight: 700; font-size: var(--font-size-2xl); line-height: 1.05; }
.progress-line { margin: 0 0 var(--space-2); font-family: var(--font-family-display); font-weight: 700; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.progress { display: block; width: 100%; height: var(--space-2); margin: 0 0 var(--space-5); accent-color: var(--action); }
.hint { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--text-muted); }
.field-error { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); font-weight: 700; color: var(--text); background: var(--colour-caution-100); border-left: var(--rule-heavy) solid var(--text); }

.options { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.options li { position: relative; }
.options input { position: absolute; left: var(--space-4); top: 50%; width: var(--space-5); min-height: 0; height: var(--space-5); margin: 0; transform: translateY(-50%); accent-color: var(--action); }
.options label {
  display: flex; align-items: center; min-height: var(--touch);
  margin: 0; padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--space-6));
  font-size: var(--font-size-base); font-weight: 700;
  color: var(--text); background: var(--surface-raised);
  border: 2px solid var(--text); border-radius: var(--radius);
  cursor: pointer;
}
.options input:checked + label { background: var(--action-quiet); border-width: var(--rule-heavy); }
.options input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.option-also { margin-top: var(--space-3); }

.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.q-actions .back, .q-actions .skip-q { display: inline-flex; align-items: center; min-height: var(--touch); font-weight: 700; }

/* The honeypot: present for a bot, absent for a person and for a screen reader. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }