/* PETKA Web — design system v3. Single SPA shell.
 * Self-contained: no Google Fonts, no frameworks. System fonts only.
 *
 * Design tokens (read these first):
 *   • 4-px spacing rhythm: --sp-1 4 / --sp-2 8 / --sp-3 12 / --sp-4 16 / --sp-5 20 / --sp-6 24 / --sp-8 32
 *   • Type scale: h1 26 / h2 18 / h3-eyebrow 11 upper / body 14 / small 12 / micro 11
 *   • Neutral surface ladder: --bg → --surface-2 → --surface → --surface-3 (raised)
 *   • Accent: cool indigo (links + selection). Gold reserved for hotspot/callout/badge accents only.
 *   • Shadow tiers: --shadow-sm subtle border lift / --shadow medium card / --shadow-lg modal+popover.
 *   • Motion: --tx 160ms ease-out. --tx-slow 240ms for layout-shift hovers.
 */

:root {
  /* Palette — light. Cooler neutrals (slight blue cast) feel more "tool" than warm beige. */
  --bg:           #eef1f6;
  --surface:      #ffffff;
  --surface-2:    #f3f5f9;
  --surface-3:    #e7ebf2;
  --border:       #dbe0ea;
  --border-strong:#bcc3d1;
  --text:         #14181f;
  --text-2:       #424955;
  --text-muted:   #7a8398;
  --link:         #1f5fd9;
  --accent:       #1f5fd9;
  --accent-2:     #e7eefc;
  --accent-3:     #c5d6f7;
  /* Gold palette — derived from PETKA's official RoSyVision.dll.config
   * (Moss.RoSyVision.Etka.EtkaSettings). Adopting these verbatim makes our
   * highlights look identical to PETKA's. See _dev/PETKA_UX_REFERENCE.md.
   *   Selection color: RGB(234, 192, 44)  = #EAC02C
   *   Hover color:     RGB(255, 222, 105) = #FFDE69 (also used for soft tint)
   *   Hover line width: 3px ; Selection inflate: 2.5px */
  --gold:         #b87a0a;
  --gold-soft:    rgba(234,192,44,0.22);
  --gold-strong:  #EAC02C;
  --gold-hover:   #FFDE69;
  --gold-bg:      #fff7e3;
  --danger:       #c12d2d;
  --danger-soft:  rgba(193,45,45,0.08);
  --success:      #1f8a47;
  --header-bg:    #11141a;
  --header-fg:    #f1f3f8;
  --header-border:#23272f;
  --header-muted: #8893a8;
  --header-input: #1d2128;

  /* Shadow tiers — sharper close shadow + softer ambient = "lifted card" feel */
  --shadow-sm:    0 1px 2px rgba(15,17,21,0.05);
  --shadow:       0 1px 2px rgba(15,17,21,0.06), 0 4px 12px rgba(15,17,21,0.06);
  --shadow-md:    0 2px 4px rgba(15,17,21,0.06), 0 8px 20px rgba(15,17,21,0.08);
  --shadow-lg:    0 4px 8px rgba(15,17,21,0.08), 0 18px 40px rgba(15,17,21,0.12);
  --ring:         0 0 0 3px rgba(31,95,217,0.22);

  /* Radii */
  --radius-sm:    4px;
  --radius:       6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  /* Spacing scale (4-px) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Motion */
  --tx:           160ms cubic-bezier(.2,.6,.2,1);
  --tx-slow:      240ms cubic-bezier(.2,.6,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0b0d11;
    --surface:      #161a21;
    --surface-2:    #1c2129;
    --surface-3:    #252b35;
    --border:       #2a303a;
    --border-strong:#3a414e;
    --text:         #e6e8ee;
    --text-2:       #b8becc;
    --text-muted:   #7a8294;
    --link:         #82b1ff;
    --accent:       #6ba0ff;
    --accent-2:     rgba(107,160,255,0.13);
    --accent-3:     rgba(107,160,255,0.30);
    /* Dark mode: keep the same PETKA-spec colors — they're tuned for the
     * gradient-replacement technique and read well on dark too. */
    --gold:         #FFDE69;
    --gold-soft:    rgba(234,192,44,0.22);
    --gold-strong:  #EAC02C;
    --gold-hover:   #FFDE69;
    --gold-bg:      rgba(234,192,44,0.10);
    --danger:       #ff6b6b;
    --danger-soft:  rgba(255,107,107,0.12);
    --success:      #4ec97a;
    --header-bg:    #07090c;
    --header-fg:    #e6e8ee;
    --header-border:#1c1f25;
    --header-muted: #6c7385;
    --header-input: #14171c;
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.40);
    --shadow:       0 1px 2px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.40);
    --shadow-md:    0 2px 4px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.50);
    --shadow-lg:    0 4px 8px rgba(0,0,0,0.50), 0 18px 40px rgba(0,0,0,0.60);
    --ring:         0 0 0 3px rgba(107,160,255,0.30);
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body { overflow: hidden; }
code, pre, .mono {
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* ── App shell ─────────────────────────────────────────────────────────── */
#app { display: grid; grid-template-rows: 48px 36px auto 1fr; height: 100vh; }

/* Header (top bar) */
#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: var(--header-bg); color: var(--header-fg);
  border-bottom: 1px solid var(--header-border);
}
#brand-mark {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--header-fg);
  font: 600 14px/1 ui-monospace, monospace; letter-spacing: 1px;
  margin-right: 12px;
}
#brand-mark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-strong); }
#brand-mark:hover { color: var(--gold-strong); }

#topbar .sep {
  width: 1px; height: 22px; background: var(--header-border); margin: 0 4px;
}

/* Brand picker chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 100px;
  background: var(--header-input); color: var(--header-fg);
  border: 1px solid var(--header-border);
  font: inherit; cursor: pointer; line-height: 1;
  transition: background var(--tx), border-color var(--tx);
}
.chip:hover { background: #1a1f27; border-color: #2c323d; }
.chip .ic { opacity: 0.7; }
.chip:hover .ic { opacity: 1; }
.chip small { color: var(--header-muted); margin-left: 4px; }

/* Vehicle picker — searchable combobox */
.combo {
  position: relative; flex: 1; max-width: 480px;
}
.combo-input {
  width: 100%; height: 28px; padding: 0 12px 0 32px;
  background: var(--header-input); color: var(--header-fg);
  border: 1px solid var(--header-border); border-radius: 100px;
  font: inherit;
}
.combo-input:focus { outline: none; border-color: var(--accent); background: #181d24; }
.combo-input::placeholder { color: var(--header-muted); }
.combo-ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--header-muted); pointer-events: none;
  width: 14px; height: 14px;
}
.combo-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  max-height: 60vh; overflow: auto; z-index: 100;
  box-shadow: var(--shadow-lg);
}
.combo-menu:empty { display: none; }
.combo-group-head {
  padding: 7px 12px 4px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted); background: var(--surface-2);
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
}
.combo-item {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 12px; cursor: pointer; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--border);
}
.combo-item:hover, .combo-item.kbsel { background: var(--accent-2); }
.combo-item strong { font-weight: 500; }
.combo-item .yrs { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.combo-item .pn-count { color: var(--text-muted); font-size: 11px; padding: 1px 6px; background: var(--surface-2); border-radius: 100px; }

/* Search box (top-right) */
#topsearch {
  position: relative; width: 280px;
}
#topsearch input {
  width: 100%; height: 28px; padding: 0 30px 0 32px;
  background: var(--header-input); color: var(--header-fg);
  border: 1px solid var(--header-border); border-radius: 100px;
  font: inherit;
}
#topsearch input:focus { outline: none; border-color: var(--accent); background: #181d24; }
#topsearch input::placeholder { color: var(--header-muted); }
#topsearch .kbd-hint {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: 600 10px/1 ui-monospace, monospace; color: var(--header-muted);
  background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--header-border); pointer-events: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
#topsearch .combo-menu { max-height: 70vh; }

#topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#topbar .right a { color: var(--header-muted); text-decoration: none; font-size: 13px; padding: 4px 8px; border-radius: 4px; }
#topbar .right a:hover { color: var(--header-fg); background: rgba(255,255,255,0.04); }

/* Breadcrumb row */
#crumbs {
  display: flex; align-items: center; gap: 8px; padding: 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  font-size: 13px; overflow-x: auto; white-space: nowrap;
}
#crumbs a, #crumbs span { color: var(--text-2); text-decoration: none; padding: 4px 0; transition: color var(--tx); }
#crumbs a:hover { color: var(--link); }
#crumbs .sep {
  color: var(--text-muted); user-select: none;
  display: inline-flex; align-items: center; padding: 0 2px;
}
#crumbs .sep .icon { width: 12px; height: 12px; stroke-width: 2.2; vertical-align: 0; }
#crumbs .here { color: var(--text); font-weight: 600; }
#crumbs .meta {
  margin-left: auto; color: var(--text-muted); font-size: 12px;
  font-family: ui-monospace, monospace; letter-spacing: 0.3px;
  padding: 2px 8px; background: var(--surface-2);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}

/* Main content area */
#main {
  display: grid; grid-template-columns: 260px 1fr;
  min-height: 0; height: 100%;
}
#main.no-sidebar { grid-template-columns: 0 1fr; }
#sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  transition: width var(--tx);
}
#sidebar.collapsed { width: 0; border-right: none; }
#content { min-width: 0; overflow: auto; }

/* Sidebar tree */
.tree-wrap { padding: 12px; }
.tree-wrap h3 {
  margin: 0 0 8px; font-size: 10px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px;
}
.tree-node {
  display: flex; align-items: center; gap: 4px; width: 100%;
  background: transparent; border: 0; border-radius: 4px;
  padding: 5px 6px; color: var(--text); cursor: pointer;
  font: inherit; text-align: left;
}
.tree-node:hover { background: var(--surface-2); }
.tree-node.active { background: var(--accent-2); color: var(--link); font-weight: 500; }
.tree-node .caret { width: 12px; color: var(--text-muted); font-size: 10px; }
.tree-node .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node .count { font-size: 10px; color: var(--text-muted); padding: 0 4px; }
.tree-children { padding-left: 14px; border-left: 1px solid var(--border); margin-left: 8px; }

