/* -----------------------------
   DESIGN TOKENS
   ----------------------------- */
:root {
  /* Fonts */
  /* The Noto faces sit ahead of the OS stacks so the locale-specific webfont
     (only one is ever linked per page) wins over Segoe UI / Times for Arabic,
     Korean and Simplified Chinese glyphs. Roboto/Crimson Pro still win for
     Latin + Cyrillic since they precede them and are always loaded. */
  --font-body: "Roboto", "Noto Sans Arabic", "Noto Sans KR", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Crimson Pro", "Noto Sans Arabic", "Noto Sans KR", "Noto Sans SC", Georgia, "Times New Roman", serif;

  /* Core colors */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #171b24;          /* Black */
  --color-text-muted: #494443;    /* Onyx */
  --color-border: rgba(23, 27, 36, 0.14);
  --color-border-strong: rgba(23, 27, 36, 0.22);

  /* Buttons — brand Aubergine, hover/focus Lavender (per the style guide's button page). */
  --color-btn: #773f8c;               /* Aubergine */
  --color-btn-hover: #9861ad;         /* Lavender */
  --color-btn-text: #ffffff;
  --color-btn-disabled-bg: #dedede;
  --color-btn-disabled-text: #a5a5aa;

  /* Dark "chrome" surfaces (table headers, section number badge) — Aubergine to match the buttons */
  --color-header-bg: #773f8c;         /* Aubergine */


  /* Card outlines — a whisper of Aubergine (option B). Distinct from the neutral
     --color-border, which stays on inputs / table cells / internal dividers. */
  --color-card-border: color-mix(in srgb, var(--color-header-bg) 28%, transparent);

  /* Validation (Flame) */
  --flame: #f26d2b;
  --flame-70: #f6996b;
  --flame-30: #fbd3bf;

  /* Reviewed/visited state (brand Tertiary "Jade") */
  --jade: #1f6a53;

  /* Brand Primary "Aubergine" — Clean accent in the Baseline-vs-Clean charts (cumulative + cost breakdown) */
  --aubergine: #773f8c;

  /* Compare-chart candidate series — named Website Style Guide colors */
  --chart-series-1: #268e9e; /* Waikiki */
  --chart-series-2: #f9be19; /* Sunshine */
  --chart-series-3: #494443; /* Onyx — 3rd candidate + cumulative-interest series; moved off Aubergine so Aubergine stays chrome-only */

  /* Radius / shadow */
  --radius: 12px;
  --shadow-sm: 0 2px 10px rgba(23, 27, 36, 0.08);

  /* Spacing */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;

  /* Rhythm tokens */
  --section-gap: var(--space-6); /* space between big blocks/cards */
  --card-pad: var(--space-5);    /* padding inside cards */
  --row-gap: var(--space-4);     /* spacing between rows inside a card */
  --micro-gap: var(--space-1);   /* label → control spacing */

  /* Controls */
  --control-h: 44px;
  --control-pad-x: 14px;
  --control-pad-y: 10px;

  /* Layout */
  --container-max: 1216px;

  /* Toggles */
  --toggle-w: 46px;
  --toggle-h: 26px;
  --toggle-thumb: 20px;

  /* Buttons */
  --tco-btn-w: 320px;

  /* TCO Results table sticky col widths */
  --tco-col1: 200px;
  --tco-col2: 160px;
}

/* -----------------------------
   BASE
   ----------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
  /* Guide: Text Medium/Small/XSmall all carry -2% tracking. Set once here
     rather than per component; headings restate it and the loading indicator's
     4px spread overrides it. Reset for RTL further down — tracking breaks
     cursive Arabic/Farsi. */
  letter-spacing: -0.02em;
}

/* -----------------------------
   LOADING OVERLAY
   ----------------------------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 5000;

  /* Subtle dim using theme color (no new hard-coded colors) */
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);

  background-color: var(--color-text);
  color: var(--color-btn-text);
  font-family: var(--font-body);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 21px; /* guide: Text XL */
  font-weight: 600;
  padding: 60px 120px;
  border-radius: 40px;
}

.loading-spinner {
  border: 6px solid color-mix(in srgb, var(--color-btn-text) 30%, transparent);
  border-top: 6px solid var(--color-btn-text);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Main container */
#your-cost-settings {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: clamp(18px, 3vw, 36px);
}

/* -----------------------------
   TYPOGRAPHY
   ----------------------------- */
/* Headings — RIDE Website Style Guide (Crimson Pro, 600, -2% tracking).
   Uses the guide's actual type-scale steps: the page title takes guide H2,
   while the section headings stay low on the scale (h2 = guide H4, h3 = guide
   H5) to keep the dense form compact. */
h1, h2, h3 {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em; /* guide: -2% */
}

h1 {
  font-size: clamp(30px, 4.5vw, 48px); /* guide H2 48/52 */
  line-height: 1.08;
  margin-bottom: var(--space-4);
}

h2 {
  font-size: clamp(24px, 2.6vw, 30px); /* guide H4 30/36 */
  margin-top: var(--space-6);
}

h3 {
  font-size: clamp(20px, 2.2vw, 24px); /* guide H5 24/28 */
  margin-top: 0;
}

/* UI-style subheading (card / chart titles) — stays compact body font */
h4 {
  margin: var(--space-3) 0 var(--space-2) 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  font-size: 16px;
}

/* Section/sub-section headers use Bootstrap display classes (.h4/.h5) in the
   markup. Map them onto the restrained brand scale and beat .fw-bold (700 !important).
   Scoped to the page content so modal titles keep Bootstrap defaults. */
#your-cost-settings .h4,
#your-cost-settings .h5 {
  font-family: var(--font-heading);
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

#your-cost-settings .h4 {
  font-size: clamp(20px, 2.4vw, 24px); /* guide H5 24/28 */
  line-height: 1.17;
}

#your-cost-settings .h5 {
  font-size: clamp(19px, 2vw, 21px);   /* guide H6 21/26 */
  line-height: 1.24;
}

.heading-subtext {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14px;
  margin-inline-start: 8px;
}

p {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* -----------------------------
   TOGGLES / CONDITIONAL SECTIONS
   ----------------------------- */
[hidden] { display: none !important; }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
}

/* -----------------------------
   MIX CHARGING SLIDER
   ----------------------------- */

#mix_charging_split input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-header-bg) 28%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--color-header-bg) 35%, transparent);
  margin-top: var(--space-2);
  cursor: pointer;
}

/* Track */
#mix_charging_split input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-header-bg) 28%, #ffffff);
}

