/* ================================================================
   right-panel.css – Floating box panel system, stats, build, AI
   ================================================================ */

/* ── Right panel shell — subtle vertical gradient for depth ── */
.right-panel {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: var(--right-panel-w);
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 25, 0.95) 0%,
    rgba(15, 15, 18, 0.95) 100%
  );
  transition: transform var(--t-slow);
}

.right-panel.collapsed {
  transform: translateX(100%);
}

/* Panel entrance (#A4) — mirrors the left panel, staggered +150ms behind it.
   See mod-menu.css .left-panel.panel-enter for the timing rationale. */
.right-panel.panel-enter {
  animation: panelEnterRight 560ms var(--ease-out) 450ms both;
}
@keyframes panelEnterRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .right-panel.panel-enter { animation: none; }
}

/* ── Collapse toggle tab ────────────────────────────────────── */
.right-panel .panel-toggle {
  position: absolute;
  top: 50%;
  left: -22px;
  transform: translateY(-50%);
  width: 22px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.95);
  
  border: 1px solid var(--c-border-mid);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  color: var(--c-text-3);
  font-size: 12px;
  cursor: pointer;
  z-index: 21;
  transition: color var(--t-fast), background var(--t-fast);
}
.right-panel .panel-toggle:hover { color: var(--c-text-2); background: rgba(255,255,255,0.05); }

/* ── Scrollable column of floating boxes ────────────────────── */
.right-panel .panel-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.right-panel .panel-scroll::-webkit-scrollbar       { width: 3px; }
.right-panel .panel-scroll::-webkit-scrollbar-track  { background: transparent; }
.right-panel .panel-scroll::-webkit-scrollbar-thumb  { background: var(--c-surface-4); border-radius: 2px; }

/* Firefox thin scrollbar */
.right-panel .panel-scroll {
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}

/* ── Vehicle summary box ────────────────────────────────────── */
.vehicle-summary {
  padding: var(--sp-4);
  flex-shrink: 0;
}

.vehicle-summary__label {
  font-size: var(--text-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: var(--sp-2);
}

.vehicle-summary__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 3px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.vehicle-summary__sub {
  font-size: var(--text-xs);
  color: var(--c-text-3);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.01em;
}

.vehicle-summary__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
}

.vs-spec {
  background: rgba(255,255,255,0.03);
  border: 1px solid #1e1e1e;
  border-radius: 4px;
  padding: var(--sp-2) var(--sp-2);
}

.vs-spec__label {
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 2px;
}

.vs-spec__value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: #e0e0e0;
}

/* ── Tab container box ──────────────────────────────────────── */
.panel-tab-box {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* flex-shrink: 0 so it sizes to content and the outer scroll handles position */
}

/* ── Tab bar ────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}

.tab-btn {
  flex: 1;
  min-height: 44px;            /* WCAG 2.2 min touch target (was ~34px) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3) var(--sp-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #666;
  font-size: var(--text-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  margin-bottom: -1px;
}
.tab-btn:hover { color: #aaa; background: rgba(255,255,255,0.02); }
.tab-btn.active {
  color: #fff;
  border-bottom-color: #ffffff;
  box-shadow: inset 0 -1px 8px rgba(255, 255, 255, 0.12);
}
/* playbook §7 (WCAG 2.4.7): visible 2px focus ring, distinct from the active state */
.tab-btn:focus-visible {
  outline: 2px solid rgba(255,255,255, 0.9);
  outline-offset: -2px;
  color: #fff;
}

/* ── Tab pane ───────────────────────────────────────────────── */
.tab-pane {
  display: none;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.tab-pane.active { display: flex; animation: tabFadeIn 180ms var(--ease-out); }  /* playbook §5: tab content fade 180ms */
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Panel section — inner content block within a tab pane ─── */
.panel-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

/* ── Section headers ────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* ── Base spec mini-header ──────────────────────────────────── */
.spec-card__title {
  font-size: var(--text-2xs);
  font-family: var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: var(--sp-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spec-card__engine {
  font-size: var(--text-xs);
  color: var(--c-text-2);
  font-family: var(--font-display);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.stage-badge {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--c-text-3);
  transition: color 0.2s, border-color 0.2s;
}

.perf-notice {
  font-size: var(--text-xs);
  line-height: 1.5;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid;
}
.perf-notice--warn  { background: rgba(251,178,78,0.05);  border-color: rgba(251,178,78,0.2);  color: var(--c-warning); }
.perf-notice--error { background: rgba(248,113,113,0.05); border-color: rgba(248,113,113,0.2); color: var(--c-error); }

/* ── Big stat trio ──────────────────────────────────────────── */
.stat-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-1);
}

.stat-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
  transition: border-color var(--t-fast);
}
.stat-block:hover { border-color: var(--c-border-mid); }
.stat-block.stat-pulse {
  animation: statPulse 0.4s ease-out;
}
@keyframes statPulse {
  0%  { border-color: rgba(255,255,255,0.5); box-shadow: 0 0 12px rgba(255,255,255,0.15); }
  100% { border-color: var(--c-border); box-shadow: none; }
}

