.otd-tool,
.otd-sheet {
    --otd-ink: #1a202c;
    --otd-muted: #3d5470;
    --otd-paper: #e4f1f5;
    --otd-card: #ffffff;
    --otd-line: #d1e7f0;
    --otd-navy: #022345;
    --otd-sky: #a4dff5;
    --otd-fair: #0d6b4c;
    --otd-fair-bg: #e7f6ef;
    --otd-neg: #8a5600;
    --otd-neg-bg: #fff3d6;
    --otd-bad: #9d1c1c;
    --otd-bad-bg: #fde8e4;
    --otd-inc: #334155;
    --otd-inc-bg: #e8eef6;
    --otd-yellow: #6b5420;
    --otd-yellow-bg: #fbf6e8;
    color: var(--otd-ink);
    font-family: Lato, Inter, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 1080px;
    margin: 0 auto 2rem;
    background: var(--otd-paper);
    border: 1px solid var(--otd-line);
    border-radius: 18px;
    padding: 1.25rem 1rem 1.5rem;
}

.otd-tool * { box-sizing: border-box; }
.otd-kicker { margin: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; color: var(--otd-navy); font-weight: 700; }
.otd-intro h2, .otd-sheet > h2 { font-family: Inter, system-ui, sans-serif; color: var(--otd-navy); font-weight: 800; font-size: 1.8rem; line-height: 1.15; margin: 0.2rem 0 0.4rem; }
.otd-intro p { margin: 0; color: var(--otd-muted); }
.otd-examples { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.otd-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.otd-span { grid-column: 1 / -1; }
.otd-tool fieldset { border: 0; padding: 0; margin: 1.25rem 0; }
.otd-tool legend { font-weight: 700; margin-bottom: 0.6rem; color: var(--otd-navy); font-family: Inter, system-ui, sans-serif; }
.otd-tool label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.92rem; font-weight: 600; }
.otd-tool input, .otd-tool select, .otd-tool textarea {
    font: inherit; font-weight: 400; color: var(--otd-ink);
    background: var(--otd-card); border: 1px solid var(--otd-line); border-radius: 10px;
    padding: 0.7rem 0.75rem; width: 100%; min-height: 44px;
}
.otd-tool textarea { min-height: 8rem; }
.otd-tool input:focus, .otd-tool select:focus, .otd-tool textarea:focus { outline: 2px solid var(--otd-sky); outline-offset: 1px; border-color: var(--otd-navy); }
.otd-checks { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 0.75rem; }
.otd-checks label, .otd-line-flags label { flex-direction: row; align-items: center; font-weight: 500; }
.otd-checks input, .otd-line-flags input { width: auto; min-height: 0; }
.otd-inline { display: flex; gap: 0.5rem; }
.otd-inline input { flex: 1; }
.otd-primary, .otd-secondary, .otd-text {
    font: inherit; cursor: pointer; border-radius: 999px; min-height: 44px; padding: 0.65rem 1rem;
}
.otd-mode { display: flex; gap: 0.4rem; margin: 0 0 1rem; }
.otd-mode-btn { flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid var(--otd-line); background: var(--otd-card); color: var(--otd-navy); font: inherit; font-weight: 700; cursor: pointer; }
.otd-mode-btn[aria-pressed="true"] { background: var(--otd-navy); color: #fff; border-color: var(--otd-navy); }
.otd-tool:not(.is-dealer) .otd-dealer-only { display: none; }
.otd-tool.is-dealer .otd-buyer-only { display: none; }
.otd-dealer-fields, .otd-addon-row { display: grid; gap: 0.45rem; }
.otd-addon-row { grid-template-columns: 1.2fr 0.7fr auto auto; align-items: center; margin: 0.4rem 0; }
.otd-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.otd-tips, .otd-desk, .otd-doc-note { color: var(--otd-muted); }
.otd-tips h3 { margin: 0.6rem 0 0.2rem; font-size: 1rem; }
.otd-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.otd-brand img { width: 40px; height: 40px; object-fit: contain; }
.otd-powered { font-size: 0.85rem; }
.otd-primary { background: var(--otd-navy); color: #fff; border: 0; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.otd-primary:hover { background: #033566; }
.otd-secondary, button.otd-example { background: transparent; border: 1px solid var(--otd-line); color: var(--otd-navy); }
button.otd-example { border-radius: 999px; min-height: 44px; padding: 0.4rem 0.8rem; background: var(--otd-card); cursor: pointer; font-weight: 700; }
button.otd-example:hover { background: var(--otd-sky); border-color: var(--otd-sky); }
/* Worked-example table: shares the class name with the example pills above, so keep it square-ish and unclipped. */
table.otd-example { border-radius: 8px; border: 1px solid var(--otd-line); border-collapse: separate; border-spacing: 0; max-width: 100%; }
table.otd-example th, table.otd-example td { overflow-wrap: anywhere; }
table.otd-example td { white-space: nowrap; text-align: right; }
@media (max-width: 480px) { table.otd-example th, table.otd-example td { padding: 8px 6px; font-size: .85rem; } }
.otd-text { background: transparent; border: 0; color: var(--otd-bad); padding-left: 0; }
.otd-primary:disabled { opacity: 0.6; }
.otd-optional { font-weight: 500; color: var(--otd-muted); }
.otd-note, .otd-disclaimer, .otd-form-error { color: var(--otd-muted); font-size: 0.92rem; }
.otd-form-error { color: var(--otd-bad); }
.otd-stack textarea { margin-top: 0.25rem; }
.otd-line, .otd-map-line {
    background: var(--otd-card); border: 1px solid var(--otd-line); border-radius: 12px;
    padding: 0.75rem; margin-bottom: 0.6rem; display: grid; gap: 0.55rem;
}
.otd-line-flags { display: flex; flex-direction: column; gap: 0.35rem; }
.otd-result, .otd-sheet { margin-top: 1.25rem; }
.otd-verdict { border-radius: 16px; padding: 1rem; margin-bottom: 1rem; }
.otd-verdict strong { font-family: Inter, system-ui, sans-serif; font-size: 2rem; display: block; line-height: 1; }
.otd-verdict-fair { background: var(--otd-fair-bg); color: var(--otd-fair); }
.otd-verdict-negotiable { background: var(--otd-neg-bg); color: var(--otd-neg); }
.otd-verdict-overcharged { background: var(--otd-bad-bg); color: var(--otd-bad); }
.otd-verdict-incomplete { background: var(--otd-inc-bg); color: var(--otd-inc); }
.otd-numbers { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin: 0.8rem 0; }
.otd-numbers div { background: var(--otd-card); border-radius: 12px; padding: 0.75rem; }
.otd-numbers span { display: block; color: var(--otd-muted); font-size: 0.8rem; }
.otd-numbers b { font-variant-numeric: tabular-nums; font-size: 1.35rem; }
.otd-flag { list-style: none; margin: 0 0 0.6rem; padding: 0.75rem; border-radius: 12px; background: var(--otd-card); }
.otd-flags { margin: 0; padding: 0; }
.otd-flag-red { background: var(--otd-bad-bg); }
.otd-flag-orange { background: var(--otd-neg-bg); }
.otd-flag-yellow { background: var(--otd-yellow-bg); }
.otd-flag-green { background: var(--otd-fair-bg); }
.otd-flag a { color: inherit; }
.otd-slider { width: 100%; }
.otd-script { width: 100%; min-height: 9rem; }
.otd-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.otd-sheet-group { background: var(--otd-card); border-radius: 12px; margin: 0.6rem 0; padding: 0.4rem 0.8rem 0.8rem; }
.otd-sheet-group summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.otd-sheet-head { display: none; }
.otd-sheet-row { display: grid; gap: 0.2rem; padding: 0.7rem 0; border-top: 1px solid var(--otd-line); }
.otd-sheet-row small, .otd-flag small { display: block; color: var(--otd-muted); font-weight: 400; }
.otd-sheet-row span[data-label]::before { content: attr(data-label) ": "; color: var(--otd-muted); font-weight: 500; }
.otd-compare-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.otd-compare-table th, .otd-compare-table td { border-bottom: 1px solid var(--otd-line); padding: 0.45rem; text-align: left; vertical-align: top; }
.otd-best { background: var(--otd-fair-bg); }
.otd-warning { background: var(--otd-yellow-bg); border-radius: 12px; padding: 0.75rem; }

@media (min-width: 720px) {
    .otd-tool { padding: 1.5rem 1.5rem 2rem; }
    .otd-grid { grid-template-columns: 1fr 1fr; }
    .otd-numbers { grid-template-columns: repeat(3, 1fr); }
    .otd-line { grid-template-columns: 1.2fr 1fr 0.7fr; }
    .otd-line-flags, .otd-line .otd-text { grid-column: 1 / -1; }
    .otd-sheet-head, .otd-sheet-row { grid-template-columns: 1.4fr 0.8fr 0.7fr 0.9fr; gap: 0.6rem; }
    .otd-sheet-head { display: grid; font-size: 0.78rem; color: var(--otd-muted); padding-top: 0.4rem; }
    .otd-sheet-row span[data-label]::before { content: none; }
}

.otd-print-date { display: none; }
.otd-tool.is-shared:not(.is-dealer) .otd-dealer-fields { display: block; }
.otd-tool.is-shared:not(.is-dealer) .otd-desk { display: none; }
@media print {
    .otd-form, .otd-est-form, .otd-examples, .otd-actions, .otd-sheet, .otd-mode, .otd-tips, .otd-presets, .otd-add-addon { display: none !important; }
    .otd-tool { border: 0; background: #fff; max-width: none; }
    .otd-result, .otd-est-out, .otd-print-date { display: block !important; }
}

@media (prefers-reduced-motion: reduce) {
    .otd-tool * { scroll-behavior: auto; }
}

/* Live estimator */
.otd-estimator { margin-bottom: 1.5rem; }
.otd-estimator .otd-grid { display: grid; gap: .75rem; }
.otd-estimator label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; min-width: 0; }
.otd-estimator label.otd-check { flex-direction: row; align-items: center; gap: .5rem; }
.otd-estimator input:not([type=checkbox]), .otd-estimator select { width: 100%; max-width: 100%; box-sizing: border-box; padding: .5rem; }
.otd-est-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.otd-est-table th, .otd-est-table td { padding: .4rem .25rem; border-bottom: 1px solid #e3e3e3; text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.otd-est-table td { text-align: right; white-space: nowrap; }
.otd-est-table tfoot th, .otd-est-table tfoot td { font-weight: 700; font-size: 1.1em; border-bottom: 0; }
.otd-unv { display: inline-block; font-size: .75em; padding: 0 .35em; border-radius: 3px; background: #fff3cd; color: #7a5b00; }
.otd-est-warn { color: #8a1c1c; margin: .75rem 0 0; }
.otd-est-notes { font-size: .9em; color: #555; margin: .5rem 0 0; }
.otd-estimator .otd-cond { border: 0; padding: 0; margin: 0; display: flex; gap: 1rem; align-items: flex-end; min-width: 0; }
.otd-estimator .otd-cond legend { font-weight: 600; padding: 0; margin-bottom: .25rem; }
.otd-estimator .otd-grid-sub { display: contents; }
.otd-est-pay th, .otd-est-pay td { font-size: 1em !important; }

/* Two-column calculator card: inputs left, sticky results right. */
.otd-tool.otd-estimator { max-width: 1080px; }
.otd-est-body { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1rem; }
.otd-est-out { min-width: 0; }
.otd-toggle { flex-direction: row !important; align-items: center; gap: 0.6rem !important; cursor: pointer; }
.otd-toggle input { appearance: none; -webkit-appearance: none; width: 2.6rem; height: 1.45rem; min-height: 0; padding: 0; border-radius: 999px; background: var(--otd-line); position: relative; cursor: pointer; flex: none; }
.otd-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.45rem - 6px); height: calc(1.45rem - 6px); border-radius: 50%; background: #fff; transition: left .15s; }
.otd-toggle input:checked { background: var(--otd-fair); }
.otd-toggle input:checked::after { left: calc(100% - 1.45rem + 4px); }
@media (min-width: 860px) {
    .otd-est-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
    .otd-est-out { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
    .otd-est-form .otd-grid { grid-template-columns: 1fr 1fr; }
    .otd-est-form .otd-grid > fieldset, .otd-est-form .otd-grid > .otd-dyn, .otd-est-form .otd-grid > .otd-toggle { grid-column: 1 / -1; }
    .otd-dyn.otd-grid-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}