/* Reserve room for horizontal titles and wrapped legends without changing
   financial totals or the expandable chart/modal geometry. */
body.clair-spacex .chart-cell:has(> #myChart),
body.clair-spacex .chart-cell:has(> #myChart2) { position: relative; height: 320px; }
body.clair-spacex .chart-cell :is(#myChart, #myChart2) { max-height: 320px; }
body.clair-spacex :is(.kpi-hl-high, .kpi-hl-up) {
    color: #FFFFFF; background: #003F49; border-color: #007AA5;
}
body.clair-spacex :is(.kpi-hl-low, .kpi-hl-down) {
    color: #DFDEDE; background: #000000; border-color: #DFDEDE;
}
body.clair-spacex .kpi-hl-current { color: #FFFFFF; background: #003F49; border-color: #DFDEDE; }
body.clair-spacex .kpi-hl-flat { color: #DFDEDE; background: #000000; border-color: #DFDEDE; }
body.clair-spacex .kpi-hl-caption { color: #DFDEDE; line-height: 1.65; }
body.clair-spacex .chart-toggle { border-color: #007AA5; color: #FFFFFF; }
/* Progress and in-table data bars use the same official inks. Widths,
   quota thresholds, sticky cells and their underlying values stay intact. */
body.clair-spacex .quota-tracker-progress-fill.fill-on { background: #007AA5; }
body.clair-spacex .quota-tracker-progress-fill.fill-pace { background: #66AFC9; }
body.clair-spacex .quota-tracker-progress-fill.fill-behind { background: #E8112D; }
/* Quota Progress chip (.cv3-rg-quota-chip-up/-down, emitted only by
   team_summary.html's rep-grid Quota Progress column via the
   quota_progress_chip templatetag) -- same on-target/below-target inks as
   the quota tracker fill above, not the stock green/pink. Sizing, the
   arrow glyph and the underlying percentage are untouched. */
body.clair-spacex .cv3-rg-quota-chip-up { background: #007AA5; color: #FFFFFF; }
body.clair-spacex .cv3-rg-quota-chip-down { background: #E8112D; color: #FFFFFF; }
/* Commission Waiting on Payment aging tiles (.cv3-aging, 5 fixed buckets in
   DOM order 0-30/31-60/61-90/91-120/120+ -- see _build_team_action_tiles /
   rep_action_tiles in views.py). Distinct brand-tinted dark fills escalate
   toward the oldest bucket, which lands on full brand red; white figures
   stay readable across all five. Bucket widths, links, labels and
   thresholds are untouched -- color only. */
/* .cv3-aging-cell in the selector (every child carries it -- dashboard.html
   and team_summary.html both emit it, rep or team) is not decoration: it
   raises this rule's specificity past spacex-commissions.css's
   ".cv3-aging .cv3-aging-cell" :is() member (0,3,2), which otherwise wins
   on specificity despite loading first and losing on source order -- both
   sides are !important, so order never gets a vote. Selector-only change;
   the five colors, hover and focus below are untouched. */
body.clair-spacex .cv3-aging > .cv3-aging-cell:nth-child(1) { background: rgba(0, 63, 73, .55) !important; }
body.clair-spacex .cv3-aging > .cv3-aging-cell:nth-child(2) { background: rgba(0, 122, 165, .38) !important; }
body.clair-spacex .cv3-aging > .cv3-aging-cell:nth-child(3) { background: rgba(102, 175, 201, .30) !important; }
body.clair-spacex .cv3-aging > .cv3-aging-cell:nth-child(4) { background: rgba(232, 17, 45, .35) !important; }
body.clair-spacex .cv3-aging > .cv3-aging-cell:nth-child(5) { background: #E8112D !important; }
body.clair-spacex .cv3-aging-h,
body.clair-spacex .cv3-aging-v { color: #FFFFFF !important; }
/* .cv3-aging has overflow:hidden (commission_layout.css) for its rounded
   corners, which clips the site-wide OUTSET focus outline (outline-offset:
   4px) before it ever reaches the viewport. Both states below are drawn
   INSET, inside each link's own box, so they survive the clip and never
   change padding/dimensions. Hover only darkens via a black overlay (never
   brightens) so it can never wash out white text against the solid-red
   oldest band; the keyboard ring is declared after hover so it wins when
   both apply at once. */
body.clair-spacex .cv3-aging a:hover {
    filter: none;
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .12);
}
body.clair-spacex .cv3-aging a:focus-visible {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #FFFFFF, inset 0 0 0 4px rgba(0, 0, 0, .65) !important;
}
body.clair-spacex .cv3-rg-bar {
    background-image: linear-gradient(to left, rgba(223,222,222,.14) 0 var(--pct,0%), transparent var(--pct,0%) 100%);
}
body.clair-spacex .cv3-rg-bar-green {
    background-image: linear-gradient(to left, rgba(0,122,165,.3) 0 var(--pct,0%), transparent var(--pct,0%) 100%);
}
@media (max-width: 480px) {
    body.clair-spacex .chart-cell:has(> #myChart),
    body.clair-spacex .chart-cell:has(> #myChart2) { height: 340px; }
    body.clair-spacex .chart-cell :is(#myChart, #myChart2) { max-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
    body.clair-spacex .ranked-chart, body.clair-spacex .ranked-grid > .ranked-card { transition: none; }
}