/* ==========================================================================
   Fit check
   An inverted panel: the one place the page is white, so it reads as the
   main call to action. Tokens are overridden locally and never shift.
   Without JS the form is one long, working form; with JS (.js on <html>)
   it becomes one question per screen.
   ========================================================================== */

.fit {
  --bg: #FAFAFA; --fg: #0A0A0A; --accent: #0A0A0A; --on-accent: #FAFAFA; --muted: #5C5C5C; --line-c: #D4D4D4;
  background: var(--bg); color: var(--fg);
  color-scheme: light;
  padding: clamp(56px, 11vw, 150px) var(--gut);
  display: grid; gap: 32px;
}
.fit > * { width: 100%; max-width: 620px; margin-inline: auto; }
.fit__intro { display: grid; gap: 16px; }
.fit__intro p { max-width: 36ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--muted); }

@media (min-width: 1024px) {
  .fit {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: start;
    padding-inline: max(var(--gut), calc((100% - var(--max)) / 2));
  }
  .fit > * { max-width: none; margin: 0; }
  .fit__intro { position: sticky; top: calc(var(--header-h) + 32px); }
}

.fit__card { position: relative; }

.fit-top { display: none; }
.fit-count { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.fit-count b { color: var(--fg); font-weight: 700; }
.fit-progress { height: 4px; border-radius: 2px; background: var(--line-c); overflow: hidden; }
.fit-progress span {
  display: block; height: 100%; border-radius: 2px; background: var(--fg);
  transform-origin: 0 50%; transform: scaleX(.1428);
  transition: transform .5s var(--ease-out);
}

.step { display: grid; gap: 20px; align-content: start; padding-block: 0 40px; }
.step legend {
  float: left; width: 100%; padding: 0; margin-bottom: 22px;
  font-size: clamp(1.75rem, 5.4vw, 2.75rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05;
}
.step legend + * { clear: both; }
.legend-note { display: block; margin-top: 10px; font-size: 1rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--muted); }

.field { display: grid; gap: 8px; }
.field label { font-size: .9375rem; font-weight: 600; }
.optional { margin-left: 6px; font-weight: 400; color: var(--muted); }
.field input {
  width: 100%; height: 58px; padding: 0 16px;
  border: 1.5px solid var(--fg); border-radius: 12px;
  background: #fff; color: var(--fg);
  font-size: 1.125rem;
}
.field input:focus-visible { outline: 3px solid var(--fg); outline-offset: 2px; border-radius: 12px; }
.field input[aria-invalid='true'] { border-color: #B3261E; }
.hint { font-size: .875rem; color: var(--muted); }
.field-error { font-size: .875rem; font-weight: 600; color: #B3261E; }

.choices { display: grid; gap: 10px; }
.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; gap: 14px;
  min-height: 58px; padding: 12px 18px;
  border: 1.5px solid var(--fg); border-radius: 12px;
  background: #fff;
  font-size: 1.125rem; font-weight: 500; line-height: 1.2;
  transition: transform .2s var(--ease-out);
}
.choice span::before {
  content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid currentColor;
}
.choice input:checked + span { background: var(--fg); color: var(--bg); }
.choice input:checked + span::before { background: var(--bg); box-shadow: inset 0 0 0 4px var(--fg); border-color: var(--bg); }
.choice input:focus-visible + span { outline: 3px solid var(--fg); outline-offset: 3px; }
.choice input:active + span { transform: scale(.985); }
@media (hover: hover) {
  .choice input:not(:checked):hover + span { background: #EDEDED; }
}
@media (min-width: 620px) {
  .choices { grid-template-columns: 1fr 1fr; }
}

.fit-error {
  margin-bottom: 16px; padding: 12px 16px; border-radius: 10px;
  background: #FCE8E6; color: #8C1D18; font-size: .9375rem; font-weight: 600;
}
.fit-error a { color: inherit; }

.fit-nav { display: flex; align-items: center; gap: 12px; }
.fit-back {
  min-height: 52px; padding: 0 18px;
  border: 1.5px solid var(--fg); border-radius: 999px; background: transparent;
  font-weight: 600;
}
.fit-next { min-width: 150px; }
.fit-keys { display: none; margin-left: auto; font-size: .8125rem; color: var(--muted); }
.fit-keys kbd {
  padding: 2px 7px; border: 1px solid var(--muted); border-radius: 5px;
  font: inherit; font-weight: 600; font-size: .75rem;
}

/* ---------- one question per screen (JS on) ---------- */
.js .fit-top { display: grid; gap: 12px; margin-bottom: 30px; }
/* The slide is clipped sideways so it can never widen the page on a phone. The negative margin
   leaves room for focus rings inside the clip. */
.js .fit-steps { position: relative; min-height: 430px; overflow-x: clip; margin-inline: -8px; padding-inline: 8px; }
.js .fit-form { scroll-margin-top: 12px; }
.js .step { padding-bottom: 28px; }
.js .step:not(.is-current) { display: none; }
.js .step.is-leaving { display: grid; position: absolute; inset: 0 8px auto 8px; pointer-events: none; }
@media (min-width: 620px) {
  .js .fit-steps { min-height: 350px; }
}
@media (hover: hover) and (pointer: fine) {
  .js .fit-keys { display: block; }
}

.fit-done { display: grid; gap: 16px; padding-block: 12px 40px; outline: 0; }
.fit-done__mark {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--fg); color: var(--bg); font-size: 1.5rem; font-weight: 700;
}
.fit-done h3 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
.fit-done p { max-width: 34ch; font-size: clamp(1.125rem, 1.6vw, 1.375rem); }

@media (prefers-reduced-motion: reduce) {
  .fit-progress span, .choice span { transition: none; }
}