/* Roberin The New — quieter EV/ICE semantic treatment 20260710h */
.tn-car-cost-page {
  --tn-car-ev-ink: #345f55;
  --tn-car-ev-line: #86aaa0;
  --tn-car-ev-wash: rgba(134, 170, 160, .16);
  --tn-car-ev-fill: #5d897d;
  --tn-car-ice-ink: #76502e;
  --tn-car-ice-line: #c19b72;
  --tn-car-ice-wash: rgba(193, 155, 114, .18);
  --tn-car-ice-fill: #94683d;
}

.tn-car-cost-page .tn-car-cost-group[data-tn-vehicle],
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle] {
  position: relative;
  outline: 0 !important;
  box-shadow: none !important;
}

.tn-car-cost-page .tn-car-cost-group[data-tn-vehicle] {
  border: 0;
  padding: 12px;
  margin-top: 12px;
}

.tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"],
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"] {
  background: var(--tn-car-ev-wash) !important;
}

.tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"],
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"] {
  background: var(--tn-car-ice-wash) !important;
}

.tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"] .tn-car-cost-group-title,
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"] span,
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"] strong {
  color: var(--tn-car-ev-ink);
  -webkit-text-fill-color: var(--tn-car-ev-ink);
}

.tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"] .tn-car-cost-group-title,
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"] span,
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"] strong {
  color: var(--tn-car-ice-ink);
  -webkit-text-fill-color: var(--tn-car-ice-ink);
}

.tn-car-cost-page .tn-car-cost-group-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tn-car-cost-page .tn-car-cost-group-title::before,
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle] span::before,
.tn-car-cost-page #carCostVisual[data-tn-visual-map="ev-then-ice"] .tn-car-cost-visual-row span::before {
  content: '';
  display: inline-block;
  width: .58em;
  height: .58em;
  margin-right: .45em;
  border: 1px solid currentColor;
  background: transparent;
  vertical-align: -.01em;
}

.tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"] .tn-car-cost-group-title::before,
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"] span::before,
.tn-car-cost-page #carCostVisual[data-tn-visual-map="ev-then-ice"] section .tn-car-cost-visual-row:nth-of-type(1) span::before {
  border-radius: 50%;
  background: currentColor;
}

.tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"] .tn-car-cost-group-title::before,
.tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"] span::before,
.tn-car-cost-page #carCostVisual[data-tn-visual-map="ev-then-ice"] section .tn-car-cost-visual-row:nth-of-type(2) span::before {
  transform: rotate(45deg);
}

.tn-car-cost-page .tn-car-cost-group-title::before {
  margin-right: 0;
}

.tn-car-cost-page #carCostVisual[data-tn-visual-map="ev-then-ice"] .tn-car-cost-visual-row {
  outline: 0 !important;
  box-shadow: none !important;
  padding: 4px 5px;
}

.tn-car-cost-page #carCostVisual[data-tn-visual-map="ev-then-ice"] section .tn-car-cost-visual-row:nth-of-type(1) {
  background: var(--tn-car-ev-wash) !important;
  color: var(--tn-car-ev-ink);
  -webkit-text-fill-color: var(--tn-car-ev-ink);
}

.tn-car-cost-page #carCostVisual[data-tn-visual-map="ev-then-ice"] section .tn-car-cost-visual-row:nth-of-type(2) {
  background: var(--tn-car-ice-wash) !important;
  color: var(--tn-car-ice-ink);
  -webkit-text-fill-color: var(--tn-car-ice-ink);
}

.tn-car-cost-page #carCostVisual[data-tn-visual-map="ev-then-ice"] section .tn-car-cost-visual-row:nth-of-type(1) b {
  background: var(--tn-car-ev-fill) !important;
}

.tn-car-cost-page #carCostVisual[data-tn-visual-map="ev-then-ice"] section .tn-car-cost-visual-row:nth-of-type(2) b {
  background: var(--tn-car-ice-fill) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .tn-car-cost-page,
body[data-scheme="auto"][data-l="dark"] .tn-car-cost-page,
body[data-scheme="auto"][data-d="dark"] .tn-car-cost-page,
html:is([data-scheme="dark"], [data-scheme="inverse"]) body:not([data-scheme="light"]) .tn-car-cost-page {
  --tn-car-ev-ink: #b7d8cf;
  --tn-car-ev-line: #739b91;
  --tn-car-ev-wash: rgba(115, 155, 145, .18);
  --tn-car-ev-fill: #9fc8bc;
  --tn-car-ice-ink: #e0bd94;
  --tn-car-ice-line: #a8835c;
  --tn-car-ice-wash: rgba(168, 131, 92, .19);
  --tn-car-ice-fill: #d4ad82;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"],
body:is([data-scheme="dark"], [data-scheme="inverse"]) .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"],
body[data-scheme="auto"][data-l="dark"] .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"],
body[data-scheme="auto"][data-l="dark"] .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"],
body[data-scheme="auto"][data-d="dark"] .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"],
body[data-scheme="auto"][data-d="dark"] .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"],
html:is([data-scheme="dark"], [data-scheme="inverse"]) body:not([data-scheme="light"]) .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"],
html:is([data-scheme="dark"], [data-scheme="inverse"]) body:not([data-scheme="light"]) .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"] {
  background: var(--tn-car-ev-wash) !important;
}

body:is([data-scheme="dark"], [data-scheme="inverse"]) .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"],
body:is([data-scheme="dark"], [data-scheme="inverse"]) .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"],
body[data-scheme="auto"][data-l="dark"] .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"],
body[data-scheme="auto"][data-l="dark"] .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"],
body[data-scheme="auto"][data-d="dark"] .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"],
body[data-scheme="auto"][data-d="dark"] .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"],
html:is([data-scheme="dark"], [data-scheme="inverse"]) body:not([data-scheme="light"]) .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"],
html:is([data-scheme="dark"], [data-scheme="inverse"]) body:not([data-scheme="light"]) .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"] {
  background: var(--tn-car-ice-wash) !important;
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .tn-car-cost-page,
  html[data-scheme="auto"] body:not([data-scheme="light"]) .tn-car-cost-page {
    --tn-car-ev-ink: #b7d8cf;
    --tn-car-ev-line: #739b91;
    --tn-car-ev-wash: rgba(115, 155, 145, .18);
    --tn-car-ev-fill: #9fc8bc;
    --tn-car-ice-ink: #e0bd94;
    --tn-car-ice-line: #a8835c;
    --tn-car-ice-wash: rgba(168, 131, 92, .19);
    --tn-car-ice-fill: #d4ad82;
  }

  body[data-scheme="auto"] .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"],
  body[data-scheme="auto"] .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"],
  html[data-scheme="auto"] body:not([data-scheme="light"]) .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ev"],
  html[data-scheme="auto"] body:not([data-scheme="light"]) .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ev"] {
    background: var(--tn-car-ev-wash) !important;
  }

  body[data-scheme="auto"] .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"],
  body[data-scheme="auto"] .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"],
  html[data-scheme="auto"] body:not([data-scheme="light"]) .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle="ice"],
  html[data-scheme="auto"] body:not([data-scheme="light"]) .tn-car-cost-page .tn-car-cost-total[data-tn-vehicle="ice"] {
    background: var(--tn-car-ice-wash) !important;
  }
}

@media (max-width: 640px) {
  .tn-car-cost-page .tn-car-cost-group[data-tn-vehicle] {
    padding: 10px;
  }
}