/* I AM LENDER — investor calculators (/tools hub + 6 calculator pages).
   Layout ONLY. Every color comes from /assets/theme.css tokens.
   Loaded after site.css. Class prefix "calc-" avoids collisions with the
   contact / intake form styles. Calculator inputs reuse .form-grid +
   .field from site.css; this file only adds result-panel layout.

   Ported from the previous site's calculator pages, re-tokenized for the
   light theme: big numbers use --accent-display (large display gold
   only), small labels stay --muted, verdict / chip states use the
   good / warn / bad token pairs.

   DO NOT re-add subgrid here: Chrome mis-places auto-placed children of
   subgridded fields (verified by measurement 2026-09-04). Paired inputs
   use site.css .form-grid, which already collapses to one column below
   900px — the calc breakpoints match site.css, not the old 760px draft.
   */

/* ---- cross-tool pill nav (under the hero on calculator pages) ---- */

.calc-toolnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.calc-toolnav a{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;border:1px solid var(--line);border-radius:100px;padding:9px 18px;color:var(--muted);transition:color .2s,border-color .2s}
.calc-toolnav a:hover{color:var(--text);border-color:var(--accent-fill)}
.calc-toolnav a.on{color:var(--text);border-color:var(--line-strong)}

/* ---- hint below an input (same pattern as form.css .di-hint) ---- */

.calc-hint{font-size:12px;line-height:1.45;color:var(--muted);margin-top:5px}

/* ---- calculator layout: form card left, sticky result right ---- */

.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.calc-result{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:32px;position:sticky;top:96px}
.calc-result h4{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}

.calc-big-num{font-family:'IBM Plex Mono',monospace;font-size:clamp(34px,4vw,46px);font-weight:700;color:var(--accent-display);line-height:1.1}
.calc-big-lab{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:4px;margin-bottom:22px}

.calc-res-line{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:14.5px;padding:10px 0;border-bottom:1px dashed var(--line)}
.calc-res-line:last-child{border-bottom:none}
.calc-res-line b{color:var(--text);font-weight:600}

/* verdict pill (analyzer / brrrr / dscr pages) */
.calc-verdict{margin-top:18px;padding:14px 18px;border-radius:8px;font-weight:700;font-size:15px;text-align:center}
.calc-verdict.good{background:var(--good-soft);color:var(--good);border:1px solid var(--good)}
.calc-verdict.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.calc-verdict.bad{background:var(--bad-soft);color:var(--bad);border:1px solid var(--bad)}
.calc-verdict.neutral{background:var(--fill-soft);color:var(--muted);border:1px solid var(--line)}

/* ---- deal scorecard: ring + headline verdict + chips ---- */

.calc-score-wrap{display:flex;align-items:center;gap:22px;margin-bottom:8px}
.calc-ring{--p:0;--c:var(--warn);position:relative;width:118px;height:118px;border-radius:50%;flex-shrink:0;background:conic-gradient(var(--c) calc(var(--p)*1%), var(--fill-soft) 0);display:flex;align-items:center;justify-content:center}
.calc-ring::before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:var(--card)}
.calc-ring b{position:relative;font-family:'IBM Plex Mono',monospace;font-size:34px;font-weight:700;line-height:1;color:var(--text)}
.calc-ring b span{font-size:14px}

.calc-v{font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:26px;text-transform:uppercase;line-height:1.05}
.calc-v small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:11px;letter-spacing:.18em;margin-top:6px}
.calc-v.v-good{color:var(--good)}
.calc-v.v-warn{color:var(--warn)}
.calc-v.v-bad{color:var(--bad)}

.calc-metrics{margin:22px 0 6px}
.calc-chips{display:flex;flex-direction:column;gap:9px;margin:20px 0 4px}
.calc-chip{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;border-radius:8px;font-size:14px;line-height:1.4;border:1px solid}
.calc-chip .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex-shrink:0}
.calc-chip b{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:1px}
.calc-chip span.t{color:var(--muted)}
.calc-chip.g{background:var(--good-soft);border-color:var(--good)}
.calc-chip.g .dot{background:var(--good)}
.calc-chip.w{background:var(--warn-soft);border-color:var(--warn)}
.calc-chip.w .dot{background:var(--warn)}
.calc-chip.b{background:var(--bad-soft);border-color:var(--bad)}
.calc-chip.b .dot{background:var(--bad)}

/* ---- result-card CTA stack + fine print ---- */

.calc-cta-row{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.calc-cta-row .btn{width:100%;text-align:center;padding:15px;font-size:16px}
.calc-note{font-size:11.5px;margin-top:16px;line-height:1.6;color:var(--muted)}

/* ---- "how it scores" / "how it works" mini cards ---- */

.calc-mini{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:26px}
.calc-mini .n{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.2em;display:block;margin-bottom:12px;color:var(--muted)}

/* ---- responsive: match site.css breakpoints (900px = single column) ---- */

@media (max-width:900px){
  .calc-grid{grid-template-columns:1fr}
  .calc-result{position:static}
}