/* Survey page (survey.html). Loads after tokens.css. Owned by the survey builder. Rules: ../STYLE.md
   Quiet by design: white page, bluestone type, gold only on chosen answers, vermilion only on the progress walk
   and the primary button. The four steps are drawn as a short route with four stops. */
[hidden] { display: none !important; }

:root {
  --col: 680px;            /* reading column for questions */
}

body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: var(--z-bar);
  padding: 12px 16px; border-radius: var(--r-control);
  background: var(--bluestone); color: var(--white);
  font-weight: 600; font-stretch: var(--w-semi); text-decoration: none;
}
.skip:focus, .skip:focus-visible { top: 12px; }

/* Headings that receive focus on a screen change: the move is announced, no ring is drawn. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* ---------- Layout: one left-aligned column on the page grid ---------- */
.survey {
  flex: 1; width: 100%; max-width: var(--max); margin: 0 auto;
  padding: 12px var(--gutter) 88px;
}
.survey > * { max-width: var(--col); margin-left: auto; margin-right: auto; }
.load-error { margin-top: 24px; margin-bottom: 24px; font-weight: 600; }

/* ---------- Type ---------- */
.s-title {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 800;
  font-stretch: var(--w-expanded);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lead {
  margin: 20px 0 0;
  font-size: 19px;
  line-height: 1.5;
  max-width: var(--measure);
  text-wrap: pretty;
}

/* ---------- Intro: the four steps as the walk ahead ---------- */
.intro { padding-top: 20px; }
.walk { position: relative; list-style: none; margin: 32px 0 36px; padding: 0; }
.walk::before {           /* the route between the first and last stop */
  content: ""; position: absolute; left: 7px; top: 24px; bottom: 24px; width: 2px;
  background: var(--stone-line);
}
.walk li {
  position: relative; display: flex; align-items: center; min-height: 48px; padding-left: 36px;
  font-size: var(--fs-18); font-weight: 600; font-stretch: var(--w-semi); line-height: 1.3;
}
.walk li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border: 2px solid var(--closed); border-radius: 50%; background: var(--white);
}
.walk li:first-child::before { border: 3px solid var(--route); }   /* you start here */
.btn-wide { min-height: 56px; padding: 0 32px; }

