/* Agent fit check — calm, monochrome, typography-led.
   One focal point per screen: the question. Everything else recedes. */

.fit-page { max-width:1080px; padding-bottom:80px; }
.fit-page h1 { font:450 clamp(26px,3vw,34px)/1.18 var(--headline); letter-spacing:-.6px; margin:16px 0 18px; outline:none; }

/* Intro ------------------------------------------------------------------ */
.fit-intro { max-width:600px; margin:36px auto; }
.fit-symbol { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--line-strong); border-radius:11px; background:var(--bg-raised); color:var(--text-soft); margin-bottom:28px; }
.fit-symbol svg { width:20px; height:20px; }
.fit-intro>.eyebrow { display:block; }
.fit-intro h1 { font-size:clamp(32px,4vw,44px); margin-top:14px; }
.fit-lede { font-size:15px; line-height:1.7; color:var(--text-soft); max-width:560px; margin:0; }
.fit-intro-path { display:flex; flex-wrap:wrap; gap:28px; margin:34px 0; }
.fit-intro-path span { font-size:12px; color:var(--text-soft); }
.fit-intro-path b { display:block; font:11px var(--mono); color:var(--faint); margin-bottom:8px; }
.fit-intro .btn-primary { min-height:42px; padding-inline:20px; }
.fit-caption { color:var(--muted); font-size:12px; line-height:1.6; margin:14px 0; }
.fit-intro-note { border-top:1px solid var(--line); padding-top:22px; margin-top:36px; max-width:540px; font-size:13px; line-height:1.75; color:var(--muted); }

/* Assessment shell ------------------------------------------------------- */
.fit-page:has(.fit-assessment) { padding-top:34px; padding-bottom:120px; }

