/* fit2.css — Fit v2: the board cell, the "Why this fits" panel and the Fit profile console.
   Self-contained: every colour a reader reads text off is a --fit-* token with a Dark value
   (:root — the house default) and a Light value (body.light — the toggle hitch-page.css and
   dossier.css use). Falls back to literal house values, so it renders even without
   hitch-page.css loaded first.

   Band colours. INK (text) and FILL (bars, dial, dots) are separate ramps, the dossier's
   `--cr-X` / `--cr-X-f` rule: the house green/blue/gold are tuned for the dark panel and fail
   4.5:1 on the light paper, so Light carries its own darker ink.
     strong  green   — the house --green family
     good    blue    — the house --blue family
     some    amber   — the house accent family
     low     stone   — neutral grey: a low fit is a finding, not an alarm, so never red
   The band WORD is always printed beside the colour; colour is never the only signal. */

:root{
  --fit-ink:var(--ink,#f4f1ea); --fit-dim:var(--ink-dim,#9a988f); --fit-faint:var(--ink-faint,#8c887b);
  --fit-line:var(--line,rgba(244,241,234,.10)); --fit-line-soft:var(--line-soft,rgba(244,241,234,.06));
  --fit-card:var(--panel,#101216); --fit-card2:var(--panel2,#15181d); --fit-bg:var(--bg,#0a0b0d);
  --fit-link:var(--accent,#e8a13c); --fit-focus:#f0c98a;
  --fit-track:rgba(244,241,234,.09);
  --fit-strong:#86d278; --fit-strong-f:#6bbf59;
  --fit-good:#8cc4f0;   --fit-good-f:#5aa2e0;
  --fit-some:#f0c98a;   --fit-some-f:#e8a13c;
  --fit-low:#b4b0a6;    --fit-low-f:#77746c;
  --fit-yes:#86d278; --fit-no:var(--fit-dim);
  --fit-err:#e8a0a0;
  --fit-serif:var(--serif,"Instrument Serif",Georgia,serif);
  --fit-sans:var(--sans,"Inter",system-ui,sans-serif);
  --fit-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.7);
}
body.light{
  --fit-ink:var(--ink,#1c1913); --fit-dim:#4a463e; --fit-faint:#5f5b52;
  --fit-line:var(--line,rgba(26,18,6,.15)); --fit-line-soft:var(--line-soft,rgba(26,18,6,.08));
  --fit-card:#fffdf8; --fit-card2:#f6f2e9; --fit-bg:var(--bg,#f5f2ea);
  --fit-link:#8a5a10; --fit-focus:#8a5a10;
  --fit-track:rgba(26,18,6,.09);
  --fit-strong:#2c7a3e; --fit-strong-f:#3f9a4f;
  --fit-good:#1d6597;   --fit-good-f:#3a88c6;
  --fit-some:#8a5a10;   --fit-some-f:#d9952f;
  --fit-low:#5f5b52;    --fit-low-f:#a29e94;
  --fit-yes:#2c7a3e; --fit-err:#a8322c;
  --fit-shadow:0 1px 2px rgba(26,18,6,.04), 0 14px 32px -22px rgba(26,18,6,.25);
}

/* one band → two tokens (--b ink, --bf fill) so every component below is band-agnostic */
.fit2-b-strong{--b:var(--fit-strong);--bf:var(--fit-strong-f)}
.fit2-b-good{--b:var(--fit-good);--bf:var(--fit-good-f)}
.fit2-b-some{--b:var(--fit-some);--bf:var(--fit-some-f)}
.fit2-b-low{--b:var(--fit-low);--bf:var(--fit-low-f)}

.fit2-panel,.fit2-console,.fit2-cell{font-family:var(--fit-sans);color:var(--fit-ink)}
.fit2-panel *,.fit2-console *,.fit2-cell *{box-sizing:border-box}
:where(.fit2-panel,.fit2-console) :where(ul,ol){list-style:none;margin:0;padding:0}
:where(.fit2-panel,.fit2-console) :where(h1,h2,h3){text-wrap:balance;margin:0;font-weight:400}
:where(.fit2-panel,.fit2-console) :where(p){margin:0;text-wrap:pretty}
.fit2-panel a,.fit2-console a{color:var(--fit-link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--fit-link) 35%,transparent)}
.fit2-panel a:hover,.fit2-console a:hover{border-bottom-color:var(--fit-link)}
.fit2-panel :focus-visible,.fit2-console :focus-visible{outline:2px solid var(--fit-focus);outline-offset:2px;border-radius:6px}
.fit2-num{font-variant-numeric:tabular-nums lining-nums}

/* ── board cell ───────────────────────────────────────────────────────────── */
.fit2-cell{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;line-height:1;
  padding:4px 9px 4px 7px;border-radius:100px;font-size:.78rem;font-weight:500;color:var(--b);
  background:color-mix(in srgb,var(--bf) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--bf) 34%,transparent)}
.fit2-dots{display:inline-flex;gap:2px}
.fit2-dots i{width:4px;height:10px;border-radius:2px;background:var(--fit-track)}
.fit2-dots i.on{background:var(--bf)}
.fit2-cell .fit2-sc{font-weight:400;color:var(--fit-dim);font-size:.74rem;padding-left:7px;
  border-left:1px solid color-mix(in srgb,var(--bf) 34%,transparent)}

/* ── panel ────────────────────────────────────────────────────────────────── */
.fit2-panel{background:var(--fit-card);border:1px solid var(--fit-line);border-radius:16px;
  box-shadow:var(--fit-shadow);padding:22px 24px 18px;max-width:760px;position:relative;overflow:hidden}
.fit2-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--bf,transparent)}
.fit2-kicker{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fit-faint);font-weight:500}
.fit2-head{display:flex;gap:20px;align-items:center}
.fit2-dial{flex:none;width:96px;height:96px;position:relative}
.fit2-dial svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.fit2-dial .trk{stroke:var(--fit-track)} .fit2-dial .val{stroke:var(--bf);transition:stroke-dashoffset .9s var(--ease,ease)}
.fit2-dial b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--fit-serif);
  font-weight:400;font-size:2.2rem;line-height:1;color:var(--fit-ink);padding-bottom:12px}