.stat-block__value {
  font-family: var(--font-display);
  font-size: 1.875rem;          /* +20% over --text-2xl (1.5625rem) */
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2px;
  letter-spacing: -0.02em;
  /* playbook §1 duration scale: smooth ~600ms value transition on change */
  transition: color 0.6s var(--ease-out), text-shadow 0.6s var(--ease-out);
}

.stat-block__delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  margin-bottom: 4px;
}

.stat-block__unit {
  font-size: var(--text-2xs);
  color: var(--c-text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-block--hp     .stat-block__value { color: var(--c-hp);     text-shadow: 0 0 20px rgba(224, 92, 92, 0.3); }
.stat-block--hp     .stat-block__delta { color: var(--c-hp); }
.stat-block--torque .stat-block__value { color: var(--c-torque); text-shadow: 0 0 20px rgba(212, 137, 74, 0.3); }
.stat-block--torque .stat-block__delta { color: var(--c-torque); }
.stat-block--weight .stat-block__value { color: var(--c-weight); text-shadow: 0 0 20px rgba(74, 222, 128, 0.3); }
.stat-block--weight .stat-block__delta { color: var(--c-weight); }


/* Stat delta empty/stock states */
.stat-block__delta:empty::before {
  content: '— stock';
  color: #444;
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0;
}
.stat-block__delta--stock { color: #444 !important; }

/* ── Power-to-weight ────────────────────────────────────────── */
.pwr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}
.pwr-row + .pwr-row {
  border-top: 1px solid rgba(255,255,255,0.03);
  padding-top: 4px;
  margin-top: 2px;
}
.pwr-row__label {
  font-size: var(--text-xs);
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-text-3);
}
.pwr-row__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text-2);
}
.pwr-row__unit {
  font-size: var(--text-2xs);
  color: var(--c-text-3);
  font-weight: 400;
}

/* ── Dyno graph ─────────────────────────────────────────────── */
.dyno-graph {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  line-height: 0;
}
.dyno-graph svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Performance meters ─────────────────────────────────────── */
.perf-meters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2a2a2a transparent;
}

.perf-meter { display: flex; flex-direction: column; gap: var(--sp-1); }

.perf-meter__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.perf-meter__label {
  font-size: var(--text-2xs);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.perf-meter__val {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--c-text-3);
}

.perf-meter__bar {
  height: 4px;
  background: #1a1a1a;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.perf-meter__stock {
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  position: absolute;
  left: 0;
  top: 0;
}

