/* damage.css — Race › Damage (damage-view.js). v2 tokens only. */
.dmg {
    display: block;
    padding: var(--s3, 12px);
    color: var(--text);
    font: var(--v2-fs-md, 15px)/1.45 var(--v2-font-ui);
    min-width: 0;
}
/* Shown only while there is no car or no damage data. */
.dmg-src { margin: 0 0 var(--s3, 12px); font-size: var(--v2-fs-sm, 13px); color: var(--text-3); overflow-wrap: anywhere; }

.dmg-grid { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: var(--s3, 12px); align-items: start; }
.dmg-card { background: var(--v2-panel); border: 1px solid var(--v2-line); border-radius: var(--v2-r-md, 6px); padding: var(--s3, 12px) var(--s4, 16px); min-width: 0; }
.dmg-call { border-left: 3px solid var(--accent); }
.dmg-urgent .dmg-call { border-left-color: var(--crit); }

.dmg-head1 { margin: 0 0 4px; font: 700 var(--v2-fs-xl, 32px)/1.1 var(--v2-font-display); font-stretch: 88%; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dmg-head1.is-crit { color: var(--crit); }
.dmg-head1.is-warn { color: var(--warn); }
.dmg-head1.is-good { color: var(--dx-good, var(--text)); }
.dmg-fact { margin: 0 0 8px; font-size: var(--v2-fs-md, 15px); color: var(--text-2, var(--text)); }
.dmg-detail { margin: 0 0 6px; font-size: var(--v2-fs-sm, 13px); color: var(--text-2, var(--text)); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dmg-muted { margin: 0; font-size: var(--v2-fs-sm, 13px); color: var(--text-3); }

.dmg-opts { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.dmg-opt { padding: 6px 10px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm, 3px); background: var(--v2-inset); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dmg-opt.is-pick { border-color: var(--accent); background: var(--v2-wash); }

/* Top-down chassis (damage-view.js svg): body wedges, frame, tires, the overall % in the middle. */
.dmg-car { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto 8px; }
.dmg-shell { fill: var(--v2-inset); stroke: var(--v2-line); stroke-width: 1; }
.dmg-area { fill-opacity: .7; stroke-width: 1.5; }
.dmg-none { fill: none; stroke: var(--v2-line-2); }
.dmg-frame { fill: none; stroke: var(--text-3); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dmg-hub { fill: var(--v2-panel); stroke: none; }   /* the middle panel: no border, only the damage panels round it */
.dmg-pct { fill: var(--text); font: 700 15px var(--v2-font-display, inherit); font-variant-numeric: tabular-nums; }
.dmg-pct.is-hit { fill: var(--crit); }
.dmg-arrow { fill: var(--text-3); }
.dmg-light { fill: var(--warn); stroke: var(--warn); }
.dmg-heavy { fill: var(--crit); stroke: var(--crit); }
.dmg-wheel { stroke: var(--v2-line-2); stroke-width: 1.5; }
.dmg-w-ok { fill: var(--accent); }
.dmg-w-flat { fill: var(--crit); stroke: var(--crit); }
.dmg-w-off { fill: none; stroke: var(--crit); stroke-width: 2.5; stroke-dasharray: 4 3; }
.dmg-heat { fill: var(--crit); }
/* Brake on each tire's inner side: hot = over brake-wear.js HOT_C (wears faster), the Brakes tab's warn color. */
.dmg-brake { fill: var(--v2-line-2); }
.dmg-brake.is-ok { fill: var(--text-3); }
.dmg-brake.is-hot, .dmg-num2.is-hot { fill: var(--warn); }
/* Per-wheel temp and tire life: Advanced only (race-tabs.js sets html.race-adv). */
.dmg-num { display: none; fill: var(--text); font: 600 14px var(--v2-font-ui, inherit); font-variant-numeric: tabular-nums; }
.race-adv .dmg-num { display: inline; }
.dmg-num2 { fill: var(--text-2, var(--text)); font-weight: 400; }

.dmg-legend { margin: 0; font-size: var(--v2-fs-sm, 13px); color: var(--text-2, var(--text)); text-align: center; }

/* Dashboard tile */
.rt-dmg { margin: 0; font-size: var(--v2-fs-sm, 13px); line-height: 1.35; overflow: hidden; }
.rt-dmgcar { float: left; width: 64px; margin: 0 8px 0 0; }
.rt-dmgcar .dmg-car { margin: 0; }

@media (max-width: 760px) {
    .dmg-grid { grid-template-columns: minmax(0, 1fr); }
    .dmg-carcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
    .dmg-car { margin: 0; }
}