/* Page-local: /survey. Uses site tokens so light and dark themes both apply. */
.survey-wrap { max-width: 760px; }
.survey { padding-block: clamp(16px, 3vw, 32px) clamp(48px, 8vw, 96px); }

.survey-note { border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; background: var(--soft); margin-bottom: 1.5rem; }
.survey-note p { margin: 0.35rem 0; font-size: var(--fs-body-sm); color: var(--ink-2); line-height: 1.6; }
.survey-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.survey-form { padding: 0; background: transparent; }
.q { margin: 0 0 1.75rem; padding: 0; border: 0; min-width: 0; }
.q legend, .q > label { display: block; margin-bottom: 0.7rem; padding: 0; font-weight: 600; font-size: var(--fs-body); line-height: 1.45; color: var(--ink); }
.q-n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: 0.4rem; border: 1px solid var(--line-2); border-radius: 50%; font-size: var(--fs-label); color: var(--ink-2); }
.q-hint { display: block; margin-top: 0.4rem; font-size: var(--fs-label); color: var(--muted); }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choices label {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-2); border-radius: 999px; cursor: pointer;
  font-size: var(--fs-body-sm); color: var(--ink-2); background: var(--paper);
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.choices label:hover { border-color: var(--ink-2); }
.choices input { accent-color: var(--ink); margin: 0; }
.choices label:has(input:checked) { border-color: var(--ink); color: var(--ink); background: var(--soft); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.survey-form .form-submit { width: auto; min-width: 200px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.survey-done { margin-top: 0; }
.survey-done h2 { margin-bottom: 0.4rem; font-size: var(--fs-lede); }
.survey-done:focus { outline: none; }

@media (max-width: 640px) {
  .choices { flex-direction: column; align-items: stretch; }
  .choices label { border-radius: 12px; }
  .survey-form .form-submit { width: 100%; }
}