/* ── Home screen (brand picker) ────────────────────────────────────────── */
.home-wrap { padding: 48px 24px 64px; max-width: 1100px; margin: 0 auto; }
.home-wrap h1 {
  margin: 0 0 8px; font-size: 28px; font-weight: 700; letter-spacing: -0.6px;
  color: var(--text);
}
.home-wrap .sub {
  color: var(--text-2); margin: 0 0 36px;
  font-size: 15px; line-height: 1.55; max-width: 720px;
}
.brand-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.brand-grid li a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text); text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--tx), border-color var(--tx),
              box-shadow var(--tx-slow), background var(--tx);
  position: relative; overflow: hidden;
}
.brand-grid li a::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold-strong));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--tx-slow);
}
.brand-grid li a:hover {
  transform: translateY(-3px); border-color: var(--accent-3);
  box-shadow: var(--shadow-md);
}
.brand-grid li a:hover::before { transform: scaleX(1); }
.brand-grid li a:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow); border-color: var(--accent); }
.brand-grid strong { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; }
.brand-grid small { color: var(--text-muted); font-size: 12px; }

/* ── Vehicle home (overview view) ──────────────────────────────────────── */
.veh-layout {
  /* partslink24-style: diagram takes the smaller half, parts table the
   * larger half. The table needs the room to render its six columns
   * (Pos | Part no. | Description | Remark | Stk | Model) without
   * truncation. Diagram capped by max-height in .diag-wrap. */
  display: grid; grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr);
  height: 100%; min-height: 0;
}
.veh-layout.no-side { grid-template-columns: 1fr 0; }
@media (max-width: 1280px) {
  .veh-layout { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.1fr); }
}
.veh-stage {
  background: var(--bg); display: flex; flex-direction: column;
  min-height: 0; min-width: 0; position: relative; overflow: hidden;
}
.veh-stage .toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--surface);
  border-bottom: 1px solid var(--border); font-size: 13px;
  min-height: 44px;
}
.veh-stage .toolbar .title {
  font-weight: 600; font-size: 14px; color: var(--text);
  letter-spacing: -0.1px;
}
.veh-stage .toolbar .meta {
  color: var(--text-muted); font-size: 12px;
  font-family: ui-monospace, monospace; padding: 2px 8px;
  background: var(--surface-2); border-radius: var(--radius-sm);
}
.veh-stage .toolbar .spacer { flex: 1; }
.tbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; min-height: 28px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer; line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: background var(--tx), border-color var(--tx),
              color var(--tx), box-shadow var(--tx), transform var(--tx);
}
.tbtn:hover {
  background: var(--accent-2); border-color: var(--accent-3);
  color: var(--accent); box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.tbtn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.tbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.tbtn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.tbtn .icon { color: currentColor; opacity: 0.85; }

/* Primary — strong CTA tone */
.tbtn.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(31,95,217,0.30), 0 4px 12px rgba(31,95,217,0.18);
}
.tbtn.primary:hover { background: #1a52c2; border-color: #1a52c2; color: #fff; }
.tbtn.primary:focus-visible { box-shadow: var(--ring), 0 4px 12px rgba(31,95,217,0.18); }

/* Ghost — flush with background, only shows on hover. For dense toolbars. */
.tbtn.ghost {
  background: transparent; border-color: transparent; box-shadow: none;
  color: var(--text-2);
}
.tbtn.ghost:hover {
  background: var(--surface-2); border-color: var(--border);
  color: var(--text); transform: none; box-shadow: var(--shadow-sm);
}

.diag-wrap {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 25% 25%, var(--surface) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, var(--surface) 0%, transparent 50%),
    var(--surface-2);
  padding: 16px;
}
/* imgWrap = aspect-locked container. We control its size with max-width AND
 * max-height so the diagram never overflows the viewport. Old code let img
 * grow to 100% of either axis independently, causing tall diagrams to push
 * the toolbar/sidebar off-screen on shorter viewports. */
.diag-wrap > div#imgWrap {
  background: var(--surface); box-shadow: var(--shadow); border-radius: var(--radius);
  max-width: 100%; max-height: 100%;
  /* aspect-ratio is set inline per overview; this keeps the box from getting
   * taller than its allotted space in the flex container. */
}
.diag-wrap > div#imgWrap > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.diag-wrap > div#imgWrap img { display: block; max-width: 100%; height: auto; }
.diag-wrap svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
/* Hotspots & polygons — all styling now via SVG presentation attributes
 * (set in app.js renderOverview). CSS rules used to set fill/stroke here
 * but Chromium's cascade for SVG won't let setAttribute('fill', …) override
 * a class-targeted CSS rule, even with !important. Empty selectors kept as
 * documentation anchors only. See app.js setActive/setIdle functions. */
.diag-wrap svg .hotspot { cursor: pointer; }
.diag-wrap svg .hotspot-shape { transition: fill 160ms ease-out, stroke 160ms ease-out; }
.diag-wrap svg .callout-label {
  font: 800 56px sans-serif; fill: var(--gold-strong);
  paint-order: stroke; stroke: white; stroke-width: 10;
  pointer-events: all;        /* clickable label */
  cursor: pointer;
  user-select: none;
  transition: fill var(--tx), transform var(--tx);
}
.diag-wrap svg .callout-label:hover,
.diag-wrap svg .callout-label.active {
  fill: #b87a0a;
}
@media (prefers-color-scheme: dark) {
  .diag-wrap svg .callout-label { stroke: black; }
}
@media (prefers-color-scheme: dark) {
  .diag-wrap svg .callout-label { stroke: black; }
}

/* Right side: parts list / thumbs */
.veh-side {
  background: var(--surface); border-left: 1px solid var(--border);
  overflow: hidden; display: flex; flex-direction: column; min-height: 0;
}
.veh-side .tabs {
  display: flex; border-bottom: 1px solid var(--border);
}
.veh-side .tabs button {
  flex: 1; padding: 11px 12px;
  background: transparent; color: var(--text-2);
  border: 0; position: relative;
  font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.8px;
  transition: color var(--tx);
}
.veh-side .tabs button::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
  transition: left var(--tx), right var(--tx);
}
.veh-side .tabs button:hover { color: var(--text); }
.veh-side .tabs button:hover::after { left: 25%; right: 25%; opacity: 0.5; }
.veh-side .tabs button.on { color: var(--accent); }
.veh-side .tabs button.on::after { left: 0; right: 0; opacity: 1; }
.veh-side .tab-pane { flex: 1; overflow: auto; padding: 0; min-height: 0; }

/* Thumb grid */
.thumbs { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.thumb {
  display: block; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text-muted); cursor: pointer;
  position: relative;
}
.thumb:hover { border-color: var(--accent); }
.thumb.on { border-color: var(--accent); background: var(--accent-2); }
.thumb img { width: 100%; height: auto; display: block; border-radius: 2px; }
.thumb span { display: block; padding: 4px 0 0; font-size: 11px; color: var(--text-muted); text-align: center; }
.thumb .polys-tag {
  position: absolute; top: 6px; right: 6px;
  background: var(--gold-soft); color: var(--gold); font-size: 10px;
  padding: 1px 5px; border-radius: 10px; font-weight: 600;
}

/* Callout / part table (per-illustration view) */
.callout-list { padding: 0; margin: 0; list-style: none; }
/* ── partslink24-style flat parts table (right pane on illus page) ───────
   Reference: Screenshot 2026-05-27 182047.png in user's screenshots folder.
   Columns: # | Pos | Part No. | Description | Remark | Stk | Model.
   Each `.callout-row` is one pos group (preserves data-pos hover sync with
   the SVG hotspots) and is the vertical container; `.pt-row` inside is a
   sub-grid using the SAME column template so columns line up table-wide. */
.pt-table {
  font-size: 12px;
  background: var(--surface);
  /* Eight columns:
       # | Pos | Part No. | Description | Remark | Stk | Model | Open
     Row click expands the inline info card (dropdown); the trailing
     "Open" pill navigates to the full part page (diagram + tabs).
     Remark column widened — it now stacks LEFT/RIGHT + LHD/RHD + DISC +
     validity dates, each on its own line.                                  */
  --pt-cols: 22px 38px minmax(112px, 0.85fr) minmax(112px, 1.25fr) minmax(86px, 0.95fr) 28px minmax(76px, 0.9fr) 56px;
}
.pt-head {
  display: grid;
  grid-template-columns: var(--pt-cols);
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: sticky; top: 0; z-index: 2;
}
.pt-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-head .pt-c { text-align: center; }

.callout-row {
  display: block;
  border-left: 3px solid transparent;
  transition: border-left-color var(--tx);
}
.callout-row.active,
.callout-row:hover { border-left-color: var(--accent); }
.callout-row.active .pt-row,
.callout-row:hover .pt-row { background: var(--accent-2); }

/* Zebra striping per pos GROUP (not per row). nth-of-type on .callout-row
   alternates so each pos block is visually distinct as a unit. */
.pt-table > .callout-row:nth-of-type(even) > .pt-row { background: rgba(0,0,0,0.025); }
.pt-table > .callout-row:nth-of-type(even):hover > .pt-row,
.pt-table > .callout-row:nth-of-type(even).active > .pt-row { background: var(--accent-2); }

.pt-row {
  display: grid;
  grid-template-columns: var(--pt-cols);
  gap: 6px;
  align-items: center;
  padding: 4px 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background var(--tx);
  border-top: 1px solid transparent;
}
.pt-row.first { border-top: 1px solid var(--border); }
.callout-row:first-of-type > .pt-row.first { border-top: none; }
.callout-row .pt-row + .pt-row { border-top: 1px dotted var(--border); }
.callout-row .pt-row.pt-variant { padding-top: 2px; padding-bottom: 2px; }

.pt-row .pt-info {
  color: var(--text-muted); opacity: 0.6;
  font-size: 13px; text-align: center;
  transition: opacity var(--tx), color var(--tx);
  user-select: none;
}
.pt-row:hover .pt-info { opacity: 1; color: var(--accent); }

/* "Open" pill button at far right — full part page (diagram + tabs).
   stopPropagation in JS prevents the row's expand-inline handler from
   eating the click, so the two affordances stay distinct. Styled as a
   visible button (not just an icon) so users know it's clickable. */
.pt-row .pt-open {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 2px;
  padding: 2px 6px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--tx), background var(--tx), border-color var(--tx);
  user-select: none;
  align-self: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.pt-row:hover .pt-open {
  color: var(--text);
  background: var(--surface);
}
.pt-row .pt-open:hover {
  color: var(--gold);
  background: rgba(212,160,23,0.14);
  border-color: rgba(212,160,23,0.45);
}
.pt-row .pt-open .pt-open-arrow {
  font-size: 11px; line-height: 1;
  display: inline-block;
  margin-left: 1px;
}

