/*
 * Veercal v2 ("Tell-tale"): what the standalone calculators' engines generate.
 * Requires tokens.css and site.css.
 *
 * The calculation scripts on /stamp-duty, /end-of-term and /novated stay
 * byte-for-byte unchanged (src/golden.engine-sources.test.js). They still set
 * their own class names and write their own markup, so those are styled here.
 * This is the one file where non-vc- class names are allowed, and only names an
 * engine sets or writes into innerHTML (docs/overhaul/PHASE-3.md, rule 4).
 *
 * Colour only with meaning (docs/brand/DESIGN.md §3): "good", "bad", "positive"
 * and "negative" never turn text green or red; ink, weight and the sign do the
 * work. Live examples: /design/v2/styleguide.html, "Calculator output".
 */

/* ── Shown and hidden by the engines ─────────────────────────────────── */
/* An engine adds .visible once there is something to show. */
#resultsCard:not(.visible),
#compareCard:not(.visible),
#results:not(.visible),
#advancedInputs:not(.visible),
#evBox:not(.visible),
#translationBox:not(.visible) { display: none; }

/* ── Choices ─────────────────────────────────────────────────────────── */
/* The engines mark the chosen button .active (the page script mirrors it to
   aria-pressed, which site.css styles the same way). */
/* The novated engine marks a battery EV .ev-active instead. */
.vc-seg button.active,
.vc-seg button.ev-active { background: var(--vc-ink); color: var(--vc-text-on-ink); }

/* ── Stamp duty: the on-costs breakdown ──────────────────────────────── */
/* The engine shows the LCT row with style.display = 'flex' (it was a div). In a
   table that row must stay a table row; 'none' still hides it. */
#rowLctWrap[style*="flex"] { display: table-row !important; }
/* The stamp duty figure the insight text points to. */
.breakdown-value.highlight { font-weight: var(--vc-fw-head); }
/* "EXEMPT" in place of a figure: a positive status chip (green, white text). */
.breakdown-value.exempt,
.ev-exempt-badge {
  display: inline-block; border-radius: 8px; padding: 2px 8px;
  background: var(--vc-green); color: #FFFFFF;
  font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-head); line-height: 1.4;
}

/* ── Stamp duty: the all-states table (rows written by the engine) ───── */
#compareBody td:first-child { text-align: left; }
/* The person's own state: the engine marks the row and adds a "current" tag. */
#compareBody tr.current-state td { background: var(--vc-tint); font-weight: var(--vc-fw-head); }
.state-badge {
  display: inline-block; margin-left: var(--vc-sp-2); border-radius: var(--vc-r-sm); padding: 1px 8px;
  background: var(--vc-blue); color: #FFFFFF;
  font-size: var(--vc-fs-xs); font-weight: var(--vc-fw-head); line-height: 1.5; vertical-align: 2px;
}
/* Differences against the person's state: the sign carries the meaning, so no
   green or red. */
.state-diff-pos, .state-diff-neg { color: inherit; font-weight: inherit; }
/* "your state" is written with an inline grey (#94a3b8, 2.6:1 on white). */
#compareBody span[style] { color: var(--vc-text-secondary) !important; font-size: var(--vc-fs-sm) !important; }

/* ── End of term: equity position ────────────────────────────────────── */
/* The engine shows this wrapper with style.display = 'block' and replaces its
   class with "equity-banner positive|negative|breakeven", so the v2 card sits
   inside it. All three stay neutral (PHASE-3.md): the headline's own words say
   which ("positive equity", "negative equity (underwater)"). */
.equity-banner { display: none; }

/* ── End of term: the five option cards ──────────────────────────────── */
/* Tags: the engine sets className = "scenario-tag …" and hides an empty tag
   with style.display. Recommended tags and "Lease only" are the blue information
   chip; caution tags are a plain chip (ink on tint), no colour. */
.scenario-tag {
  display: inline-flex; align-items: center; border-radius: 8px; padding: 4px 10px;
  background: var(--vc-tint); color: var(--vc-ink);
  font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-head); line-height: 1.35;
}
.scenario-tag:empty { display: none; }
.scenario-tag.tag-recommended,
.scenario-tag.tag-leasonly { background: var(--vc-blue); color: #FFFFFF; }
/* The engine's best option: a 2px ink border. The inset line doubles the card's
   1px border without moving anything inside it. */
.best-option { border-color: var(--vc-ink); box-shadow: inset 0 0 0 1px var(--vc-ink); }
/* Not available (hand-back on a loan): muted with a dashed border and secondary
   text rather than faded, so the text keeps its contrast. */
.not-available { background: transparent; border-style: dashed; border-color: var(--vc-line-strong); color: var(--vc-text-secondary); }
/* The engine leaves rows from an earlier lease run in the hand-back card when
   it marks it not available, so hide them. */
#card-handback.not-available #rows-handback { display: none; }
/* Each card's figure. "good", "bad" and "warn" add no colour: the label above
   the figure says which way it goes. */
.scenario-headline {
  font-size: 32px; line-height: 1.1; font-weight: var(--vc-fw-head);
  letter-spacing: var(--vc-track-head); font-variant-numeric: tabular-nums;
}
/* The rows the engine writes into #rows-*, drawn like a vc-table. Values marked
   good, bad or warn stay ink. */
.scenario-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--vc-sp-3);
  padding: 8px 0; border-top: 1px solid var(--vc-line); font-size: var(--vc-fs-sm); line-height: 1.4;
}
.scenario-row-label { flex: 1 1 auto; min-width: 0; }
.scenario-row-value { flex: 0 1 auto; text-align: right; font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; }
.scenario-row-value:empty { display: none; }
/* The "Own car outright" tick is drawn in the old green (#134E35). */
.scenario-row-value svg { stroke: currentColor; }

/* ── End of term: decision guide ─────────────────────────────────────── */
/* Rows written into #decisionGuide: "IF" or "WARNING" in a column of its own,
   the condition beside it. The engine colours WARNING with an old token that no
   longer exists, so it falls back to ink like the rest. */
#decisionGuide { display: grid; grid-template-columns: max-content minmax(0, 1fr); }
.decision-row { display: contents; }
.decision-if, .decision-condition { padding: 14px 0; border-top: 1px solid var(--vc-line); }
.decision-if { padding-right: var(--vc-sp-4); font-size: var(--vc-fs-sm); font-weight: var(--vc-fw-head); line-height: 26px; letter-spacing: 0.04em; }
.decision-condition { font-size: var(--vc-fs-base); line-height: 1.55; }
.decision-arrow { margin: 0 2px; }

/* ── Novated: comparison rows (written into #compareRows) ────────────── */
/* The page wiring draws these as chart tubes and hides the rows, so they show
   only if the tubes can't be drawn. The engine's colour dots and bars carry no
   meaning in v2, so they go; "best" and "worst" add no colour. */
.compare-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vc-sp-4); padding: 10px 0; border-top: 1px solid var(--vc-line); }
.compare-dot, .compare-bar-wrap { display: none; }
.compare-value { font-weight: var(--vc-fw-head); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Novated: residual table (rows written into #residualTable) ──────── */
#residualTable td:first-child { text-align: left; }
/* The person's own km band, as the engine marks it. */
#residualTable tr.highlight td { background: var(--vc-tint); font-weight: var(--vc-fw-head); }
/* "← yours" is written with an inline 10px size and an old colour. */
#residualTable span[style] { font-size: var(--vc-fs-sm) !important; color: inherit !important; }