#mix_charging_split input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-header-bg) 28%, #ffffff);
}

/* Thumb */
#mix_charging_split input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-header-bg);
  border: 2px solid var(--color-surface);
  margin-top: -6px;
  box-shadow: 0 2px 8px rgba(23, 27, 36, 0.18);
  transition: transform 120ms ease;
}

#mix_charging_split input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-header-bg);
  border: 2px solid var(--color-surface);
  box-shadow: 0 2px 8px rgba(23, 27, 36, 0.18);
  transition: transform 120ms ease;
}

/* Hover effect */
#mix_charging_split input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.08);
}

#mix_charging_split input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.08);
}

.mix-percent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-weight: 400;
}
/* -----------------------------
   PAGE INTRO
   ----------------------------- */
/* Explains what the tool does (left) beside what the driver actually controls
   (right). Two columns on wide screens, stacked below 768px. */
.tco-intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--section-gap);
}

/* Same weight and colour as .tco-section-tagline, but a step larger on the
   type scale with looser leading and a capped measure — this is page-lead
   copy, not a form tagline. */
/* The h1 lives in this column, so it sets the column's top edge against the
   card. Start-aligned so the heading and the copy share one left edge, and so
   it mirrors correctly under [dir="rtl"]. */
.tco-intro-copy h1 {
  margin: 0 0 var(--space-4) 0;
  text-align: start;
}

.tco-intro-copy p {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  max-width: 65ch;
}

.tco-intro-copy p:last-child {
  margin-bottom: 0;
}

/* Tint of the Aubergine the tool already uses — NO new colour value. 14% rather
   than the 8% used by .vehicles-notes: 8% renders almost white, while 14%
   composites to roughly the lavender the design calls for, without introducing
   a hex the stylesheet did not already contain. */
.tco-intro-card {
  background: color-mix(in srgb, var(--color-header-bg) 14%, transparent);
  border-radius: var(--radius);
  padding: var(--card-pad);
}

/* Small tracked uppercase eyebrow. Positive tracking is the opposite of the
   body's -2%, which is correct for uppercase — but it is reset for RTL below,
   where tracking breaks cursive scripts. */
.tco-intro-card-title {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-btn);
}

/* Same type as the intro paragraphs and the section taglines: 14/20/600 Onyx. */
.tco-intro-card ul {
  margin: 0;
  padding-inline-start: 1.1rem;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.tco-intro-card li {
  margin-bottom: var(--space-1);
}

/* Purple bullet markers against dark body text — ::marker takes the accent so
   the text itself stays at full reading contrast. */
.tco-intro-card li::marker {
  color: var(--color-btn);
}

.tco-intro-card li:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .tco-intro {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* -----------------------------
   FORM + SECTION LAYOUT
   ----------------------------- */
form { margin-top: var(--space-4); }

/* Big sections (cards/blocks) share a single pattern */
.your-cost-settings-block,
.vehicles-block,
.vehicle-usage-lifecycle-block,
.infrastructure-charger-block,
.fuel-energy-pricing-block,
.incentives-block {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--card-pad);
}


/* Space between cards/blocks */
.your-cost-settings-block,
.vehicles-block,
.vehicle-usage-lifecycle-block,
.infrastructure-charger-block,
.fuel-energy-pricing-block,
.incentives-block,
.form-actions {
  margin-top: var(--section-gap);
}

/* Override skeleton spacing (prevents double spacing) */
form > div { margin-bottom: 0; }

/* Tighten only the first element after headings */
form h3 + div,
form h4 + div {
  margin-top: 0;
}

/* -----------------------------
   COLLAPSIBLE SECTIONS
   ----------------------------- */
/* Each numbered input section is a <details> card: clickable header + body. */
.tco-section {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: var(--section-gap);
  overflow: hidden;
}

/* The body block now lives inside the section card — drop its own card chrome
   (border/shadow/radius/margin) so we don't double-card it. */
.tco-section > .your-cost-settings-block,
.tco-section > .vehicles-block,
.tco-section > .vehicle-usage-lifecycle-block,
.tco-section > .infrastructure-charger-block,
.tco-section > .fuel-energy-pricing-block,
.tco-section > .incentives-block {
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
}

/* Clickable header row: [num] [title / tagline / value-summary] [chevron] */
.tco-section-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num title   chevron"
    "num tagline chevron"
    "num line    chevron";
  column-gap: var(--space-3);
  row-gap: 4px;
  align-items: center;
  padding: var(--space-4) var(--card-pad);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
/* Remove the native disclosure triangle (Safari/Chrome + Firefox). */
.tco-section-summary::-webkit-details-marker { display: none; }
.tco-section-summary::marker { content: ""; }
.tco-section-summary:hover { background: color-mix(in srgb, var(--color-header-bg) 8%, transparent); }
.tco-section-summary:focus-visible { outline: 2px solid var(--color-header-bg); outline-offset: -3px; }

/* Number badge */
.tco-section-num {
  grid-area: num;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-header-bg);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

/* Title — reset the h2's default heading margins inside the header */
.tco-section-title {
  grid-area: title;
  margin: 0 !important;
}

/* Static descriptive tagline — always visible, collapsed or expanded */
.tco-section-tagline {
  grid-area: tagline;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;   /* match the form's other muted helper text (.label-subtext) */
  line-height: 20px;  /* guide: Text Small 14/20 */
}

/* Dynamic value summary (current inputs) — shown only when the card is collapsed.
   Rendered as chips so the at-a-glance settings stand out from the tagline prose. */
.tco-section-line {
  grid-area: line;
  margin: 8px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tco-section[open] .tco-section-line,
.tco-section-line:empty { display: none; }

.tco-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-header-bg) 14%, #ffffff);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* Chevron: CSS triangle, rotates on open */
.tco-section-chevron {
  grid-area: chevron;
  align-self: center;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-header-bg);
  border-bottom: 2px solid var(--color-header-bg);
  transform: rotate(45deg);    /* chevron-down when collapsed = "click to expand" */
  transition: transform 0.18s ease;
  margin-inline-start: var(--space-2);
  margin-top: -3px;            /* optically center the down-pointing chevron */
}
.tco-section[open] > .tco-section-summary .tco-section-chevron {
  transform: rotate(225deg);   /* chevron-up when expanded = "click to collapse" */
  margin-top: 3px;             /* optically center the up-pointing chevron */
}

