/* Car Health Check blueprint. Loaded only by car-health-check.html. */

:root {
  --bp-navy: #0A2342;
  --bp-navy-2: #0d2b52;
  --bp-ink: #CFE8FF;
  --bp-red: #C8102E;
  --bp-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- hero ---------- */
.bp-hero {
  background: linear-gradient(180deg, var(--bp-navy) 0%, var(--bp-navy-2) 100%);
  color: #fff;
}
.bp-eyebrow {
  display: inline-block;
  background: var(--bp-red);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.bp-h1 {
  font-family: Oswald, system-ui, sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.05;
  font-size: clamp(2rem, 6vw, 3.75rem);
  margin: 0;
  max-width: 18ch;
}
.bp-lead {
  margin-top: 1.25rem;
  max-width: 44rem;
  color: var(--bp-ink);
  line-height: 1.6;
  font-family: Manrope, system-ui, sans-serif;
}

/* ---------- tool canvas (blueprint grid) ---------- */
.bp-tool {
  background-color: var(--bp-navy);
  background-image:
    linear-gradient(rgba(207, 232, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 232, 255, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(207, 232, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 232, 255, 0.13) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  color: var(--bp-ink);
  font-family: Manrope, system-ui, sans-serif;
  min-width: 0;
}
.bp-tool * { min-width: 0; }
.bp-tool-inner { max-width: 80rem; margin: 0 auto; padding: 2.5rem 1rem 3.5rem; }
@media (min-width: 640px) { .bp-tool-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }

.bp-label {
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-ink);
}

/* ---------- symptom chips ---------- */
.bp-symptoms { margin-bottom: 1.5rem; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.bp-chip {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(207, 232, 255, 0.45);
  background: rgba(10, 35, 66, 0.6);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: transform 200ms var(--bp-ease), opacity 200ms var(--bp-ease);
}
.bp-chip[aria-pressed="true"] { background: var(--bp-red); border-color: var(--bp-red); }
.bp-chip-clear { border-style: dashed; color: var(--bp-ink); }
.bp-chip:active, .bp-btn:active, .bp-legend-btn:active, .bp-cause-btn:active { transform: scale(0.97); }

/* ---------- layout ---------- */
/* One column at every width: the drawing runs full width, the part details sit under it, then the parts list. */
.bp-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.bp-panel { scroll-margin-top: 6rem; }
@media (min-width: 1024px) {
  .bp-panel { columns: 2 22rem; column-gap: 2.5rem; padding: 1.5rem 1.75rem; }
  .bp-panel > .bp-kicker, .bp-panel > .bp-ptitle, .bp-panel > .bp-actions { column-span: all; }
  .bp-panel .bp-sub { break-after: avoid; }
  .bp-panel p, .bp-panel ul, .bp-panel ol, .bp-panel li, .bp-panel > div { break-inside: avoid; }
  .bp-legend ol { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
.bp-stage { min-width: 0; }
.bp-crumbs-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.bp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.bp-crumbs li + li::before { content: "/"; margin: 0 0.5rem; color: rgba(207, 232, 255, 0.6); }
.bp-crumbs button { min-height: 44px; padding: 0 0.4rem; background: none; border: 0; color: var(--bp-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.bp-crumbs li[aria-current] { color: #fff; }

.bp-frame {
  border: 1px solid rgba(207, 232, 255, 0.5);
  background: rgba(10, 35, 66, 0.55);
  border-radius: 6px;
  overflow: hidden;
}
.bp-view { padding: 0.5rem; }
.bp-view[hidden] { display: none; }
.bp-view.is-enter { animation: bp-enter 240ms var(--bp-ease) both; }
@keyframes bp-enter {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}
.bp-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.bp-svg .bp-part { outline: none; }

.bp-titleblock {
  display: none;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(207, 232, 255, 0.5);
  padding: 0.5rem 0.75rem;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--bp-ink);
}
/* Simple / Technical toggle and phone zoom controls */
.bp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.bp-mode { display: inline-flex; border: 1px solid rgba(207, 232, 255, 0.55); border-radius: 999px; padding: 3px; background: rgba(10, 35, 66, 0.7); }
.bp-mode-btn {
  min-height: 40px; min-width: 6.5rem; padding: 0 1rem; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--bp-ink); font: inherit; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer;
  transition: transform 200ms var(--bp-ease), background-color 200ms var(--bp-ease);
}
.bp-mode-btn[aria-pressed="true"] { background: var(--bp-ink); color: var(--bp-navy); }
.bp-zoomctl { display: none; gap: 0.4rem; }
.bp-zoom-btn {
  min-width: 44px; min-height: 44px; padding: 0 0.6rem; border-radius: 6px; border: 1px solid rgba(207, 232, 255, 0.55);
  background: rgba(10, 35, 66, 0.7); color: #fff; font: inherit; font-size: 1.15rem; font-weight: 600; cursor: pointer;
  transition: transform 200ms var(--bp-ease);
}
.bp-zoom-btn.bp-zoom-reset { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.bp-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.bp-mode-btn:active, .bp-zoom-btn:active { transform: scale(0.97); }
@media (max-width: 767px) { .bp-zoomctl { display: inline-flex; } }

.bp-hint { margin-top: 0.75rem; font-size: 0.9rem; color: var(--bp-ink); }

/* ---------- drawing strokes ---------- */
/* Line weights follow drafting practice: outlines 1.6px, detail 1px, hatching and dimensions 0.6px. */
.bp-svg {
  --bp-k: 1;
  --c-ink: #CFE8FF;
  --c-dim: rgba(207, 232, 255, 0.55);
  --c-faint: rgba(207, 232, 255, 0.32);
  font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
.bp-svg path, .bp-svg circle, .bp-svg rect, .bp-svg ellipse, .bp-svg line, .bp-svg polygon {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bp-svg .bp-o, .bp-svg .bp-d, .bp-svg .bp-t, .bp-svg .bp-c, .bp-svg .bp-x, .bp-svg .bp-x2, .bp-svg .bp-h { fill: none; stroke: var(--c-ink); }
.bp-svg .bp-o { stroke-width: 1.6; }
.bp-svg .bp-d { stroke-width: 1; }
.bp-svg .bp-t { stroke-width: 0.6; }
.bp-svg .bp-c { stroke: var(--c-dim); stroke-width: 0.6; stroke-dasharray: 16 3 2 3; }
.bp-svg .bp-h { stroke-width: 0.8; stroke-dasharray: 4 3; stroke: var(--c-dim); }
.bp-svg .bp-x { stroke-width: 1.1; stroke-dasharray: 5 3; stroke: rgba(207, 232, 255, 0.78); }
.bp-svg .bp-x2 { stroke-width: 0.7; stroke-dasharray: 3 3; stroke: var(--c-faint); }
.bp-svg .bp-fn { fill: #0b2547; }
.bp-svg .bp-fill { fill: rgba(207, 232, 255, 0.10); }
.bp-svg .bp-ft { fill: rgba(207, 232, 255, 0.07); }
.bp-svg .bp-cutf { fill: rgba(207, 232, 255, 0.07); stroke: none; }
.bp-svg .bp-hatch { stroke: none; }
.bp-svg .bp-hl { stroke: rgba(207, 232, 255, 0.55); stroke-width: 0.6; fill: none; vector-effect: none; }
.bp-svg .bp-arr { fill: var(--c-ink); stroke: none; }
.bp-svg .bp-solid { fill: var(--c-ink); stroke: none; }
.bp-svg .bp-wt { fill: none; stroke: #ffb347; stroke-width: 2; }
.bp-svg .bp-pbk { stroke: #ffb347; }
.bp-svg text { stroke: none; fill: var(--c-ink); }
.bp-svg .bp-dim, .bp-svg .bp-wire, .bp-svg .bp-xlab { paint-order: stroke; stroke: #0b2547; stroke-width: 3px; stroke-linejoin: round; }
.bp-svg .bp-dim { font-size: calc(10px / var(--bp-s, 1)); letter-spacing: 0.02em; }
.bp-svg .bp-tx { font-size: 9px; letter-spacing: 0.04em; fill: var(--c-dim); }
.bp-svg .bp-xlab { font-size: calc(6px / var(--bp-s, 1)); fill: var(--c-dim); letter-spacing: 0.06em; }
.bp-svg .bp-sym { font-size: 13px; font-weight: 700; fill: #fff; }
.bp-svg .bp-bundle { stroke-width: 3.2; }
.bp-svg .bp-sm { font-size: 9px; }
.bp-svg .bp-teeth { stroke-dasharray: 1.5 1.5; }
.bp-svg .bp-wire { font-size: 8.5px; fill: var(--c-dim); letter-spacing: 0.02em; }
.bp-svg .bp-grid { font-size: 9px; fill: var(--c-dim); }
.bp-svg .bp-tbc { font-size: 6.5px; letter-spacing: 0.1em; fill: var(--c-dim); }
.bp-svg .bp-tbv { font-size: 10.5px; letter-spacing: 0.04em; fill: #fff; }
.bp-svg .bp-note-t { font-size: 8px; letter-spacing: 0.06em; fill: var(--c-dim); }
.bp-svg .bp-vtitle { font-size: 11px; letter-spacing: 0.14em; fill: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bp-svg .bp-simple-only.bp-vtitle { font-family: Manrope, system-ui, sans-serif; letter-spacing: 0.04em; font-size: 12px; text-decoration: none; fill: var(--c-ink); }

/* Callouts: leader + balloon + label. The balloon group is counter-scaled (--bp-k, set by JS)
   so labels render at about 13px whatever the drawing scale. */
.bp-svg .bp-leader { fill: none; stroke: rgba(207, 232, 255, 0.6); stroke-width: 0.8; }
.bp-svg .bp-dot { fill: var(--c-ink); stroke: none; }
.bp-svg .bp-cs { transform: scale(calc(var(--bp-k) / var(--bp-s, 1))); }
.bp-svg .bp-num { fill: var(--bp-navy); stroke: var(--c-ink); stroke-width: 1.2; }
.bp-svg .bp-num-t { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.bp-svg .bp-lbl { fill: #fff; font-family: Manrope, system-ui, sans-serif; font-size: 13px; font-weight: 600; dominant-baseline: middle; paint-order: stroke; stroke: var(--bp-navy); stroke-width: 4px; stroke-linejoin: round; }
.bp-svg .bp-lhit { fill: transparent; stroke: none; }
.bp-svg .bp-co-sm .bp-lbl { font-size: 10.5px; }
.bp-tool[data-bp-mode="technical"] .bp-svg .bp-co-sm .bp-lbl { font-size: 9.5px; }
.bp-tool[data-bp-mode="technical"] .bp-svg .bp-lbl { font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; }

/* Simple / Technical */
.bp-tool[data-bp-mode="simple"] .bp-svg .bp-tech { display: none; }
.bp-tool[data-bp-mode="technical"] .bp-svg .bp-simple-only { display: none; }

/* Desktop shows the sheet's own callouts; phones get the mobile layout. */
.bp-svg .bp-co-m { display: none; }

/* ---------- interaction ---------- */
.bp-svg * { pointer-events: none; } /* centre lines, grid and flow overlays never swallow a click */
.bp-svg .bp-part { cursor: pointer; outline: none; }
.bp-svg .bp-part * { pointer-events: none; }
.bp-svg .bp-part .bp-hit, .bp-svg .bp-part .bp-lhit, .bp-svg .bp-part .bp-num { pointer-events: all; }
/* Generous hit area: transparent fill plus a wide transparent stroke. */
.bp-svg .bp-hit { fill: transparent; stroke: transparent; stroke-width: 16px; }
.bp-svg .bp-part .bp-hitl { fill: none; pointer-events: stroke; stroke-width: 14px; }

.bp-svg .bp-part.is-selected :is(.bp-o, .bp-d, .bp-t, .bp-x, .bp-x2, .bp-h),
.bp-svg .bp-part.is-suspect :is(.bp-o, .bp-d, .bp-t, .bp-x, .bp-x2, .bp-h) { stroke: var(--bp-red); stroke-opacity: 1; }
.bp-svg .bp-part.is-selected :is(.bp-o, .bp-d, .bp-x),
.bp-svg .bp-part.is-suspect :is(.bp-o, .bp-d, .bp-x) { stroke-width: 2.2; }
.bp-svg .bp-part.is-selected .bp-xg, .bp-svg .bp-part.is-suspect .bp-xg,
.bp-svg .bp-part.is-selected .bp-pg, .bp-svg .bp-part.is-suspect .bp-pg { filter: drop-shadow(0 0 3px rgba(200, 16, 46, 0.85)); }
.bp-svg .bp-part.is-selected :is(.bp-cutf, .bp-ft, .bp-fill),
.bp-svg .bp-part.is-suspect :is(.bp-cutf, .bp-ft, .bp-fill) { fill: rgba(200, 16, 46, 0.22); }
.bp-svg .bp-part.is-selected .bp-solid, .bp-svg .bp-part.is-suspect .bp-solid { fill: var(--bp-red); }
.bp-svg .bp-part.is-selected .bp-num, .bp-svg .bp-part.is-suspect .bp-num { fill: var(--bp-red); stroke: #fff; }
.bp-svg .bp-part.is-selected .bp-leader, .bp-svg .bp-part.is-suspect .bp-leader { stroke: var(--bp-red); stroke-width: 1.2; }
.bp-svg .bp-part.is-selected .bp-dot, .bp-svg .bp-part.is-suspect .bp-dot { fill: var(--bp-red); }
.bp-svg .bp-part.is-suspect .bp-xg, .bp-svg .bp-part.is-suspect .bp-pg { animation: bp-pulse 1.8s ease-in-out infinite; }
@keyframes bp-pulse {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(200, 16, 46, 0.4)); }
  50% { filter: drop-shadow(0 0 6px rgba(200, 16, 46, 1)); }
}

/* Hover and keyboard focus outline the part in red. */
.bp-svg .bp-part.is-focus :is(.bp-o, .bp-d, .bp-t, .bp-x, .bp-x2, .bp-h) { stroke: var(--bp-red); stroke-width: 2.2; stroke-opacity: 1; }
.bp-svg .bp-part.is-focus .bp-num { stroke: #fff; stroke-width: 3; fill: var(--bp-red); }
.bp-svg .bp-part.is-focus .bp-leader { stroke: var(--bp-red); }
.bp-tool a:focus-visible, .bp-tool button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .bp-svg .bp-part.is-hover :is(.bp-o, .bp-d, .bp-t, .bp-x, .bp-x2, .bp-h) { stroke: var(--bp-red); stroke-opacity: 1; }
  .bp-svg .bp-part.is-hover :is(.bp-o, .bp-d, .bp-x) { stroke-width: 2; }
  .bp-svg .bp-part.is-hover .bp-num { stroke: var(--bp-red); stroke-width: 2; }
  .bp-svg .bp-part.is-hover .bp-leader { stroke: var(--bp-red); }
  .bp-svg .bp-part.is-hover .bp-dot { fill: var(--bp-red); }
  .bp-chip:hover, .bp-legend-btn:hover, .bp-cause-btn:hover, .bp-mode-btn:hover, .bp-zoom-btn:hover { border-color: #fff; }
  .bp-btn:hover { filter: brightness(1.08); }
  .bp-chip { transition-property: transform, opacity; }
}

/* ---------- phones: main view only, zoomable ---------- */
@media (max-width: 767px) {
  .bp-svg .bp-ortho, .bp-svg .bp-sheet, .bp-svg .bp-vt { display: none; }
  .bp-svg .bp-co-d { display: none; }
  .bp-svg .bp-co-m { display: inline; }
  .bp-svg .bp-co-m .bp-cs { transform: scale(calc(var(--bp-k) * 0.78 / var(--bp-s, 1))); } /* 3D sheets have many callouts: slightly smaller balloons on phones */
  .bp-svg .bp-mstack { transform: translate(var(--m-tx, 0), var(--m-ty, 0)); }
  .bp-zoom { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
  .bp-zoom .bp-svg { transform-origin: 0 0; transition: transform 200ms var(--bp-ease); }
  .bp-titleblock { display: flex; }
}

/* ---------- side panel ---------- */
.bp-panel {
  background: var(--bp-navy-2);
  border: 1px solid rgba(207, 232, 255, 0.35);
  border-radius: 6px;
  padding: 1.25rem;
  color: var(--bp-ink);
  line-height: 1.6;
  font-size: 0.95rem;
}
.bp-panel p { margin: 0.5rem 0; }
.bp-kicker { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #CFE8FF; margin: 0 0 0.25rem; }
.bp-ptitle { font-family: Oswald, system-ui, sans-serif; text-transform: uppercase; font-size: 1.6rem; font-weight: 600; color: #fff; margin: 0 0 0.5rem; line-height: 1.15; }
.bp-sub { font-family: Oswald, system-ui, sans-serif; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.06em; color: #fff; margin: 1rem 0 0.25rem; font-weight: 500; }
.bp-list { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0; }
.bp-note { font-size: 0.85rem; color: #CFE8FF; border-left: 3px solid var(--bp-red); padding-left: 0.75rem; }
.bp-panel a { color: #fff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.bp-check { font-size: 0.9rem; }
.bp-check strong { color: #fff; }
.bp-causes { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.bp-causes li { border-top: 1px solid rgba(207, 232, 255, 0.2); padding-top: 0.6rem; }
.bp-cause-btn {
  min-height: 44px;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--bp-ink);
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 200ms var(--bp-ease);
}
.bp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.bp-btn[hidden] { display: none; }
.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms var(--bp-ease), opacity 200ms var(--bp-ease);
  border: 1px solid transparent;
}
.bp-btn-red { background: var(--bp-red); border-color: var(--bp-red); color: #fff; }
.bp-btn-line { background: transparent; border-color: rgba(207, 232, 255, 0.6); color: #fff; }
.bp-panel .bp-btn { text-decoration: none; }

/* ---------- parts list ---------- */
.bp-legend { margin-top: 1.25rem; }
.bp-legend h3 { font-family: Oswald, system-ui, sans-serif; text-transform: uppercase; font-size: 1rem; color: #fff; margin: 0 0 0.5rem; font-weight: 500; letter-spacing: 0.06em; }
.bp-legend ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.4rem; }
.bp-legend-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(207, 232, 255, 0.3);
  background: rgba(10, 35, 66, 0.6);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: transform 200ms var(--bp-ease);
}
.bp-legend-btn[aria-pressed="true"] { border-color: var(--bp-red); background: rgba(200, 16, 46, 0.25); }
.bp-num-sm {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--bp-ink);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
}
.bp-disclaimer { margin-top: 1.5rem; font-size: 0.9rem; color: #CFE8FF; border: 1px dashed rgba(207, 232, 255, 0.5); padding: 0.75rem 1rem; border-radius: 6px; }

/* ---------- closing CTA ---------- */
.bp-cta { background: var(--bp-navy-2); color: #fff; margin-top: 1.25rem; }

/* Reduced motion: no transitions, no pulses, no crossfade. */
@media (prefers-reduced-motion: reduce) {
  .bp-view.is-enter { animation: none; }
  .bp-chip, .bp-btn, .bp-legend-btn, .bp-cause-btn, .bp-mode-btn, .bp-zoom-btn { transition: none; }
  .bp-zoom .bp-svg { transition: none; }
  .bp-svg .bp-part.is-suspect .bp-xg, .bp-svg .bp-part.is-suspect .bp-pg { animation: none; filter: drop-shadow(0 0 3px rgba(200, 16, 46, 0.85)); }
  .bp-chip:active, .bp-btn:active, .bp-legend-btn:active, .bp-cause-btn:active, .bp-mode-btn:active, .bp-zoom-btn:active { transform: none; }
}

/* ---------- system flows (drawing overlays, toggled by chips) ---------- */
.bp-svg .bp-flow-g { display: none; }
.bp-svg .bp-flow-p { fill: none; stroke-width: 2.4; stroke-dasharray: 6 5; stroke-linecap: round; }
.bp-tool[data-flow="cool"] .bp-svg .bp-flow-cool { display: inline; }
.bp-tool[data-flow="oil"] .bp-svg .bp-flow-oil { display: inline; }
.bp-tool[data-flow="brake"] .bp-svg .bp-flow-brake { display: inline; }
.bp-tool[data-flow="power"] .bp-svg .bp-flow-power { display: inline; }
.bp-tool[data-flow="elec"] .bp-svg .bp-flow-elec { display: inline; }
.bp-svg .bp-flow-cool .bp-flow-p { stroke: #5fd4ff; }
.bp-svg .bp-flow-oil .bp-flow-p { stroke: #ffb347; }
.bp-svg .bp-flow-brake .bp-flow-p { stroke: #ff6b6b; }
.bp-svg .bp-flow-power .bp-flow-p { stroke: #ffffff; }
.bp-svg .bp-flow-elec .bp-flow-p { stroke: #ffe066; }
@keyframes bp-flow-run { to { stroke-dashoffset: -22; } }
.bp-svg .bp-flow-p { animation: bp-flow-run 1.1s linear infinite; }
.bp-flows { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.5rem 0; }
.bp-flows[hidden] { display: none; }
.bp-flows-lbl { font-size: 0.85rem; opacity: 0.85; margin-right: 0.2rem; }
.bp-flow-note { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.85rem; }

/* ---------- ranked where-to-look markers ---------- */
.bp-svg .bp-rank { pointer-events: none; }
.bp-svg .bp-rank circle { fill: var(--bp-red); stroke: #fff; stroke-width: 1; }
.bp-svg .bp-rank text { fill: #fff; font-weight: 700; font-family: inherit; }
.bp-rank-n { display: inline-block; min-width: 1.5em; padding: 0 0.3em; border-radius: 999px; background: var(--bp-red); color: #fff; font-size: 0.8em; text-align: center; }

/* ---------- urgency, what you'll notice, steps, wear pictures (panel) ---------- */
.bp-urg { margin: 0.6rem 0; padding: 0.5rem 0.7rem; border-left: 4px solid; border-radius: 4px; font-size: 0.9rem; background: rgba(255, 255, 255, 0.04); }
.bp-urg-amber { border-color: #f5b301; }
.bp-urg-orange { border-color: #ff7a1a; }
.bp-urg-red { border-color: #e0242b; }
.bp-notice { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.bp-notice li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; }
.bp-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 0.2em; }
.bp-steps { padding-left: 1.2rem; }
.bp-wear { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.bp-wear figure { margin: 0; }
.bp-wear-svg { width: 100%; height: auto; display: block; background: rgba(207, 232, 255, 0.05); border-radius: 4px; }
.bp-wear figcaption { font-size: 0.8rem; text-align: center; margin-top: 0.2rem; }
.bp-tool[data-bp-mode="simple"] .bp-tech-only { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bp-svg .bp-flow-p { animation: none; }
}

.bp-where { font-size: 0.72rem; opacity: 0.75; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }

/* ---------- 3D drawings (engine cutaway, belts): shaded faces, x-ray faces, view tabs ---------- */
.bp-svg .bp-face { stroke: var(--c-ink); stroke-width: 1px; stroke-linejoin: round; }
.bp-svg .bp-xf { stroke: rgba(207, 232, 255, 0.7); }
.bp-svg .bp-part.is-selected .bp-face, .bp-svg .bp-part.is-suspect .bp-face { fill: rgba(200, 16, 46, 0.45); stroke: var(--bp-red); stroke-width: 1.6px; }
.bp-svg .bp-part.is-selected .bp-stroke, .bp-svg .bp-part.is-suspect .bp-stroke { stroke: var(--bp-red) !important; }
.bp-svg .bp-part.is-focus .bp-face { stroke: var(--bp-red); stroke-width: 1.8px; }
@media (hover: hover) and (pointer: fine) {
  .bp-svg .bp-part.is-hover .bp-face { stroke: var(--bp-red); stroke-width: 1.8px; }
}
.bp-svg .bp-flow-p { stroke-width: 2.4px; }
.bp-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.bp-tabs[hidden] { display: none; }
.bp-tab {
  min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(207, 232, 255, 0.55);
  background: rgba(10, 35, 66, 0.7); color: var(--bp-ink); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.bp-tab[aria-pressed="true"] { background: var(--bp-ink); color: var(--bp-navy); }
.bp-tab:active { transform: scale(0.97); }

/* ---------- part information, parts list state, notes, focus ---------- */
.bp-fineprint { font-size: 0.8rem; opacity: 0.8; margin: 0.35rem 0 0; }
.bp-linkbtn { min-height: 40px; padding: 0 0.5rem; background: none; border: 0; color: #fff; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bp-legend-name { flex: 1 1 auto; line-height: 1.25; overflow-wrap: anywhere; }
.bp-tag { flex: 0 0 auto; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border: 1px solid rgba(207, 232, 255, 0.55); border-radius: 999px; opacity: 0.85; }
.bp-legend-btn { min-height: 44px; position: relative; }
.bp-legend-btn[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--bp-red); font-weight: 600; }
.bp-legend-btn[aria-pressed="true"] .bp-num-sm { background: var(--bp-red); border-color: #fff; }
.bp-illus-note { margin: 0.5rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--bp-ink); opacity: 0.85; display: flex; gap: 0.5rem; align-items: flex-start; }
.bp-illus-note svg { flex: none; width: 14px; height: 14px; margin-top: 0.15em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
/* Keyboard focus on a drawing part: dashed white ring on the hit area, plus the red outline from .is-focus. */
.bp-svg .bp-part:focus { outline: none; }
.bp-svg .bp-part:focus-visible .bp-hit { stroke: rgba(255, 255, 255, 0.85); stroke-width: 2px; stroke-dasharray: 5 3; }
.bp-svg .bp-part:focus-visible .bp-hitl { stroke: rgba(255, 255, 255, 0.5); }
.bp-svg .bp-part:focus-visible .bp-num { stroke: #fff; stroke-width: 3; }
.bp-tool .bp-chip:focus-visible, .bp-tool .bp-legend-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bp-hint { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .bp-tool *, .bp-tool *::before, .bp-tool *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .bp-svg .bp-part.is-suspect .bp-xg, .bp-svg .bp-part.is-suspect .bp-pg { filter: drop-shadow(0 0 3px rgba(200, 16, 46, 0.85)); }
}
@media (max-width: 479px) {
  .bp-legend ol { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- belt condition tiles ---------- */
.bp-svg[data-wear-on="healthy"] [data-wear-fx="healthy"],
.bp-svg[data-wear-on="cracked"] [data-wear-fx="cracked"],
.bp-svg[data-wear-on="frayed"] [data-wear-fx="frayed"],
.bp-svg[data-wear-on="glazed"] [data-wear-fx="glazed"],
.bp-svg[data-wear-on="misaligned"] [data-wear-fx="misaligned"],
.bp-svg[data-wear-on="bearing"] [data-wear-fx="bearing"] { display: inline; }
/* suspension sheet condition examples */
.bp-svg[data-wear-on="susp-shock"] [data-wear-fx="susp-shock"],
.bp-svg[data-wear-on="susp-bush"] [data-wear-fx="susp-bush"],
.bp-svg[data-wear-on="susp-bj"] [data-wear-fx="susp-bj"],
.bp-svg[data-wear-on="susp-link"] [data-wear-fx="susp-link"],
.bp-svg[data-wear-on="susp-mount"] [data-wear-fx="susp-mount"] { display: inline; }
/* brake sheet condition overlays */
.bp-svg[data-wear-on="brk-ok"] [data-wear-fx="brk-ok"],
.bp-svg[data-wear-on="brk-pads"] [data-wear-fx="brk-pads"],
.bp-svg[data-wear-on="brk-scored"] [data-wear-fx="brk-scored"],
.bp-svg[data-wear-on="brk-uneven"] [data-wear-fx="brk-uneven"],
.bp-svg[data-wear-on="brk-leak"] [data-wear-fx="brk-leak"],
.bp-svg[data-wear-on="brk-hose"] [data-wear-fx="brk-hose"] { display: inline; }
.bp-wear-tile { cursor: pointer; outline: none; }
.bp-wear-hit { pointer-events: all; cursor: pointer; transition: fill 0.15s var(--bp-ease), stroke 0.15s var(--bp-ease); }
.bp-wear-tile:hover .bp-wear-hit { fill: rgba(207, 232, 255, 0.12); }
.bp-wear-tile.is-on .bp-wear-hit { fill: rgba(200, 16, 46, 0.16); stroke: var(--bp-red); stroke-width: 2.4; stroke-opacity: 1; }
.bp-wear-tile:focus-visible .bp-wear-hit { stroke: #fff; stroke-width: 2.4; stroke-opacity: 1; stroke-dasharray: 5 3; }
.bp-wear-tile.is-on:focus-visible .bp-wear-hit { stroke: #fff; stroke-dasharray: none; }
.bp-wear-note { margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--bp-red); background: rgba(10, 35, 66, 0.06); font-size: 0.95rem; line-height: 1.45; }
.bp-wear-note[hidden] { display: none; }
.bp-wear-note span { display: block; margin-top: 0.2rem; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) {
  .bp-wear-hit { transition: none; }
}

/* ---------- electrical sheet (OG-BP-05) ---------- */
.bp-svg .el-st { stroke: #ffa45c; }
.bp-svg .el-ch { stroke: #6fe0a0; }
.bp-svg .el-li { stroke: #ffe066; }
.bp-svg .el-pw { stroke: #8fdcff; }
.bp-svg .el-gn { stroke: #b4c2d4; }
.bp-svg .el-dt { stroke: #e4d2ff; }
.bp-svg .el-sw.el-st { fill: #ffa45c; } .bp-svg .el-sw.el-ch { fill: #6fe0a0; } .bp-svg .el-sw.el-li { fill: #ffe066; } .bp-svg .el-sw.el-pw { fill: #8fdcff; }
.bp-svg .el-sw { stroke: none; }
.bp-svg .el-arr { fill: var(--c-ink); stroke: none; }
.bp-svg .el-fst { fill: #ffa45c; } .bp-svg .el-fch { fill: #6fe0a0; } .bp-svg .el-fli { fill: #ffe066; } .bp-svg .el-fpw { fill: #8fdcff; } .bp-svg .el-fgn { fill: #b4c2d4; }
.bp-svg .el-lens { fill: rgba(255, 224, 102, 0.16); stroke: none; }
.bp-svg .el-bodybar { fill: url(#ele-body); stroke: var(--c-ink); }
.bp-svg .el-t, .bp-svg .el-tw, .bp-svg .el-tn, .bp-svg .el-ft { paint-order: stroke; stroke: #0b2547; stroke-width: 3px; stroke-linejoin: round; letter-spacing: 0.03em; }
.bp-svg .el-t { font-size: 7.4px; fill: var(--c-dim); }
.bp-svg .el-tw { font-size: 8px; fill: #fff; }
.bp-svg .el-tn { font-size: 6.6px; fill: var(--c-ink); }
.bp-svg .el-ft { font-size: 7.6px; font-weight: 700; fill: #ff8a8a; }
.bp-svg .el-ph { font-size: 7.6px; letter-spacing: 0.12em; fill: #fff; }
.bp-svg .el-sym { font-size: 11px; font-weight: 700; fill: #fff; }
.bp-svg .el-s, .bp-svg .el-sb, .bp-svg .el-sx, .bp-svg .el-sh, .bp-svg .el-sp { font-family: Manrope, system-ui, sans-serif; }
.bp-svg .el-s { font-size: 10px; fill: #cfe8ff; }
.bp-svg .el-sb { font-size: 9.6px; font-weight: 700; fill: #fff; }
.bp-svg .el-sx { font-size: 8.4px; fill: #cfe8ff; }
.bp-svg .el-sh { font-size: 13px; font-weight: 800; fill: #fff; }
.bp-svg .el-sp { font-size: 14px; fill: #cfe8ff; }
.bp-svg .bp-part.is-selected .el-arr, .bp-svg .bp-part.is-suspect .el-arr { fill: var(--bp-red); }
.bp-svg[data-wear-on="elec-battery"] [data-wear-fx="elec-battery"],
.bp-svg[data-wear-on="elec-charging"] [data-wear-fx="elec-charging"],
.bp-svg[data-wear-on="elec-fuse"] [data-wear-fx="elec-fuse"],
.bp-svg[data-wear-on="elec-starter"] [data-wear-fx="elec-starter"],
.bp-svg[data-wear-on="elec-ground"] [data-wear-fx="elec-ground"],
.bp-svg[data-wear-on="elec-lighting"] [data-wear-fx="elec-lighting"] { display: inline; }
/* ---------- cooling sheet (OG-BP-07): failure overlays and the warm-up flow chip ---------- */
.bp-svg[data-wear-on="cool-radleak"] [data-wear-fx="cool-radleak"],
.bp-svg[data-wear-on="cool-hose"] [data-wear-fx="cool-hose"],
.bp-svg[data-wear-on="cool-tstopen"] [data-wear-fx="cool-tstopen"],
.bp-svg[data-wear-on="cool-tstshut"] [data-wear-fx="cool-tstshut"],
.bp-svg[data-wear-on="cool-pump"] [data-wear-fx="cool-pump"],
.bp-svg[data-wear-on="cool-fan"] [data-wear-fx="cool-fan"],
.bp-svg[data-wear-on="cool-loss"] [data-wear-fx="cool-loss"] { display: inline; }
.bp-tool[data-flow="cwarm"] .bp-svg .bp-flow-cwarm { display: inline; }
.bp-svg .bp-flow-cwarm .bp-flow-p { stroke: #ffd27f; }