/* Late Model Rear Geo: only what the shared DirtSim / RaceBook CSS doesn't already have. */
:root { --lfref: var(--lf); --rfref: var(--rf); }
.rg-datum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); }
.rg-datum .help { flex-basis: 100%; font-size: 11px; color: var(--text-muted); }
.rg-att .sliders { margin-top: 0; }
.rg-att .sl-top { color: var(--text-secondary); } .rg-att .sl-top b { color: var(--text-primary); } .rg-att .sl-help { color: var(--text-muted); }
.rg-att .note { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rg-sweepbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rg-range { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.rg-range .form-input { width: 84px; max-width: 84px; padding: 6px 8px; }
.rg-range select.form-input { width: auto; max-width: none; }
.rg-flags { margin: 4px 0 0 18px; padding: 0; font-size: 13px; line-height: 1.6; }
.rg-dialog { position: fixed; right: 12px; top: 64px; z-index: 150; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.header-btn.on { border-color: #22d3ee; color: #22d3ee; }
/* deltas vs the reference (you minus reference) */
.dv { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text-muted); }
.dv.up { color: #16a34a; } .dv.dn { color: #dc2626; } .dv.z { color: var(--text-muted); }
.garage-nums .dv { display: block; font-size: 9px; line-height: 1.1; color: #9a9aa8; }
.garage-nums .gn-one .dv { display: inline; margin-left: 4px; }
.garage-nums.cmp .gn-head, .garage-nums.cmp .gn-row:not(.gn-one) { grid-template-columns: 1fr 64px 64px 22px; } .garage-nums .dv.up { color: #4ade80; } .garage-nums .dv.dn { color: #f87171; }
.gn-row.gn-one { grid-template-columns: 1fr auto 22px; }
.gn-row.gn-one .gn-v { color: #fff; }
.garage-nums .gn-v.flag { color: #fbbf24; }
.rg-hold .seg { margin-top: 4px; }
/* chart: reference series dashed in the same corner color */
.chart .series-lfref { stroke: var(--lf); stroke-dasharray: 5 4; opacity: .55; } .chart .series-rfref { stroke: var(--rf); stroke-dasharray: 5 4; opacity: .55; }
.chart .dot-lfref { fill: var(--lf); opacity: .55; } .chart .dot-rfref { fill: var(--rf); opacity: .55; }
/* diagrams */
.diagram .ghost { stroke: #22d3ee; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .8; fill: none; }
.diagram .asline { stroke-width: 1.6; stroke-dasharray: 10 3 2 3; opacity: .75; fill: none; }
.diagram .coil { stroke: var(--text-secondary); stroke-width: 4; stroke-linecap: round; opacity: .55; }
.diagram .cage { fill: color-mix(in srgb, var(--text-muted) 30%, transparent); stroke: var(--text-secondary); stroke-width: 1.2; }
.diagram .axle { stroke: var(--text-primary); stroke-width: 5; stroke-linecap: round; opacity: .7; }
.diagram .jbar { stroke: #eab308; stroke-width: 3.5; stroke-linecap: round; }
.diagram .jbarpt { stroke: #eab308; } .diagram .axlept { stroke: var(--text-primary); } .diagram .frame { stroke: var(--accent-primary); }
.diagram .lbl-j { fill: #ca8a04; }
.light-theme .diagram .lbl-j { fill: #a16207; }