/* Reviewed state (visited + all fields populated) — the number badge turns
   Jade, mirroring how the error state turns it Flame. Jade is the one
   deliberate exception to the monochrome palette: green is the done/reviewed
   semantic (user-approved, brand Tertiary "Jade"). */
.tco-section--reviewed > .tco-section-summary .tco-section-num {
  background: var(--jade);
}

/* Error state after a failed Calculate (uses the validation Flame).
   Declared after the reviewed rule so Flame wins if both classes ever
   coexist momentarily. */
.tco-section--error { border-color: var(--flame); }
.tco-section--error > .tco-section-summary .tco-section-num { background: var(--flame); }

/* Compare Similar EVs — inline busy state (replaces the old Run button) */
.tco-compare-busy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.tco-compare-busy[hidden] {
  display: none;
}

/* Fine-print footer inside the verdict card listing never-opened input cards —
   the card's third padded row, divided like header/KPIs. */
.tco-verdict-footnote {
  padding: var(--space-2) var(--card-pad);
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text-muted);
}

.tco-unvisited-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* -----------------------------
   RESULT CARDS (Phase 2)
   ----------------------------- */
/* Result cards reuse .tco-section but have no number badge or tagline —
   the header is just title + value chips + chevron. */
.tco-result-card > .tco-section-summary {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title chevron"
    "line  chevron";
}

/* The chart/table card sits inside the result card now — drop its own chrome
   so it isn't double-carded (one shows at a time, so the top border reads as a divider). */
.tco-result-card > .chart-card,
.tco-result-card > .table-card {
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* The Result Summary note is a bare child of the result card, so it would run
   edge to edge. In the input sections the same note sits inside a padded block
   (.vehicles-block / .fuel-energy-pricing-block), which insets it by the card
   padding — match that inset here. Logical property, so RTL follows. */
.tco-result-card > .vehicles-notes {
  margin-inline: var(--card-pad);
}

/* Verdict hero — the headline takeaway above the result cards. */
.tco-verdict-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-inline-start: 4px solid var(--color-header-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-top: var(--section-gap);
  overflow: hidden;
}
/* Left bar acts as a status stripe: Jade when the lifetime verdict is a saving,
   Flame when it costs more. Falls back to the default Aubergine bar when ~even. */
.tco-verdict-card--positive { border-inline-start-color: var(--jade); }
.tco-verdict-card--negative { border-inline-start-color: var(--flame); }
/* Header (title + verdict headline) sits above a full-width divider, like the cards */
.tco-verdict-header {
  padding: var(--card-pad);
  text-align: center;
}
/* Banner section title — same serif heading style as the other result cards */
.tco-verdict-title {
  margin: 0 0 var(--space-2) 0;
}
.tco-verdict-headline {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(20px, 2.4vw, 24px);   /* matches the .h4 heading scale used across the UI */
  line-height: 1.17;
  color: var(--color-text);
}
/* Number-led hero: the $ amount is the visual anchor — big, bold, colored by direction
   (Jade = savings, Flame = added cost). The lead/trail phrases stay at headline size. */
.tco-verdict-lead,
.tco-verdict-trail { display: block; }
.tco-verdict-amount {
  display: block;
  font-weight: 700;
  font-size: clamp(40px, 6vw, 60px);
  line-height: 1.05;
  margin: 6px 0;
  color: var(--color-text);
}
.tco-verdict-amount--positive { color: var(--jade); }
.tco-verdict-amount--negative { color: var(--flame); }
.tco-verdict-subline {
  margin-top: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px; /* guide: Text Small 14/20 */
  color: var(--color-text-muted);
}
/* KPI grid (banner body) — divided from the header by a full-width line, like the cards */
.tco-verdict-kpis {
  margin-top: 0;
  padding: var(--card-pad);
  border-top: 1px solid var(--color-border);
}

/* Bold the KPI / stat labels across the results */
#tco_results .form-label {
  font-weight: 700;
}

/* Expand / collapse all toolbar */
.tco-results-toolbar {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--section-gap);
}
.tco-toolbar-btn {
  background: none;
  border: 1px solid var(--color-btn);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-btn);
  cursor: pointer;
}
.tco-toolbar-btn:hover {
  background: color-mix(in srgb, var(--color-btn-hover) 10%, transparent);
  border-color: var(--color-btn-hover);
  color: var(--color-btn-hover);
}
.tco-toolbar-btn:focus-visible { outline: 2px solid var(--color-btn); outline-offset: 2px; }

/* -----------------------------
   LABELS
   ----------------------------- */
#your-cost-settings label,
#your-cost-settings .readonly-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--micro-gap) 0;
}

.label-subtext {
  margin: 0 0 var(--micro-gap) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 20px; /* guide: Text Small 14/20 */
  /* Reserves exactly one line so helper text appearing/disappearing doesn't
     shift the control below it — must track the line-height above. */
  min-height: 20px;
}

/* Notes callout (e.g. the Vehicles section guidance) */
.vehicles-notes {
  background: color-mix(in srgb, var(--color-header-bg) 8%, transparent);
  border-inline-start: 3px solid var(--color-header-bg);
  border-start-start-radius: 0;
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  border-end-start-radius: 0;
  padding: var(--space-3) var(--space-4);
}

/* Required field indicator */
label.label-required::after {
  content: " *";
  color: var(--flame);
  font-weight: 700;
}
/* -----------------------------
   INPUTS / SELECTS
   ----------------------------- */
#your-cost-settings input[type="text"],
#your-cost-settings input[type="number"],
#your-cost-settings select {
  width: 100%;
  height: var(--control-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
}

#your-cost-settings select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 40px;
}

/* Aubergine focus (shown only while the field is focused/typing) */
#your-cost-settings input[type="text"]:focus,
#your-cost-settings input[type="number"]:focus,
#your-cost-settings select:focus {
  border-color: var(--color-header-bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-header-bg) 20%, transparent);
}

/* -----------------------------
   READONLY VALUES
   ----------------------------- */
.readonly-row {
  display: grid;
  gap: var(--space-2);
  align-items: stretch;
}

.readonly-row > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.readonly-row > div > input,
.readonly-row > div > .form-control {
  margin-top: auto;
}

.readonly-value {
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  padding: 0 var(--control-pad-x);
  border-radius: var(--radius);
  background: rgba(230, 231, 231, 0.55);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-weight: 400;
}

/* KPI metric values stay neutral text — the save/cost color now lives only in the
   number-led verdict hero amount. The JS still sets .kpi-negative / .kpi-positive
   (and a visually-hidden screen-reader cue), but they intentionally carry no color. */