/* Progress: a quiet numbered stepper over a continuous fill line ---------- */
.fit-progress { border:0; padding:0 0 24px; margin:0 0 34px; }
.fit-steps { display:flex; align-items:center; gap:6px; list-style:none; margin:0 0 16px; padding:0; }
.fit-steps>li { flex:1; min-width:0; }
.fit-steps button { display:flex; align-items:center; gap:9px; width:100%; padding:0; border:0; background:none; cursor:pointer; color:var(--faint); font-family:var(--sans); text-align:left; }
.fit-steps button:disabled { cursor:default; }
.fit-steps button:not(:disabled):hover { color:var(--text-soft); }
.fit-steps button:not(:disabled):hover .fit-step-marker { border-color:var(--text-soft); }
.fit-steps button:focus-visible { outline:2px solid var(--focus); outline-offset:4px; border-radius:8px; }
.fit-step-marker { display:grid; place-items:center; flex:none; width:22px; height:22px; border:1px solid var(--line-strong); border-radius:50%; font:500 11px var(--mono); color:var(--muted); }
.fit-step-marker>svg { width:11px; height:11px; stroke-width:2.4; }
.fit-step-label { font:450 12px var(--sans); color:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fit-steps .is-current button { color:var(--text); }
.fit-steps .is-current .fit-step-marker { border-color:var(--text); color:var(--text); background:var(--panel-strong); box-shadow:0 0 0 4px color-mix(in srgb,var(--text) 6%,transparent); }
.fit-steps .is-complete button { color:var(--muted); }
.fit-steps .is-complete .fit-step-marker { border-color:var(--text-soft); color:var(--text-soft); }
.fit-track { height:2px; border-radius:2px; background:var(--line); overflow:hidden; }
.fit-track>span { display:block; height:100%; border-radius:2px; background:var(--progress); }

.fit-question-top { display:flex; justify-content:flex-end; min-height:0; margin:0 0 8px; color:var(--muted); font-size:12px; }
.fit-question-top:empty { display:none; }

/* Question ---------------------------------------------------------------- */
.fit-question { max-width:660px; margin:0 auto; }
.fit-question-brow { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; color:var(--muted); font:650 12px var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.fit-brow-label { display:inline-flex; align-items:center; gap:8px; }
.fit-question-count { font:400 12px var(--mono); letter-spacing:0; text-transform:none; color:var(--faint); }
/* The shared help popover/dialog must not inherit the brow's uppercasing. */
.fit-brow-label .help-trigger, .fit-brow-label .help-popover { text-transform:none; letter-spacing:normal; }
.fit-question h1 { font-size:clamp(23px,2.6vw,31px); line-height:1.25; letter-spacing:-.5px; margin:14px 0 4px; }
.fit-interview { color:var(--text-soft); font-size:13px; line-height:1.7; margin:14px 0 0; padding-left:14px; border-left:2px solid var(--line-strong); }

/* Options ----------------------------------------------------------------- */
.fit-options { border:0; padding:0; margin:26px 0 0; display:grid; gap:8px; min-width:0; }
.fit-option { display:flex; align-items:center; justify-content:space-between; gap:16px; position:relative; padding:15px 18px; min-height:56px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-raised); cursor:pointer; font-size:14px; line-height:1.45; color:var(--text); }
.fit-option:hover { background:var(--panel-hover); }
.fit-option input { position:absolute; opacity:0; width:1px; height:1px; }
.fit-option:has(input:focus-visible) { outline:2px solid var(--focus); outline-offset:2px; }
.fit-option-copy { flex:1; min-width:0; }
.fit-option.selected { border-color:var(--text-soft); background:var(--panel-strong); }
.fit-radio { display:grid; place-items:center; flex:none; width:18px; height:18px; border:1px solid var(--line-strong); border-radius:50%; color:transparent; }
.fit-radio svg { width:11px; height:11px; stroke-width:2.5; }
.selected .fit-radio { border-color:var(--text); background:var(--text); color:var(--bg); }
.fit-option-unknown { background:transparent; border-style:dashed; min-height:48px; color:var(--muted); }

.fit-role-options { grid-template-columns:1fr 1fr; gap:10px; }
.fit-role-options .fit-option { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:18px; align-content:start; align-items:start; min-height:0; }
.fit-role-options .fit-option-copy { grid-column:1; font-weight:500; }
.fit-role-options .fit-radio { grid-row:1; grid-column:2; }
.fit-role-options .fit-option-copy small { display:block; margin-top:6px; color:var(--muted); font-size:11px; line-height:1.5; font-weight:400; }

/* Writing input ----------------------------------------------------------- */
.fit-writing-card { margin-top:24px; border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow:hidden; background:var(--input); }
.fit-writing-card:focus-within { border-color:var(--text-soft); }
.fit-writing-card textarea { display:block; width:100%; box-sizing:border-box; border:0; margin:0; padding:18px; min-height:120px; background:transparent; color:var(--text); font:16px/1.6 var(--sans); resize:vertical; outline:none; }
.fit-writing-foot { display:flex; gap:8px; align-items:center; padding:11px 18px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
.fit-writing-foot>span:last-child { margin-left:auto; font-family:var(--mono); }

/* Evidence ---------------------------------------------------------------- */
.fit-evidence { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:18px; min-height:26px; font-size:12px; color:var(--muted); }
.fit-evidence>svg { width:13px; height:13px; }
.fit-evidence select { background:transparent; border:1px solid var(--line); border-radius:7px; padding:5px 8px; color:var(--text-soft); font:12px var(--sans); }
.fit-evidence-note { margin-left:auto; font-size:10px; color:var(--faint); }

/* Insight: quiet contextual guidance, inline under the question ----------- */
.fit-insight { margin-top:30px; }
.fit-insight-label { display:block; font:650 10px var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.fit-insight strong { display:block; font-size:14px; font-weight:500; line-height:1.5; color:var(--text); }
.fit-insight p { margin:6px 0 0; font-size:13px; line-height:1.65; color:var(--text-soft); }

/* Footer: slim, fixed navigation bar (matches the app's dock pattern) ----- */
.fit-footer { position:fixed; left:var(--nav-w); right:0; bottom:0; z-index:20; display:flex; align-items:center; gap:14px; padding:14px 32px calc(14px + env(safe-area-inset-bottom)); background:var(--bg-raised); border-top:1px solid var(--line); }
.fit-footer .btn { min-height:36px; }
.fit-back { margin-right:auto; background:transparent; border-color:transparent; color:var(--text-soft); padding-left:8px; }
.fit-back:hover { color:var(--text); }
.fit-key-hint { color:var(--muted); font-size:11px; }
.fit-footer .btn-primary { gap:8px; }
.fit-footer .btn-primary:disabled { opacity:.4; cursor:default; filter:none; }

/* Result ------------------------------------------------------------------ */
.fit-result { max-width:660px; margin:0 auto; padding-top:8px; }
.fit-result-top { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.fit-task-label { font-size:13px; color:var(--muted); margin:22px 0 0; overflow-wrap:anywhere; }
.fit-lede { max-width:600px; }
.fit-confidence { display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:12px; margin:22px 0 28px; color:var(--muted); }
.fit-confidence strong { text-transform:none; font-weight:500; color:var(--text); }
.fit-meter { display:inline-flex; gap:3px; }
.fit-meter i { width:9px; height:4px; border-radius:1px; background:var(--line-strong); }
.fit-meter i.on { background:var(--progress); }
.fit-result-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.fit-result-actions + .fit-caption { margin-bottom:28px; }
.fit-facts { display:grid; grid-template-columns:1fr 1fr; gap:1px; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--line); margin-top:12px; }
.fit-facts article { background:var(--bg-raised); padding:22px; }
.fit-facts h2 { font:450 24px/1.2 var(--headline); margin:12px 0 10px; letter-spacing:-.3px; }
.fit-facts p { color:var(--muted); font-size:12px; line-height:1.65; margin:0; }
.fit-reasons { margin-top:32px; }
.fit-reasons>h2 { font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--text); margin:0; }
.fit-reason { width:100%; border:0; border-bottom:1px solid var(--line); background:none; color:var(--muted); text-align:left; padding:15px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; font:12px/1.5 var(--sans); cursor:pointer; }
.fit-reason:hover { color:var(--text-soft); }
.fit-reason strong { display:block; font-size:14px; font-weight:450; color:var(--text); margin-top:4px; }
.fit-reason svg { width:14px; flex-shrink:0; opacity:.7; }
.fit-text-button { background:none; border:0; padding:4px 0; color:var(--text-soft); font:12px/1.5 var(--sans); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.fit-text-button:hover { color:var(--text); }
/* Details: neat boxed dropdowns with a clean chevron, not a bare triangle. */
.fit-details { display:grid; gap:8px; margin-top:32px; }
.fit-detail { border:1px solid var(--line-strong); border-radius:var(--radius-md); background:var(--bg-raised); font-size:13px; color:var(--text-soft); line-height:1.7; overflow:hidden; }
.fit-detail summary { list-style:none; }
.fit-detail summary::-webkit-details-marker { display:none; }
.fit-detail > summary { display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer; color:var(--text); font-size:14px; font-weight:500; }
.fit-detail > summary::after { content:""; flex:none; margin-left:auto; width:18px; height:18px; background-color:var(--muted); -webkit-mask:var(--chev) center/16px no-repeat; mask:var(--chev) center/16px no-repeat; transition:transform .2s ease; }
.fit-detail > summary:hover { background:var(--panel-hover); }
.fit-detail > summary:hover::after { background-color:var(--text-soft); }
.fit-detail[open] > summary { border-bottom:1px solid var(--line); }
.fit-detail[open] > summary::after { transform:rotate(180deg); }
.fit-detail-body { padding:14px 18px 16px; }
.fit-detail-body p { margin:0 0 10px; }
.fit-detail-body p:last-child { margin-bottom:0; }
.fit-detail-body .fit-reason { padding:14px 0; }
.fit-detail-body .fit-reason:first-child { padding-top:4px; }
.fit-detail-body .fit-reason:last-child { border-bottom:0; padding-bottom:0; }
.fit-detail-body .btn[data-fit-interview] { margin-top:12px; }
.fit-subdetail { border-top:1px solid var(--line); padding:11px 0; }
.fit-subdetail summary { display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--text-soft); }
.fit-subdetail summary::after { content:""; margin-left:auto; width:14px; height:14px; background-color:var(--muted); -webkit-mask:var(--chev) center/13px no-repeat; mask:var(--chev) center/13px no-repeat; transition:transform .2s ease; }
.fit-subdetail[open] summary::after { transform:rotate(180deg); }
.fit-subdetail p { margin:8px 0 2px; }
.fit-gap { display:flex; align-items:center; justify-content:space-between; gap:15px; text-align:left; background:none; color:var(--text-soft); border:0; padding:10px 0; font:13px/1.5 var(--sans); cursor:pointer; width:100%; }
.fit-gap:hover { color:var(--text); }
.fit-gap svg { width:14px; flex-shrink:0; }
.fit-method { margin:0; }

/* Brief attachment / entry points ----------------------------------------- */
.fit-attachment { margin:20px 0; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-md); display:grid; gap:7px; background:var(--bg-raised); }
.fit-attachment>span { display:flex; gap:7px; align-items:center; color:var(--muted); font-size:11px; }
.fit-attachment svg { width:14px; height:14px; }
.fit-attachment strong { font-size:14px; font-weight:500; }
.fit-attachment small { font-size:12px; color:var(--muted); line-height:1.6; }
.fit-attachment button { justify-self:start; }
.fit-entry { display:flex; align-items:center; gap:14px; margin-top:22px; padding:15px 18px; border:1px solid var(--line); border-radius:var(--radius-md); font-size:13px; color:var(--text-soft); }
.fit-entry>svg { width:18px; flex-shrink:0; color:var(--muted); }
.fit-entry button { margin-left:auto; flex-shrink:0; }
.fit-report { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.7 var(--sans); color:var(--text-soft); }

/* Motion: restrained, but every action earns a response ------------------- */
.fit-option { transition:background .16s ease, border-color .16s ease; }
.fit-radio { transition:background .18s ease, border-color .18s ease; }
.fit-step-marker { transition:color .2s ease, border-color .2s ease, background .2s ease, box-shadow .3s ease; }
.fit-track>span { transition:width .55s cubic-bezier(.4,0,.2,1); }
.btn { transition:background .16s ease, color .16s ease, filter .16s ease; }

@media (prefers-reduced-motion:no-preference) {
  /* Question arrives as a gentle, staggered cascade — head, then choices, then guidance. */
  .fit-question-content > * { animation:fit-rise .4s cubic-bezier(.2,.7,.2,1) backwards; }
  .fit-question-content > *:nth-child(2) { animation-delay:.05s; }
  .fit-question-content > *:nth-child(3) { animation-delay:.1s; }
  .fit-question-content > *:nth-child(4) { animation-delay:.14s; }
  .fit-question-content > *:nth-child(n+5) { animation-delay:.18s; }
  /* The fieldset itself stays still; its choices ripple in individually. */
  .fit-question-content > .fit-options { animation:none; }
  .fit-option { animation:fit-rise .42s cubic-bezier(.2,.7,.2,1) backwards; }
  .fit-option:nth-child(1) { animation-delay:.08s; }
  .fit-option:nth-child(2) { animation-delay:.12s; }
  .fit-option:nth-child(3) { animation-delay:.16s; }
  .fit-option:nth-child(4) { animation-delay:.2s; }
  .fit-option:nth-child(5) { animation-delay:.24s; }
  .fit-option:nth-child(6) { animation-delay:.28s; }
  .fit-option:nth-child(7) { animation-delay:.32s; }
  .fit-option:nth-child(n+8) { animation-delay:.36s; }
  /* The chosen answer confirms itself with a soft spring. */
  .selected .fit-radio svg { animation:fit-pop .34s cubic-bezier(.34,1.56,.64,1); }
  /* Fresh guidance fades up when it changes. */
  .fit-insight strong, .fit-insight p { animation:fit-fade .3s ease backwards; }
  .fit-insight p { animation-delay:.04s; }
}
@keyframes fit-rise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
@keyframes fit-fade { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@keyframes fit-pop { from { transform:scale(.4); opacity:.4; } to { transform:scale(1); opacity:1; } }

/* Responsive -------------------------------------------------------------- */
@media (max-width:760px) {
  .fit-page:has(.fit-assessment) { padding-top:24px; padding-bottom:104px; }
  .fit-progress { padding-bottom:18px; margin-bottom:26px; }
  .fit-steps { gap:4px; }
  .fit-step-label { display:none; }
  .fit-steps .is-current .fit-step-label { display:block; }
  .fit-steps>li { flex:none; }
  .fit-steps .is-current { flex:1; }
  .fit-role-options { grid-template-columns:1fr; }
  .fit-facts { grid-template-columns:1fr; }
  .fit-evidence-note { display:none; }
  .fit-footer { left:0; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .fit-key-hint { display:none; }
  .fit-result-actions .btn { width:100%; justify-content:center; }
  .fit-confidence>span:last-child { flex-basis:100%; }
  .fit-assessment:has(textarea:focus) .fit-footer { position:static; padding:20px 0 0; }
}
@media (max-width:700px) {
  .fit-intro { margin-top:16px; }
  .fit-intro-path { gap:18px; }
}

/* When space is tight vertically, let the footer flow with content. */
@media (max-height:560px) {
  .fit-footer { position:static; padding:20px 0 0; }
  .fit-page:has(.fit-assessment) { padding-bottom:40px; }
}