/* DirtSim tools: RaceBook design system + tool layout. */
:root { --lf: #3b82f6; --rf: #ea580c; }   /* fixed per-corner series colours (validated dark + light) */
.brand { font-family: var(--font-cond); font-weight: 700; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-primary); }
.brand b { color: var(--accent-primary); font-weight: 700; }
.brand-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: .5px; text-transform: uppercase; }
.sidebar-header.brandbox { flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 16px; gap: 0; }

/* layout: inputs + live rail on wide screens */
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1240px) { .tool-grid.with-rail { grid-template-columns: minmax(0, 1fr) 440px; } .live-rail { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 88px); overflow: auto; } }
@media (max-width: 1239px) { .live-rail { display: none; } }

/* LF | RF input table */
.io-table { width: 100%; border-collapse: collapse; }
.io-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); text-align: left; padding: 4px 6px; }
.io-table th.lf { color: var(--lf); } .io-table th.rf { color: var(--rf); }
.io-table td { padding: 4px 6px; vertical-align: middle; }
.io-table td.lbl { font-size: 13px; color: var(--text-secondary); width: 44%; }
.io-table td.lbl .help { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.35; margin-top: 2px; }
.io-table .form-input { max-width: 140px; padding: 7px 8px; }
.io-table .input-wrap .form-input { padding-right: 34px; }
.io-table .input-unit { right: 8px; font-size: 10px; }
.xyz { display: flex; gap: 4px; }
.xyz .form-input { max-width: 74px; padding: 7px 6px; text-align: right; }
.xyz-head { display: flex; gap: 4px; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.xyz-head span { width: 74px; text-align: center; }
select.form-input { max-width: 180px; }
.flag { color: var(--warning-text); }
.bad { color: var(--danger); }

/* results */
.res-table td.v { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.res-table td.lf { color: var(--text-primary); } .res-table td.rf { color: var(--text-primary); }
.res-table th.lf { color: var(--lf); text-align: right; } .res-table th.rf { color: var(--rf); text-align: right; }
.res-table .grp td { font-family: var(--font-cond); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-primary); padding-top: 12px; border-bottom: 1px solid var(--border-primary); }
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; display: none; gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary); z-index: 80; overflow-x: auto; }
.bottom-bar .channel { min-width: 104px; padding: 4px 8px; }
@media (max-width: 1239px) { .bottom-bar { display: flex; } .main-content { padding-bottom: 96px; } }
@media (min-width: 769px) and (max-width: 1239px) { .bottom-bar { left: var(--sidebar-width-expanded); } }

.diagram { width: 100%; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .ground { stroke: var(--text-muted); stroke-width: 1.5; }
.diagram .cl { stroke: var(--border-accent); stroke-width: 1; stroke-dasharray: 6 4; }
.diagram .tire { fill: color-mix(in srgb, var(--text-muted) 18%, transparent); stroke: var(--text-muted); stroke-width: 1.2; }
.diagram .arm { stroke-width: 3; stroke-linecap: round; }
.diagram .lf { stroke: var(--lf); } .diagram .rf { stroke: var(--rf); }
.diagram .spindle { stroke: var(--text-primary); stroke-width: 3; stroke-linecap: round; }
.diagram .tie { stroke: var(--text-secondary); stroke-width: 1.5; }
.diagram .icline { stroke-width: 1; stroke-dasharray: 4 4; fill: none; opacity: .85; }
.diagram .rcline { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 3; }
.diagram .pt { fill: var(--bg-card); stroke-width: 2; }
.diagram .rc { fill: var(--accent-primary); stroke: var(--bg-card); stroke-width: 2; }
.diagram text { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; }
.diagram .lbl-lf { fill: var(--lf); } .diagram .lbl-rf { fill: var(--rf); }
.legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.chart .series-lf { stroke: var(--lf); } .chart .series-rf { stroke: var(--rf); }
.chart .dot-lf { fill: var(--lf); } .chart .dot-rf { fill: var(--rf); }
.chart .end-lbl { font-family: var(--font-mono); font-size: 10px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.setup-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* phones: label on its own row, LF | RF inputs side by side */
@media (max-width: 600px) {
  .io-table, .io-table thead, .io-table tbody { display: block; }
  .io-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; padding: 6px 0; }
  .io-table tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--border-primary) 60%, transparent); }
  .io-table thead th:first-child { display: none; }
  .io-table td { padding: 0; min-width: 0; }
  .io-table td.lbl, .io-table td[colspan] { grid-column: 1 / -1; width: auto; }
  .io-table .form-input, select.form-input { max-width: none; }
  .xyz .form-input { max-width: none; min-width: 0; flex: 1; padding: 7px 4px; font-size: 12px; }
  .xyz-head span { flex: 1; width: auto; }
  .current-context { display: none; }
  .app-header { gap: 8px; padding: 0 10px; }
  .app-title { flex: 1; }
  .page-header { flex-direction: column; align-items: flex-start; }
}