/* -----------------------------
   READONLY INPUTS
   ----------------------------- */
input.form-control-readonly[readonly],
input.form-control.form-control-readonly[readonly],
textarea.form-control-readonly[readonly],
textarea.form-control.form-control-readonly[readonly] {
  background: rgba(230, 231, 231, 0.55) !important;
  background-color: rgba(230, 231, 231, 0.55) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  cursor: default !important; /* changed from not-allowed */
  opacity: 1 !important;
}

input.form-control-readonly[readonly]:focus,
input.form-control.form-control-readonly[readonly]:focus,
textarea.form-control-readonly[readonly]:focus,
textarea.form-control.form-control-readonly[readonly]:focus {
  background: rgba(230, 231, 231, 0.55) !important;
  background-color: rgba(230, 231, 231, 0.55) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: default !important;
}

select.form-select[disabled],
select.form-select:disabled {
  background: rgba(230, 231, 231, 0.55) !important;
  background-color: rgba(230, 231, 231, 0.55) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  cursor: default !important;
  opacity: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  pointer-events: none !important;
}

/* -----------------------------
   MIX CHARGING SPLIT CONTROLS
   ----------------------------- */

.mix-rate-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.mix-rate-item span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* Keep number inputs aligned with your controls */
.mix-rate-item .form-control {
  height: var(--control-h);
  border-radius: var(--radius);
}

/* -----------------------------
   BUTTONS (scoped)
   ----------------------------- */

/* .tco-btn = shape + typography only. Color comes from .btn-brand / .btn-brand-outline. */
.tco-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;

  padding: 12px 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);

  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--tco-btn-w);
  max-width: 100%;
  margin: 0 auto;
}

button.tco-btn:disabled {
  cursor: not-allowed;
}

/* Primary button — Aubergine, hover/focus Lavender */
.btn-brand,
.btn-brand:visited {
  background-color: var(--color-btn);
  border: 1px solid var(--color-btn);
  color: var(--color-btn-text);
}

.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active,
.btn-brand:not(:disabled):not(.disabled):active {
  background-color: var(--color-btn-hover);
  border-color: var(--color-btn-hover);
  color: var(--color-btn-text);
}

.btn-brand:focus-visible {
  box-shadow: 0 0 0 4px rgba(119, 63, 140, 0.25);
  outline: none;
}

.btn-brand:disabled,
.btn-brand.disabled,
.btn-brand[disabled] {
  background-color: var(--color-btn-disabled-bg);
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  box-shadow: none;
  opacity: 1;
}

/* Secondary button — Aubergine outline, hover/focus Lavender */
.btn-brand-outline,
.btn-brand-outline:visited {
  background-color: transparent;
  border: 1px solid var(--color-btn);
  color: var(--color-btn);
}

.btn-brand-outline:hover,
.btn-brand-outline:focus,
.btn-brand-outline:active,
.btn-brand-outline:not(:disabled):not(.disabled):active {
  background-color: color-mix(in srgb, var(--color-btn-hover) 10%, transparent);
  border-color: var(--color-btn-hover);
  color: var(--color-btn-hover);
}

.btn-brand-outline:focus-visible {
  box-shadow: 0 0 0 4px rgba(119, 63, 140, 0.25);
  outline: none;
}

.btn-brand-outline:disabled,
.btn-brand-outline.disabled,
.btn-brand-outline[disabled] {
  background-color: transparent;
  border-color: var(--color-btn-disabled-bg);
  color: var(--color-btn-disabled-text);
  opacity: 1;
}

/* Modal close "✕" — tint Bootstrap's default to brand Aubergine (#773f8c).
   Scoped to the TCO modals so it can't leak to other pages' modals. */
#incentivePickerModal .btn-close,
#tcoCompareSwapModal .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23773f8c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  opacity: 1;
}
#incentivePickerModal .btn-close:hover,
#tcoCompareSwapModal .btn-close:hover {
  opacity: 0.7;
}

/* -----------------------------
   VALIDATION (Flame)
   ----------------------------- */
.validation-error {
  display: none;
  border: 1px solid var(--flame);
  background: transparent;
  color: var(--flame-70);
  padding: 12px 14px;
  border-radius: var(--radius);
  margin: 12px 0;
  font-size: 16px;   /* guide: Text Medium 16/24 */
  line-height: 24px;
  white-space: pre-wrap;
  font-weight: 700;
}

.is-invalid {
  border: 1px solid var(--flame) !important;
  outline: none;
  box-shadow: 0 0 0 4px rgba(242, 109, 43, 0.18);
  border-radius: var(--radius);
}

.field-error {
  margin-top: 4px;
  font-size: 14px; /* guide: Text Small */
  color: var(--flame-70);
  font-weight: 700;
}

#your-cost-settings input:focus:invalid,
#your-cost-settings select:focus:invalid,
#your-cost-settings textarea:focus:invalid {
  border: 1px solid var(--flame);
  outline: none;
  box-shadow: 0 0 0 4px rgba(242, 109, 43, 0.18);
}

/* -----------------------------
   TOGGLES (scoped so Bootstrap checkboxes still work)
   ----------------------------- */

/* Optional: remove Bootstrap reserved checkbox spacing for toggle rows */
#your-cost-settings .form-check:has(.tco-toggle) {
  padding-inline-start: 0;
}

/* Force-hide the real checkbox input for toggle switches (wins over Bootstrap) */
#your-cost-settings input.form-check-input.tco-toggle {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
}

/* Label becomes the visual control */
#your-cost-settings .tco-toggle + .form-check-label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  padding: 2px 0;

  position: relative;
  padding-inline-start: calc(var(--toggle-w) + 12px); /* room for switch */
}

/* Toggle track */
#your-cost-settings .tco-toggle + .form-check-label::before {
  content: "";
  width: var(--toggle-w);
  height: var(--toggle-h);
  border-radius: 999px;
  background: rgba(230, 231, 231, 0.9);
  border: 1px solid var(--color-border-strong);
  box-shadow: inset 0 0 0 1px rgba(23, 27, 36, 0.02);
  transition: all 160ms ease;

  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Toggle thumb */
#your-cost-settings .tco-toggle + .form-check-label::after {
  content: "";
  width: var(--toggle-thumb);
  height: var(--toggle-thumb);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(23, 27, 36, 0.18);

  position: absolute;
  inset-inline-start: 3px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 160ms ease;
}

/* Checked state */
#your-cost-settings .tco-toggle:checked + .form-check-label::before {
  background: var(--color-header-bg);
  border-color: var(--color-header-bg);
}

