/* Tell us how you work: the first-visit welcome, the step pages and the thank-you. */

.site-header--onboarding { gap: 14px; }
.site-header__divider { width: 1px; height: 16px; background: var(--line-strong); }
.site-header__label { flex: 1; }

/* Welcome */
.welcome { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 40px; padding-top: clamp(24px, 6vw, 96px); }
.welcome > * { grid-column: 1 / -1; }
.welcome__eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }
.welcome__title { grid-column: 1 / span 9; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.welcome__lede { grid-column: 1 / span 6; margin-top: 8px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 48ch; }
.first-visit { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.first-visit__steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 28px; }
.first-visit__step { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--line); }
.first-visit__step--current { border-top-color: var(--ink); }
.first-visit__name { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.first-visit__step--current .first-visit__name { color: var(--ink); }
.first-visit__badge, .onboarding__badge { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.first-visit__step--current .first-visit__badge { background: var(--red); border-color: var(--red); color: #fff; }
.welcome__start { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.welcome__start .button { font-size: 15px; }
.welcome__privacy { grid-column: 1 / span 6; display: flex; align-items: center; gap: 14px; margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Steps */
.onboarding { display: flex; flex-wrap: wrap; gap: 48px 80px; padding-top: 72px; }
.onboarding__rail { flex: 0 0 240px; max-width: 240px; display: flex; flex-direction: column; gap: 20px; padding-top: 4px; position: sticky; top: 32px; align-self: flex-start; }

/* The first visit as one path: three parts, the current one open to its
   steps. Beside onboarding, its thank-you page and the guide. */
.journey__label { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.journey__parts { display: flex; flex-direction: column; gap: 4px; }
.journey__part-name { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 14px; color: var(--ink-soft); }
.journey__part--current > .journey__part-name { color: var(--ink); font-weight: 500; }
.journey__part--current .onboarding__badge { background: var(--red); border-color: var(--red); color: #fff; }
.journey__part--done .onboarding__badge { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.journey__steps { display: flex; flex-direction: column; margin: 2px 0 10px 11px; border-left: 1px solid var(--line); }
.journey__step { display: block; margin-left: -1px; padding: 7px 0 7px 23px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.4; color: var(--ink-faint); text-decoration: none; }
.journey__step--done { color: var(--ink-soft); }
.journey__step--done::after { content: " ✓"; color: var(--ink-faint); }
.journey__step--current, .journey__step--link[aria-current] { border-left-color: var(--red); color: var(--ink); font-weight: 500; }
.journey__step--link:hover { color: var(--ink); }
.journey__note { max-width: 24ch; }
.onboarding__form { flex: 999 1 560px; max-width: 760px; min-width: 0; }
.onboarding__questions { display: flex; flex-direction: column; gap: 48px; }
.onboarding__eyebrow { font-size: 12px; margin-bottom: -32px; }
.onboarding__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.onboarding__back { order: -1; height: 48px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink-soft); cursor: pointer; }
.onboarding__back:hover { color: var(--ink); }

.question { display: flex; flex-direction: column; gap: 20px; }
.question__head { display: flex; flex-direction: column; gap: 8px; }
.question__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.question__hint { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.question__more { display: flex; flex-direction: column; gap: 10px; }
.field-label--small { font-size: 14px; }

/* Sliders: four radio buttons drawn as a line with a thumb. */
.scales { display: flex; flex-direction: column; margin-top: 16px; }
.scales__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 28px; }
.scales__count { flex: none; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); white-space: nowrap; }
.scales__pips { display: inline-flex; gap: 4px; }
.scales__pip { width: 6px; height: 6px; border-radius: 999px; background: var(--line-warm); transition: background 0.2s; }
.scales__pip--set { background: var(--ink); }
.scales > .field-error { margin-top: 16px; }
.scale { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 64px; align-items: start; padding: 32px 0; border-top: 1px solid var(--line); }
.scale__prompt { display: flex; flex-direction: column; gap: 10px; }
.scale__number { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); }
.scale__question { font-family: var(--serif); font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.scale__control { display: flex; flex-direction: column; gap: 6px; padding-top: 26px; }
.scale__reading { min-height: 22px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.scale__reading > span { display: none; }
.scale__reading-empty { font-weight: 400; color: var(--ink-faint); }
.scale:not(:has(:checked)):not(.scale:not(:has(:checked)) ~ .scale) .scale__reading-empty,
.scale:has([value="1"]:checked) .scale__reading-1,
.scale:has([value="2"]:checked) .scale__reading-2,
.scale:has([value="3"]:checked) .scale__reading-3,
.scale:has([value="4"]:checked) .scale__reading-4 { display: inline; }
.scale__track { position: relative; height: 44px; touch-action: none; cursor: pointer; }
.scale__line, .scale__fill { position: absolute; top: 21px; height: 2px; border-radius: 1px; }
.scale__line { left: 0; right: 0; background: #dad3cf; }
.scale__fill { display: none; background: var(--ink); transition: left 0.2s ease, width 0.2s ease; }
.scale__track:has([value="1"]:checked) .scale__fill { display: block; left: 0; width: 12.5%; }
.scale__track:has([value="2"]:checked) .scale__fill { display: block; left: 0; width: 37.5%; }
.scale__track:has([value="3"]:checked) .scale__fill { display: block; left: 62.5%; width: 37.5%; }
.scale__track:has([value="4"]:checked) .scale__fill { display: block; left: 87.5%; width: 12.5%; }
.scale__stops { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scale__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scale__stop { position: relative; height: 44px; cursor: pointer; }
.scale__stop::before { content: ""; position: absolute; top: 18px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--line-strong); transition: background 0.2s; }
.scale__input:checked + .scale__stop::before { top: 8px; left: calc(50% - 14px); width: 28px; height: 28px; border: 0; background: var(--ink); box-shadow: 0 0 0 6px rgba(32, 19, 19, 0.08), 0 2px 8px rgba(32, 19, 19, 0.18); }
.scale__input:focus-visible + .scale__stop::before { outline: 2px solid var(--ink); outline-offset: 6px; }
.scale__track:has([value="2"]:checked) .scale__stop--1::before,
.scale__track:has([value="3"]:checked) .scale__stop--4::before { background: var(--ink); border-color: var(--ink); }
.scale__ends { display: flex; justify-content: space-between; gap: 24px; font-size: 13px; line-height: 1.4; color: var(--ink-faint); }
.scale__ends span:last-child { text-align: right; }

/* Choices: tiles are radios with help text, rows are checkboxes. */
.tiles, .rows { display: flex; flex-direction: column; gap: 8px; }
.tiles--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.tile__input, .row__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-warm); cursor: pointer; }
.tile:hover, .row:hover { border-color: var(--ink-faint); }
.tile__input:checked + .tile, .row:has(.row__input:checked) { background: var(--paper-deep); border-color: var(--paper-deep); }
.tile__dot { flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 999px; border: 1.5px solid var(--line-strong); }
.tile__input:checked + .tile .tile__dot { border: 5px solid var(--ink); background: var(--paper); }
.tile__text { display: flex; flex-direction: column; gap: 4px; }
.tile__label { font-size: 15px; font-weight: 500; line-height: 1.4; }
.tile__helper { font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.tile__input:focus-visible + .tile, .row:has(.row__input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 18px; border-radius: 16px; border: 1px solid var(--line-warm); font-size: 15px; cursor: pointer; }
.row:has(.row__input:disabled) { opacity: 0.5; cursor: default; }
.row__box { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); color: #fff; font-size: 12px; }
.row__input:checked + .row__box { background: var(--ink); border-color: var(--ink); }
.row__input:checked + .row__box::after { content: "✓"; }

/* Ranking: tap in order. A ranked row fills in and says its place. An open
   row shows the number it would get, so tapping is never a guess. */
.rank__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.rank__count { flex: none; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-faint); white-space: nowrap; }
.rank__count--done { color: var(--ink); }
.rank__pips { display: inline-flex; gap: 4px; }
.rank__pip { width: 6px; height: 6px; border-radius: 999px; background: var(--line-warm); transition: background 0.2s; }
.rank__pip--set { background: var(--ink); }
.row--rank { position: relative; gap: 16px; min-height: 60px; transition: background 0.2s, border-color 0.2s, opacity 0.2s; }
.row--rank:has(.row__input:checked) { background: var(--paper-deep); border-color: var(--paper-deep); }
.row__rank { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1.5px dashed var(--line-strong); font-family: var(--serif); font-size: 17px; line-height: 1; color: var(--ink-faint); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.row--rank:hover .row__input:not(:checked):not(:disabled) + .row__rank::after { content: attr(data-next); }
.row--rank:hover .row__input:not(:checked):not(:disabled) + .row__rank { border-style: solid; border-color: var(--ink-faint); }
.row__input:checked + .row__rank { border: 0; background: var(--ink); color: var(--paper); }
.row__label { flex: 1; }
.row__place { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.row--rank:has(.row__input:checked) .row__place { color: var(--red-ink); }
.row--rank:has(.row__input:disabled) { opacity: 0.45; }

/* AI: the follow-ups depend on the policy picked. */
.ai-policy__restrictions, .ai-policy__priorities, .when-restricted, .when-prohibited { display: none; }
.ai-policy:has([value="restricted"]:checked) .ai-policy__restrictions,
.ai-policy:has([value="prohibited"]:checked) .ai-policy__restrictions { display: flex; }
.ai-policy:has([value="restricted"]:checked) .when-restricted,
.ai-policy:has([value="prohibited"]:checked) .when-prohibited { display: inline; }
.ai-policy:has(:is([value="required"], [value="encouraged"], [value="permitted"], [value="restricted"], [value="unsure"]):checked) .ai-policy__priorities { display: flex; margin-top: 28px; }

/* Requirements: a checked one asks for details. */
.requirement { display: flex; flex-direction: column; gap: 8px; }
.requirement__detail { display: none; width: calc(100% - 40px); height: 48px; margin-left: 40px; padding: 0 16px; border-radius: 12px; background: var(--field); font-size: 15px; }
.requirement:has(.row__input:checked) .requirement__detail { display: block; }

/* Thanks */
.onboarding-done { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; max-width: 760px; }
.onboarding-done__title { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; }
.onboarding-done__summary { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 24px 28px; border-radius: 20px; background: var(--paper-deep); }
.onboarding-done__text { font-family: var(--serif); font-size: 19px; line-height: 1.45; }

/* Done: change answers, then on to the tour. */
.onboarding-done__revise { margin-top: -12px; }
.onboarding-done__next { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

@media (max-width: 720px) {
  /* Everything spans the full width here, so the 12 columns need no gaps.
     With them, eleven 40px gaps alone are wider than a phone. */
  .welcome { column-gap: 0; }
  .welcome__title, .welcome__lede, .welcome__privacy { grid-column: 1 / -1; }
  .onboarding { padding-top: 24px; }
  .onboarding__rail { display: none; }
  .question__title { font-size: 24px; }
  .scales__head, .rank__head { flex-direction: column; align-items: flex-start; }
  .scale { grid-template-columns: minmax(0, 1fr); }
  .scale__control { padding-top: 0; }
}