.smash { display: flex; flex-direction: column; gap: 4px; }
.smash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.smash-row .form-input { max-width: none; }
.smash-del { padding: 4px 8px; }

/* ---------------- 3D garage ---------------- */
.main-content.flush { padding: 0; overflow: hidden; }
body.page-3d .bottom-bar { display: none; }
.garage { position: relative; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 35%, #34343f 0%, #1d1d24 55%, #121218 100%); }
.light-theme .garage { background: radial-gradient(120% 90% at 50% 35%, #ffffff 0%, #e6e6ec 60%, #cfcfd8 100%); }
.garage-view { position: absolute; inset: 0; }
.garage-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.garage-labels { position: absolute; inset: 0; pointer-events: none; }
.glabel { position: absolute; left: 0; top: 0; padding: 4px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.35; color: #fff;
  background: rgba(18,18,24,.78); border: 1px solid rgba(255,255,255,.12); white-space: nowrap; backdrop-filter: blur(4px); }
.glabel.lf { border-left: 3px solid var(--lf); } .glabel.rf { border-left: 3px solid var(--rf); } .glabel.rc { border-left: 3px solid #ffd23f; }
.garage-top { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; pointer-events: none; }
.garage-top > * { pointer-events: auto; }
.seg { display: inline-flex; background: rgba(18,18,24,.8); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; overflow: hidden; backdrop-filter: blur(4px); }
.seg button, .seg-btn { background: none; border: 0; color: #d5d5dd; font: 600 12px var(--font-body); padding: 8px 11px; cursor: pointer; }
.seg button:hover, .seg-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.seg-btn { background: rgba(18,18,24,.8); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; backdrop-filter: blur(4px); }
.seg-btn.on { color: #fff; border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 30%, rgba(18,18,24,.8)); }
.garage-hint { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); font-size: 12px; color: rgba(255,255,255,.55); pointer-events: none; white-space: nowrap; }
.garage-nums { position: absolute; right: 12px; top: 56px; width: 270px; background: rgba(18,18,24,.82); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  padding: 8px 10px; backdrop-filter: blur(6px); color: #fff; }
.gn-head, .gn-row { display: grid; grid-template-columns: 1fr 56px 56px 22px; align-items: baseline; gap: 4px; }
.gn-head span { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-align: right; }
.gn-head .lf, .gn-v.lf { color: #8db4ff; } .gn-head .rf, .gn-v.rf { color: #ff9a62; }
.gn-row { padding: 3px 0; border-top: 1px solid rgba(255,255,255,.06); }
.gn-k { font-size: 12px; color: #d5d5dd; } .gn-v { font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-align: right; } .gn-u { font-family: var(--font-mono); font-size: 10px; color: #a0a0b0; }
.gn-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: 11px; color: #c4c4cc; } .gn-foot b { color: #fff; }
.garage-sheet { position: absolute; left: 12px; right: 296px; bottom: 12px; background: rgba(18,18,24,.86); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 10px 14px 12px; backdrop-filter: blur(6px); color: #fff; }
.sheet-head { display: flex; align-items: center; gap: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 7px 13px; font: 600 12px var(--font-body); cursor: pointer; }
.chip:hover { border-color: var(--accent-primary); } .chip.play { background: var(--accent-primary); border-color: var(--accent-primary); }
.sheet-toggle { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.garage-sheet.collapsed .sliders { display: none; } .garage-sheet.collapsed .sheet-toggle { transform: rotate(180deg); }
.sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 18px; margin-top: 10px; }
.sl { display: flex; flex-direction: column; gap: 2px; }
.sl-top { display: flex; justify-content: space-between; font-size: 12px; color: #d5d5dd; } .sl-top b { font-family: var(--font-mono); color: #fff; }
.sl input[type=range] { width: 100%; accent-color: var(--accent-primary); height: 26px; }
.sl-help { font-size: 10px; color: #8a8a99; }
.garage-part { position: absolute; left: 12px; top: 56px; width: min(360px, calc(100% - 24px)); max-height: calc(100% - 250px); overflow: auto; background: var(--bg-card);
  border: 1px solid var(--border-primary); border-radius: 12px; padding: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.gp-head { display: flex; justify-content: space-between; gap: 8px; } .gp-title { font-family: var(--font-cond); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.gp-title .lf, .gp-table .lf { color: var(--lf); } .gp-title .rf, .gp-table .rf { color: var(--rf); }
.gp-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; } .gp-x { background: none; border: 0; color: var(--text-secondary); font-size: 24px; cursor: pointer; line-height: 1; }
.gp-sides { display: inline-flex; gap: 4px; margin: 8px 0; } .gp-sides button { background: var(--bg-tertiary); border: 1px solid var(--border-primary); color: var(--text-secondary); border-radius: 6px; padding: 5px 12px; font-weight: 600; cursor: pointer; }
.gp-sides button.on { border-color: var(--accent-primary); color: var(--accent-primary); }
.gp-table td.lbl { width: 55%; } .gp-table .form-input { max-width: none; }
.gp-sheet { margin-top: 10px; }
@media (max-width: 900px) {
  .garage-nums { left: 12px; right: 12px; top: auto; bottom: calc(12px + var(--sheet-h, 214px)); width: auto; padding: 6px 8px; }
  .garage-nums .gn-row:nth-of-type(n+5), .garage-nums .gn-foot { display: none; }
  .garage-nums.open .gn-row, .garage-nums.open .gn-foot { display: grid; } .garage-nums.open .gn-foot { display: flex; }
  .garage-nums::after { content: 'tap for more'; display: block; text-align: center; font-size: 10px; color: #8a8a99; margin-top: 2px; }
  .garage-nums.open::after { content: 'tap for less'; }
  .garage-sheet { right: 12px; }
  .garage-hint { display: none; }
  .garage-part { top: 56px; max-height: 52%; }
}
@media (max-width: 600px) {
  .garage-top { left: 8px; right: 8px; top: 8px; gap: 6px; } .seg button { padding: 7px 8px; } .seg-btn { padding: 7px 8px; }
  .garage-sheet { left: 6px; right: 6px; bottom: 6px; padding: 8px 10px 10px; } .sliders { grid-template-columns: 1fr 1fr; gap: 2px 12px; }
  .garage-nums { left: 6px; right: 6px; bottom: calc(6px + var(--sheet-h, 250px)); }
  .sl-help { display: none; } .chip { padding: 6px 10px; }
}

.seg button.on { color: #fff; background: color-mix(in srgb, var(--accent-primary) 45%, transparent); }
.seg.layers button { font-size: 11px; padding: 8px 9px; }
.seg.mode button { padding: 7px 12px; }
.chip.saved { display: inline-flex; padding: 0; overflow: hidden; } .chip.saved button { background: none; border: 0; color: #fff; font: 600 12px var(--font-body); padding: 7px 4px 7px 13px; cursor: pointer; }
.chip.saved button.x { padding: 7px 10px 7px 6px; color: #a0a0b0; } .chip.saved button.x:hover { color: var(--danger); }
.chip.add { display: inline-flex; padding: 0; overflow: hidden; } .chip.add input { background: transparent; border: 0; color: #fff; font: 12px var(--font-body); padding: 7px 10px; width: 150px; outline: none; }
.chip.add button { background: var(--accent-primary); border: 0; color: #fff; font: 600 12px var(--font-body); padding: 7px 12px; cursor: pointer; }
.lt-line { margin-top: 6px; font-size: 11px; color: #b8b8c4; } .lt-line b { color: #fff; } .lt-line .bad, .gn-foot .bad { color: #f87171; }
.glabel.small { font-size: 10px; padding: 3px 6px; opacity: .92; }
.glabel.force { border-left-width: 3px; }
.glabel.tag { font-size: 12px; }
.light-theme .glabel { background: rgba(255,255,255,.9); color: #1a1a1f; border-color: rgba(0,0,0,.12); }
@media (max-width: 600px) { .garage-top .seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .garage-top .seg::-webkit-scrollbar { display: none; } .seg.layers { order: 3; } .garage-top .seg button { white-space: nowrap; flex: 0 0 auto; } .chip.add input { width: 110px; } .garage-labels .glabel.small { display: none; } }

.gn-sec { font-family: var(--font-cond); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent-primary); margin-top: 6px; }
.glabel .sub { font-size: 10px; color: #a0a0b0; }
.light-theme .glabel .sub { color: #686874; }
@media (max-width: 900px) { .garage-nums .gn-sec { display: none; } .garage-nums.open .gn-sec { display: block; } }

/* ---------------- whole-car garage additions ---------------- */
.garage-status { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.6); pointer-events: none; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.garage-status.warn { color: #1a1205; background: #fbbf24; padding: 3px 10px; border-radius: 6px; font-weight: 600; } .garage-status.ok { color: rgba(255,255,255,.55); }
@media (max-width: 600px) { .garage-status { top: 86px; max-width: 92%; } }
.garage-ctx { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 30; max-width: min(520px, 90%); padding: 12px 16px; font-size: 13px; line-height: 1.4; }
.garage-ctx .btn { margin-left: 8px; }   /* below the two-row (views + layers) bar; must follow the base rule */
.gn-tabs { display: flex; gap: 2px; margin-bottom: 4px; }
.gn-tabs button { flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #c4c4cc; font: 600 11px var(--font-body); padding: 5px 4px; border-radius: 5px; cursor: pointer; }
.gn-tabs button.on { color: #fff; background: color-mix(in srgb, var(--accent-primary) 45%, transparent); border-color: var(--accent-primary); }
.gn-head4, .gn-row4 { display: grid; grid-template-columns: 1fr 48px 48px 48px 48px 20px; align-items: baseline; gap: 3px; }
.gn-head4 span { font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-align: right; }
.gn-row4 { padding: 3px 0; border-top: 1px solid rgba(255,255,255,.06); }
.gn-head .lr, .gn-head4 .lr, .gn-v.lr { color: #7dd3fc; } .gn-head .rr, .gn-head4 .rr, .gn-v.rr { color: #fcd34d; }
.gn-row4 .gn-v { font-size: 13px; }
.garage-nums { width: 330px; }
.gn-foot .warn { color: #fbbf24; }
.io-table th.lr, .res-table th.lr { color: #0ea5e9; } .io-table th.rr, .res-table th.rr { color: #d97706; }
.io-table th.l { color: var(--lf); } .io-table th.r { color: var(--rf); }
.gp-title .lr, .gp-table .lr, .gp-title .l, .gp-table .l { color: var(--lf); } .gp-title .rr, .gp-table .rr, .gp-title .r, .gp-table .r { color: var(--rf); }
.io-table.cols4 .form-input { max-width: 110px; }
@media (max-width: 900px) { .garage-nums { width: auto; } .garage-nums .gn-row4:nth-of-type(n+4), .garage-nums .gn-foot { display: none; } .garage-nums.open .gn-row4 { display: grid; } .garage-nums.open .gn-foot { display: flex; } }
@media (max-width: 600px) {
  .io-table.cols4 tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .io-table.cols4 .xyz { grid-column: 1 / -1; }
}

/* ---- real-car model: model toggle, parts panel, loading bar ---- */
.seg.model button.on { color: #fff; background: color-mix(in srgb, var(--accent-primary) 55%, transparent); }
.garage-parts { position: absolute; left: 12px; top: 104px; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 330px); min-height: 180px; overflow: auto;
  background: rgba(18,18,24,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 12px; z-index: 6; color: #e6e6ea; backdrop-filter: blur(6px); }
.light-theme .garage-parts { background: rgba(255,255,255,.95); color: #1a1a1f; border-color: rgba(0,0,0,.12); }
.pp-presets { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.pp-presets button { font: 600 11px var(--font-body); padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: inherit; cursor: pointer; }
.pp-presets button:hover { border-color: var(--accent-primary); }
.pp-cat { margin-top: 6px; }
.pp-cath { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: 700 12px var(--font-display, var(--font-body)); letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 4px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); color: inherit; cursor: pointer; }
.pp-n { margin-left: auto; font: 500 11px var(--font-mono); opacity: .55; }
.pp-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 4px 0 2px; }
.pp-it { display: flex; align-items: center; gap: 6px; text-align: left; font: 500 12px var(--font-body); padding: 5px 4px; border-radius: 6px; background: none; border: 0; color: inherit; cursor: pointer; }
.pp-it:hover { background: rgba(255,255,255,.06); }
.pp-it.ghost { opacity: .7; } .pp-it.off { opacity: .45; text-decoration: line-through; }
.pp-ic { width: 14px; display: inline-block; text-align: center; color: var(--accent-primary); font-size: 13px; }
.pp-foot { margin-top: 10px; opacity: .6; }
.gp-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.05); }
.gp-item span { display: flex; gap: 6px; }
.garage-load { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 18px; border-radius: 12px; background: rgba(18,18,24,.85); color: #e6e6ea; font: 600 12px var(--font-body); z-index: 7; pointer-events: none; }
.gl-bar { width: 220px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.gl-bar i { display: block; height: 100%; width: 0; background: var(--accent-primary); transition: width .2s; }
@media (max-width: 600px) { .garage-parts { left: 6px; right: 6px; width: auto; top: 128px; max-height: calc(100% - 420px); } .pp-items { grid-template-columns: 1fr 1fr; } }
.pp-paint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 11px var(--font-body); margin: 0 0 6px; }
.pp-paint > span { text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.pp-paint label { display: flex; align-items: center; gap: 4px; }
.pp-paint input[type=color] { width: 28px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: none; cursor: pointer; }
.pp-paint button { font: 600 11px var(--font-body); padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: inherit; cursor: pointer; }
.garage-load[hidden], .garage-parts[hidden], .garage-part[hidden] { display: none !important; }

/* ---- compare + sweep ---- */
.chip.cmp { white-space: nowrap; }
.chip.cmp.on { border-color: #22d3ee; color: #22d3ee; }
.cmp-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cmp-list .btn { text-align: left; }
.gn-ref { font: 500 11px var(--font-body); color: #67e8f9; margin: 2px 0 6px; }
.garage-sweep { position: absolute; right: 12px; top: 104px; width: min(560px, calc(100% - 24px)); background: rgba(18,18,24,.94); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 10px 12px; z-index: 6; color: #e6e6ea; backdrop-filter: blur(6px); max-height: calc(100% - 330px); overflow: auto; }
.garage-sweep[hidden] { display: none !important; }
.light-theme .garage-sweep { background: rgba(255,255,255,.96); color: #1a1a1f; }
.sw-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.sw-ctl select { background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 4px 6px; font: 500 12px var(--font-body); }
.sw-ctl select option { color: #111; }
.sw-legend { display: flex; gap: 10px; flex-wrap: wrap; font: 600 11px var(--font-body); }
.sw-legend i { display: inline-block; width: 14px; height: 2px; margin-right: 4px; vertical-align: middle; background: currentColor; }
.sw-legend .ref i { background: none; border-top: 2px dashed #a1a1aa; }
.sw-legend .lf, .sw-tip .lf { color: var(--lf); } .sw-legend .rf, .sw-tip .rf { color: var(--rf); } .sw-legend .lr, .sw-tip .lr { color: #7dd3fc; } .sw-legend .rr, .sw-tip .rr { color: #fcd34d; }
.sw-box { position: relative; }
.sw-chart { width: 100%; height: auto; display: block; touch-action: none; }
.sw-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.sw-tk, .sw-ax { fill: #9a9aa6; font: 500 10px var(--font-mono); }
.sw-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sw-line.ref { stroke-dasharray: 5 4; stroke-width: 1.5; opacity: .8; }
.sw-line.lf { stroke: var(--lf); } .sw-line.rf { stroke: var(--rf); } .sw-line.lr { stroke: #7dd3fc; } .sw-line.rr { stroke: #fcd34d; }
.sw-now { stroke: var(--accent-primary); stroke-width: 1; stroke-dasharray: 2 3; }
.sw-cross { stroke: rgba(255,255,255,.45); stroke-width: 1; }
.sw-tip { position: absolute; top: 8px; min-width: 130px; padding: 6px 8px; border-radius: 8px; background: rgba(10,10,14,.92); border: 1px solid rgba(255,255,255,.14); font: 500 11px var(--font-mono); color: #e6e6ea; pointer-events: none; }
.sw-tip span { opacity: .7; }
.light-theme .sw-grid { stroke: rgba(0,0,0,.08); } .light-theme .sw-tip { background: rgba(255,255,255,.96); color: #1a1a1f; }
@media (max-width: 900px) { .garage-sweep { left: 6px; right: 6px; width: auto; top: 128px; max-height: calc(100% - 420px); } }
.seg.model button.on#meas_btn { background: rgba(250,204,21,.25); color: #facc15; }
.glabel.meas { border-left: 3px solid #facc15; }
.sheet-head .seg.mode { flex: 0 0 auto; }
@media (max-width: 600px) {
  .sheet-head { flex-wrap: wrap; row-gap: 6px; }
  .sheet-head .chips { order: 3; flex-basis: 100%; }
  .chip.cmp { padding: 5px 8px; font-size: 11px; }
}
.gp-contents { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gp-contents .section-subheader { flex-basis: 100%; }
.gp-contents span { font: 500 11px var(--font-body); padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.06); }
@media (max-width: 600px) { .sheet-toggle { position: absolute; right: 8px; top: 8px; } .garage-sheet { position: absolute; } }
.pp-paint button.on { border-color: var(--accent-primary); color: var(--accent-primary); }
.gn-story p { margin: 0 0 6px; font: 500 12px/1.45 var(--font-body); }
.gn-story b.lf { color: var(--lf); } .gn-story b.rf { color: var(--rf); } .gn-story b.lr { color: #7dd3fc; } .gn-story b.rr { color: #fcd34d; }
.gn-warn p { color: #fbbf24; }
.gn-tabs button { white-space: nowrap; }
@media (max-width: 900px) { .garage-nums .gn-story p:nth-child(n+3) { display: none; } .garage-nums.open .gn-story p { display: block; } }
body.clean .sidebar, body.clean .app-header, body.clean .garage-top, body.clean .garage-sheet, body.clean .garage-nums,
body.clean .garage-labels, body.clean .garage-status, body.clean .bottom-bar { display: none !important; }
body.clean .main-wrapper { margin-left: 0 !important; } body.clean .garage { height: 100vh; }

/* ---- attitude mode: shocks set the car ---- */
.att-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 16px; margin: 8px 0 4px; }
.att-row { display: flex; flex-direction: column; gap: 3px; }
.att-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 600 12px var(--font-body); }
.att-m button { font-size: 10px; padding: 3px 7px; }
.att-in { display: flex; align-items: center; gap: 6px; }
.att-in input[type=range] { flex: 1; }
.att-in input[type=number] { width: 72px; background: rgba(255,255,255,.06); color: inherit; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 3px 5px; font: 600 12px var(--font-mono); }
.att-u { font: 500 11px var(--font-mono); opacity: .6; }
.att-out { font: 500 11px var(--font-mono); color: #b4b4c0; min-height: 14px; }
.att-out b { color: #e6e6ea; } .att-d { color: var(--accent-primary); } .att-d0 { opacity: .55; } .att-out .bad { color: #fbbf24; }
.light-theme .att-out { color: #555; } .light-theme .att-out b { color: #111; }
.sliders .att-grid { grid-column: 1 / -1; }
.att-float { font: 500 11px var(--font-body); opacity: .65; }
.card-subtitle { font: 500 12px var(--font-body); color: var(--text-muted); margin-top: 2px; }
/* shock stroke flags */
.glabel.stroke { border-left: 3px solid #fbbf24; } .glabel.stroke.bad { border-left-color: #f87171; color: #fecaca; }
.att-out .warn-t { color: #fbbf24; }
/* compare */
.cmp-t { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; margin-top: 6px; }
.cmp-t th { text-align: right; font-weight: 600; color: #a0a0b0; padding: 2px 4px; } .cmp-t th:first-child { text-align: left; }
.cmp-t td { text-align: right; padding: 2px 4px; color: #e6e6ea; border-top: 1px solid rgba(255,255,255,.05); } .cmp-t td:first-child { text-align: left; color: #b8b8c4; font-family: var(--font-body, inherit); }
.cmp-t td:last-child { color: #8a8a96; text-align: left; } .cmp-t tr.sec td { color: var(--accent-primary); font-weight: 600; padding-top: 8px; border-top: 0; text-align: left; }
.cmp-t .up { color: #4ade80; } .cmp-t .dn { color: #f87171; } .cmp-t .z { color: #6b6b78; }
.light-theme .cmp-t td { color: #1a1a1f; border-top-color: rgba(0,0,0,.06); } .light-theme .cmp-t .up { color: #15803d; } .light-theme .cmp-t .dn { color: #b91c1c; }
.cmp-story p { margin: 0 0 4px; }
.glabel .dline { font-size: 10px; margin-top: 1px; color: #a0a0b0; } .glabel .dline .up { color: #4ade80; } .glabel .dline .dn { color: #f87171; } .glabel .dline .z { color: #8a8a96; }
.light-theme .glabel .dline .up { color: #15803d; } .light-theme .glabel .dline .dn { color: #b91c1c; }
.sw-zero { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 3 3; }
.light-theme .sw-zero { stroke: rgba(0,0,0,.35); }
.seg.sw-dm button { font-size: 11px; }
@media (min-width: 901px) { .garage-sheet { right: 354px; } .garage-nums { max-height: calc(100% - 70px); overflow: auto; } }
.cmp-t td, .cmp-t th { text-transform: none; letter-spacing: 0; }
/* phones: one control at a time */
.att-pick { display: none; }
@media (max-width: 600px) {
  .att-pick { display: flex; grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
  .att-pick::-webkit-scrollbar { display: none; } .att-pick button { flex: 0 0 auto; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .garage-sheet:not(.f-all) .sliders [data-f]:not(.focus) { display: none; }
  .garage-sheet:not(.f-all) .att-grid { grid-template-columns: 1fr; margin: 2px 0; }
  .garage-sheet:not(.f-all) .sliders { grid-template-columns: 1fr; }
  .garage-sheet:not(.f-all) .lt-line { display: none; }
  .garage-sheet.f-all { max-height: 62vh; overflow: auto; }
  .att-float { display: none; }
  .att-m button { padding: 7px 10px; font-size: 11px; }
  .att-in input[type=number] { width: 76px; padding: 6px; font-size: 13px; }
  .att-in input[type=range], .sl input[type=range] { height: 32px; }
  .sheet-head { flex-wrap: wrap; row-gap: 6px; }
  .chip.cmp { padding: 7px 10px; }
}
@media (max-width: 600px) { .chip.add input { display: none; } }

/* Dirt Racing Dynamics logo (owner 2026-11-10; web/shared/brand/provenance.json). Transparent artwork: on light pages it
   sits on its own black tile, as in the original. */
.sidebar-header.brandbox { height: auto; min-height: 56px; padding: 10px 14px 8px; align-items: center; gap: 2px; }
.brand-link { display: block; width: 100%; }
.brand-logo { display: block; width: 100%; max-width: 176px; height: auto; margin: 0 auto; }
.sidebar-header.brandbox .brand-sub { align-self: center; }
.hdr-logo { display: none; height: 30px; width: auto; flex: none; }
.light-theme .brand-logo, .light-theme .hdr-logo { background: #000; border-radius: 6px; padding: 4px 6px; }
@media (max-width: 768px) { .hdr-logo { display: block; } }
@media (max-width: 420px) { .hdr-logo { height: 24px; } }