/* ============================================================
   CALCULATOR CORE — LendScope design, applied to TrailScope's
   calculator surfaces so both sites' calculators match.

   This is the TrailScope port of LendScope's css/calculators-core.css.
   LendScope is the reference: if you change a colour, radius or type
   size in one, change it in the other.

   Loaded AFTER css/ts-design.css so it wins on equal specificity.
   Scoped to .calc-scope so it only touches calculator surfaces and
   leaves the rest of the marketing site alone.

   The two are now fully unified: plain inputs in two-column rows, results
   as label/value rows with a single featured figure, and a pane head with
   an icon tile, title, description and category chip. The sliders and KPI
   tiles this file once described as a deliberate difference were removed —
   that note outlived the decision it recorded.

   Still TrailScope-only: trail-book-valuation.html keeps its sliders. It is
   a bespoke tool, not one of the 31 shared calculators.
   ============================================================ */

.calc-scope {
  /* LendScope Direction A · Navy + Electric Blue */
  --ls-navy:   #0F1F3D;
  --ls-blue:   #2563EB;
  --ls-bg:     #F8F9FB;
  --ls-border: #E5E7EB;
  /* The pane surface. A TOKEN, not a literal, and it has to stay one: the
     results-pane rule below needs (0,4,0) to beat ts-design.css's gradient,
     which also puts it above every dark override embed.css can write, so a
     literal #ffffff there survived `theme=dark` and painted half a dark embed
     white. embed.css says the same thing about the light hexes it had to
     chase; this is the token that stops the chase. */
  --ls-surface: #ffffff;
  --ls-muted:  #374151;
  --ls-faint:  #9CA3AF;
  --ls-tint:   #EFF6FF;
  /* Text a user reads is --ls-neutral (#6B7280 — 4.83:1 on white, 4.59:1 on
     --ls-bg), never --ls-faint (#9CA3AF is 2.54:1 / 2.41:1 and fired axe
     color-contrast on every node it painted). Eyebrows, section titles, the
     category chip, result-row labels and the footnote are body copy; --ls-faint
     is for decorative glyphs and rules only. This mirrors LendScope's
     --neutral-text in css/calculators-core.css (app-pages a11y pass
     2026-09-03) — move the same rules in both files. */
  --ls-neutral: #6B7280;

  color: var(--ls-navy);
}

/* Accent — the embed's themeable colour still wins, since embed.css sets
   --accent on html[data-embed] and this reads it with a LendScope fallback. */
.calc-scope { --accent: var(--embed-accent, var(--ls-blue)); }

/* ── Panels ────────────────────────────────────────────────── */
.calc-scope .card {
  background: var(--ls-surface);
  border: 1px solid var(--ls-border);
  border-radius: 12px;              /* LendScope pane radius, not TrailScope's 16 */
  box-shadow: none;                 /* LendScope panes are flat */
}
/* ts-design.css tints the results pane with an accent gradient via
   `.calc-wrap > .card:nth-child(2)` (0,3,0), which out-specifies the rule
   above, so the right-hand pane stayed blue. Both LendScope panes are plain
   white — the only colour in its results is the featured figure.

   This selector is (0,4,0). That is above embed.css's dark `.card` rule
   (0,3,1), so paint it with --ls-surface and let the theme re-point the
   token; a literal here cannot be overridden by any theme. */
.calc-scope .calc-wrap > .card:nth-child(2) {
  background: var(--ls-surface);
  border-color: var(--ls-border);
}

/* ── Pane head ─────────────────────────────────────────────── */
/* LendScope's .pane-head: a 40px tinted icon tile, the title over a muted
   description, and the category as a chip pushed to the right, all above a
   hairline. TrailScope previously rendered a bare title and description with
   no icon, chip or rule, which was the largest remaining visual gap between
   the two sites' calculators. */