#your-cost-settings .tco-toggle:checked + .form-check-label::after {
  inset-inline-start: calc(var(--toggle-w) - var(--toggle-thumb) - 3px);
}

/* Focus state */
#your-cost-settings .tco-toggle:focus-visible + .form-check-label::before {
  box-shadow: 0 0 0 4px rgba(23, 27, 36, 0.12);
}

/* Disabled state */
#your-cost-settings .tco-toggle:disabled + .form-check-label {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -----------------------------
   RESULTS PAGE HELPERS
   ----------------------------- */
#tcoResultsContainer { margin-top: var(--space-6); }

.results-layout {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--card-pad);
}

/* -----------------------------
   CHART HELPERS
------------------------------ */
.chart {
  width: 100%;
  height: 340px; /* default chart height */
  position: relative;
}

.chart--tall {
  height: 420px;
}

.chart--short {
  height: 260px;
}

.table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  overflow: hidden; /* default */
}

/* Keep Result Summary card height stable */
#tco_result_summary_section .table-card {
  min-height: 520px;
  overflow: visible;
}

/* Scroll wrapper */
.table-scroll {
  overflow-x: auto;               /* keep horizontal scroll for years */
  overflow-y: hidden;             /* no vertical scroll */
  -webkit-overflow-scrolling: touch;
  border-radius: calc(var(--radius) - 2px);
}

/* Ensure touch scrolling works on mobile */
.tco-summary-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* Base table styling (shared) */
.tco-table,
.tco-results-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.tco-table thead th,
.tco-results-table thead th {
  background: var(--color-header-bg);
  color: #ffffff;
  text-align: start;
  padding: 12px 14px;
  font-weight: 700;
}

/* Round the header corners */
.tco-table thead th:first-child,
.tco-results-table thead th:first-child { border-start-start-radius: calc(var(--radius) - 2px); }
.tco-table thead th:last-child,
.tco-results-table thead th:last-child  { border-start-end-radius: calc(var(--radius) - 2px); }

.tco-table tbody td,
.tco-results-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(23, 27, 36, 0.10);
  color: var(--color-text);
}

.tco-table tbody tr:last-child td,
.tco-results-table tbody tr:last-child td { border-bottom: none; }

.tco-table tbody tr:hover td,
.tco-results-table tbody tr:hover td { background: color-mix(in srgb, var(--color-header-bg) 10%, transparent); }

/* Financing table row headers: measure label over its formula subtext (the old
   tile grid's subtexts, kept so the cost build-up stays auditable in table form).
   .tco-table only styles tbody td, so th[scope="row"] needs the same box or the
   two-line headers sit unpadded against browser defaults. */
#vehicleFinancingComparisonTable tbody th {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(23, 27, 36, 0.10);
  color: var(--color-text);
  font-weight: 700;
  text-align: start;
}
#vehicleFinancingComparisonTable tbody tr:last-child th { border-bottom: none; }
#vehicleFinancingComparisonTable tbody tr:hover th {
  background: color-mix(in srgb, var(--color-header-bg) 10%, transparent);
}
/* Layout only — the subtext keeps .label-subtext's own typography (14px/600,
   muted), exactly as the old tile grid rendered it. */
#vehicleFinancingComparisonTable tbody th .label-subtext {
  margin: 0;
  min-height: 0;
}

/* Centre the three value columns, matching the Compare summary table.
   Column widths here are driven by header length — "Clean (before incentives)" is far
   wider than "Baseline" — so start-aligned figures sat hard against the left of each
   column, leaving a narrow gap after Baseline and a wide one after Clean (before). The
   figures then read as unevenly spaced even though the columns are not.
   The Measure column keeps its start alignment: it is prose, not figures, and its header
   must stay flush with the row labels beneath it. */
#vehicleFinancingComparisonTable thead th:not(:first-child),
#vehicleFinancingComparisonTable tbody td {
  text-align: center;
}

/* Vehicle make and model under each column header. Same treatment as the Compare summary
   table: .label-subtext's muted grey is unreadable on the Aubergine header bar, so it is
   lightened and un-bolded here, and its reserved line height released — the header sizes
   to its own two lines. */
#vehicleFinancingComparisonTable thead th .label-subtext {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  margin: 0;
  min-height: 0;
}

/* The financing comparison table needed a rule here while it had a Difference column:
   hiding that column with display:none still satisfies :last-child, so the header bar's
   end corner radius had to be moved to the visually last cell. That column is gone, and
   "Clean (after incentives)" is now last and never hidden — only Baseline and
   "Clean (before incentives)" are ever hidden — so th:last-child above always lands on
   the visually last header cell and no override is needed. */

.section-header-row td {
  font-weight: 600;
  border-top: 2px solid #e7e7e7; /* Gray 100 */
}

.indent-row td:first-child {
  padding-inline-start: 32px;
}

.total-row td {
  border-top: 2px solid #e7e7e7; /* Gray 100 */
  font-weight: 600;
}

/* -----------------------------
   STICKY HEADER + STICKY FIRST 2 COLUMNS (tco-results-table only)
   ----------------------------- */
.tco-results-table {
  table-layout: fixed;
  width: max-content;
  min-width: 100%;
}

.tco-results-table th,
.tco-results-table td {
  white-space: nowrap;
}

/* Allow text to wrap in sticky columns so long names stay fully visible */
.tco-results-table td:nth-child(1),
.tco-results-table td:nth-child(2) {
  white-space: normal;
  word-break: break-word;
}

.tco-results-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-header-bg);
  color: #fff;
}

/* Lock widths */
.tco-results-table th:nth-child(1),
.tco-results-table td:nth-child(1) {
  width: var(--tco-col1);
  min-width: var(--tco-col1);
}

.tco-results-table th:nth-child(2),
.tco-results-table td:nth-child(2) {
  width: var(--tco-col2);
  min-width: var(--tco-col2);
}

/* Sticky col 1 (header + body) */
.tco-results-table th:nth-child(1),
.tco-results-table td:nth-child(1) {
  position: sticky;
  inset-inline-start: 0;
  z-index: 6;
}

/* Sticky col 2 (header + body) */
.tco-results-table th:nth-child(2),
.tco-results-table td:nth-child(2) {
  position: sticky;
  inset-inline-start: var(--tco-col1);
  z-index: 6;
}

/* Body sticky columns */
.tco-results-table tbody td:nth-child(1),
.tco-results-table tbody td:nth-child(2) {
  background: var(--color-surface);
  z-index: 4;
  font-weight: 700;
}

