/* Fit check page (fit.html). Uses the tokens in site.css. */
[hidden]{display:none!important}
.fithero .w{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;padding-block:56px 48px}
.fithero h1{font-size:clamp(38px,5.2vw,62px)}
.fitfacts{margin:0;display:grid;gap:14px}
.fitfacts div{border-top:2px solid var(--ink);padding-top:10px}
.fitfacts dt{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--route)}
.fitfacts dd{margin:4px 0 0;font-size:16px;color:var(--ink-2)}

.fitq{max-width:760px;gap:0}
.q{border:0;margin:0;padding:22px 0 24px;border-top:1px solid var(--rule);min-width:0}
.q .note{display:block;margin-bottom:6px}
.qt{display:block;padding:0;margin:0 0 4px;font:400 23px/1.25 var(--display);color:var(--ink)}
.q .hint{font-size:15px;color:var(--ink-3);margin-bottom:4px}
.q select{margin-top:10px;max-width:380px}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.choice{display:flex;gap:10px;align-items:flex-start;margin:0;font-weight:400;font-size:15.5px;line-height:1.4;border:1.5px solid var(--rule);border-radius:6px;padding:11px 12px;cursor:pointer}
.choice:hover{border-color:var(--ink-3)}
.choice input{width:auto;margin:2px 0 0;accent-color:var(--route);flex:none}
.choice:has(input:checked){border-color:var(--route);background:var(--route-soft)}
.choice:has(input:focus-visible){outline:2px solid var(--route);outline-offset:2px}
.q.missing{border-left:3px solid var(--route);padding-left:14px}
.q.missing .note::after{content:" · needs an answer";color:var(--route)}
.fitgo{border-top:1px solid var(--rule);padding-top:24px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}

.fitresult{max-width:760px;border-top:3px solid var(--ink);padding-top:16px;outline:none}
.fitresult.fit,.fitresult.review{border-top-color:var(--route)}
.fitresult h2{font-size:clamp(32px,4vw,46px);line-height:1.1;margin:8px 0 14px}
.fitresult h2 span{display:block;font-size:.55em;color:var(--ink-2);margin-top:6px}
.fitresult .lede{font-size:18px;color:var(--ink-2)}
.fitresult #fr-reason{margin-top:12px;border-left:3px solid var(--rule);padding-left:12px;color:var(--ink-2)}
.book-form{margin-top:28px}
.lbl{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.fitagain{margin-top:28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:15px}

.fitscore{max-width:760px;margin-top:40px;border:1.5px dashed var(--ink-3);border-radius:6px;padding:16px;overflow-x:auto}
.fitscore table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.fitscore th,.fitscore td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
.fitscore td:nth-child(3){font-family:var(--mono);text-align:right}
.fitscore tfoot td{font-weight:600;border-bottom:0}

@media (max-width:900px){ .fithero .w{grid-template-columns:1fr;align-items:start} }
@media (max-width:620px){ .choices{grid-template-columns:1fr} .qt{font-size:21px} }
/* keep the legend out of the fieldset's top border, so it sits under its number like the dropdown question */
legend.qt{float:left;width:100%}
.q .hint,.q .choices{clear:both}
.fitq .q:first-child{border-top:0;padding-top:0}
/* section headings between groups of questions */
.fitsec{font-size:clamp(26px,3vw,32px);line-height:1.15;margin:44px 0 4px;padding-top:18px;border-top:2px solid var(--ink);color:var(--route)}
.fitsec:first-child{margin-top:0}
.fitsec .note{display:block;margin-bottom:6px}
.fitsec+.q{border-top:0}
.q>.note{color:var(--route)}  /* red headers and question numbers (Mario, 29 Oct 2026) */