/* Styles for the TPT research survey page (/research/survey/).
   Uses the design tokens defined in style.css and adds nothing to it. */

.survey-section { padding: 56px 0 96px; background: var(--cream-soft); }

.survey { max-width: 680px; margin: 0 auto; }
.survey [hidden] { display: none !important; }

.survey h2 { font-size: 1.5rem; margin: 0 0 18px; line-height: 1.3; }
.survey p { margin: 0 0 16px; line-height: 1.7; }

.survey-intro p { max-width: 62ch; }
.survey-intro-heading { font-family: var(--serif); font-size: 1.15rem; color: var(--teal); margin: 28px 0 10px; }
.survey-intro-heading:first-child { margin-top: 0; }
.survey-intro .btn { margin-top: 12px; }

/* Progress */
.survey-progress { margin-bottom: 40px; }
.survey-progress-text { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 8px; }
.survey-progress-track { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.survey-progress-fill { display: block; height: 100%; width: 0; background: var(--teal); transition: width var(--dur) ease; }

/* Page heading inside the form */
.survey-page-title { font-family: var(--serif); font-size: 1.5rem; color: var(--teal); margin: 0 0 10px; line-height: 1.3; }
.survey-page-title:focus { outline: none; }
.survey-note { color: var(--ink-soft); margin: 0 0 32px; max-width: 62ch; }
.survey-page-title + .q { margin-top: 28px; }

/* Questions */
.q { border: 0; padding: 0; margin: 0 0 44px; min-width: 0; }
.q legend { padding: 0; margin: 0 0 6px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; color: var(--teal); font-weight: 700; }
.q-num { margin-right: 6px; }
.q-hint { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 12px; }
.q-options { display: block; }

.opt { display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px; margin: 0 -14px; border-radius: var(--radius); cursor: pointer; line-height: 1.5; transition: background var(--dur) ease; }
.opt:hover { background: var(--teal-tint); }
.opt:has(input:checked) { background: var(--teal-light); }
.opt input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--teal); cursor: pointer; }
.opt input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.opt.is-disabled { opacity: 0.5; cursor: not-allowed; }
.opt.is-disabled input { cursor: not-allowed; }
.opt.is-disabled:hover { background: transparent; }

.q-other { margin-top: 8px; margin-left: 30px; }
.q-other[hidden] { display: none !important; }
.q-other-label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); }
.q-other-label input { display: block; width: 100%; max-width: 420px; margin-top: 6px; padding: 10px 12px; font-family: var(--sans); font-size: 0.95rem; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.q-other-label input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-tint); }

.q textarea { display: block; width: 100%; min-height: 150px; padding: 14px; font-family: var(--sans); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); resize: vertical; }
.q textarea:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px var(--teal-tint); }

/* Validation */
.q-error { display: none; margin: 12px 0 0; font-size: 0.95rem; font-weight: 600; color: #A34A0E; }
.q.is-invalid { padding-left: 16px; border-left: 3px solid #A34A0E; margin-left: -19px; }
.q.is-invalid .q-error { display: block; }

.survey-error { margin: 0 0 24px; padding: 14px 18px; background: var(--white); border-left: 3px solid #A34A0E; color: var(--ink); }

/* Navigation */
.survey-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.survey-nav .btn[disabled] { opacity: 0.6; cursor: wait; }
.survey-nav .btn-secondary:hover { color: var(--white); }

/* End screens */
.survey-end p { max-width: 62ch; }
.survey-end:focus { outline: none; }

/* Honeypot: off-screen, not reachable by keyboard */
.survey-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
  .survey-section { padding: 36px 0 72px; }
  .survey-nav { flex-wrap: wrap; }
  .survey-nav .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .survey-progress-fill, .opt { transition: none; }
}