/* "Why We Shoot": the photography survey (/survey.html). Built on site.css
   (paper, ink, gold, Archivo, frosted glass); this file adds only the survey's
   own parts. Fields and options are pills, the same shape as the buttons. */

[hidden] {
  display: none !important; /* .btn sets display, which would win */
}

/* The header carries a thin gold bar that fills as the parts go by. */
.survey-header .legal-header__inner {
  max-width: calc(42rem + 2 * var(--margin)); /* lined up with the column */
  height: 64px;
}

.survey-header__step {
  color: var(--slate);
  font-size: var(--t-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.progress {
  height: 3px;
  background: rgb(var(--ink-rgb) / 0.08);
}

.progress::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--done, 0) * 100%);
  background: var(--gold);
  transition: width 400ms var(--ease-out);
}

.survey {
  padding-block: var(--s-8) var(--s-9);
}

/* One centred column; the text in it stays left-aligned. */
.survey > * {
  max-inline-size: 42rem;
  margin-inline: auto;
}

.survey__title,
.step__title {
  font-size: var(--t-heading);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.survey__title:focus,
.step__title:focus,
.done:focus {
  outline: none;
}

.survey__sub {
  margin-top: var(--s-3);
  color: var(--slate);
  font-size: var(--t-lead);
}

.survey__intro {
  margin-top: var(--s-6);
}

.step__kicker {
  margin-bottom: var(--s-3);
  color: var(--bronze);
  font-size: var(--t-name);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.step__intro {
  margin-top: var(--s-4);
  color: var(--slate);
  font-size: var(--t-lead);
  line-height: 1.45;
}

/* One question */
.q {
  margin: var(--s-8) 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.step__title + .q,
.step__intro + .q,
.survey__intro + .q {
  margin-top: var(--s-7);
}

.q__text {
  display: block;
  padding: 0;
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.q__num {
  margin-right: 0.4em;
  color: var(--bronze);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.q__meta {
  margin-top: var(--s-1);
  color: var(--slate);
  font-size: var(--t-small);
}

.q[aria-invalid="true"] .q__meta {
  color: #B42318;
  font-weight: 500;
}

.q__options {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* An option is a whole tappable pill, frosted like the contact form's chips. */
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 12px 24px 12px 18px;
  border: 1px solid rgb(var(--ink-rgb) / 0.22);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: var(--glass-edge), 0 4px 14px -10px rgb(var(--ink-rgb) / 0.3);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}

.opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* The tick mark: a ring for pick-one, a rounded square for pick-several. */
.opt__mark {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgb(var(--ink-rgb) / 0.55);
  border-radius: 6px;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
}

.opt input[type="radio"] + .opt__mark {
  border-radius: 50%;
}

/* Picked: warm cream with a gold edge, the text staying ink. */
.opt:has(input:checked) {
  border-color: var(--gold);
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--gold), 0 6px 16px -10px rgb(122 90 0 / 0.45);
}

.opt input:checked + .opt__mark {
  border-color: var(--gold);
  background: var(--gold);
}

.opt input:checked + .opt__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 11px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.opt input[type="radio"]:checked + .opt__mark::after {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  transform: none;
}

.opt:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.opt:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (hover: hover) {
  .opt:not(:has(input:checked)):not(:has(input:disabled)):hover {
    border-color: rgb(var(--ink-rgb) / 0.5);
    background: rgb(255 255 255 / 0.8);
  }
}

.q[aria-invalid="true"] .opt:not(:has(input:checked)) {
  border-color: rgb(180 35 24 / 0.55);
}

/* Text fields: the contact form's frosted pills. 16 px or more, so iOS
   doesn't zoom in on focus. */
.q input[type="text"],
.q textarea {
  display: block;
  width: 100%;
  margin-top: var(--s-4);
  padding: 12px 22px;
  border: 1px solid rgb(var(--ink-rgb) / 0.28);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: var(--glass-edge), 0 4px 14px -10px rgb(var(--ink-rgb) / 0.3);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.45;
  appearance: none;
  transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}

.q input[type="text"] {
  height: 52px;
}

/* A box of several lines keeps the pill's end radius (half the 52 px
   field) rather than turning into a lozenge. */
.q textarea {
  min-height: 9rem;
  padding-block: 14px;
  border-radius: 26px;
  resize: vertical;
}

.q input[type="text"]::placeholder,
.q textarea::placeholder {
  color: var(--slate);
  opacity: 0.75;
}

.q input[type="text"]:focus,
.q textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: rgb(255 255 255 / 0.8);
  box-shadow: var(--glass-edge), 0 0 0 4px rgb(245 194 66 / 0.4);
}

.q[aria-invalid="true"] input[type="text"] {
  border-color: #B42318;
}

.q__options .opt__other {
  margin-top: 0;
}

.survey__error {
  min-height: 1.45em; /* reserved, so a message moves nothing */
  margin-top: var(--s-7);
  color: #B42318;
  font-size: var(--t-label);
  font-weight: 500;
  line-height: 1.45;
}

.survey__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.survey__nav .btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.survey__nav .btn:disabled {
  cursor: progress;
  opacity: 0.7;
}

/* Back: the same pill, outlined. */
.btn--ghost .btn__body {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

@media (hover: hover) {
  .btn--ghost:hover .btn__arrow {
    transform: translateX(-4px);
  }
}

.done {
  margin-top: var(--s-7);
  padding: var(--s-7);
  border: 1px solid rgb(var(--ink-rgb) / 0.28);
  border-radius: 26px;
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: var(--glass-edge), 0 4px 14px -8px rgb(var(--ink-rgb) / 0.25);
}

.done .survey__intro {
  margin-top: var(--s-4);
  color: var(--slate);
  font-size: var(--t-lead);
}

/* After the thanks: a note about Project Nova and a link to its
   coming-soon page. */
.done__nova {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid rgb(var(--ink-rgb) / 0.12);
}

.done__nova-text {
  margin-bottom: var(--s-5);
  font-size: var(--t-lead);
  line-height: 1.45;
  text-wrap: pretty;
}


@media (max-width: 719px) {
  .survey {
    padding-block: var(--s-6) var(--s-6);
  }

  .survey__intro {
    margin-top: var(--s-5);
  }

  .q,
  .step__title + .q,
  .step__intro + .q,
  .survey__intro + .q {
    margin-top: var(--s-6);
  }

  .survey__error {
    margin-top: var(--s-4);
  }

  /* On the intro, Start stays on screen at the bottom, on frosted glass like
     the header. On the question parts, Back and Next sit at the end of the
     page, so reaching them shows the part is done (Eden, 2026-10-23). */
  .is-intro .survey__nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-inline: calc(-1 * var(--margin));
    padding: var(--s-4) var(--margin) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    background: rgb(var(--paper-rgb) / 0.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.8);
    backdrop-filter: blur(18px) saturate(1.8);
    box-shadow: 0 -1px 0 rgb(var(--ink-rgb) / 0.08);
  }

  .survey__nav .btn[data-next] {
    flex: 1;
  }

  .survey__nav .btn[data-next] .btn__body {
    width: 100%;
    justify-content: center;
  }

  .opt {
    padding-right: 20px;
    font-size: 1rem;
  }

  .done {
    padding: var(--s-6) var(--s-5);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .opt, .q input[type="text"], .q textarea, .done, .is-intro .survey__nav { background: var(--paper); }
}

@media (prefers-reduced-transparency: reduce) {
  .opt, .q input[type="text"], .q textarea, .done, .is-intro .survey__nav {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}