/* Keep sticky columns opaque on hover so scrolled values don't bleed through */
.tco-results-table tbody tr:hover td:nth-child(1),
.tco-results-table tbody tr:hover td:nth-child(2) {
  background: color-mix(in srgb, var(--color-header-bg) 10%, #ffffff);
}

/* Header sticky cells */
.tco-results-table thead th:nth-child(1),
.tco-results-table thead th:nth-child(2) {
  background: var(--color-header-bg);
  z-index: 7;
}

/* Separator after sticky columns */
.tco-results-table th:nth-child(2),
.tco-results-table td:nth-child(2) {
  box-shadow: 2px 0 0 rgba(23, 27, 36, 0.10);
}

/* -----------------------------
   RESULT SUMMARY FILTERS
   ----------------------------- */

/* Allow dropdowns to escape the card (prevents clipping) */
.tco-filters-card { overflow: visible; }

/* Filter layout */
.tco-results-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 720px) {
  .tco-results-filters {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
}

.tco-results-filters label { margin-bottom: var(--micro-gap); }

/* -----------------------------
   VANILLA MULTI-SELECT (scoped)
   ----------------------------- */
.tco-results-filters .filter-item {
  position: relative; /* anchors dropdown */
}

/* trigger button styled like your inputs/selects */
.tco-results-filters .ms-trigger {
  width: 100%;
  height: var(--control-h);
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.tco-results-filters .ms-trigger:focus {
  border-color: rgba(23, 27, 36, 0.45);
  box-shadow: 0 0 0 4px rgba(23, 27, 36, 0.10);
  outline: none;
}

.tco-results-filters .ms-caret{
  margin-inline-start: 10px;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}


/* dropdown panel */
.tco-results-filters .ms-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  z-index: 9999; /* above sticky table header */
  max-height: 320px;
  overflow: hidden;
}

/* actions row */
.tco-results-filters .ms-actions {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(23, 27, 36, 0.10);
}

.tco-results-filters .ms-action-btn {
  background: transparent;
  border: 1px solid var(--color-btn);
  color: var(--color-btn);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
}

.tco-results-filters .ms-action-btn:hover {
  background: color-mix(in srgb, var(--color-btn-hover) 10%, transparent);
  border-color: var(--color-btn-hover);
  color: var(--color-btn-hover);
}

/* options list */
.tco-results-filters .ms-options {
  max-height: 260px;
  overflow: auto;
  padding: 8px;
}

.tco-results-filters .ms-option {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}

.tco-results-filters .ms-option:hover {
  background: rgba(230, 231, 231, 0.35);
}

/* Show checkboxes inside the Result Summary filter dropdown */
.tco-results-filters .ms-option input[type="checkbox"] {
  position: static;
  opacity: 1;
  width: 16px;
  height: 16px;
  margin-inline-end: 10px;
  flex: 0 0 auto;
  pointer-events: auto;
  accent-color: var(--color-header-bg);
  cursor: pointer;
}

.tco-results-filters .ms-option span {
  flex: 1 1 auto;
}

/* -----------------------------
   RESPONSIVE
   ----------------------------- */
@media (min-width: 720px) {
  .readonly-row {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Cost Comparison Summary surfaces three totals (baseline + clean before/after
     incentives) when incentives apply. */
  .readonly-row--three {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .your-cost-settings-block,
  .vehicles-block,
  .vehicle-usage-lifecycle-block,
  .infrastructure-charger-block,
  .fuel-energy-pricing-block,
  .incentives-block,
  .chart-card,
  .table-card,
  .tco-verdict-header,
  .tco-verdict-kpis {
    padding: var(--space-4);
  }
  .tco-section-summary {
    padding: var(--space-3) var(--space-4);
    column-gap: var(--space-2);
  }
}

/* Responsive sticky column widths for small screens */
@media (max-width: 768px) {
  :root {
    --tco-col1: 140px;
    --tco-col2: 100px;
  }
}

@media (max-width: 480px) {
  :root {
    --tco-col1: 110px;
    --tco-col2: 85px;
  }
}

/* -----------------------------------------------
   INCENTIVE PICKER MODAL
   ----------------------------------------------- */

/* Filter row */
.incentive-picker-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .incentive-picker-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .incentive-picker-filters {
    grid-template-columns: 1fr;
  }
}

/* Scrollable results */
.incentive-picker-results {
  max-height: min(400px, 45vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Individual incentive item */
.incentive-picker-item {
  cursor: pointer;
  border-inline-start: 3px solid transparent;
  transition: border-color 120ms ease, background 120ms ease;
}

/* Checkbox inside picker items */
.incentive-picker-check {
  cursor: pointer;
  min-width: 1em;
  --bs-form-check-bg: #fff;
  border-color: #3c3c44; /* Gray 900 */
}

.incentive-picker-check:checked {
  background-color: var(--color-header-bg);
  border-color: var(--color-header-bg);
}

.incentive-picker-check:focus {
  border-color: var(--color-header-bg);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-header-bg) 25%, transparent);
}

.incentive-picker-item:hover:not(.disabled) {
  background: rgba(23, 27, 36, 0.04);
}

.incentive-picker-item.active,
.incentive-picker-item.active:focus,
.incentive-picker-item.active:hover {
  background: rgba(23, 27, 36, 0.06);
  color: var(--color-text);
  border-color: var(--color-border);
  border-inline-start-color: var(--color-header-bg);
}

.incentive-picker-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Amount badge */
.incentive-amount-badge {
  font-weight: 700;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-header-bg) 14%, #ffffff);
  color: var(--color-text);
  white-space: nowrap;
}

/* ---- Mobile / tablet adjustments ---- */

/* Full-screen modal on phones */
@media (max-width: 576px) {
  #incentivePickerModal .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
  }

  #incentivePickerModal .modal-content {
    border: 0;
    border-radius: 0;
    height: 100%;
  }

  /* Badge wraps on tiny screens */
  .incentive-amount-badge {
    white-space: normal;
    text-align: end;
    font-size: 14px;
  }

  /* Stack item layout vertically */
  .incentive-picker-item .d-flex {
    flex-direction: column;
  }

  .incentive-picker-item .incentive-amount-badge {
    margin-inline-start: 0;
    margin-top: 6px;
    align-self: flex-start;
  }

  /* Footer buttons full-width */
  #incentivePickerModal .modal-footer {
    flex-direction: column;
    gap: 8px;
  }

  #incentivePickerModal .modal-footer .btn {
    width: 100%;
  }
}


