/* ═══════════════════════════════════════════════════════════════════════════
   ROI CALCULATOR — page presentation layer            (/tools/roi/ ONLY)
   Loaded after kb.css and only by this page, so kb.css stays shared-safe.

   2026-08-23 redesign: "financial fitness tracker", not "spreadsheet".
   Every rule here is presentation over kb.js's untouched engine — the IDs,
   events, values, URL contract and analytics are exactly the shipped ones.
   The accent grammar is unchanged: saffron = the action / active control,
   green = money and the machine's eco attribute, navy = data labels,
   maroon = brand chrome. No gradients as decoration; the one linear-gradient
   below is the slider's filled-track STATE, driven by the control's value.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── hero copy ──────────────────────────────────────────────────────────── */
.roi-sub{margin-top:12px;font-size:clamp(15px,1.6vw,17px);line-height:1.6;
  color:var(--ink-2);max-width:56ch}
html[lang="kn"] .roi-sub{font-family:var(--f-kn);line-height:1.8}
/* KN-fallback trap (registered): while the H1's Kannada is pending, KN mode shows
   the ENGLISH fallback — restore the Bebas display treatment for it, otherwise
   html[lang=kn] .kb-h1 re-types the English headline in Noto at KN sizing. */
html[lang="kn"] .kb-h1:has([data-kn].kn-fallback){
  font-family:var(--f-display);font-weight:400;font-size:clamp(34px,6.4vw,56px)}

/* ── crop: two tactile cards (same .kb-seg buttons, same data-crop) ─────── */
.kb-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;
  border:0;border-radius:0;overflow:visible}
.kb-seg button{display:flex;align-items:center;justify-content:flex-start;gap:12px;
  height:auto;min-height:72px;padding:12px 16px;text-align:left;
  background:var(--canvas);border:1px solid var(--line);border-radius:14px;
  cursor:pointer;font:inherit;font-weight:700;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.kb-seg button:hover{border-color:var(--line-strong)}
.kb-seg button:active{transform:scale(.985)}
.kb-seg button:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.kb-seg button[aria-pressed="true"]{background:var(--saffron);border-color:var(--saffron);color:#1a1208}
.roi-crop-ic{font-size:24px;line-height:1;flex:0 0 auto}
.roi-crop-t{display:grid;gap:2px;min-width:0}
.roi-crop-n{font-size:15.5px;line-height:1.2}
html[lang="kn"] .roi-crop-n{font-family:var(--f-kn)}
.roi-crop-sub{font-size:12px;font-weight:500;color:var(--ink-2)}
html[lang="kn"] .roi-crop-sub{font-family:var(--f-kn)}
.kb-seg button[aria-pressed="true"] .roi-crop-sub{color:rgba(26,18,8,.62)}

/* ── the estate: big live readout over a substantial slider ─────────────── */
.roi-acres-big{margin:8px 0 0;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-size:clamp(38px,7vw,52px);color:var(--ink);font-variant-numeric:tabular-nums}
.roi-acres-unit{font-size:.42em;font-weight:600;color:var(--ink-2);letter-spacing:0}
html[lang="kn"] .roi-acres-unit{font-family:var(--f-kn)}
/* thicker track + larger thumb: a control, not a hairline. --fill is set by the
   page script from the slider's own value (filled-track state, not decoration). */
.kb-slider{height:12px;margin:18px 0 4px;border-radius:999px;
  background:linear-gradient(to right,var(--saffron) var(--fill,31%),var(--line) 0)}
.kb-slider::-webkit-slider-thumb{width:34px;height:34px;border:4px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28);margin-top:0}
.kb-slider::-moz-range-thumb{width:34px;height:34px;border:4px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28)}
.kb-slider:focus-visible{outline:2px solid var(--saffron);outline-offset:4px}
.roi-acres-msg{margin:10px 0 0;min-height:1.55em;font-size:13px;line-height:1.55;color:var(--ink-2)}
html[lang="kn"] .roi-acres-msg{font-family:var(--f-kn)}

/* ── add-ons: tactile card grid (same .kb-chip structure kb.js renders) ─── */
.kb-chips{grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:380px){ .kb-chips{grid-template-columns:1fr} }
.kb-chip{position:relative;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:76px;padding:14px 40px 14px 14px;border:1px solid var(--line);border-radius:14px;
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease),
  transform .2s var(--ease),box-shadow .2s var(--ease)}
.kb-chip:hover{border-color:var(--line-strong)}
.kb-chip:active{transform:scale(.98)}
.kb-chip:focus-within{outline:2px solid var(--saffron);outline-offset:2px}
.kb-chip .n{flex:0 0 auto;font-weight:600;font-size:14px;line-height:1.3}
.kb-chip .p{font-size:13px}
.kb-chip.on{border-color:var(--green);background:var(--green-soft);
  box-shadow:0 4px 14px -10px rgba(19,136,8,.5)}
.kb-chip.on::after{content:"✓";position:absolute;top:10px;right:10px;width:20px;height:20px;
  border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:700;
  line-height:20px;text-align:center}

/* ── the dashboard stage ────────────────────────────────────────────────── */
.kb-stage{border-radius:24px;box-shadow:0 14px 40px -30px rgba(0,0,0,.25)}
/* the one strongly-animated number: countUp() rolls it; tabular digits keep every
   position anchored while rolling (kb.css already sets tabular-nums — restated
   here because the effect is load-bearing for the odometer). */
.kb-stage-val{font-variant-numeric:tabular-nums lining-nums}
/* payback as a stacked contextual pill: quiet label over the strong value */
.kb-stage-pb{flex-direction:column;gap:2px;padding:12px 24px;border-radius:16px}
.kb-stage-pb > span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
html[lang="kn"] .kb-stage-pb > span{font-family:var(--f-kn);letter-spacing:0;text-transform:none;font-size:12.5px}
.kb-stage-pb b{font-size:17px;font-weight:800}
.roi-money-note{display:block;margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-2)}
html[lang="kn"] .roi-money-note{font-family:var(--f-kn)}
.roi-eco{display:inline-flex;align-items:center;margin-top:8px;font-size:12.5px;
  font-weight:600;color:var(--green)}
html[lang="kn"] .roi-eco{font-family:var(--f-kn)}

/* ── the close ──────────────────────────────────────────────────────────── */
.kb-next-title{font-size:clamp(22px,3.4vw,30px)}
.roi-next-more{margin-top:14px}
.roi-next-more a{font-size:13.5px;color:var(--ink-2);text-decoration:none}
.roi-next-more a:hover{color:var(--ink);text-decoration:underline}
html[lang="kn"] .roi-next-more a{font-family:var(--f-kn)}

/* ── motion discipline ──────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .kb-seg button,.kb-chip,.kb-slider{transition:none}
  .kb-seg button:active,.kb-chip:active{transform:none}
}

/* ── MOBILE NATIVE PASS (2026-08-30) — ≤767px: the payoff leads ───────────
   Visual order only (grid `order`): on a phone the answer stage renders first
   — LAW 1, the payoff above the fold — while DOM/reading order keeps
   controls → result for screen readers and no-CSS rendering. kb.js, every id
   and every event are untouched. ≥768px is unchanged. */
@media(max-width:767px){
  .kb-roi-answer{order:-1}
}