.fit2-dial small{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:.6rem;
  letter-spacing:.12em;color:var(--fit-faint);text-transform:uppercase}
.fit2-band{font-family:var(--fit-serif);font-size:2.3rem;line-height:1;color:var(--b);margin-top:4px}
.fit2-pct{margin-top:6px;font-size:.84rem;color:var(--fit-dim)}
.fit2-why{margin:18px 0 4px;font-size:1.04rem;line-height:1.5;color:var(--fit-ink);font-weight:400;max-width:62ch}

.fit2-ev{margin-top:16px;border-top:1px solid var(--fit-line)}
.fit2-row{display:grid;grid-template-columns:118px 1fr;gap:6px 18px;padding:14px 0;border-bottom:1px solid var(--fit-line-soft)}
.fit2-row:last-child{border-bottom:0}
.fit2-rl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fit-faint);font-weight:500;padding-top:3px}
.fit2-rl .fit2-meter{margin-top:8px}
.fit2-meter{display:block;height:4px;width:72px;border-radius:4px;background:var(--fit-track);overflow:hidden}
.fit2-meter i{display:block;height:100%;border-radius:4px;background:var(--bf,var(--fit-dim))}
.fit2-rv{font-size:.93rem;color:var(--fit-ink);min-width:0}
.fit2-rv .q{color:var(--fit-dim)}

/* the matching past contracts — expandable cards */
.fit2-cards{display:grid;gap:8px}
.fit2-card{border:1px solid var(--fit-line);border-radius:12px;background:var(--fit-card2);overflow:hidden}
.fit2-card>button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  width:100%;padding:11px 14px;cursor:pointer;align-items:start}
.fit2-card>button:focus-visible{outline:2px solid var(--fit-focus);outline-offset:-2px;border-radius:12px}
.fit2-card .t{font-weight:500;font-size:.92rem;line-height:1.35;color:var(--fit-ink);min-width:0;overflow-wrap:anywhere}
.fit2-card .m{grid-column:1;font-size:.78rem;color:var(--fit-dim);overflow-wrap:anywhere}
.fit2-card .v{grid-row:1;grid-column:2;font-size:.86rem;color:var(--fit-ink);text-align:right}
.fit2-card .chev{grid-row:2;grid-column:2;justify-self:end;width:9px;height:9px;margin-top:3px;
  border-right:1.5px solid var(--fit-faint);border-bottom:1.5px solid var(--fit-faint);transform:rotate(45deg);transition:transform .2s}