.pt-row .pt-pos {
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 600;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pt-row .pt-pos.mirror { color: var(--text-muted); font-style: italic; font-weight: 500; }

.pt-row .pt-pn  { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pt-row .pt-pn code {
  color: var(--link); font-weight: 600;
  font-family: ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Remark column lives as a small vertical stack — every per-part hint
   gets its own line so the user can scan them without crowding the PN.   */
.pt-row .pt-remark {
  display: flex; flex-direction: column;
  gap: 2px; align-items: flex-start;
  white-space: nowrap;
}

/* LEFT / RIGHT side tag in the Remark column (decoded from VAG PN
   convention or PETKA's mirror raw_pos form). */
.pt-row .pt-remark .side-tag {
  display: inline-block;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 3px;
  line-height: 1.45;
  font-family: ui-monospace, monospace;
}
.pt-row .pt-remark .side-tag.side-l {
  color: #58a6ff;
  background: rgba(56,139,253,0.14);
  border: 1px solid rgba(56,139,253,0.32);
}
.pt-row .pt-remark .side-tag.side-r {
  color: #ff7b72;
  background: rgba(255,123,114,0.14);
  border: 1px solid rgba(255,123,114,0.32);
}

/* LHD / RHD market tag — derived from PETKA's PR:L0L / PR:L0R codes
   (Lenkung 0 Links / Lenkung 0 Rechts). Distinct gold styling so the
   user can tell market hints from per-part side at a glance. */
.pt-row .pt-remark .hand-tag {
  display: inline-block;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 3px;
  line-height: 1.45;
  font-family: ui-monospace, monospace;
  background: rgba(212,160,23,0.10);
  color: var(--gold);
  border: 1px solid rgba(212,160,23,0.32);
}

.pt-row .pt-name {
  color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
}
.pt-row .pt-name.italic { font-style: italic; font-weight: 400; }

/* Hardware-dimension suffix on the Description cell, sourced from
   nav_standard_parts.Bemerkung (e.g. "M10X38", "DIN 933"). Monospace +
   muted so it doesn't compete with the part name itself. */
.pt-row .pt-name .dim-tag {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0 4px;
  background: var(--surface-2);
  border-radius: 2px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

.pt-row .pt-remark {
  color: var(--text-muted); font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pt-row .pt-qty {
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.pt-row .pt-model {
  color: var(--text-muted); font-size: 11px;
  font-family: ui-monospace, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

/* Price column — tabular-numerals so prices column-align on the decimal. */
.pt-row .pt-price {
  text-align: right;
  color: var(--text); font-weight: 600;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.pt-row .pt-price.from {
  color: var(--text-muted); font-weight: 500;
  font-style: italic;
}
.pt-head .pt-r { text-align: right; }

/* Remark column carries two stacked facts when both present: a red
   discontinued marker (`D - YYYY-MM-DD`) and a muted validity window
   (`01/20-09/20`). partslink24 puts both in the same column. */
.pt-row .pt-remark { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
/* Red disc-tag — used ONLY when EU/home market is affected.
   wwspares.com is EU-based, so this is the case the buyer cares about:
   the part is unsourceable through normal EU dealer channels. */
.pt-row .pt-remark .disc-tag {
  color: #ff6b6b;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Muted grey disc-tag — overseas-only discontinuation (USA/MEX/ZA/...).
   EU dealer inventory is still active, so this is informational only,
   not a blocker. Visually quiet so it doesn't compete with EU-affected. */
.pt-row .pt-remark .disc-tag-overseas {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
/* Discontinued rows get a subtle strikethrough on the PN — visual cue
   without losing readability. */
.pt-row.discontinued .pt-pn code {
  text-decoration: line-through;
  text-decoration-color: rgba(255,107,107,0.5);
  text-decoration-thickness: 1px;
}

/* ── VIN fitment (Layer 0) ─────────────────────────────────────────────
   When a VIN with XDATA installed-component PNs is active, rows whose PN
   is in that set are CONFIRMED fitted to the vehicle. This is ground truth
   (VW Group vehicle data), so it gets the strongest positive treatment:
   green left-rail on the row + a green "✓ on your vehicle" badge. */
/* ── VIN fitment — quiet & slick ──────────────────────────────────────────
   Don't scream. A fitting part reads CLEAR/normal with just a thin green rail
   + a small tick; a non-fitting part quietly recedes (faded) but stays legible
   & clickable. Contrast does the work — no colour floods, no chunky pills. */
/* GREEN = fits your car, GREY = doesn't. Solid green rail + tint = XDATA
   confirmed on the VIN; soft green rail + faint tint = PR-fits / unconditional.
   Conflict rows grey out + desaturate so "doesn't fit" reads at a glance. */
.pt-row.fits-vin    { box-shadow: inset 3px 0 0 #1f8f4e; background: rgba(31,143,78,0.07); } /* XDATA confirmed */
.pt-row.fits-vin-ok { box-shadow: inset 3px 0 0 rgba(31,143,78,0.5); background: rgba(31,143,78,0.035); } /* fits */
.pt-row .pt-remark .fit-mark { font-weight: 700; font-size: 12px; line-height: 1; margin-right: 2px; }
.pt-row .pt-remark .fit-mark-on { color: #1f8f4e; }
.pt-row .pt-remark .fit-mark-ok { color: #3a9c63; }
.pt-row .pt-remark .fit-mark-no { color: #b3b3b3; }
/* Non-fitting: quietly fade. No grayscale (crude on line-art), no rail, no pill.
   NEVER hidden (lost-sale rule). Hover restores so the user can always inspect. */
.pt-row.fit-conflict { opacity: 0.42; transition: opacity .12s; }
.callout-row:hover .pt-row.fit-conflict,
.pt-row.fit-conflict:hover { opacity: 1; }
/* Slim one-line VIN strip (replaces the old loud banner). */
.fit-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 2px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.fit-strip-vin {
  font-weight: 600; color: var(--text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fit-strip-vin::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #1f8f4e; margin-right: 7px; vertical-align: middle;
}
.fit-strip-toggle {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  flex: 0 0 auto; user-select: none; white-space: nowrap;
}
.fit-strip-toggle input { accent-color: #1f8f4e; cursor: pointer; margin: 0; }
.fit-strip-clear {
  flex: 0 0 auto; cursor: pointer; border: none; background: transparent;
  color: var(--text-muted); font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.fit-strip-clear:hover { color: var(--text); background: var(--surface-2); }
/* "Hide other" toggle: collapse individual conflicting PN lines only when the
   user opts in. We hide the specific .pt-row.fit-conflict (one PN), NOT the
   whole callout-row group — a group can mix a fitting PN with a non-fitting
   sibling, and hiding the group would bury a part that fits (lost sale).
   Reversible; default SHOWS everything. */
#calloutList.hide-nonfit .pt-row.fit-conflict { display: none; }
.fit-banner-toggle {
  flex: 0 0 auto; cursor: pointer;
  font-size: 11px; font-weight: 600;
  color: #2f7d4e;
  background: var(--surface); border: 1px solid rgba(31,111,62,0.4);
  border-radius: 4px; padding: 3px 10px; margin-right: 6px;
}
.fit-banner-toggle:hover { border-color: #2f7d4e; }
/* Active-VIN banner above the parts table. */
.fit-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 8px;
  background: rgba(31, 111, 62, 0.10);
  border: 1px solid rgba(31, 111, 62, 0.35);
  border-radius: 6px;
}
.fit-banner-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #1f6f3e; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(31,111,62,0.20);
}
.fit-banner-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fit-banner-text strong { font-size: 12px; color: var(--text); }
.fit-banner-sub { font-size: 10px; color: var(--text-muted); font-family: ui-monospace, monospace; }
.fit-banner-clear {
  flex: 0 0 auto; cursor: pointer;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 10px;
}
.fit-banner-clear:hover { color: var(--text); border-color: var(--text-muted); }
/* VIN prefix-heuristic guess note — amber, sets expectations honestly. */
.vin-guess-note {
  margin: 14px 0 4px;
  padding: 10px 14px;
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}
.vin-guess-note strong { color: var(--gold); }

/* Muted state — VIN active but no per-variant fitment data (no XDATA). */
.fit-banner.muted {
  background: var(--surface-2);
  border-color: var(--border);
}
.fit-banner.muted .fit-banner-dot {
  background: var(--text-muted);
  box-shadow: 0 0 0 3px rgba(128,128,128,0.15);
}

/* ⓘ icon: muted by default, gold when notes attached, accent on row hover. */
.pt-row .pt-info.has-notes {
  color: var(--gold); opacity: 1;
  font-weight: 700;
}
.pt-row:hover .pt-info.has-notes { color: var(--gold); }

/* Variant sub-row (colour / finish, e.g. `9B9 Satin black`). Suffix in
   PN col with an indent line, descriptor italic in Description, dates in
   Remark. Subtle left-rail and dimmer background communicate "child of". */
.pt-row.pt-variant .pt-indent {
  color: var(--text-muted); opacity: 0.4;
  font-family: ui-monospace, monospace;
}
.pt-row.pt-variant .variant-suffix {
  color: var(--text);
  font-family: ui-monospace, monospace;
  font-weight: 600; font-size: 11px;
  padding: 0 4px;
  background: var(--surface-2);
  border-radius: 2px;
  border: 1px solid var(--border);
}

/* Removed-in-redesign helpers kept for safety against stale references in
   future modules — these styles intentionally do nothing now. */
.pt-row .pt-note { display: none; }
.pt-row .pt-pos .pos-num {
  display: inline-block; min-width: 24px;
  padding: 1px 6px; background: var(--gold-soft); color: var(--gold);
  font-weight: 700; font-size: 11px; border-radius: var(--radius-sm);
  text-align: center;
  font-family: ui-monospace, monospace;
  border: 1px solid rgba(212,160,23,0.30);
}
/* Mirror tag — small `L/R` flag under the pos number when PETKA encodes
   both `4` and `(4)` raw forms (same callout repeated on the opposite side). */
.pt-row .pt-pos .mirror-tag {
  font-size: 8px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 0 3px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  line-height: 1.3;
}
/* Side text in the Bemerkung (note) column — `Left` / `Right` / `Opp. side`.
   Decoded from VAG PN convention char[2]: `1`=LH, `2`=RH, `0`=neutral. */
.pt-row .pt-note .side-tag {
  font-weight: 700; font-size: 10px; letter-spacing: 0.04em;
  padding: 1px 6px; border-radius: 3px;
}
.pt-row .pt-note .side-tag.side-l {
  background: rgba(56,139,253,0.13); color: #58a6ff;
}
.pt-row .pt-note .side-tag.side-r {
  background: rgba(255,123,114,0.13); color: #ff7b72;
}
.pt-row .pt-note .side-tag.side-mirror {
  background: rgba(212,160,23,0.10); color: var(--gold);
}
/* Validity window "MM/YY-MM/YY" — extracted from KAT*.BIN Einsatz/Auslaufdatum. */
.pt-row .pt-note .date-tag {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* PR-code pill in the Modellangabe column (gold, compact). */
.pt-row .pt-model .pr-pill {
  display: inline-block;
  padding: 0 5px;
  background: var(--gold-soft); color: var(--gold);
  font-weight: 700; font-size: 10px;
  border-radius: 3px;
  border: 1px solid rgba(212,160,23,0.30);
  font-family: ui-monospace, monospace;
}
/* Multi-code Modellangabe descriptor (e.g. `PR:9VD+QQ1`) — dashed chip
   distinguishes "raw model-applicability text" from a clean PR pill. */
.pt-row .pt-model .model-chip {
  display: inline-block;
  padding: 0 5px;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 10px;
  border-radius: 3px;
  border: 1px dashed var(--border);
  font-family: ui-monospace, monospace;
}

/* Variant sub-row (colour/finish such as `9B9` "Satin black"). Suffix lives
   in the PN column with an indent arrow; descriptor takes Benennung;
   validity dates take Bemerkung. Subtle gold-tinted band so the eye groups
   the variants visually under their parent. */
.pt-row.pt-variant .pt-indent { color: var(--gold); opacity: 0.7; }
.pt-row.pt-variant .variant-suffix {
  background: var(--gold-soft); color: var(--gold);
  padding: 0 5px; border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-weight: 700; font-size: 10px;
  border: 1px solid rgba(212,160,23,0.30);
}

/* Inline part-card expansion — appended after the rows inside .callout-row,
   spans the whole table width since .callout-row is a vertical container. */
.callout-row > .pc-inline-wrap {
  padding: 8px 12px 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

/* ── Part page ────────────────────────────────────────────────────────── */
.part-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  height: 100%; min-height: 0;
}
.part-info {
  background: var(--surface); border-left: 1px solid var(--border);
  overflow: auto; padding: 20px;
}
.part-info h2 {
  margin: 0 0 6px; font-size: 11px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px;
}
.part-info .pn {
  font: 700 22px/1.2 ui-monospace, monospace;
  margin: 0 0 10px; color: var(--text); user-select: all;
  letter-spacing: -0.2px;
}
.part-info .pn-name {
  font-size: 16px; font-weight: 500; color: var(--text-2);
  margin: 0 0 20px; line-height: 1.4;
}
.part-info .meta-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  margin: 0 0 18px; padding: 12px; background: var(--surface-2); border-radius: var(--radius);
  font-size: 12px;
}
.part-info .meta-grid dt { color: var(--text-muted); margin: 0; }
.part-info .meta-grid dd { margin: 0 0 4px; color: var(--text); font-weight: 500; }
.part-info section { margin: 0 0 18px; }
.part-info section h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
}
.part-info ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.part-info .hit-card {
  padding: 10px; background: var(--surface-2); border-radius: var(--radius); border: 1px solid var(--border);
  cursor: pointer; transition: border-color var(--tx);
}
.part-info .hit-card:hover { border-color: var(--accent); }
.part-info .hit-card strong { font-size: 13px; font-weight: 500; }
.part-info .hit-card small { color: var(--text-muted); font-size: 11px; display: block; margin-top: 2px; }
.part-info .ssn-list { display: flex; flex-wrap: wrap; gap: 6px; }
.part-info .ssn-list a {
  display: inline-block; padding: 3px 10px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 100px;
  color: var(--link); text-decoration: none; font: 12px/1 ui-monospace, monospace;
}
.part-info .ssn-list a:hover { background: var(--accent-2); border-color: var(--accent); }

/* CTA button (Buy on wwspares) */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 11px 16px; background: var(--accent); color: white;
  border: 0; border-radius: var(--radius); font: 600 14px inherit;
  text-decoration: none; cursor: pointer; gap: 6px;
}
.cta:hover { filter: brightness(1.1); }
.cta.disabled { background: var(--surface-3); color: var(--text-muted); cursor: not-allowed; }

/* ── Loading + empty + error states ─────────────────────────────────── */
.loading-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.4); z-index: 10; pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .loading-overlay { background: rgba(0,0,0,0.4); }
}
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  padding: 60px 24px; text-align: center; color: var(--text-muted);
}
.empty-state h3 { color: var(--text-2); margin: 0 0 6px; }
.empty-state p { margin: 0 0 18px; }

.error-banner {
  padding: 12px 18px; background: rgba(193,45,45,0.08); color: var(--danger);
  border: 1px solid rgba(193,45,45,0.3); border-radius: var(--radius); margin: 12px;
}

.skel { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Toast ─────────────────────────────────────────────────────────────── */
#toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface);
  padding: 10px 18px; border-radius: 100px; font-size: 13px;
  box-shadow: var(--shadow-lg); z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms;
}
#toast.show { opacity: 1; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  #main { grid-template-columns: 1fr; }
  /* When `.no-sidebar` is set (home page, brand-landing) the desktop rule
   * `grid-template-columns: 0 1fr` placed #content in the 0-track and zeroed
   * its width. On mobile the sidebar is `position: fixed` (out of grid flow),
   * so we collapse to a single column always. */
  #main.no-sidebar { grid-template-columns: 1fr; }
  #sidebar { position: fixed; top: 84px; bottom: 0; left: 0; width: 280px; z-index: 50;
            transform: translateX(-100%); transition: transform var(--tx); }
  #sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .veh-layout { grid-template-columns: 1fr; grid-template-rows: 1fr 280px; }
  .part-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .part-info { border-left: none; border-top: 1px solid var(--border); }
  #topsearch { width: 180px; }
}

/* SVG zoom integration (modules add their own classes) */
.svgzoom-toolbar { font-size: 12px; }
.hotspot-tooltip { box-shadow: var(--shadow-lg); border-radius: var(--radius); }

/* ── Brand-landing page (vehicle picker) ────────────────────────────────── */
.brand-landing { max-width: 1200px; }
.brand-filter {
  width: 100%; max-width: 420px;
  padding: 10px 14px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 100px;
  font: inherit; margin: 0 0 24px;
}
.brand-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }

.family-list { display: flex; flex-direction: column; gap: 28px; }

.family-group { display: flex; flex-direction: column; gap: 12px; }
.family-head {
  margin: 0; display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; font-weight: 600; color: var(--text);
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.family-name { letter-spacing: -0.2px; }
.family-count {
  font-size: 11px; font-weight: 400; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
}

.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.veh-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx);
  box-shadow: var(--shadow-sm);
}
.veh-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.veh-card-title { font-size: 14px; font-weight: 500; line-height: 1.3; }
.veh-card-meta {
  display: flex; gap: 8px; align-items: center; font-size: 12px;
}
.veh-years { color: var(--text-2); }
.veh-parts {
  font-size: 11px; color: var(--text-muted);
  padding: 1px 7px; background: var(--surface-2); border-radius: 100px;
}
.veh-card-meta { flex-wrap: wrap; }
.veh-badge {
  margin-left: auto; font-size: 10px; padding: 1px 7px; border-radius: 100px;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.veh-badge.has-ov { background: var(--gold-soft); color: var(--gold-strong); }
.veh-badge.no-ov  { background: var(--surface-3); color: var(--text-muted); font-weight: 500; }
.veh-card.no-overview { opacity: 0.85; }
.veh-card.has-overview .veh-card-title { color: var(--text); }

/* ─────────────────────────────────────────────────────────────────────────
 * CATEGORY PAGE — card grid of all illustrations under an HG (optionally
 * narrowed to one UG). Added 2026-05-21 by the category-page agent.
 * ───────────────────────────────────────────────────────────────────────── */

/* Tree node: split label-anchor + caret-button for navigate vs toggle */
.tree-node.tree-split {
  /* Override the generic .tree-node padding so the inner <button> + <a> can
   * have their own clickable hit-targets without nesting interactive elements. */
  padding: 0;
  align-items: stretch;
}
.tree-node.tree-split > .caret {
  width: 22px; height: auto; padding: 5px 0;
  background: transparent; border: 0;
  color: var(--text-muted); font-size: 11px; cursor: pointer;
  text-align: center; line-height: 1;
}
.tree-node.tree-split > .caret:hover { color: var(--text); background: var(--surface-3); }
.tree-node.tree-split > .label {
  flex: 1; min-width: 0; padding: 5px 6px 5px 2px;
  color: var(--text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center;
}
.tree-node.tree-split > .label:hover { background: var(--surface-2); color: var(--link); }
.tree-node.tree-split.active > .label { background: var(--accent-2); color: var(--link); font-weight: 500; }
.tree-node.tree-split > .count { font-size: 10px; color: var(--text-muted); padding: 5px 6px; }
.tree-node.tree-leaf { padding: 4px 6px; }

/* Category page shell — relies on #content's overflow:auto for scrolling */
.cat-page {
  padding: 24px 24px 60px;
  max-width: 1400px;
  margin: 0 auto;
}
.cat-header {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cat-header h1 {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.3px;
}
.cat-header .sub { color: var(--text-muted); margin: 0; font-size: 13px; }

/* Info banner — soft amber for "FYI, here's why the page looks like this".
   Used by the area page when illustrations were filtered out because the
   artwork isn't in our dataset (Porsche newer models, some VW sections). */
.cat-header .info-banner {
  margin-top: 8px;
  padding: 10px 14px;
  background: rgba(212,160,23,0.10);
  border: 1px solid rgba(212,160,23,0.32);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
}
.cat-header .info-banner strong { color: var(--gold); font-weight: 700; }

/* UG group heading inside an HG page */
.cat-group-head {
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  margin: 26px 0 12px;
  padding: 8px 4px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.6px;
}
.cat-group-head a {
  color: inherit; text-decoration: none;
}
.cat-group-head a:hover { color: var(--link); }
.cat-group-head .count {
  font-size: 11px; font-weight: 500; padding: 2px 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 100px; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}

/* Card grid */
.diag-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.diag-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--tx), border-color var(--tx),
              box-shadow var(--tx-slow);
}
.diag-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-3);
  box-shadow: var(--shadow-md);
}
.diag-card:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow-md); border-color: var(--accent); }
.diag-card .thumb-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* Loading shimmer behind the thumb-frame while img not yet loaded.
   Disappears the moment the img paints (sits behind, covered by img). */
.diag-card .thumb-frame::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, var(--surface-2) 8%, var(--surface-3) 18%, var(--surface-2) 33%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  z-index: 0;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.diag-card .thumb {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--surface);
}
/* Hide the broken-image icon if the img fails (uses Chrome's pseudo) */
.diag-card .thumb[src=""] { visibility: hidden; }
.diag-card .thumb:not([src]) { visibility: hidden; }
.diag-card .thumb-placeholder {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.diag-card .card-body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 0;
}
.diag-card .bildtafel-id {
  font-size: 11px; font-weight: 700;
  color: var(--accent, #d4a017);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.diag-card .name {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  max-height: 2.6em;
}
.diag-card .meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 11px; color: var(--text-muted);
}
.diag-card .meta .part-count {
  color: var(--text-2); font-weight: 500;
}
.diag-card .meta .callout-count::before {
  content: '·'; margin-right: 6px; color: var(--border-strong);
}
.diag-card .meta .ug-tag {
  display: inline-block;
  margin-left: auto;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 10px;
  color: var(--text-muted);
}

/* Mobile: 2 cards per row */
@media (max-width: 720px) {
  .diag-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cat-page { padding: 16px 12px 40px; }
  .cat-header h1 { font-size: 18px; }
  .diag-card .name { font-size: 12px; }
}

/* =========================================================================
 * PART CARD — agent-2 Rich Part-Info Card.
 * Lives at .part-card; .part-card.compact = inline-on-illus mode (tabs).
 * Variables consumed: --surface*, --border*, --text*, --accent*, --gold*,
 *                     --radius*, --shadow*.
 * No external deps; no JS in this section.
 * ========================================================================= */

.part-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}
.part-card.compact {
  padding: 12px;
  gap: 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  font-size: 12.5px;
}

/* HEAD */
.part-card .pc-head { display: flex; flex-direction: column; gap: 4px; }
.part-card .pc-headrow { display: flex; align-items: center; gap: 10px; }
.part-card .pc-pn {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px; font-weight: 600; letter-spacing: 0.5px;
  background: var(--surface-2); padding: 2px 10px; border-radius: var(--radius-sm);
  color: var(--text);
}
.part-card.compact .pc-pn { font-size: 15px; padding: 1px 6px; }
.part-card .pc-name {
  font-size: 15px; font-weight: 500; color: var(--text);
}
.part-card.compact .pc-name { font-size: 13px; color: var(--text-2); }
.part-card .pc-close {
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-muted);
  padding: 0 4px; border-radius: var(--radius-sm);
}
.part-card .pc-close:hover { background: var(--surface-3); color: var(--text); }

/* BADGES */
.part-card .pc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.part-card .pc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
  padding: 2px 9px; border-radius: 100px;
  font-size: 11px; font-weight: 500;
}
.part-card .pc-badge-warn { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-soft); }
.part-card .pc-badge-soft { background: var(--accent-2); color: var(--accent); border-color: var(--accent-3); }
.part-card .pc-badge-info { background: var(--surface-3); color: var(--text); }
.part-card .pc-badge-fit { background: rgba(31,111,62,0.16); color: #1f6f3e; border-color: rgba(31,111,62,0.45); font-weight: 700; }

/* META GRID */
.part-card .pc-meta-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px;
  margin: 0; font-size: 12.5px;
}
.part-card .pc-meta-grid dt { color: var(--text-muted); font-weight: 500; }
.part-card .pc-meta-grid dd { margin: 0; color: var(--text); word-break: break-word; }