/* -----------------------------------------------
   INCENTIVE TABLE (compact layout)
   ----------------------------------------------- */

.incentive-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.incentive-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.incentive-table thead th {
  background: var(--color-header-bg);
  color: #fff;
  text-align: start;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.incentive-table thead th:first-child {
  border-start-start-radius: 8px;
}

.incentive-table thead th:last-child {
  border-start-end-radius: 8px;
}

/* Top-aligned, not middle: the Amount cell carries a hint line under its input
   ("Max incentive value: $20,300"), making that cell ~20px taller than the Name
   cell beside it. Centering pushed the shorter Name input down by half the
   difference, so the two boxes visibly failed to line up. Aligning to the top
   pins every control to the same baseline regardless of what sits beneath it. */
.incentive-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.incentive-table tbody tr:last-child td {
  border-bottom: none;
}

.incentive-table tbody tr:hover td {
  background: color-mix(in srgb, var(--color-header-bg) 10%, transparent);
}

.incentive-col-type    { width: 140px; }
.incentive-col-amount  { width: 230px; }
.incentive-col-actions { width: 44px; text-align: center; }

.incentive-type-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.incentive-type-vehicle {
  background: color-mix(in srgb, var(--color-header-bg) 14%, #ffffff);
  color: var(--color-text);
}

.incentive-type-charger {
  background: color-mix(in srgb, var(--color-header-bg) 14%, #ffffff);
  color: var(--color-text);
}

.incentive-table .form-control-sm {
  height: 32px;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 6px;
}

.incentive-table .form-select-sm {
  height: 32px;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 6px;
  width: 130px;
}

/* The row's controls are 32px, but the badge is only ~18px (12px text + 2px
   padding). Under top alignment it would sit flush with the top of the cell and
   read as floating above the inputs, so nudge it down by half the difference to
   centre it against them. */
.incentive-table .incentive-type-badge {
  margin-top: 7px;
}

/* Informational rows (non-dollar programs) show a readonly div where the other
   rows show an input. The shared .readonly-value is sized to the global 44px
   control height, which is taller than this table's 32px controls — match the
   table so those rows line up with the rest. */
.incentive-table .readonly-value {
  min-height: 32px;
}

.incentive-remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-btn);
  border-radius: 6px;
  background: transparent;
  color: var(--color-btn);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Hover stays Flame — this is a destructive (remove) action. */
.incentive-remove-btn:hover {
  background: rgba(242, 109, 43, 0.1);
  color: var(--flame);
  border-color: var(--flame-30);
}

.incentive-amount-hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 18px; /* guide: Text XSmall 12/18 */
}

.override-drift-hint.is-reserved {
  min-height: 1.2em;
}

.override-drift-hint.is-reserved:empty::before {
  content: "\00a0";
}

.incentive-picker-hint {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 8px 0;
}

.incentive-table .is-invalid {
  border: 1px solid var(--flame) !important;
  box-shadow: 0 0 0 3px rgba(242, 109, 43, 0.18);
}

.incentive-table .field-error {
  margin-top: 2px;
  font-size: 12px; /* guide: Text XSmall */
  color: var(--flame-70);
  font-weight: 700;
}

@media (max-width: 520px) {
  .incentive-table thead {
    display: none;
  }

  .incentive-table,
  .incentive-table tbody,
  .incentive-table tr,
  .incentive-table td {
    display: block;
    width: 100%;
  }

  .incentive-table tbody tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
  }

  .incentive-table tbody td {
    padding: 3px 0;
    border-bottom: none;
  }

  .incentive-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }

  /* Stacked layout: each cell renders its own ::before label, so the badge no
     longer sits beside a 32px input and the desktop centring nudge would just
     add a stray gap under the label. */
  .incentive-table .incentive-type-badge {
    margin-top: 0;
  }

  .incentive-col-type,
  .incentive-col-amount,
  .incentive-col-actions {
    width: 100%;
    text-align: start;
  }

  .incentive-col-actions {
    position: absolute;
    top: 10px;
    inset-inline-end: 0;
    width: auto;
  }
}

/* -----------------------------------------------
   COMPARE SIMILAR EVs
   ----------------------------------------------- */

/* Detailed-analysis buttons in the Comparison Summary table */
.tco-compare-detail-btn {
  white-space: nowrap;
}

/* Center the picker, chips, and run button as one column in the card */
#tco_compare_section #tcoCompareCandidatesBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Let the candidate dropdown escape the compare card instead of being clipped
   at the card edge (same fix as .tco-filters-card). */
#tco_compare_section details.tco-result-card,
#tco_compare_section .chart-card {
  overflow: visible;
}

/* Taller candidate list — ~8 options visible instead of 4, capped to the
   viewport so it never opens larger than the screen. */
#tco_compare_section .ms-menu {
  max-height: min(60vh, 480px);
}

#tco_compare_section .ms-options {
  max-height: min(56vh, 440px);
}

#tco_compare_section .tco-compare-picker-row {
  grid-template-columns: 1fr;
  width: 100%;
  max-width: 520px;
  margin-bottom: 0 !important;
}

#tco_compare_section .tco-compare-picker-row .filter-item > label {
  display: block;
  text-align: center;
}

#tco_compare_section .tco-compare-chips {
  justify-content: center;
  width: 100%;
  max-width: 640px;
}

#tco_compare_section .tco-compare-run-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Let the compare card's chart-card not clip the dropdown menu */
#tco_compare_section .chart-card { overflow: visible; }

.tco-compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
}

.tco-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--color-header-bg) 14%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--color-header-bg) 22%, transparent);
  border-radius: 999px;
  padding-block: 6px;
  padding-inline: 12px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  max-width: 100%;
}

.tco-compare-chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.tco-compare-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.tco-compare-chip-remove:hover {
  background: rgba(242, 109, 43, 0.15);
  color: var(--flame);
}

#tco_compare_section .tco-compare-summary-table {
  min-width: 480px;
}

#tco_compare_section .tco-compare-summary-table thead th,
#tco_compare_section .tco-compare-summary-table tbody td {
  text-align: center;
}

/* Column header sublabel needs to be readable on the dark header background */
#tco_compare_section .tco-compare-summary-table thead th .label-subtext {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}

#tco_compare_section .tco-compare-summary-table th[scope="row"] {
  font-weight: 700;
  background: rgba(23, 27, 36, 0.04);
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  text-align: center;
}