.calc-scope .pane-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ls-border);
}
.calc-scope .pane-head .ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--ls-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.calc-scope .pane-head-text { min-width: 0; }
.calc-scope .pane-head .cat {
  margin-left: auto;
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-neutral);
  padding: 4px 10px;
  background: var(--ls-bg);
  border-radius: 999px;
}

/* ── Section titles ────────────────────────────────────────── */
.calc-scope .calc-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ls-neutral);
  margin: 0 0 10px;
}

@media (max-width: 560px) {
  /* The chip wraps under the title rather than squeezing it. */
  .calc-scope .pane-head { flex-wrap: wrap; gap: 10px; }
  .calc-scope .pane-head .cat { margin-left: 54px; }
}

/* ── Heading block ─────────────────────────────────────────── */
/* LendScope's pane head is a 20px bold navy h2 over a 13px muted line,
   separated by a rule. TrailScope's .calc-title is a small mono eyebrow,
   so it is restyled into the same hierarchy. */
.calc-scope .calc-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-transform: none;
  color: var(--ls-navy);
  margin-bottom: 4px;
}
.calc-scope .calc-desc {
  font-size: 13px;
  color: var(--ls-muted);
  line-height: 1.5;
  margin-bottom: 0;
  max-width: none;
}

/* ── Field labels ──────────────────────────────────────────── */
.calc-scope .field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ls-muted);
  font-family: 'Inter', system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Inputs ────────────────────────────────────────────────── */
.calc-scope .field-input-row,
.calc-scope select {
  border: 1px solid var(--ls-border);
  border-radius: 7px;
  background: #ffffff;
}
.calc-scope .field-input-row:focus-within,
.calc-scope select:focus { border-color: var(--accent); }
.calc-scope .field-input,
.calc-scope select { font-size: 13px; color: var(--ls-navy); }

/* ── Inputs: LendScope's two-column rows ───────────────────── */
/* LendScope lays inputs out as a `table.kv` — label left, control right,
   hairline between rows. TrailScope stacks label above control. Same markup,
   different grid, so all 31 calculators convert at once without touching a
   single calculator component. */
.calc-scope .field-wrap {
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--ls-border);
}
.calc-scope .field-wrap:last-child { border-bottom: 0; }
.calc-scope .field-wrap > .field-label { margin: 0; }
.calc-scope .field-wrap > .field-input-row,
.calc-scope .field-wrap > select {
  max-width: 220px;
  width: 100%;
  margin-left: auto;
}
/* LendScope right-aligns every value in the cell — `table.kv input, table.kv
   select { text-align: right }` — selects included. */
.calc-scope .field-input,
.calc-scope .field-select,
.calc-scope select { text-align: right; }
/* A hint paragraph is not part of LendScope's table; keep it, but let it span
   the full width under its row rather than squeezing the control column. */
.calc-scope .field-wrap > p { grid-column: 1 / -1; margin: 2px 0 0; }

@media (max-width: 560px) {
  .calc-scope .field-wrap { grid-template-columns: 1fr; gap: 6px; }
  .calc-scope .field-wrap > .field-input-row,
  .calc-scope .field-wrap > select { max-width: none; margin-left: 0; }
}

/* ── Results ───────────────────────────────────────────────── */
/* LendScope shows results as label/value rows with the headline figure in
   Electric Blue — `table.kv.results` with a `.featured` row. The KPI tiles are
   flattened into the same rows so the two sites read as one design.

   The emphasis selectors below also match `.highlight`, which is what the Kpi
   component actually emits. They previously matched only `.is-highlight` and
   `[data-highlight]`, so the featured figure — the most prominent number on
   every calculator — silently kept TrailScope's own styling from
   ts-design.css and never took LendScope's. */
.calc-scope .kpi-grid,
.calc-scope .kpi-grid.cols-3 { display: block; }
.calc-scope .kpi {
  display: grid;
  grid-template-columns: 45% 1fr;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ls-border);
  border-radius: 0;
  padding: 10px 0;
}
.calc-scope .kpi:last-child { border-bottom: 0; }
.calc-scope .kpi-sub { grid-column: 1 / -1; }