/* SECTION HEADERS (full mode) */
.part-card .pc-sec-h {
  margin: 8px 0 0; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.part-card .pc-sub-h {
  margin: 8px 0 4px; font-size: 12px; font-weight: 600;
  color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px;
}

.part-card .pc-count {
  display: inline-block;
  background: var(--surface-3); color: var(--text-2);
  font-size: 10.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 100px;
  min-width: 18px; text-align: center;
}

/* CTA ROW */
.part-card .pc-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.part-card .pc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.part-card .pc-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.part-card .pc-btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.part-card .pc-btn-primary:hover { background: var(--accent); filter: brightness(0.92); }

/* TABS (compact mode) */
.part-card .pc-tabs-wrap { display: flex; flex-direction: column; gap: 8px; }
.part-card .pc-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--border);
}
.part-card .pc-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-muted); cursor: pointer;
  padding: 6px 10px; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: -1px;
  font-family: inherit;
}
.part-card .pc-tab:hover { color: var(--text); }
.part-card .pc-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.part-card .pc-pane { padding: 4px 0; }
.part-card .pc-empty {
  color: var(--text-muted); font-style: italic;
  padding: 12px 0; font-size: 12px;
}

/* WHERE-USED LIST */
.part-card .pc-where { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.part-card .pc-where li {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--surface);
}
.part-card.compact .pc-where li { padding: 6px 8px; background: var(--surface); }
.part-card .pc-where-head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin-bottom: 2px;
}
.part-card .pc-where-veh { font-weight: 600; color: var(--text); }
.part-card .pc-where-yr { color: var(--text-muted); font-size: 11.5px; }
.part-card .pc-where-pos {
  margin-left: auto;
  background: var(--accent-2); color: var(--accent);
  padding: 1px 8px; border-radius: 100px; font-size: 11px; font-weight: 600;
}
.part-card .pc-where-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.part-card .pc-muted { color: var(--text-muted); }
.part-card .pc-where-extra { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }

.part-card .pc-pill {
  display: inline-block;
  background: var(--surface-2); color: var(--text-2);
  padding: 1px 8px; border-radius: 100px; font-size: 11px;
  text-decoration: none;
}
.part-card .pc-pill-link { background: var(--accent-2); color: var(--accent); }
.part-card .pc-pill-link:hover { background: var(--accent-3); }

/* SUPERSESSION CHAIN */
.part-card .pc-chain { display: flex; flex-direction: column; gap: 6px; }
.part-card .pc-chain-block {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; background: var(--surface);
}
.part-card .pc-chain-current {
  background: var(--gold-soft); border-color: var(--gold);
}
.part-card .pc-chain-title {
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.part-card .pc-chain-row { display: flex; flex-wrap: wrap; gap: 6px; }
.part-card .pc-chain-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); color: var(--text);
  padding: 3px 8px; border-radius: var(--radius-sm);
  font-size: 12px; text-decoration: none;
  border: 1px solid var(--border);
}
.part-card .pc-chain-link:hover { border-color: var(--accent); }
.part-card .pc-chain-link code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.part-card .pc-chain-w {
  font-size: 10px; color: var(--text-muted); font-weight: 500;
}
.part-card .pc-chain-this {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.part-card .pc-chain-arrow {
  align-self: center; color: var(--text-muted); font-size: 16px; line-height: 1;
}

/* TABLE — applicability / vin / engine / gearbox */
.part-card .pc-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.part-card .pc-table th, .part-card .pc-table td {
  text-align: left; padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}
.part-card .pc-table th {
  font-weight: 600; color: var(--text-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--surface-2);
}
.part-card .pc-table tbody tr:hover { background: var(--surface-2); }
.part-card .pc-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

/* NOTES */
.part-card .pc-notes { list-style: none; margin: 0; padding: 0;
                       display: flex; flex-direction: column; gap: 6px; }
.part-card .pc-notes li {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.part-card .pc-note-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  min-width: 50px;
}
.part-card .pc-note-text { color: var(--text); flex: 1; font-size: 12px; }

/* SKELETON */
.part-card .pc-skel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.part-card .pc-skel-line {
  height: 14px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: pcShimmer 1.4s linear infinite;
}
.part-card .pc-skel-line.w90 { width: 90%; }
.part-card .pc-skel-line.w70 { width: 70%; }
.part-card .pc-skel-line.w50 { width: 50%; }
.part-card .pc-skel-line.w40 { width: 40%; }
@keyframes pcShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* DISCONTINUED BANNER (part_master wiring, 2026-05-21) — sits above the
 * head; loud red so the user can't miss "this PN is dead". Replaced-by link
 * is the primary action, depth shown when chain has multiple hops. */
.part-card .pc-banner {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.part-card .pc-banner-discontinued {
  background: #b32424;
  color: #fff;
  border: 1px solid #8a1b1b;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
/* Overseas-only discontinuation — muted info card, no alarm. EU stock
   still available, so this is FYI not a blocker. */
.part-card .pc-banner-overseas {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 12px;
}
.part-card .pc-banner-overseas .pc-banner-tag-overseas {
  font-weight: 700; letter-spacing: 0.04em; font-size: 11px;
  background: rgba(0,0,0,0.06);
  padding: 2px 7px; border-radius: 3px;
  color: var(--text);
  text-transform: uppercase;
}
.part-card .pc-banner-overseas .pc-banner-sub {
  font-size: 11px; opacity: 0.85;
  margin-top: 4px;
}
.part-card .pc-banner-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.part-card .pc-banner-tag {
  font-weight: 800; letter-spacing: 0.06em; font-size: 13px;
  background: rgba(0,0,0,0.18);
  padding: 3px 9px; border-radius: 3px;
}
.part-card .pc-banner-date,
.part-card .pc-banner-mkt {
  font-size: 12px; opacity: 0.95;
}
.part-card .pc-banner-mkt {
  background: rgba(0,0,0,0.18); padding: 2px 7px; border-radius: 3px;
}
.part-card .pc-banner-replaced {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.part-card .pc-banner-arrow {
  opacity: 0.85; font-size: 12px;
}
.part-card .pc-banner-pn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 700;
  background: rgba(255,255,255,0.16);
  color: #fff;
  padding: 3px 9px; border-radius: 3px;
  text-decoration: none;
}
.part-card .pc-banner-pn:hover { background: rgba(255,255,255,0.28); }
.part-card .pc-banner-depth {
  font-size: 11px; opacity: 0.85;
}
.part-card.compact .pc-banner { padding: 8px 10px; font-size: 12px; }
.part-card.compact .pc-banner-tag { font-size: 11px; padding: 2px 6px; }

/* FITS VEHICLES — full per-Typ list (part_typ → vehicle_type/applicability).
 * Compact, scrollable when long. Bare rows (no label) get dimmer text. */
.part-card .pc-fits {
  list-style: none; padding: 0; margin: 0;
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.part-card .pc-fits-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
.part-card .pc-fits-row:last-child { border-bottom: none; }
.part-card .pc-fits-row:hover { background: var(--surface-3, rgba(255,255,255,0.04)); }
.part-card .pc-fits-typ {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  padding: 2px 6px; border-radius: 3px;
  text-align: center;
}
.part-card .pc-fits-label { color: var(--text); }
.part-card .pc-fits-yr {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.part-card .pc-fits-row-bare .pc-fits-label { color: var(--text-muted); font-style: italic; }
.part-card.compact .pc-fits { max-height: 220px; }

/* Variants (colour/finish/material SKUs of the base PN) — added 2026-05-27.
 * Compact pill list: suffix code chip + date-window pill. Sized to fit many
 * entries (Audi 8K0857621 has 11+ colour variants). */
.part-card .pc-variants {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  max-height: 360px; overflow-y: auto;
}
.part-card .pc-variant-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.part-card .pc-variant-suffix {
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.5px;
  background: var(--accent-soft, rgba(212,160,23,0.12));
  color: var(--accent-strong, #b58509);
  padding: 3px 7px; border-radius: 4px;
  flex-shrink: 0;
}
.part-card .pc-variant-date {
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.part-card .pc-variant-dash { color: var(--text-muted); }
.part-card .pc-cell-note {
  font-size: 11.5px; color: var(--text-muted);
  max-width: 280px;
}
.part-card.compact .pc-variants { max-height: 260px; }

/* Inline part-card expansion on the open pos group. */
.callout-row.pc-open { background: var(--accent-2); }
.callout-row.pc-open > .pt-row { background: var(--accent-2); }

@media (max-width: 720px) {
  .part-card .pc-meta-grid { grid-template-columns: 1fr; }
  .part-card .pc-table { font-size: 11px; }
  .part-card .pc-table th, .part-card .pc-table td { padding: 4px 6px; }
}

/* =========================================================================
 * SECONDARY VEHICLE TABS — Accessories / Infoline / Chemical / Standard /
 * Notes. Added 2026-05-21 by the secondary-tabs agent.
 *
 * Layout: a tab strip lives below the breadcrumb (its own grid row). Each tab
 * view renders a title + count badge + per-tab search + sortable table.
 * ========================================================================= */

#vehicle-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
#vehicle-tabs[hidden] { display: none; }

.vtab {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--tx), background var(--tx);
}
/* Sliding indicator — per-tab `::after` grows from center on hover, locks full-width on active */
.vtab::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0;
  transition: left var(--tx), right var(--tx);
}
.vtab:hover { color: var(--text); background: var(--surface-2); }
.vtab:hover::after { left: 20%; right: 20%; opacity: 0.5; }
.vtab.on { color: var(--accent); background: transparent; }
.vtab.on::after { left: 0; right: 0; opacity: 1; }
.vtab:focus-visible { outline: none; background: var(--surface-2); }
.vtab:focus-visible::after { left: 10%; right: 10%; }

@media (max-width: 720px) {
  #vehicle-tabs { padding: 0 6px; }
  .vtab { padding: 7px 10px; font-size: 12px; }
}

/* Tab view container ───────────────────────────────────────────────────── */
.tab-wrap {
  padding: 18px 22px 60px;
  max-width: 1400px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.tab-header {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.tab-title {
  margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.2px;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
}
.tab-count {
  display: inline-block;
  background: var(--surface-2); color: var(--text-2);
  font-size: 11px; font-weight: 600;
  padding: 2px 10px; border-radius: 100px;
  min-width: 22px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tab-search {
  flex: 1; min-width: 220px;
  max-width: 360px;
  padding: 6px 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 13px;
}
.tab-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-2);
}
.tab-note {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  line-height: 1.45;
}

/* Sortable table ───────────────────────────────────────────────────────── */
.tab-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.tab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tab-table th, .tab-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.tab-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.tab-table th.sortable { cursor: pointer; user-select: none; }
.tab-table th.sortable:hover { color: var(--text); background: var(--surface-3); }
.tab-table th.sorted { color: var(--accent); }
.tab-table tbody tr:hover { background: var(--surface-2); }
.tab-table td.mono, .tab-table th.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
.tab-table td.pn { white-space: nowrap; }
.tab-table td a { color: var(--link); text-decoration: none; }
.tab-table td a:hover { text-decoration: underline; }
.tab-table .muted { color: var(--text-muted); }

/* Type tag (notes) */
.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.tag-part      { background: var(--accent-2); color: var(--accent); }
.tag-bildtafel { background: var(--gold-soft, #fff4d6); color: var(--gold, #b07900); }

/* Empty + footer */
.tab-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.tab-empty h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.tab-empty p { margin: 0; font-size: 13px; }
.tab-footer-meta {
  font-size: 11px; color: var(--text-muted);
  padding-top: 6px;
}

@media (max-width: 720px) {
  .tab-wrap { padding: 14px 10px 40px; }
  .tab-title { font-size: 17px; }
  .tab-search { min-width: 0; max-width: 100%; flex-basis: 100%; }
  .tab-table th, .tab-table td { padding: 6px 8px; font-size: 12px; }
}

/* =========================================================================
 * VISUAL POLISH — design-system v3 additions (2026-05-21)
 * Icon system, focus rings, illustrated empty states, contextual loading,
 * button-link variants, refined hover lifts on tree/search items.
 * Tokens consumed: see :root at top.
 * ========================================================================= */

/* ── Icon helper ────────────────────────────────────────────────────────
 * Use as: <svg class="icon"><use href="#i-tree"/></svg>
 * The sprite lives at the end of index.html, end of <body>.
 * Inherits stroke from currentColor so icons match their button's text. */
.icon {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -2px; flex-shrink: 0;
  pointer-events: none;
}
.icon-sm { width: 12px; height: 12px; stroke-width: 2.2; }
.icon-lg { width: 18px; height: 18px; }
.icon-xl { width: 22px; height: 22px; }

/* Sprite container is invisible — only its <symbol> children are referenced */
#icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Focus rings everywhere (a11y + polish) ─────────────────────────── */
*:focus-visible { outline: none; }
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}
.combo-input:focus, #topsearch input:focus, .tab-search:focus {
  box-shadow: var(--ring);
}

/* ── Contextual loading message ─────────────────────────────────────── */
.loading-msg {
  font-size: 13px; color: var(--text-2);
  margin-left: 14px;
  display: inline-flex; flex-direction: column; gap: 4px;
}
.loading-msg .ctx {
  font-size: 11px; color: var(--text-muted);
  font-family: ui-monospace, monospace; letter-spacing: 0.3px;
}

/* ── Illustrated empty states ───────────────────────────────────────── */
/* Existing .empty-state is text-only. The .empty-state.illus variant
 * has an inline SVG slot above the heading. Use:
 *   <div class="empty-state illus">
 *     <svg class="empty-illus" ...></svg>
 *     <h3>...</h3><p>...</p>
 *     <a class="btn-primary">CTA</a>
 *   </div>
 */
.empty-state {
  padding: 56px 24px; text-align: center; color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.empty-state h3 {
  color: var(--text); margin: 0 0 4px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.1px;
}
.empty-state p {
  margin: 0 0 12px; font-size: 13px; line-height: 1.5;
  max-width: 380px; color: var(--text-2);
}
.empty-state code {
  background: var(--surface-2); padding: 1px 6px; border-radius: 3px;
  font-size: 12px; color: var(--text);
}
.empty-illus {
  width: 88px; height: 88px;
  color: var(--text-muted);
  opacity: 0.6;
  margin-bottom: 8px;
}
.empty-illus.with-accent { color: var(--accent); opacity: 0.45; }
.empty-illus.with-gold { color: var(--gold-strong); opacity: 0.55; }

/* ── Button-link variants (for empty-state CTAs, etc.) ──────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; min-height: 34px;
  font: inherit; font-size: 13px; font-weight: 500;
  border-radius: var(--radius);
  cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--tx), border-color var(--tx),
              color var(--tx), box-shadow var(--tx), transform var(--tx);
  user-select: none; white-space: nowrap;
}
.btn-primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(31,95,217,0.30), 0 4px 12px rgba(31,95,217,0.18);
}
.btn-primary:hover {
  background: #1a52c2; border-color: #1a52c2;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(31,95,217,0.35), 0 8px 20px rgba(31,95,217,0.22);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--surface); color: var(--text); border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: var(--surface-2); border-color: var(--border-strong);
  transform: translateY(-1px); box-shadow: var(--shadow);
}

.btn-ghost {
  background: transparent; color: var(--text-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* ── Subtle hover lifts for list items / search items ────────────────── */
.combo-item, .callout-row, .thumb {
  transition: background var(--tx), border-color var(--tx), transform var(--tx);
}
.thumb:hover {
  transform: translateY(-1px); box-shadow: var(--shadow);
}

/* ── Eyebrow heading — small caps "Brands" / "Recently viewed" labels ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 28px 0 12px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-muted);
}
.eyebrow .icon { color: var(--text-muted); opacity: 0.75; }

/* ── Header brand-mark micro-polish ────────────────────────────────── */
#brand-mark {
  font-weight: 700; letter-spacing: 1.5px; font-size: 13px;
  transition: color var(--tx);
}
#brand-mark .dot {
  box-shadow: 0 0 0 3px rgba(212,160,23,0.20);
  transition: transform var(--tx);
}
#brand-mark:hover .dot { transform: scale(1.15); }

/* ── Topbar links — bring up to button-tier interactivity ───────────── */
#topbar .right a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 12.5px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  transition: background var(--tx), color var(--tx);
}
#topbar .right a:hover { color: var(--header-fg); background: rgba(255,255,255,0.06); }

/* ── Tree node icon support ─────────────────────────────────────────── */
.tree-wrap h3 {
  display: flex; align-items: center; gap: 6px;
  padding: 0 4px;
}
.tree-node .icon { color: var(--text-muted); }
.tree-node.active .icon { color: var(--link); }

/* ── Improved category page header — eyebrow + title ────────────────── */
.cat-header h1 {
  letter-spacing: -0.4px; line-height: 1.2;
}
.cat-header .sub { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ── thumb-frame in cards: subtle inset shadow on hover ─────────────── */
.diag-card .thumb-frame {
  transition: background var(--tx);
  background-image:
    linear-gradient(135deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(225deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(45deg,  var(--surface-2) 25%, transparent 25%),
    linear-gradient(315deg, var(--surface-2) 25%, var(--surface-3) 25%);
  background-position: 6px 0, 6px 0, 0 0, 0 0;
  background-size: 12px 12px;
  background-color: var(--surface-3);
  background-repeat: repeat;
  opacity: 1;
}
.diag-card .thumb { background: var(--surface-2); }
/* Override the checker background when an actual <img class="thumb"> is present —
 * it sits on top of the frame and covers the pattern. The pattern only shows
 * for placeholders or while images load. */
.diag-card .thumb-placeholder {
  background: rgba(255,255,255,0.40);
  padding: 6px 10px; border-radius: var(--radius-sm);
  backdrop-filter: blur(2px);
}

/* ── Brand landing page — family group polish ───────────────────────── */
.brand-landing .family-group { margin-bottom: 28px; }
.brand-landing .family-head {
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 12px;
  font-size: 14px; font-weight: 600;
  color: var(--text);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.brand-landing .family-name { color: var(--text); }
.brand-landing .family-count {
  font-size: 11px; font-weight: 500;
  color: var(--text-muted); text-transform: none;
  letter-spacing: 0;
  padding: 1px 8px; background: var(--surface-2);
  border-radius: 100px; border: 1px solid var(--border);
}
.brand-landing .family-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.brand-landing .veh-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--tx), border-color var(--tx),
              box-shadow var(--tx-slow);
}
.brand-landing .veh-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-3);
  box-shadow: var(--shadow);
}
.brand-landing .veh-card-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -0.1px;
}
.brand-landing .veh-card-meta {
  display: flex; gap: 10px;
  font-size: 12px; color: var(--text-muted);
}
.brand-landing .veh-years { font-family: ui-monospace, monospace; }
.brand-landing .veh-parts { color: var(--text-2); }
.brand-landing .brand-filter {
  width: 100%; max-width: 400px;
  height: 36px; padding: 0 14px 0 36px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  font: inherit; font-size: 14px;
  margin: 0 0 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--tx), box-shadow var(--tx);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8398' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px 14px;
}
.brand-landing .brand-filter:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring);
}