/* ---------- Progress: a short route with four stops ---------- */
.progress { margin-top: 8px; margin-bottom: 40px; }
.progress-label {
  margin: 0 0 14px;
  font-size: 15px; font-weight: 600; font-stretch: var(--w-semi); line-height: 1.3; color: var(--bluestone);
}
.route { position: relative; }
.route-track, .route-fill { position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; }
.route-track { background: var(--stone-line); }
.route-fill {
  top: 6.5px; height: 3px; background: var(--route);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-panel) var(--ease-in-out);
}
.route-stops { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.stop { position: relative; width: 16px; height: 16px; flex: none; }
.stop-mark {
  position: absolute; inset: 0; border: 2px solid var(--closed); border-radius: 50%; background: var(--white);
  transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease;
}
.stop.is-current .stop-mark { border: 3px solid var(--route); }
.stop.is-done .stop-mark { border-color: var(--route); background: var(--route); }
.stop-label { display: none; }
.is-instant .route-fill, .is-instant .stop-mark { transition: none; }

/* ---------- Steps ---------- */
.step-title {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 40px);
  font-weight: 750;
  font-stretch: var(--w-wide);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Step changes: the new step enters in the direction of travel. Keyboard-initiated changes are not animated (JS). */
@keyframes enter-fwd { from { opacity: 0; transform: translateX(8px); } }
@keyframes enter-back { from { opacity: 0; transform: translateX(-8px); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(4px); } }
.enter-fwd { animation: enter-fwd var(--t-panel) var(--ease-out); }
.enter-back { animation: enter-back var(--t-panel) var(--ease-out); }
.enter-up { animation: enter-up var(--t-ui) var(--ease-out); }

/* ---------- Questions ---------- */
.q { min-width: 0; margin: 48px 0 0; padding: 0; border: 0; scroll-margin-top: 24px; }
.step-title + .q { margin-top: 32px; }
.q-label {
  display: block; width: 100%; margin: 0; padding: 0;
  font-size: 21px; font-weight: 700; font-stretch: var(--w-wide); line-height: 1.28; letter-spacing: -0.005em;
  color: var(--bluestone); text-wrap: pretty;
}
/* Float the legend so it lays out like any block (a plain legend sits in the fieldset's border and splits the
   error bar). Elements after it clear the float, which swallows their top margin, so they space with padding. */
legend.q-label { float: left; }
.q > legend ~ * { clear: both; }
.q-req {
  display: block; margin-top: 4px;
  font-size: var(--fs-16); font-weight: 600; font-stretch: var(--w-semi); letter-spacing: 0; color: var(--bluestone-2);
}
.q-hint { margin: 0; padding-top: 6px; font-size: var(--fs-16); line-height: 1.45; color: var(--bluestone-2); }
.q-error { margin: 0; padding-top: 10px; font-size: var(--fs-16); font-weight: 600; line-height: 1.4; color: var(--error); }
.q.has-error { padding-left: 16px; box-shadow: inset 3px 0 0 var(--error); }
.q-note { margin: 12px 0 0; font-size: var(--fs-16); font-weight: 600; font-stretch: var(--w-semi); color: var(--bluestone-2); }
.q-note:empty { display: none; }

/* Options: the real radio or checkbox stays focusable; the row shows its state.
   On a phone every option is a full-width row. From 640px pick-any lists go two up; single choice stays one per
   row because those options read as a scale. */
.opts { display: grid; gap: 8px; padding-top: 16px; }
.opt { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.opt-input { position: absolute; top: 50%; left: 18px; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.opt-card {
  display: flex; align-items: center; gap: 14px; height: 100%; min-height: 56px; padding: 14px 18px 14px 16px;
  border: 1.5px solid var(--stone-line); border-radius: var(--r-control); background: var(--white);
  font-size: 17px; line-height: 1.3;
  transition: background-color var(--t-press) ease, border-color var(--t-press) ease;
}
.opt-mark {
  position: relative; flex: none; width: 22px; height: 22px;
  border: 2px solid var(--bluestone-2); border-radius: 50%; background: var(--white);
}
.is-multi .opt-mark { border-radius: 5px; }
.opt-input:checked + .opt-card { background: var(--gold); border-color: var(--bluestone); }
.opt-input:checked + .opt-card .opt-mark { border-color: var(--bluestone); }
.is-single .opt-input:checked + .opt-card .opt-mark::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bluestone);
}
.is-multi .opt-input:checked + .opt-card .opt-mark {
  background: var(--bluestone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.opt-input:focus-visible + .opt-card { outline: 2px solid var(--route); outline-offset: 2px; }
.opt-input:disabled + .opt-card { opacity: 0.45; }
.opt.is-disabled { cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .opt:hover .opt-input:not(:checked):not(:disabled) + .opt-card { background: var(--gold-wash); }
}

.opt-other { margin: 8px 0 0 52px; }   /* indented under the option text it belongs to */

/* Short text answers */
.group-fields { display: grid; gap: 14px; padding-top: 16px; }
.field-label {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-16); font-weight: 600; font-stretch: var(--w-semi); line-height: 1.3;
}
.q-text .input, .q-email .input, .q-longtext .input { margin-top: 14px; }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.45; }

/* ---------- Send ---------- */
.form-status { margin: 32px 0 0; font-size: var(--fs-16); font-weight: 600; line-height: 1.45; color: var(--error); }
.form-status:empty { display: none; }
.nav { display: flex; gap: 10px; margin-top: 48px; }
.form-status + .nav { margin-top: 16px; }
.nav .btn { min-height: 56px; }
.nav-back { flex: none; padding: 0 22px; }
.nav-next { flex: 1; }
.nav-next[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- Done ---------- */
.done { padding-top: 4px; }
.done .s-title { font-size: clamp(34px, 4.6vw, 56px); }
.done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.done-actions .btn { flex: 1 1 220px; min-height: 56px; }
.share-status { margin: 16px 0 0; font-size: var(--fs-16); color: var(--bluestone-2); overflow-wrap: anywhere; }
.share-status:empty { display: none; }
.demo-note { margin: 20px 0 0; font-size: var(--fs-14); font-weight: 600; font-stretch: var(--w-semi); color: var(--bluestone-2); }
.copy-buffer { position: fixed; top: 0; left: -9999px; opacity: 0; }
.hp-form { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Wider screens ---------- */
@media (min-width: 640px) {
  .survey { padding-top: 24px; }
  .intro { padding-top: 40px; }
  .lead { margin-top: 28px; font-size: var(--fs-22); line-height: 1.45; }
  .q-label { font-size: 23px; }
  .opts-cols { grid-template-columns: 1fr 1fr; }
  .group-fields { grid-template-columns: 1fr 1fr; }
  .group-fields.is-odd .field:last-child { grid-column: 1 / -1; }
  .nav-next { flex: 0 1 240px; margin-left: auto; }
  .done-actions .btn { flex: 0 1 auto; padding: 0 28px; }
}

/* From here the stop labels fit under the route, like the place names on the landing page walk. */
@media (min-width: 720px) {
  .progress { margin-bottom: 48px; }
  /* The stop labels say where you are, so the "Step 2 of 4" line is for screen readers only from here. */
  .progress-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .route { padding-bottom: 46px; }
  .stop-label {
    display: block; position: absolute; top: 26px; left: 50%; width: max-content; max-width: 200px;
    transform: translateX(-50%); text-align: center;
    font-size: 15px; font-weight: 600; font-stretch: var(--w-semi); line-height: 1.3; color: var(--bluestone-2);
  }
  .stop:first-child .stop-label { left: 0; transform: none; text-align: left; }
  .stop:last-child .stop-label { left: auto; right: 0; transform: none; text-align: right; }
  .stop.is-current .stop-label, .stop.is-done .stop-label { color: var(--bluestone); }
}

@media (prefers-reduced-motion: reduce) {
  .route-fill { transition: none; }
  .stop-mark { transition: none; }
  .opt-card { transition: none; }
  .enter-fwd, .enter-back, .enter-up { animation: none; }
}