.tn-car-cost-page,
.tn-car-cost-page * { box-sizing: border-box; }

.tn-car-cost-page {
  --tn-ink: #1a1208;
  --tn-muted: #5a4a30;
  --tn-line: #b8a888;
  --tn-soft-line: #ddd4be;
  --tn-paper: #faf6ee;
  --tn-wash: #f5efdf;
  --tn-button: #ede6d4;
  --tn-button-hover: #dfd4bb;
  --tn-accent: #c44a00;
  color: var(--tn-ink);
}

.tn-car-cost-tool {
  width: 100%;
  margin: 0 auto;
  border-top: 2px solid var(--tn-ink);
  border-bottom: 1px solid var(--tn-line);
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(245,239,223,.82));
  color: var(--tn-ink);
  padding: 14px;
  font-family: Georgia, 'Times New Roman', serif;
}

.tn-car-cost-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 12px; align-items: stretch; }
.tn-car-cost-pane { border: 1px solid var(--tn-line); background: rgba(250,246,238,.86); padding: 12px; min-width: 0; }
.tn-car-cost-pane-label { margin: 0 0 10px; font: 700 12px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--tn-muted); }
.tn-car-cost-assumptions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tn-car-cost-group { border-top: 1px solid var(--tn-soft-line); padding-top: 10px; margin-top: 10px; }
.tn-car-cost-group-title { margin: 0 0 8px; font: 700 15px/1.25 Georgia, 'Times New Roman', serif; color: var(--tn-ink); }
.tn-car-cost-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-car-cost-field { display: grid; gap: 4px; min-width: 0; }
.tn-car-cost-field span { font: 700 12px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tn-muted); overflow-wrap: anywhere; }
.tn-car-cost-input-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border: 1px solid var(--tn-line); background: var(--tn-paper); min-height: 40px; }
.tn-car-cost-input-wrap input { width: 100%; border: 0; background: transparent; color: var(--tn-ink); -webkit-text-fill-color: var(--tn-ink); padding: 9px 8px; font: 700 15px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; min-width: 0; }
.tn-car-cost-input-wrap input::placeholder { color: rgba(90,74,48,.55); -webkit-text-fill-color: rgba(90,74,48,.55); }
.tn-car-cost-input-wrap b { display: inline-flex; align-items: center; border-left: 1px solid var(--tn-soft-line); border-bottom: 1px solid var(--tn-soft-line); padding: 0 7px; color: var(--tn-muted); background: var(--tn-wash); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.tn-car-cost-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; align-items: stretch; }
.tn-car-cost-actions button { min-height: 40px; height: 40px; border: 1px solid var(--tn-line); background: var(--tn-button); color: var(--tn-ink); -webkit-text-fill-color: var(--tn-ink); font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; text-align: center; display: inline-flex; align-items: center; justify-content: center; width: 100%; }
.tn-car-cost-actions button:hover,
.tn-car-cost-actions button:focus-visible { background: var(--tn-button-hover); outline: none; }
.tn-car-cost-actions button:disabled { opacity: .52; cursor: not-allowed; color: var(--tn-muted); -webkit-text-fill-color: var(--tn-muted); }
.tn-car-cost-actions button:focus-visible,
.tn-car-cost-input-wrap input:focus-visible { outline: 2px solid var(--tn-accent); outline-offset: 2px; }
.tn-car-cost-result-card { border: 1px double var(--tn-line); background: var(--tn-paper); padding: 12px; margin-bottom: 10px; }
.tn-car-cost-result-card > span { display: block; font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tn-muted); margin-bottom: 8px; }
.tn-car-cost-result-card strong { display: block; font-size: clamp(24px, 4vw, 42px); line-height: 1.02; letter-spacing: -.04em; overflow-wrap: anywhere; }
.tn-car-cost-result-card p { margin: 8px 0 0; color: var(--tn-muted); font-size: 14px; line-height: 1.45; }
.tn-car-cost-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-car-cost-total { border: 1px solid var(--tn-soft-line); background: rgba(245,239,223,.72); padding: 9px; min-width: 0; }
.tn-car-cost-total span { display: block; font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tn-muted); margin-bottom: 5px; }
.tn-car-cost-total strong { display: block; font: 800 18px/1.12 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.tn-car-cost-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.tn-car-cost-breakdown { border-top: 1px solid var(--tn-soft-line); margin-top: 10px; padding-top: 8px; }
.tn-car-cost-breakdown div { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid rgba(184,168,136,.28); font: 700 12px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tn-car-cost-breakdown span { color: var(--tn-muted); overflow-wrap: anywhere; }
.tn-car-cost-status { min-height: 18px; margin: 8px 0 0; color: var(--tn-muted); -webkit-text-fill-color: var(--tn-muted); font: 700 12px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tn-car-cost-page .tn-car-cost-tool ul,
.tn-car-cost-page .tn-car-cost-tool ol,
.tn-car-cost-page .tn-car-cost-tool li,
.tn-car-cost-page .tn-article-panel ul,
.tn-car-cost-page .tn-article-panel ol,
.tn-car-cost-page .tn-article-panel li { list-style: none; padding-left: 0; margin-left: 0; }
.tn-car-cost-page .tn-article-list { display: grid; gap: 5px; margin: 10px 0 0; }
.tn-car-cost-page .tn-article-list li { border-left: 2px solid var(--tn-line); padding-left: 8px; }
.tn-car-cost-page .tn-source-note { margin: 12px 0 8px; color: var(--tn-muted); font-size: 13px; }
.tn-car-cost-page .tn-worked-ledger { display: grid; gap: 6px; margin: 10px 0 0; }
.tn-car-cost-page .tn-worked-ledger div { display: grid; grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); gap: 10px; align-items: baseline; border-bottom: 1px solid var(--tn-soft-line); padding: 5px 0; }
.tn-car-cost-page .tn-worked-ledger dt { color: var(--tn-muted); font: 700 12px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tn-car-cost-page .tn-worked-ledger dd { margin: 0; color: var(--tn-ink); font: 700 13px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

body[data-scheme="dark"] .tn-car-cost-page,
body[data-scheme="inverse"] .tn-car-cost-page {
  --tn-ink: #f3e7d3;
  --tn-muted: #cdbf9d;
  --tn-line: #796b50;
  --tn-soft-line: #5e523d;
  --tn-paper: #211a13;
  --tn-wash: #2c2319;
  --tn-button: #3a2e20;
  --tn-button-hover: #493a28;
  --tn-accent: #ffb36b;
}
body[data-scheme="dark"] .tn-car-cost-tool,
body[data-scheme="inverse"] .tn-car-cost-tool { background: linear-gradient(135deg, rgba(33,26,19,.94), rgba(44,35,25,.9)); }
body[data-scheme="dark"] .tn-car-cost-input-wrap input,
body[data-scheme="inverse"] .tn-car-cost-input-wrap input { color: var(--tn-ink); -webkit-text-fill-color: var(--tn-ink); }
body[data-scheme="dark"] .tn-car-cost-actions .tn-car-cost-primary,
body[data-scheme="inverse"] .tn-car-cost-actions .tn-car-cost-primary {
  background: #6a3b1f;
  border-color: #6a3b1f;
  color: #f7ead1;
  -webkit-text-fill-color: #f7ead1;
}
body[data-scheme="dark"] .tn-car-cost-actions .tn-car-cost-primary:hover,
body[data-scheme="dark"] .tn-car-cost-actions .tn-car-cost-primary:focus-visible,
body[data-scheme="inverse"] .tn-car-cost-actions .tn-car-cost-primary:hover,
body[data-scheme="inverse"] .tn-car-cost-actions .tn-car-cost-primary:focus-visible {
  background: #824826;
  border-color: #824826;
  color: #f7ead1;
  -webkit-text-fill-color: #f7ead1;
}
body[data-scheme="dark"] .tn-car-cost-actions .tn-car-cost-secondary,
body[data-scheme="inverse"] .tn-car-cost-actions .tn-car-cost-secondary {
  background: #2f2115;
  border-color: #826744;
  color: #f7ead1;
  -webkit-text-fill-color: #f7ead1;
}
body[data-scheme="dark"] .tn-car-cost-actions .tn-car-cost-secondary:hover,
body[data-scheme="dark"] .tn-car-cost-actions .tn-car-cost-secondary:focus-visible,
body[data-scheme="inverse"] .tn-car-cost-actions .tn-car-cost-secondary:hover,
body[data-scheme="inverse"] .tn-car-cost-actions .tn-car-cost-secondary:focus-visible {
  background: #3a2a1b;
  border-color: #826744;
  color: #f7ead1;
  -webkit-text-fill-color: #f7ead1;
}
body[data-scheme="dark"] .tn-car-cost-actions button:disabled,
body[data-scheme="inverse"] .tn-car-cost-actions button:disabled {
  color: #f7ead1;
  -webkit-text-fill-color: #f7ead1;
}

@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"] .tn-car-cost-page {
    --tn-ink: #f3e7d3; --tn-muted: #cdbf9d; --tn-line: #796b50; --tn-soft-line: #5e523d; --tn-paper: #211a13; --tn-wash: #2c2319; --tn-button: #3a2e20; --tn-button-hover: #493a28; --tn-accent: #ffb36b;
  }
  body[data-scheme="auto"] .tn-car-cost-tool { background: linear-gradient(135deg, rgba(33,26,19,.94), rgba(44,35,25,.9)); }
  body[data-scheme="auto"] .tn-car-cost-input-wrap input { color: var(--tn-ink); -webkit-text-fill-color: var(--tn-ink); }
  body[data-scheme="auto"] .tn-car-cost-actions .tn-car-cost-primary { background: #6a3b1f; border-color: #6a3b1f; color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
  body[data-scheme="auto"] .tn-car-cost-actions .tn-car-cost-primary:hover,
  body[data-scheme="auto"] .tn-car-cost-actions .tn-car-cost-primary:focus-visible { background: #824826; border-color: #824826; color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
  body[data-scheme="auto"] .tn-car-cost-actions .tn-car-cost-secondary { background: #2f2115; border-color: #826744; color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
  body[data-scheme="auto"] .tn-car-cost-actions .tn-car-cost-secondary:hover,
  body[data-scheme="auto"] .tn-car-cost-actions .tn-car-cost-secondary:focus-visible { background: #3a2a1b; border-color: #826744; color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
  body[data-scheme="auto"] .tn-car-cost-actions button:disabled { color: #f7ead1; -webkit-text-fill-color: #f7ead1; }
}

@media (max-width: 760px) {
  .tn-car-cost-tool { padding: 10px; }
  .tn-car-cost-grid { grid-template-columns: 1fr; gap: 10px; }
  .tn-car-cost-fields,
  .tn-car-cost-assumptions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .tn-car-cost-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .tn-car-cost-tool { width: 100%; padding: 8px; }
  .tn-car-cost-pane { padding: 9px; }
  .tn-car-cost-breakdown div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

@media (max-width: 360px) {
  .tn-car-cost-input-wrap b { white-space: normal; max-width: 78px; text-align: center; }
}