.perf-meter__delta {
  height: 100%;
  border-radius: 2px;
  position: absolute;
  top: 0;
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.perf-meter__delta.gain { background: rgba(74, 222, 128, 0.8); }
.perf-meter__delta.loss { background: rgba(248, 113, 113, 0.8); }

.perf-meter__val .delta-num {
  font-size: 12px;
  margin-left: 4px;
  font-weight: 600;
}
.perf-meter__val .delta-num.gain { color: #4ade80; }
.perf-meter__val .delta-num.loss { color: #f87171; }

/* ── BUILD TAB ──────────────────────────────────────────────── */
.build-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.build-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast);
  animation: buildItemIn 0.2s ease-out;
}
@keyframes buildItemIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.build-item:hover { border-color: var(--c-border-mid); background: rgba(255,255,255,0.05); }

/* JS injects an anonymous div — target the first div child */
.build-item > div:first-child { flex: 1; min-width: 0; overflow: hidden; }

.build-item__name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-item__brand {
  font-size: var(--text-2xs);
  color: var(--c-text-3);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.build-item__slot {
  font-size: var(--text-2xs);
  color: var(--c-text-4, rgba(255,255,255,0.35));
  font-family: var(--font-mono);
  margin-top: 2px;
}

.build-item__price {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-text-3);
  flex-shrink: 0;
}

/* Gold outbound Buy CTA on a build row (only shown when a retailer URL exists) */
.build-item__buy {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--c-active-border);
  background: var(--c-active-glow);
  color: var(--c-active);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.build-item__buy:hover {
  background: var(--c-active);
  color: var(--c-text-inv);
  border-color: var(--c-active);
}
.build-item__buy:focus-visible {
  outline: 2px solid var(--c-active);
  outline-offset: 2px;
}

.build-item__remove {
  background: transparent;
  border: none;
  color: var(--c-text-3);
  font-size: 14px;
  cursor: pointer;
  padding: 3px;
  border-radius: var(--r-sm);
  line-height: 1;
  transition: color var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.build-item__remove:hover { color: var(--c-error); background: rgba(248,113,113,0.08); }

/* #A10 — build-level "Find installers" CTA. Neutral CTA-blue (gold reserved
   for Buy); one action for the whole build, sits under the parts list. */
.build-installer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--sp-2, 8px);
  padding: 8px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: var(--r-md, 8px);
  border: 1px solid var(--c-cta-dim, rgba(74,143,212,0.40));
  background: var(--c-cta-glow, rgba(74,143,212,0.10));
  color: var(--c-cta, #4a8fd4);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.build-installer-cta:hover {
  background: var(--c-cta, #4a8fd4);
  color: #ffffff;
  border-color: var(--c-cta, #4a8fd4);
}
.build-installer-cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ── Build progress (Zeigarnik completeness) ──────────────────── */
.build-progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.build-progress[hidden] { display: none; }
.build-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.build-progress__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  color: var(--c-text-2);
}
.build-progress__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-active);
}
.build-progress__bar {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-surface-3);
  overflow: hidden;
}
.build-progress__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-active), var(--c-active));
  transition: width var(--t-slow);
}
.build-progress__nudge {
  font-size: var(--text-xs);
  color: var(--c-text-3);
}
.build-progress[data-complete="true"] .build-progress__nudge { color: var(--c-active); }

.build-totals {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.total-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--c-text-3);
}
.total-row.grand {
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-text);
}
.total-row span:last-child { color: var(--c-text-2); }
.total-row.grand span:last-child { color: #ffffff; font-family: var(--font-mono); }

.build-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}

.build-empty {
  text-align: center;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.build-empty[hidden] { display: none !important; }

.build-empty__icon {
  width: 40px;
  height: 40px;
  color: #2a2a2a;
}

.build-empty__title {
  color: #555;
  font-size: 13px;
  font-family: var(--font-display);
}

.build-empty__subtitle {
  color: #383838;
  font-size: 12px;
}

.build-empty__browse {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  border: 1px solid #ffffff;
  border-radius: var(--r-full);
  background: transparent;
  color: #ffffff;
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.build-empty__browse:hover { background: rgba(255,255,255,0.08); }

/* ── Build action button overrides ─────────────────────────── */
#save-build-btn-panel:hover,
#share-build-btn-panel:hover {
  border-color: rgba(255,255,255,0.33);
  color: #ffffff;
  background: rgba(255,255,255,0.06);
}

#reset-build-btn { border-color: transparent; color: #555; }
#reset-build-btn:hover { color: #e03f3f; border-color: rgba(248,113,113,0.25); background: rgba(248,113,113,0.06); }
#export-build-btn { color: #555; }
#export-build-btn:hover { color: #aaa; }

/* ── GARAGE STORAGE MODAL ──────────────────────────────────── */
.garage-modal { display:none; position:fixed; inset:0; z-index:9999; }
.garage-modal.visible { display:flex; align-items:center; justify-content:center; }
.garage-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); }
.garage-modal__panel {
  position:relative; width:min(560px,90vw); max-height:80vh;
  background:rgba(18,18,22,0.95); border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
}
.garage-modal__header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.garage-modal__title { font:700 16px var(--font-display); color:var(--c-text-1); margin:0; }
.garage-modal__close { background:none; border:none; color:var(--c-text-3); font-size:22px; cursor:pointer; }
.garage-modal__close:hover { color:var(--c-text-1); }
.garage-modal__body { padding:16px 20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:12px; }
.garage-modal__actions {
  display:flex; gap:10px; justify-content:flex-end;
  padding:14px 20px; border-top:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}
.garage-modal__panel--confirm { width:min(440px,90vw); }
.garage-modal__panel--confirm .garage-modal__body {
  font-size:13px; color:var(--c-text-2); line-height:1.55; gap:8px;
}
.garage-modal__panel--confirm .garage-modal__body strong { color:var(--c-text-1); font-weight:600; }