.fit2-card[data-open="1"] .chev{transform:rotate(225deg);margin-top:7px}
.fit2-card .body{display:none;padding:0 14px 13px;font-size:.88rem;line-height:1.55;color:var(--fit-dim)}
.fit2-card[data-open="1"] .body{display:block}
.fit2-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.fit2-tags li{font-size:.72rem;color:var(--fit-ink);padding:3px 8px;border-radius:100px;background:var(--fit-track)}
.fit2-piid{display:inline-block;margin-top:10px;font-size:.72rem;color:var(--fit-faint);letter-spacing:.03em}

.fit2-codes{display:flex;flex-wrap:wrap;gap:8px}
.fit2-code{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;padding:5px 11px 5px 9px;border-radius:100px;
  border:1px solid var(--fit-line);color:var(--fit-ink)}
.fit2-code .ic{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:.66rem;font-weight:700;flex:none}
.fit2-code.yes .ic{background:color-mix(in srgb,var(--fit-strong-f) 22%,transparent);color:var(--fit-yes)}
.fit2-code.no .ic{background:var(--fit-track);color:var(--fit-no)}
.fit2-code .w{color:var(--fit-dim)}

.fit2-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--fit-line);font-size:.78rem;color:var(--fit-faint)}

/* empty / error / loading */
.fit2-panel.fit2-empty{padding:26px 24px;text-align:left}
.fit2-panel.fit2-empty::before{background:var(--fit-line)}
.fit2-empty .ttl{font-family:var(--fit-serif);font-size:1.6rem;line-height:1.1;margin:6px 0 8px;text-wrap:balance}
.fit2-empty p{color:var(--fit-dim);font-size:.93rem;max-width:56ch}
.fit2-empty .acts{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.fit2-err .ttl{color:var(--fit-err)}
.fit2-btn{font:inherit;font-size:.84rem;font-weight:500;cursor:pointer;border-radius:100px;padding:8px 16px;
  border:1px solid var(--fit-line);background:transparent;color:var(--fit-ink);text-decoration:none}
.fit2-btn:hover{border-color:var(--fit-dim)}
.fit2-btn.pri{background:var(--fit-link);border-color:var(--fit-link);color:var(--fit-card)}
.fit2-btn.pri:hover{filter:brightness(1.08)}
.fit2-panel a.fit2-btn,.fit2-console a.fit2-btn{border-bottom-width:1px}
.fit2-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--fit-track),var(--fit-line-soft),var(--fit-track));
  background-size:200% 100%;animation:fit2-sh 1.4s linear infinite;margin:10px 0}
@keyframes fit2-sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.fit2-skel{animation:none}.fit2-dial .val{transition:none}}

/* ── console (Fit profile) ────────────────────────────────────────────────── */
.fit2-console{max-width:980px;margin:0 auto}
.fit2-ch{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--fit-line)}
.fit2-ch h1{font-family:var(--fit-serif);font-size:2.8rem;line-height:1}
.fit2-ch .co{margin-top:8px;font-size:1rem;color:var(--fit-ink)}
.fit2-ch .co .u{color:var(--fit-faint);font-size:.8rem;margin-left:8px;letter-spacing:.03em}
.fit2-stats{display:flex;gap:0;border:1px solid var(--fit-line);border-radius:12px;overflow:hidden;background:var(--fit-card)}
.fit2-stats div{padding:10px 16px;border-left:1px solid var(--fit-line)}
.fit2-stats div:first-child{border-left:0}
.fit2-stats b{display:block;font-family:var(--fit-serif);font-weight:400;font-size:1.5rem;line-height:1.05}
.fit2-stats span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fit-faint)}
.fit2-built{margin-top:12px;font-size:.88rem;color:var(--fit-dim)}

.fit2-sec{margin-top:30px}
.fit2-sec>h2{font-family:var(--fit-serif);font-size:1.6rem;line-height:1.1}
.fit2-sec>.sub{margin-top:4px;font-size:.88rem;color:var(--fit-dim);max-width:70ch}