/* ── Refined CTA on part-info ───────────────────────────────────────── */
.cta {
  font-weight: 600; letter-spacing: 0.2px;
  box-shadow: 0 1px 2px rgba(31,95,217,0.30), 0 4px 12px rgba(31,95,217,0.18);
  transition: background var(--tx), transform var(--tx), box-shadow var(--tx);
  height: 40px;
}
.cta:hover {
  background: #1a52c2; filter: none; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(31,95,217,0.35), 0 8px 20px rgba(31,95,217,0.22);
}
.cta:active { transform: translateY(0); }

/* Pulse animation for the active spinner — slightly more present */
.spinner {
  box-shadow: 0 0 0 4px var(--accent-2);
}

/* ── Mobile sweep ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .home-wrap { padding: 24px 16px; }
  .home-wrap h1 { font-size: 22px; }
  .home-wrap .sub { font-size: 14px; margin-bottom: 24px; }
  .brand-grid li a { padding: 16px 14px; }
  .brand-grid strong { font-size: 16px; }
  .empty-illus { width: 64px; height: 64px; }
  .veh-stage .toolbar { padding: 8px 10px; gap: 6px; min-height: 40px; }
  .veh-stage .toolbar .title { font-size: 13px; }
  .veh-stage .toolbar .meta { display: none; }
  .tbtn { font-size: 12px; padding: 4px 9px; min-height: 26px; }
  #brand-mark { letter-spacing: 1px; }
}

/* Reduced-motion: kill the lifts + slides */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tbtn:hover, .btn-primary:hover, .btn-secondary:hover,
  .brand-grid li a:hover, .diag-card:hover, .brand-landing .veh-card:hover,
  .thumb:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Part page — clickable callout overlay  (added by background agent)
 * Wires hover + active-PN highlight + tooltip on the per-part diagram.
 * The .hotspot base styles in .diag-wrap svg above already handle the hover
 * gold tint; the rules below pin the ACTIVE PN's rect permanently and host
 * the JS-positioned tooltip element.
 * ───────────────────────────────────────────────────────────────────────── */