/* ── Prompt modal (build naming — replaces window.prompt, #A6) ── */
.prompt-modal__label {
  font-size:12px; color:var(--c-text-3); line-height:1.45;
}
.prompt-modal__input {
  width:100%;
  background:var(--c-surface-1);
  border:1px solid var(--c-border-mid);
  border-radius:var(--r-md);
  height:40px;
  padding:0 12px;
  color:var(--c-text-1);
  font-family:var(--font-body);
  font-size:14px;
  outline:none;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.prompt-modal__input:focus { border-color:var(--c-border-bright); background:var(--c-surface-2); }
.prompt-modal__input:focus-visible { outline:2px solid var(--c-accent-bright); outline-offset:2px; }

/* ── Suggest a Part (#A9) ──────────────────────────────────── */
.suggest-part__head {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:8px; padding:0; background:none; border:none; cursor:pointer;
  color:var(--c-text-2); text-align:left;
}
.suggest-part__head:hover { color:var(--c-text-1); }
.suggest-part__caret { color:var(--c-text-3); font-size: 12px; transition:transform var(--t-fast); }
.suggest-part.is-open .suggest-part__caret { transform:rotate(180deg); }
.suggest-part__body { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.suggest-part__hint { font-size:12px; color:var(--c-text-3); line-height:1.45; }
.suggest-part__form { display:flex; flex-direction:column; gap:8px; }
.suggest-part__input {
  width:100%;
  background:var(--c-surface-1);
  border:1px solid var(--c-border-mid);
  border-radius:var(--r-md);
  height:36px; padding:0 12px;
  color:var(--c-text-1); font-family:var(--font-body); font-size:13px;
  outline:none; transition:border-color var(--t-fast), background var(--t-fast);
}
.suggest-part__input::placeholder { color:var(--c-text-4); }
.suggest-part__input:focus { border-color:var(--c-border-bright); background:var(--c-surface-2); }
.suggest-part__input:focus-visible { outline:2px solid var(--c-accent-bright); outline-offset:2px; }
.suggest-part__submit { align-self:flex-end; }

/* ── Peak-End celebration ──────────────────────────────────── */
.peak-modal .garage-modal__backdrop { background: rgba(0,0,0,0.55); }
.peak-celebrate {
  width: min(360px, 86vw);
  align-items: center;
  text-align: center;
  padding: 32px 28px 26px;
  animation: peakPop var(--t-bounce) both;
}
.peak-modal--closing .peak-celebrate { animation: peakOut 180ms ease-in forwards; }
.peak-modal--closing .garage-modal__backdrop { opacity: 0; transition: opacity 180ms; }
@keyframes peakPop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes peakOut { to { opacity: 0; transform: scale(0.96); } }

.peak-celebrate__check { width: 64px; height: 64px; margin: 0 auto 16px; }
.peak-celebrate__check svg { width: 100%; height: 100%; }
.peak-check__circle {
  fill: none; stroke: var(--c-success); stroke-width: 2.5;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: peakCircle 420ms cubic-bezier(0.65,0,0.45,1) 100ms forwards;
}
.peak-check__mark {
  fill: none; stroke: var(--c-success); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: peakMark 280ms cubic-bezier(0.65,0,0.45,1) 460ms forwards;
}
@keyframes peakCircle { to { stroke-dashoffset: 0; } }
@keyframes peakMark { to { stroke-dashoffset: 0; } }

.peak-celebrate__title { font: 800 22px var(--font-display); color: var(--c-text-1); margin: 0 0 6px; letter-spacing: 0.01em; }
.peak-celebrate__subtitle { font-size: var(--text-xs); color: var(--c-text-3); margin: 0 0 18px; line-height: 1.5; }
.peak-celebrate__stats { display: flex; justify-content: center; gap: 26px; margin-bottom: 22px; }
.peak-stat { display: flex; flex-direction: column; align-items: center; }
.peak-stat__v { font: 700 22px var(--font-mono); color: var(--c-text-1); line-height: 1; }
.peak-stat__k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-3); margin-top: 5px; }
.peak-stat--gold .peak-stat__v { color: var(--c-active); }
.peak-celebrate .btn { min-width: 120px; }

