/* Race page Brakes tab (js/race-brakes.js). Tiles reuse the Tires tab's .lt-car / .lt-corner. */
#raceBrakes { padding: 12px 16px 16px; }
.rb-car { margin: 8px 0 12px; grid-template-columns: repeat(2, minmax(0, 150px)); }
/* The tier label goes under the % (the shared 92 px tile spilled it). */
.rb-tile { flex-wrap: wrap; }
.rb-tile small { flex-basis: 100%; }
.rb-tile small { display: block; font-size: 12px; color: var(--text-3); }
.rb-tile.rb-watch strong, .rb-line.rb-watch { color: var(--warn); }
.rb-tile.rb-change strong, .rb-line.rb-change { color: var(--warn); }
.rb-tile.rb-change { box-shadow: inset 0 0 0 2px var(--warn); }
.rb-tile.rb-critical strong, .rb-line.rb-critical { color: var(--crit); }
.rb-tile.rb-critical { box-shadow: inset 0 0 0 2px var(--crit); }
.rb-plan { margin: 0 0 6px; }
.rb-hot { margin: 0 0 8px; padding-left: 18px; }
.rb-h { font-size: 14px; margin: 12px 0 6px; color: var(--text-2); }
.rb-table th[scope="row"] { text-align: left; font-weight: 600; color: var(--text-3); white-space: nowrap; }
.rb-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
html:not(.race-adv) .rb-adv { display: none; }
.rb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Mid-tone series colors read on light and dark panels. */
.rb-adv { --rb-s1: #3b82f6; --rb-s2: #a855f7; --rb-s3: #14b8a6; --rb-s4: #f97316; }
.rb-fail { stroke: var(--crit); stroke-width: 1.5; stroke-dasharray: 6 4; }
.rb-fail-key { background: var(--crit); border-radius: 0; height: 2px; }
@media (max-width: 600px) {
    #raceBrakes { padding: 10px 12px 14px; }
    .rb-table th, .rb-table td { padding-left: 4px; padding-right: 4px; font-size: 12px; }
    /* The shared stint table's 560 px minimum hid RL and RR behind a scroll. */
    html body .rb-table { min-width: 0; width: 100%; }
    .rb-table th[scope="row"] { white-space: normal; }
}