.diag-wrap svg .hotspot.part-active {
  /* The active PN's rect is "always on" — a softer gold than :hover so it
   * doesn't fight the user's mouse-over feedback. */
  fill: var(--gold-soft, rgba(212,160,23,0.20));
  stroke: var(--gold-strong, rgba(212,160,23,0.85));
  stroke-width: 3;
}
.diag-wrap svg .hotspot.part-active:hover {
  /* Stronger tint while hovered, but stays gold (consistent with other rects). */
  fill: var(--gold, rgba(212,160,23,0.35));
}
.part-hotspot-tip {
  position: absolute; pointer-events: none;
  background: rgba(0,0,0,0.85); color: #fff;
  padding: 6px 10px; border-radius: var(--radius-sm, 4px);
  font: 600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap; max-width: 480px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  opacity: 0; transition: opacity 80ms ease-out;
  z-index: 50;
  left: 0; top: 0;
}
.part-hotspot-tip.show { opacity: 1; }
@media (prefers-color-scheme: light) {
  .part-hotspot-tip {
    background: rgba(20,20,20,0.92);
    color: #fff;
  }
}

/* ── Part-card price tag (FPREIS.BIN data, see scripts/extract_prices.js) ── */
.pc-price {
  display: inline-flex; align-items: baseline; gap: 4px;
  margin-left: 10px; padding: 2px 10px;
  background: linear-gradient(180deg, #1f6f3e 0%, #155a32 100%);
  color: #fff; border-radius: 999px;
  font: 700 14px/1.2 ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 3px rgba(0,0,0,0.25);
  cursor: help;
  letter-spacing: 0.01em;
}
.pc-price-from {
  font: 600 10px/1 ui-sans-serif, system-ui, sans-serif;
  opacity: 0.78; text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 1px;
}
.pc-price-eur { font-variant-numeric: tabular-nums; }
.pc-price-stock {
  margin-left: 4px; font-weight: 900; color: #aef0c4;
}
@media (prefers-color-scheme: dark) {
  .pc-price {
    background: linear-gradient(180deg, #2a8a4f 0%, #1c6b39 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 1px 4px rgba(0,0,0,0.45);
  }
}

/* ── Part-card PR-Info section (equipment-code filters) ──────────────────── */
.pc-pr-wrap { padding: 8px 4px; }
.pc-pr-vin-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--surface-2); border-radius: var(--radius);
  border: 1px solid var(--border);
  font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pc-pr-vin-banner code {
  background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 3px;
  color: var(--text-2); font-weight: 700;
}
.pc-pr-match { color: var(--success); font-weight: 600; }
.pc-pr-nomatch { color: var(--danger); font-weight: 600; }
.pc-pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
}
.pc-pr-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: help; transition: background var(--tx), border-color var(--tx);
  font-size: 12px;
}
.pc-pr-pill:hover { background: var(--gold-soft); border-color: var(--gold-strong); }
.pc-pr-code { font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace;
              color: var(--text); flex: 0 0 auto; }