.garage-empty { color:#555; text-align:center; padding:40px 0; font-size:13px; }
.garage-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:10px; overflow:hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  display:flex; flex-direction:column; flex-shrink:0;
}
.garage-card:hover {
  border-color:rgba(255,255,255,0.28);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.32);
}
.garage-card__thumb {
  position:relative; width:100%; height:170px; flex:0 0 170px;
  background:linear-gradient(160deg, rgba(255,255,255,0.04), rgba(0,0,0,0.4));
  overflow:hidden;
}
.garage-card__thumb-img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 0.4s ease;
}
.garage-card:hover .garage-card__thumb-img { transform: scale(1.03); }
.garage-card__thumb-placeholder {
  display:flex; align-items:center; justify-content:center; height:100%;
  font-size: 12px; color:#555; letter-spacing:0.06em; text-transform:uppercase;
}
.garage-card__content { padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.garage-card__header { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.garage-card__name {
  font:600 14px var(--font-display); color:var(--c-text-1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.garage-card__date { font-size: 12px; color:#666; flex-shrink:0; }
.garage-card__car {
  font-size: 12px; color:#777; text-transform:uppercase; letter-spacing:0.08em;
}
.garage-card__stats {
  display:flex; flex-wrap:wrap; gap:10px;
  font:600 11px var(--font-mono);
}
.gc-stat { color:#888; }
.gc-stat--hp { color:#f57c20; }
.gc-stat--tq { color:#26a8e0; }
.gc-stat--cost { color:var(--c-text-1); margin-left:auto; }
.garage-card__actions { display:flex; gap:6px; margin-top:2px; }
.garage-card__actions .btn { flex:1; }
.garage-card__actions .btn--ghost { flex:0; min-width:60px; }

/* ── COMPATIBILITY TAB ──────────────────────────────────────── */
.compat-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compat-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid;
}

.compat-item--ok      { background: rgba(74,222,128,0.04);   border-color: rgba(74,222,128,0.15); }
.compat-item--warning { background: rgba(251,178,78,0.04);   border-color: rgba(251,178,78,0.15); }
.compat-item--error   { background: rgba(248,113,113,0.04);  border-color: rgba(248,113,113,0.15); }

.compat-item__icon { font-size: 14px; flex-shrink: 0; line-height: 1.5; }

.compat-item__text { font-size: var(--text-xs); line-height: 1.5; }

.compat-item--ok      .compat-item__text { color: var(--c-success); }
.compat-item--warning .compat-item__text { color: var(--c-warning); }
.compat-item--error   .compat-item__text { color: var(--c-error); }

.compat-empty {
  text-align: center;
  padding: var(--sp-5);
  color: var(--c-text-3);
  font-size: var(--text-xs);
  opacity: 0.6;
}

/* ── AI / INSIGHTS TAB ──────────────────────────────────────── */
.ai-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  position: relative;
}

.ai-header::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf50;
  margin-left: 8px;
  animation: ai-pulse 2s ease-in-out infinite;
}

@keyframes ai-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.ai-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-2);
}

.ai-badge {
  padding: 2px 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border-mid);
  border-radius: 3px;
  font-size: var(--text-2xs);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

.ai-rec {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  gap: var(--sp-3);
  transition: border-color var(--t-fast), background var(--t-fast);
  cursor: pointer;
}
.ai-rec:hover { border-color: var(--c-border-mid); background: rgba(255,255,255,0.04); }

.ai-rec__icon {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.ai-rec__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 2px;
}

.ai-rec__reason {
  font-size: var(--text-xs);
  color: var(--c-text-3);
  line-height: 1.5;
}

.ai-rec__gain {
  font-size: var(--text-xs);
  color: var(--c-text-2);
  font-family: var(--font-mono);
  margin-top: var(--sp-1);
}

.ai-rec__cta {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 3px 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-accent);
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ai-rec__cta:hover {
  background: rgba(96, 165, 250, 0.22);
  border-color: rgba(96, 165, 250, 0.50);
}

.ai-empty {
  border: 1px dashed #1e1e1e;
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ai-empty__icon {
  width: 32px;
  height: 32px;
  color: #333;
}

.ai-empty__text {
  color: #444;
  font-size: 12px;
  line-height: 1.6;
  max-width: 220px;
}

.ai-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #1e1e1e;
  margin-top: 12px;
}

.ai-input {
  flex: 1;
  background: #111;
  border: 1px solid #222;
  border-radius: 6px;
  padding: 8px 12px;
  color: #ddd;
  font-size: 12px;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
.ai-input::placeholder { color: #444; }
.ai-input:focus {
  border-color: rgba(255,255,255,0.27);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.09);
}
/* The base rule sets outline:none; restore a real keyboard ring (#A8 / WCAG 2.4.7). */
.ai-input:focus-visible { outline: 2px solid var(--c-accent-bright); outline-offset: 1px; }

.ai-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ai-send-btn:hover { background: rgba(255,255,255,0.12); }

/* ================================================================
   Ride Height Panel (inside Specs tab)
   ================================================================ */

/* ================================================================
   Spacer Panel (inside Specs tab)
   ================================================================ */

.rp-spacer-panel.hidden { display: none; }

.rp-spacer-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rp-spacer-btns {
  display: flex;
  gap: 6px;
}

.rp-spacer-btn {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--c-border, rgba(255,255,255,0.08));
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--c-text-2, rgba(255,255,255,0.55));
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.rp-spacer-btn:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

.rp-spacer-btn.active {
  background: rgba(255,255,255,0.15);
  border-color: var(--c-active);
  color: var(--c-active);
  font-weight: 600;
}

.rp-spacer-value {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--c-active);
  text-align: center;
  min-height: 16px;
}

/* Uniform checkbox */
.rp-spacer-uniform-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-display);
  color: var(--c-text-2, rgba(255,255,255,0.55));
  cursor: pointer;
  margin-bottom: 4px;
}