/* "View full TCO" button in the Detailed analysis row */
#tco_compare_section .tco-compare-detail-btn {
  white-space: nowrap;
  font-weight: 600;
}

.tco-compare-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-inline-end: 6px;
  vertical-align: middle;
}

.tco-compare-col-label {
  vertical-align: middle;
}

#tco_compare_section #tcoCompareCumulativeChart {
  width: 100%;
  height: 340px;
}

#tco_compare_section #tcoCompareRunBtn {
  min-height: 44px;
}

@media (max-width: 520px) {
  #tco_compare_section #tcoCompareRunBtn {
    width: 100%;
  }

  #tco_compare_section #tcoCompareCumulativeChart {
    height: 280px;
  }
}
/* -----------------------------
   AUTO-CALC STATUS + STALE RESULTS
   ----------------------------- */

/* Results dim while a recalculation is in flight (or the form went invalid
   after a render) so old numbers can never be mistaken for current ones. */
.tco-results-stale {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Neutral status strip where the Calculate button used to be. */
.tco-autocalc-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-border-strong, rgba(23, 27, 36, 0.22));
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted, #494443);
  font-size: 14px;
  font-weight: 600;
}

.tco-autocalc-status[hidden] {
  display: none;
}

.tco-status-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text, #171b24);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.tco-status-spinner {
  border: 3px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  animation: spin 1s linear infinite;
}

/* -----------------------------
   LANGUAGE SWITCHER
   ----------------------------- */
/* Fixed at the top-start corner of the header (Bootstrap position-fixed
   utilities in the markup). Layer it above the fixed header buttons (which
   carry no explicit z-index) and the sticky results-table cells (z 5-7),
   while staying below Bootstrap's modal layer (1050+) and the loading
   overlay (5000). Neutral chrome only — the control is a stock .form-select. */
/* Language switcher + Report an Issue, pinned together as one group above the
   page content (below modals at 1050+ and the loading overlay at 5000). */
/* Hidden by default and revealed only for the standalone tool. Default-hidden
   rather than default-shown so an embedded page cannot paint these controls
   before the inline head script has had a chance to classify the page — an
   embed takes its language from the host, so a picker here would be wrong. */
.tco-page-controls {
  display: none;
}

.tco-standalone .tco-page-controls {
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  /* The Report label is much longer in some locales ("Сообщить о проблеме").
     Wrapping the pair onto a second line is acceptable; running off the edge
     of a narrow screen is not. */
  flex-wrap: wrap;
  max-width: calc(100vw - 2 * var(--space-3));
}

/* Globe + language name read as a single control: the wrapper carries the
   chrome and the select goes borderless inside it. Logical properties only, so
   the pair mirrors under RTL along with the rest of .tco-page-controls.
   NB: this styles the inside of the switcher only — visibility is still owned
   entirely by .tco-page-controls / .tco-standalone above, so embeds are
   unaffected. */
.tco-lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline-start: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Focus ring belongs on the whole control, not the stripped inner select. */
.tco-lang-switcher:focus-within {
  outline: 2px solid var(--color-header-bg);
  outline-offset: 1px;
}

.tco-lang-globe {
  inline-size: 15px;
  block-size: 15px;
  flex: none;
  color: var(--color-text-muted);
}

.tco-lang-switcher .form-select {
  width: auto;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  padding-inline-start: var(--space-1);
}

/* -----------------------------
   RTL OVERRIDES (Arabic / Farsi)
   ----------------------------- */
/* The page sets dir="rtl" on <html> for ar/fa and swaps in Bootstrap's RTL
   build. Everything direction-dependent above already uses logical
   properties and mirrors automatically; the rules below hand-flip the few
   spots where a physical coordinate is part of a drawn shape or effect. */

/* The custom <select> caret is painted with physical background-position
   coordinates (12-24px in from the trailing edge in LTR). Mirror it to the
   left edge so it sits inside the padding-inline-end gutter reserved for it.
   Layer order matches the two background-image gradients: the 45deg stroke
   stays the left half of the "v", the 135deg stroke the right half. */
[dir="rtl"] #your-cost-settings select {
  background-position:
    12px 50%,
    18px 50%;
}

/* The separator edge after the two sticky columns is a box-shadow x-offset;
   flip its sign so the line draws on the scrolling (trailing) side of
   column 2, which is its left side under RTL. */
[dir="rtl"] .tco-results-table th:nth-child(2),
[dir="rtl"] .tco-results-table td:nth-child(2) {
  box-shadow: -2px 0 0 rgba(23, 27, 36, 0.10);
}

/* Arabic and Farsi are cursive scripts — tracking (the headings' -2% brand
   letter-spacing, the loading indicator's 4px spread) visually breaks the
   joins between letters. Reset to normal under RTL. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] body,
[dir="rtl"] #your-cost-settings .h4,
[dir="rtl"] #your-cost-settings .h5,
[dir="rtl"] .tco-intro-card-title,
[dir="rtl"] .tco-verdict-headline {
  letter-spacing: normal;
}

[dir="rtl"] .loading-indicator {
  letter-spacing: normal;
}

/* Latin unit tokens ($/mile, $/kWh, MPG, MPGe) inside Arabic/Farsi text are a
   bidi hazard: the Unicode algorithm reorders the neutral characters around
   them ("$/mile)" can surface as "(mile/$"). Isolating each unit run gives it
   its own embedding level, so it renders left-to-right internally while still
   sitting at the correct position in the RTL line. This is the markup-level
   fix; catalog strings must NOT carry LRM/RLM control characters.
   The JS-populated unit spans are matched by their id suffix; .tco-ltr-unit is
   for units written into markup directly. */
[id$="_unit"],
.tco-ltr-unit {
  unicode-bidi: isolate;
  direction: ltr;
}

/* .tco-page-controls is fixed in the trailing corner, so page content needs
   room to clear it. This used to be a narrow-screen-only allowance, because the
   heading was centred and never reached that far out. The intro card now
   occupies the trailing column at every width and runs under the controls
   without this, so the allowance applies at all widths; the larger values below
   cover the controls wrapping onto a second line where a locale's Report label
   is long.

   Scoped to .tco-standalone: an embedded page has no fixed controls, so this
   allowance would just be dead space above the heading. */
.tco-standalone #your-cost-settings {
  padding-top: 64px;
}

@media (max-width: 640px) {
  .tco-standalone #your-cost-settings {
    padding-top: 64px;
  }
}

@media (max-width: 400px) {
  .tco-standalone #your-cost-settings {
    padding-top: 104px;
  }
}