.pc-pr-meta { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.pc-pr-ind  { font-weight: 800; font-size: 14px; }
.pc-pr-match-pill {
  background: rgba(31,138,71,0.08);
  border-color: var(--success);
}
.pc-pr-match-pill .pc-pr-ind { color: var(--success); }
.pc-pr-nomatch-pill {
  background: rgba(193,45,45,0.06);
  border-color: rgba(193,45,45,0.40);
  opacity: 0.85;
}
.pc-pr-nomatch-pill .pc-pr-ind { color: var(--danger); }
.pc-pr-hint {
  margin-top: 10px; font-size: 12px; color: var(--text-muted);
  padding: 6px 10px; background: var(--accent-2); border-radius: var(--radius);
}
.pc-pr-hint a { color: var(--accent); }

/* ── OT-Merkblatt (info-sheet) tab — top of compact part card ─────────────── */
.pc-ot-wrap { padding: 8px 4px; display: flex; flex-direction: column; gap: 14px; }
.pc-ot-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.pc-ot-status-item {
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
}
.pc-ot-status-label { font: 700 10px ui-sans-serif; text-transform: uppercase;
                      letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 2px; }
.pc-ot-status-detail { font: 600 13px ui-sans-serif, system-ui; }
.pc-ot-status-detail code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pc-ot-success { background: rgba(31,138,71,0.08); border-color: var(--success); }
.pc-ot-success .pc-ot-status-label { color: var(--success); }
.pc-ot-danger { background: rgba(193,45,45,0.08); border-color: var(--danger); }
.pc-ot-danger .pc-ot-status-label { color: var(--danger); }
.pc-ot-warn { background: var(--gold-bg); border-color: var(--gold-strong); }
.pc-ot-warn .pc-ot-status-label { color: var(--gold); }
.pc-ot-info { background: var(--accent-2); border-color: var(--accent); }
.pc-ot-info .pc-ot-status-label { color: var(--accent); }
.pc-ot-h { margin: 4px 0 6px; font: 700 12px ui-sans-serif; text-transform: uppercase;
           letter-spacing: 0.04em; color: var(--text-muted); }
.pc-ot-alt { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-ot-alt-pill { padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border);
                  border-radius: 999px; font: 600 12px ui-monospace; color: var(--text);
                  text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.pc-ot-alt-pill:hover { background: var(--gold-soft); border-color: var(--gold-strong); }
.pc-ot-chain { font: 600 12px ui-monospace; color: var(--text-2);
               background: var(--surface-2); padding: 8px 12px; border-radius: var(--radius);
               word-break: break-all; }
.pc-ot-notes { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.pc-ot-notes li { margin-bottom: 4px; }
.pc-ot-links { display: flex; gap: 8px; margin-top: 4px; }

/* Spezialkataloge dropdown menu — same shape as brand menu */
.topnav-spez { position: relative; }
.topnav-spez .combo-item {
  display: block; padding: 8px 14px; cursor: pointer;
  color: var(--header-fg); text-decoration: none;
}
.topnav-spez .combo-item:hover { background: rgba(255,255,255,0.06); }
.topnav-spez .combo-sub { font-size: 10px; color: var(--header-muted); margin-top: 2px; }

/* ── Canonical category rail (category-rail.js) ──────────────────────── */
.crail { padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.crail-title {
  margin: 0;
  font: 700 10px/1 inherit;
  color: #7a8398;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 0 4px;
}
.crail-filter {
  width: 100%;
  padding: 6px 10px;
  font: 13px/1.2 inherit;
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  box-sizing: border-box;
}
.crail-filter:focus {
  outline: none;
  border-color: #EAC02C;
  box-shadow: 0 0 0 3px rgba(234,192,44,0.18);
}
.crail-list { display: flex; flex-direction: column; }
.crail-loading,
.crail-error { font: 12px/1.4 inherit; color: #8089a0; padding: 6px 4px; }
.crail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  font: 500 13px/1.3 inherit;
  cursor: pointer;
}
.crail-item:hover { background: rgba(234,192,44,0.10); }
.crail-item.on {
  background: rgba(234,192,44,0.22);
  font-weight: 700;
  color: #5a4500;
}
.crail-item.disabled {
  color: #adb3c1;
  cursor: default;
  pointer-events: none;
}
.crail-item.disabled .crail-name { font-style: italic; }
.crail-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crail-count {
  flex: 0 0 auto;
  font: 600 11px/1 inherit;
  color: #8089a0;
  background: #f2f4f9;
  padding: 2px 6px;
  border-radius: 10px;
}
.crail-item.on .crail-count { background: #fff7d6; color: #7a5a00; }
.crail-divider {
  height: 1px;
  background: #dbe0ea;
  margin: 12px 4px 6px;
}
.crail-subtitle {
  margin: 0 0 4px;
  font: 700 10px/1 inherit;
  color: #7a8398;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 0 4px;
}
.crail-tab { font-size: 12px; color: #4a5266; }

@media (prefers-color-scheme: dark) {
  .crail-filter { background: #1a1f28; border-color: #2a303a; color: #e2e5ec; }
  .crail-item:hover { background: rgba(234,192,44,0.12); }
  .crail-item.on { background: rgba(234,192,44,0.20); color: #ffe896; }
  .crail-count { background: #232936; color: #8089a0; }
  .crail-item.on .crail-count { background: #4a3a00; color: #ffe896; }
  .crail-divider { background: #2a303a; }
}

/* ─────────────────────────────────────────────────────────────────────
   Vehicle context bar — sticky bottom strip on vehicle-scoped pages.
   Mirrors the dark topbar palette so it reads as a peer chrome surface.
   See app.js setVehicleContext() for show/hide logic.
   ───────────────────────────────────────────────────────────────────── */
#vehicleContextBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  background: #11141a;
  color: #d8dce6;
  border-top: 1px solid #23272f;
  font: 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.18);
  overflow: hidden;
  white-space: nowrap;
}
#vehicleContextBar[hidden] { display: none; }
.vcb-field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  height: 100%;
  border-right: 1px solid #23272f;
  min-width: 0;
}
.vcb-field:first-child { padding-left: 0; }
.vcb-field.vcb-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vcb-field.vcb-grow .vcb-val { overflow: hidden; text-overflow: ellipsis; }
.vcb-label {
  color: #7a8398;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  font-weight: 600;
}
.vcb-val {
  color: #f1f3f8;
  font-weight: 500;
}
.vcb-val.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #ffe896;
  letter-spacing: 0.3px;
}
.vcb-spacer { flex: 1; min-width: 8px; border: none; }
.vcb-close {
  background: transparent;
  border: 1px solid #2a303a;
  color: #b8becc;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  margin-left: 8px;
}
.vcb-close:hover { background: #1d2128; color: #f1f3f8; border-color: #3a4150; }
.vcb-close svg { width: 12px; height: 12px; }

/* When the bar is visible, leave room at the bottom of #app so the fixed bar
   never overlays the content. Toggled by the .has-vcb class set by app.js. */
#app.has-vcb { padding-bottom: 30px; }

/* ───────────────────────────────────────────────────────────────────────────
   Global search dropdown — grouped results with brand badges, keyboard nav.
   Items are rendered via .search-row inside the existing .combo-menu shell.
   ─────────────────────────────────────────────────────────────────────────── */
.combo-group-head .gh-count {
  font-weight: 500; color: var(--text-muted); text-transform: none;
  letter-spacing: 0; margin-left: 4px; opacity: 0.7;
}
.combo-group-head .gh-clear {
  float: right; color: var(--text-muted); font-weight: 500;
  text-transform: none; letter-spacing: 0; font-size: 11px;
  text-decoration: none; padding: 0 4px;
}
.combo-group-head .gh-clear:hover { color: var(--accent); text-decoration: underline; }
/* Specificity boost: must beat `#topbar .right a` (id + class + tag = 1,1,1)
   which would otherwise force display: inline-flex on every <a> in the topbar
   right area, including search results. */
#topbar #searchMenu .search-row,
#searchMenu a.search-row {
  display: grid;
  grid-template-columns: 36px minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 8px 12px;
  width: auto;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
}
.search-row .brand-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 18px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px; color: #fff;
  background: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.search-row .brand-chip[data-brand="VW"] { background: #00B0F0; }
.search-row .brand-chip[data-brand="AU"] { background: #BB0A30; }
.search-row .brand-chip[data-brand="SE"] { background: #D14124; }
.search-row .brand-chip[data-brand="SK"] { background: #4BA82E; }
.search-row .brand-chip[data-brand="PO"] { background: #D5001C; }
.search-row .brand-chip[data-brand="VIN"] { background: #6f42c1; }
.search-row .sr-pn {
  font: 600 12.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--link); white-space: nowrap;
}
.search-row .sr-name {
  font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-row .sr-meta {
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
#topbar #searchMenu .search-row.vin-row,
#searchMenu a.search-row.vin-row { background: rgba(111, 66, 193, 0.06); }
#topbar #searchMenu .search-row.recent-row,
#searchMenu a.search-row.recent-row { grid-template-columns: 36px 1fr; }
.search-row .recent-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: var(--text-muted); font-size: 14px;
  background: var(--surface-2); border-radius: 50%;
}
.combo-empty-hint {
  padding: 12px 14px; font-size: 12px; color: var(--text-muted);
  line-height: 1.5;
}
.combo-empty-hint .hint-line + .hint-line { margin-top: 4px; font-size: 11px; opacity: 0.8; }

/* ── In-vehicle part search (partslink-style, top of sidebar) ──────────── */
.veh-search { position: relative; padding: 10px 10px 8px; border-bottom: 1px solid var(--border, #dbe0ea); background: var(--surface, #fff); }
.veh-search-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px 8px 30px; font-size: 13px;
  border: 1px solid var(--border, #dbe0ea); border-radius: 8px;
  background: var(--surface-2, #f3f5f9); color: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat; background-position: 9px center;
}
.veh-search-input:focus { outline: none; border-color: #1f8f4e; background-color: var(--surface, #fff); }
.veh-search-panel {
  display: none; position: absolute; top: calc(100% - 2px); left: 8px; right: 8px; z-index: 60;
  background: var(--surface, #fff); border: 1px solid var(--border, #dbe0ea); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 380px; overflow-y: auto; padding: 4px;
}
.veh-search-panel.open { display: block; }
.veh-search-row {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 9px; border-radius: 6px;
  text-decoration: none; color: inherit; cursor: pointer;
}
.veh-search-row:hover, .veh-search-row.active { background: var(--accent-2, #eef6f0); }
.veh-search-row .vs-name { font-weight: 600; font-size: 13px; }
.veh-search-row .vs-group { color: var(--text-muted, #7a8398); font-size: 11px; }
.veh-search-row .vs-type { margin-left: auto; font: 600 10px ui-monospace, monospace; color: #6b8f78; background: rgba(31,143,78,.10); border-radius: 8px; padding: 1px 6px; }
.veh-search-empty { padding: 10px 12px; font-size: 12.5px; color: var(--text-muted, #7a8398); }


/* Cross-reference ("see illustration") callout rows — overview/index diagrams
   list callouts that point to a detail sub-illustration instead of a part. */
.callout-row.reference-row { background: rgba(31,95,217,.04); }
.callout-row.reference-row .ref-line { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.callout-row.reference-row .ref-name { font-weight: 600; color: #2a3242; }
.callout-row.reference-row .ref-see { font-size: 12px; color: #1f5fd9; font-style: italic; }
.callout-row.reference-row .ref-see.muted { color: var(--text-muted, #7a8398); }
@media (prefers-color-scheme: dark){ .callout-row.reference-row { background: rgba(120,160,255,.07); } .callout-row.reference-row .ref-name { color:#cfd6e6; } }

/* ── Mobile content layout (≤760px) ───────────────────────────────────────
   On phones the diagram + parts list stack vertically, the parts table can
   scroll horizontally so price/DISC/Open are reachable, and the part card goes
   single-column. Pairs with the shell mobile rules in index.html. */
@media (max-width: 760px) {
  #content { padding-bottom: 40px; }
  /* stack the diagram above the parts list */
  .veh-layout, .part-layout { grid-template-columns: 1fr !important; }
  .veh-layout.no-side { grid-template-columns: 1fr !important; }
  .veh-stage { min-height: 0; }
  .diag-wrap { height: auto; max-height: 56vh; }
  .diag-wrap > div#imgWrap { position: relative; height: auto; min-height: 240px; }
  /* parts list: let wide rows scroll horizontally instead of clipping the
     REMARK/STK/MODEL/Open columns off-screen */
  .callout-list, .veh-parts, .parts-wrap, .part-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .callout-row { min-width: 0; }
  .callout-row .pt-line { flex-wrap: wrap; }
  /* part card stacks */
  .part-card, .pc-grid, .pc-body { grid-template-columns: 1fr !important; }
  .pc-diagram, .pc-info { max-width: 100%; }
  /* breadcrumb + toolbar breathe */
  #crumbs { padding: 0 12px; }
  .veh-stage .toolbar { flex-wrap: wrap; gap: 6px; }
  /* bigger tap targets */
  .callout-row a, .pt-open, .tbtn, .chip { min-height: 38px; }
  /* SSR breadcrumb (server-rendered, shown before JS hydrates) */
  .ssr-bc { font-size: 13px; }
}
/* SSR content blocks (visible to crawlers + during first paint) */
.ssr-bc { padding: 10px 16px; color: #5a6473; font-size: 13px; }
.ssr-bc a { color: #1f5fd9; text-decoration: none; }
#ssr-seo article { padding: 16px; max-width: 900px; }
#ssr-seo h1 { font-size: 22px; margin: 6px 0 10px; }
#ssr-seo ul { padding-left: 18px; line-height: 1.7; }