.rp-spacer-uniform-label input[type="checkbox"] {
  accent-color: var(--c-active);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* Split front/rear rows */
.rp-spacer-split { display: flex; flex-direction: column; gap: 8px; }
.rp-spacer-split.hidden { display: none; }

.rp-spacer-row-label {
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3, rgba(255,255,255,0.35));
  margin-bottom: 4px;
}

.rp-spacer-row .rp-spacer-btns { margin-bottom: 0; }

#spacer-uniform-row.hidden { display: none; }

/* ================================================================
   Ride Height Panel (inside Specs tab)
   ================================================================ */

.ride-height-panel.hidden { display: none; }

.ride-height-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 10px;
}

.ride-height-slider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 160px;
}
.ride-height-slider-wrap.hidden { display: none; }

/* Per-axle column (FRONT / REAR) */
.rh-axle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.rh-axle.hidden { display: none; }
.rh-axle__name {
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  color: var(--c-text-3);
}

/* Link front & rear toggle */
.rh-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: var(--text-xs);
  color: var(--c-text-2);
  cursor: pointer;
  user-select: none;
}
.rh-link.hidden { display: none; }
.rh-link input { accent-color: var(--c-active); cursor: pointer; }

.ride-height-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  color: var(--c-text-3, rgba(255,255,255,0.35));
  text-align: right;
}
.rh-label--mid { color: var(--c-active); font-weight: 600; }

.ride-height-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 112px;
  background: transparent;
  flex: 0 0 auto;
}
.ride-height-slider::-webkit-slider-runnable-track {
  width: 4px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.08), rgba(255,255,255,0.3));
  border-radius: 2px;
}
.ride-height-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--c-active);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
  margin-left: -6px;
}
.ride-height-slider::-moz-range-track {
  width: 4px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.08), rgba(255,255,255,0.3));
  border-radius: 2px;
}
.ride-height-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--c-active);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(255,255,255,0.4);
  border: none;
}

.ride-height-value {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--c-active);
  min-width: 44px;
  text-align: center;
}

/* Fixed drop for H&R springs */
.ride-height-fixed {
  text-align: center;
  padding: 12px;
}
.ride-height-fixed.hidden { display: none; }

.rh-fixed-bar {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--c-active), transparent);
  border-radius: 3px;
  margin-bottom: 8px;
}

.rh-fixed-label {
  font-size: 13px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-active);
}

/* ================================================================
   DRL Color Panel
   ================================================================ */

.rp-drl-panel.hidden { display: none; }
.rp-caliper-panel.hidden { display: none; }

.rp-drl-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

.rp-drl-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rp-drl-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.rp-drl-swatch:hover {
  transform: scale(1.15);
  border-color: rgba(255, 255, 255, 0.3);
}
/* Keyboard focus must stay visible (#A8 / WCAG 2.4.7). Mouse :active and the
   selected .active state intentionally show no extra highlight — the colour is
   the cue — but a tabbed-to swatch gets a clear ring. */
.rp-drl-swatch:focus-visible {
  outline: 2px solid var(--c-accent-bright);
  outline-offset: 2px;
}
.rp-drl-swatch:active,
.rp-drl-swatch.active {
  outline: 0;
  border-color: rgba(255, 255, 255, 0.1); /* same as default — no click highlight */
  box-shadow: none;
}

.rp-drl-custom {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: none;
  padding: 0;
}

/* ════════════════════════════════════════════════════════════════════
   v2 PERFORMANCE PANEL — hierarchy, build score, what-changed, aero
   ════════════════════════════════════════════════════════════════════ */