.fit2-lines{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.fit2-line{display:inline-flex;align-items:center;gap:9px;padding:7px 8px 7px 13px;border-radius:100px;
  background:var(--fit-card);border:1px solid var(--fit-line);font-size:.9rem;color:var(--fit-ink)}
.fit2-line b{font-weight:500;font-size:.74rem;color:var(--fit-dim);background:var(--fit-track);
  border-radius:100px;padding:3px 8px;min-width:26px;text-align:center}
.fit2-line.top{border-color:color-mix(in srgb,var(--fit-strong-f) 45%,var(--fit-line));
  background:color-mix(in srgb,var(--fit-strong-f) 8%,var(--fit-card))}

.fit2-how{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--fit-line);
  border-radius:14px;overflow:hidden;background:var(--fit-line)}
.fit2-how li{background:var(--fit-card);padding:16px 18px;font-size:.88rem;line-height:1.55;color:var(--fit-dim)}
.fit2-how li b{display:block;font-family:var(--fit-serif);font-weight:400;font-size:1.25rem;color:var(--fit-ink);margin-bottom:4px}
.fit2-how li .n{display:inline-block;font-size:.68rem;letter-spacing:.14em;color:var(--fit-faint);margin-bottom:6px}

.fit2-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.fit2-seg{display:inline-flex;border:1px solid var(--fit-line);border-radius:100px;padding:3px;gap:2px}
.fit2-seg button{font:inherit;font-size:.8rem;border:0;background:transparent;color:var(--fit-dim);padding:5px 12px;border-radius:100px;cursor:pointer}
.fit2-seg button[aria-pressed="true"]{background:var(--fit-track);color:var(--fit-ink);font-weight:500}
.fit2-note{font-size:.8rem;color:var(--fit-faint)}

.fit2-list{margin-top:10px;border-top:1px solid var(--fit-line)}
.fit2-ct{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--fit-line-soft);transition:opacity .2s}
.fit2-ct .t{font-weight:500;font-size:.98rem;line-height:1.35;overflow-wrap:anywhere}
.fit2-ct .s{grid-column:1;font-size:.9rem;line-height:1.55;color:var(--fit-dim);max-width:78ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fit2-ct .s.open{-webkit-line-clamp:unset;display:block}
.fit2-ct .m{grid-column:1;font-size:.8rem;color:var(--fit-faint);display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px}
.fit2-ct .m .val{color:var(--fit-ink);font-weight:500}
.fit2-ct .side{grid-row:1 / span 3;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fit2-more{font:inherit;font-size:.8rem;color:var(--fit-link);background:none;border:0;padding:0;cursor:pointer;justify-self:start;grid-column:1}
.fit2-notus{font:inherit;font-size:.78rem;cursor:pointer;border-radius:100px;padding:5px 11px;
  border:1px solid var(--fit-line);background:transparent;color:var(--fit-dim);white-space:nowrap}
.fit2-notus:hover{color:var(--fit-ink);border-color:var(--fit-dim)}
.fit2-notus[aria-pressed="true"]{color:var(--fit-ink);background:var(--fit-track);border-color:var(--fit-dim)}
.fit2-notus[disabled]{opacity:.55;cursor:progress}
.fit2-ct.out .t,.fit2-ct.out .s,.fit2-ct.out .m{opacity:.5}
.fit2-ct .flag{font-size:.72rem;color:var(--fit-faint);text-align:right;max-width:150px}
.fit2-ct .flag.err{color:var(--fit-err)}
.fit2-pager{display:flex;justify-content:center;margin-top:18px}

@media (max-width:640px){
  .fit2-panel{padding:18px 16px 14px;border-radius:14px}
  .fit2-head{gap:14px}
  .fit2-dial{width:78px;height:78px}
  .fit2-dial b{font-size:1.8rem;padding-bottom:10px} .fit2-dial small{bottom:19px}
  .fit2-band{font-size:1.9rem}
  .fit2-row{grid-template-columns:1fr;gap:8px}
  .fit2-rl{display:flex;align-items:center;gap:10px;padding-top:0}
  .fit2-rl .fit2-meter{margin-top:0}
  .fit2-ch h1{font-size:2.2rem}
  .fit2-stats{width:100%}
  .fit2-stats div{flex:1;padding:9px 12px}
  .fit2-stats b{font-size:1.25rem}
  .fit2-how{grid-template-columns:1fr}
  .fit2-lines{gap:6px}
  .fit2-line{font-size:.84rem;padding:5px 6px 5px 11px}
  .fit2-ct{grid-template-columns:1fr}
  .fit2-ct .side{grid-row:auto;grid-column:1;flex-direction:row;align-items:center;justify-content:space-between}
  .fit2-ct .flag{text-align:left;max-width:none}
}