/* ts-design.css styles `.kpi-grid .kpi` and `.kpi-grid .kpi.highlight` as
   raised tiles — gradient fill, blue border, drop shadow, hover lift. Those
   selectors are (0,3,0) and out-specify `.calc-scope .kpi`, so the tile look
   survived into the rows and the featured row rendered as a tinted card.
   LendScope's featured row carries no fill at all: the emphasis is the blue
   figure alone. Matching specificity, and this file loads later, so it wins. */
.calc-scope .kpi-grid .kpi,
.calc-scope .kpi-grid .kpi.highlight {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ls-border);
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0;
}
.calc-scope .kpi-grid .kpi:last-child { border-bottom: 0; }
.calc-scope .kpi-grid .kpi:hover { transform: none; box-shadow: none; }
.calc-scope .kpi-label,
.calc-scope .kpi [class*="label"] {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ls-neutral);
}
.calc-scope .kpi-value,
.calc-scope .kpi [class*="value"] {
  color: var(--ls-navy);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 14px;
  text-align: right;
}
/* The highlighted figure is LendScope's featured value: blue, larger, bold —
   `table.kv.results td.v.featured`. `.highlight` is the class the component
   emits; the other two are kept so either convention works. */
.calc-scope .kpi.highlight .kpi-label,
.calc-scope .kpi.is-highlight .kpi-label,
.calc-scope .kpi[data-highlight] .kpi-label {
  color: var(--ls-navy);
  font-weight: 600;
}
.calc-scope .kpi.highlight .kpi-value,
.calc-scope .kpi.is-highlight .kpi-value,
.calc-scope .kpi[data-highlight] .kpi-value {
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
}

/* ── Notes and disclaimer ──────────────────────────────────── */
.calc-scope .calc-note {
  background: var(--ls-bg);
  border: 1px solid var(--ls-border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ls-muted);
}
.calc-scope .calc-disclaimer {
  background: transparent;
  border-top: 1px solid var(--ls-border);
  border-radius: 0;
  font-size: 12px;
  color: var(--ls-neutral);
  line-height: 1.6;
  padding-top: 14px;
  margin-top: 18px;
}

/* ── Dark theme (embeds) ───────────────────────────────────── */
/* embed.css owns the dark tokens; these re-point the LendScope literals so a
   dark embed does not fall back to white panes. */
html[data-embed-theme="dark"] .calc-scope {
  --ls-navy:   #E8ECF5;
  --ls-bg:     #131C2E;
  --ls-border: rgba(255, 255, 255, 0.10);
  --ls-muted:  #A7B0C0;
  --ls-faint:  #7C8698;
  /* Not the same value as --ls-faint. It was picked when embed.css still
     washed the disclaimer with rgba(255,255,255,.05), where #7C8698 came to
     4.17:1; that wash is gone (the footnote is transparent in both themes
     now) and #7C8698 would clear the remaining surfaces — but #8F99AC clears
     them by more, on all three: 6.12:1 on the --bg-elev pane, 5.94:1 on the
     --ls-bg chip, 6.71:1 on the --bg-base page. Without this line the rules
     above would inherit the light #6B7280 — 1.9:1 on a dark pane. */
  --ls-neutral: #8F99AC;
  --ls-tint:   rgba(37, 99, 235, 0.16);
  /* --bg-elev is what embed.css paints every other .card in a dark embed, so
     reading it here is what makes the two panes the same colour rather than
     two near-blacks that almost match. The fallback is for a dark context
     embed.css is not in. Replaces a `.calc-scope .card { background: #131C2E }`
     rule that tied embed.css on specificity and lost on load order — and that
     never reached the results pane at all, which is the bug this fixes. */
  --ls-surface: var(--bg-elev, #131C2E);
}
html[data-embed-theme="dark"] .calc-scope .field-input-row,
html[data-embed-theme="dark"] .calc-scope select { background: #0F1728; }