/* ── Stat trio v2: HP/TQ primary, Weight secondary ──────────────── */
.stat-trio--v2 {
  grid-template-columns: 1.15fr 1.15fr 0.85fr;
  align-items: stretch;
}
.stat-trio--v2 .stat-block--primary {
  padding: var(--sp-3) var(--sp-2) var(--sp-3);
}
.stat-trio--v2 .stat-block--secondary {
  padding: var(--sp-3) var(--sp-2) var(--sp-3);
  background: rgba(255,255,255,0.015);
  border-color: rgba(255,255,255,0.04);
}
.stat-trio--v2 .stat-block--secondary .stat-block__value {
  font-size: 1.45rem;       /* smaller than primary 1.875rem */
  opacity: 0.85;
  text-shadow: none;
}
.stat-trio--v2 .stat-block--secondary .stat-block__delta {
  opacity: 0.75;
}

/* ── Inline delta beside the big number ─────────────────────────── */
.stat-block__value-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 2px;
}
.stat-block__delta-inline {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.stat-block__delta-inline:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}
.stat-block__delta-inline.gain {
  background: rgba(74, 222, 128, 0.16);
  color: #4ade80;
}
.stat-block__delta-inline.loss {
  background: rgba(248, 113, 113, 0.16);
  color: #f87171;
}

/* ── Fitment summary chip on Specs tab ──────────────────────────── */
.fit-summary-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255, 0.06);
  border: 1px solid rgba(255,255,255, 0.22);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--font-display);
  text-decoration: none;
  color: inherit;
}
.fit-summary-chip:hover {
  background: rgba(255,255,255, 0.12);
  border-color: rgba(255,255,255, 0.35);
}
.fit-summary-chip--error {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.25);
}
.fit-summary-chip__icon {
  font-size: 14px;
  color: var(--c-active);
}
.fit-summary-chip--error .fit-summary-chip__icon { color: #f87171; }
.fit-summary-chip__text {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-text-2);
}
.fit-summary-chip__cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Build Score card ───────────────────────────────────────────── */
.build-score {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.build-score__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.build-score__label {
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.build-score__tier {
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--c-text-2);
}
.build-score__tier[data-tier="stock"]      { background: rgba(136,136,184,0.16); color: #a8a8c4; }
.build-score__tier[data-tier="mild"]       { background: rgba(96, 165, 250, 0.16); color: #60a5fa; }
.build-score__tier[data-tier="spirited"]   { background: rgba(74, 222, 128, 0.16); color: #4ade80; }
.build-score__tier[data-tier="aggressive"] { background: rgba(255,255,255, 0.16); color: var(--c-active); }
.build-score__tier[data-tier="track"]      { background: rgba(255, 140, 0, 0.18);  color: #ff8c00; }
.build-score__tier[data-tier="race"]       { background: rgba(248, 113, 113, 0.20); color: #f87171; }

.build-score__bar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.build-score__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #60a5fa 0%, #4ade80 40%, var(--c-active) 70%, #f87171 100%);
  transform-origin: left center;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  border-radius: 3px;
}
.build-score__row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  font-family: var(--font-display);
}
.build-score__num {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text-1);
  letter-spacing: -0.02em;
}
.build-score__den {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-3);
  letter-spacing: 0.02em;
}

/* ── Aero & Top Speed grid ───────────────────────────────────────── */
.aero-grid__cells {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.aero-cell {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aero-cell__label {
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-3);
  opacity: 0.7;
}
.aero-cell__value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text-1);
  letter-spacing: -0.01em;
}
.aero-cell__unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-3);
  letter-spacing: 0.04em;
  margin-left: 2px;
}
.aero-cell__delta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  margin-top: 1px;
  min-height: 12px;
}
.aero-cell__delta.gain { color: #4ade80; }
.aero-cell__delta.loss { color: #f87171; }

/* ── Dyno legend (above the SVG) ──────────────────────────────── */
.dyno-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.section-title--inline { margin: 0; }
.dyno-legend {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-text-3);
}
.dyno-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dyno-legend__swatch {
  width: 14px;
  height: 2px;
  display: inline-block;
}
.dyno-legend__swatch--stock {
  background: rgba(255,255,255,0.5);
  border-top: 1px dashed rgba(255,255,255,0.5);
  height: 0;
}
.dyno-legend__swatch--mod {
  background: #ffffff;
  height: 2px;
}

/* ── What Changed accordion ───────────────────────────────────── */
.what-changed {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
}
.what-changed__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  transition: background 0.12s;
}
.what-changed__head:hover { background: rgba(255,255,255,0.03); }
.what-changed__count {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--c-text-3);
  margin-left: auto;
}
.what-changed__caret {
  font-size: 12px;
  color: var(--c-text-3);
  transition: transform 0.2s ease;
}
.what-changed.open .what-changed__caret { transform: rotate(180deg); }
.what-changed__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 12px;
  transition: max-height 0.3s ease, padding 0.2s ease, opacity 0.2s ease;
}
.what-changed.open .what-changed__body {
  max-height: 800px;
  padding: 0 12px 10px;
  opacity: 1;
}
.what-changed__empty {
  font-size: 12px;
  color: var(--c-text-3);
  font-family: var(--font-display);
  text-align: center;
  padding: 8px 0 4px;
  font-style: italic;
}
.what-changed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.what-changed__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.what-changed__row:last-child { border-bottom: none; }
.what-changed__name {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.what-changed__brand {
  font-size: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.what-changed__part {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-1);
}
.what-changed__deltas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wc-delta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--c-text-2);
}
.wc-delta--hp       { background: rgba(224,92,92,0.14);   color: #ff8a8a; }
.wc-delta--tq       { background: rgba(212,137,74,0.14);  color: #ffb787; }
.wc-delta--lighter  { background: rgba(74,222,128,0.14);  color: #4ade80; }
.wc-delta--heavier  { background: rgba(248,113,113,0.14); color: #f87171; }
.wc-delta--cosmetic { background: rgba(96,165,250,0.10);  color: #60a5fa; font-style: italic; }
.wc-delta--est      { background: rgba(255,255,255,0.06); color: var(--c-text-2); font-style: italic; letter-spacing: 0.02em; }
.what-changed__note { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--c-text-2); opacity: 0.85; }

/* ── Driving Feel summary ─────────────────────────────────────── */
.driving-feel__bullets {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.driving-feel__bullet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  font-family: var(--font-display);
}
.driving-feel__bullet--stock {
  border-left-color: rgba(136,136,184,0.4);
}
.driving-feel__icon {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1.3;
}
.driving-feel__text {
  font-size: 12px;
  color: var(--c-text-2);
  line-height: 1.4;
}

/* ── Active tab glow underline ────────────────────────────────── */
.tab-btn { position: relative; }
.tab-btn.active::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.85) 50%, transparent 100%);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.5));
  border-radius: 2px;
  pointer-events: none;
  /* playbook §5: indicator spring (damping 22 / stiffness 200) ≈ 0.5s overshoot easing */
  animation: tabGlowIn 0.5s var(--ease-spring);
}
@keyframes tabGlowIn {
  from { opacity: 0; transform: scaleX(0.4); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ── Widebody kit build-summary row ─────────────────────────── */

.build-item--kit {
  border-left: 3px solid var(--c-cta);
  background: rgba(108, 204, 255, 0.04);
}
.build-item__kit-class {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-text-2, #ccc);
}
.build-item__bundle {
  margin-top: 4px;
  font-size: 12px;
}
.build-item__bundle summary {
  cursor: pointer;
  color: var(--c-cta);
  padding: 2px 0;
}
.build-item__bundle ul {
  margin: 4px 0 4px 16px;
  padding: 0;
  list-style: disc;
  color: var(--c-text-2, #aaa);
  line-height: 1.5;
}

/* ── Recommended companions panel ───────────────────────────── */
.kit-companions {
  margin: 8px 12px;
  padding: 12px;
  border-radius: var(--r-md, 8px);
  background: rgba(108, 204, 255, 0.06);
  border: 1px solid rgba(108, 204, 255, 0.18);
}
.kit-companions__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--c-cta);
  margin-bottom: 2px;
}
.kit-companions__sub {
  font-size: 12px;
  color: var(--c-text-2, #aaa);
  margin-bottom: 8px;
}
.kit-companions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kit-companions__item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 8px 10px;
}
.kit-companions__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--c-text, #e0e0e0);
  margin-bottom: 2px;
}
.kit-companions__spec {
  font-size: 12px;
  color: var(--c-text-2, #aaa);
  line-height: 1.5;
  margin-bottom: 6px;
}
.kit-companions__cta {
  appearance: none;
  border: 1px solid rgba(108, 204, 255, 0.4);
  background: transparent;
  color: var(--c-cta);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.kit-companions__cta:hover {
  background: rgba(108, 204, 255, 0.12);
}