/* P226 Exploded Parts Picker — shared stylesheet (all four assemblies). Ported 2026-08-01 from the standalone picker pages for embedding inside the Shopkeeper theme. Every rule is (a) prefixed mpa-pk- AND (b) nested under .mpa-picker, because prefixing alone stops our styles leaking out but only the rename stops the theme's own .row/.menu/.num rules leaking IN. The old global body/header/svg rules are gone by design — do not add any selector here that lacks the .mpa-picker ancestor. */ /* --mpa-accent is the site's heading blue (#022F5C, used in 23 rules sitewide). It is dark, so anything sitting ON it takes white text. --mpa-accent-d is a lighter blue for the diagram, because navy against the #3a4149 line art differs in hue but barely in darkness. Vars are prefixed because custom properties inherit — an unprefixed theme --accent would win inside us. */ .mpa-picker{ --mpa-panel:#1c1f24;--mpa-panel2:#24282f;--mpa-line:#d8dbe0; --mpa-accent:#022f5c;--mpa-accent-d:#1a68c4;--mpa-ink:#14171c; --mpa-mut:#6b7280;--mpa-ok:#127c3a;--mpa-bad:#a1231d; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--mpa-ink); } .mpa-picker,.mpa-picker *,.mpa-picker *::before,.mpa-picker *::after{box-sizing:border-box} /* crumb line (replaces the old fake breadcrumb; these are real links) */ .mpa-picker .mpa-pk-crumb{margin:0 0 10px;font-size:12.5px;color:var(--mpa-mut)} .mpa-picker .mpa-pk-crumb a{color:#3a6ea8;text-decoration:none} .mpa-picker .mpa-pk-crumb a:hover{text-decoration:underline} .mpa-picker .mpa-pk-wrap{display:block;border:1px solid var(--mpa-line); border-radius:8px;overflow:hidden;background:#fff} .mpa-picker .mpa-pk-diagram{position:relative;padding:6px;min-width:0} /* toolbar */ .mpa-picker .mpa-pk-toolbar{display:flex;gap:12px;align-items:center; padding:6px 8px 10px;border-bottom:1px solid var(--mpa-line);flex-wrap:wrap} .mpa-picker .mpa-pk-tblabel{font-size:12px;color:var(--mpa-mut);font-weight:600; text-transform:uppercase;letter-spacing:.4px;margin:0} .mpa-picker .mpa-pk-seg{display:inline-flex;border:1px solid var(--mpa-line); border-radius:6px;overflow:hidden;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .mpa-picker .mpa-pk-seg a{border:0;background:#fff;padding:6px 12px;font:inherit; font-size:13px;cursor:pointer;border-right:1px solid var(--mpa-line); color:var(--mpa-ink);text-decoration:none;white-space:nowrap} .mpa-picker .mpa-pk-seg a:last-child{border-right:0} .mpa-picker .mpa-pk-seg a[aria-current="page"]{background:var(--mpa-accent); color:#fff;font-weight:600;cursor:default} .mpa-picker .mpa-pk-seg a:hover:not([aria-current="page"]){background:#f0f1f3} /* the diagram svg — child combinator so this can never hit a theme icon. max-height keeps the WHOLE exploded view inside the viewport on desktop (drawing letterboxes horizontally when height-capped); picker.js manages touch-action (pan-y unzoomed so page scroll is never hijacked, none while zoomed so one-finger drag pans the diagram). */ .mpa-picker .mpa-pk-diagram > svg{width:100%;height:auto;display:block; max-height:clamp(420px, calc(100vh - 250px), 860px);touch-action:manipulation} /* zoom controls (injected by picker.js) */ .mpa-picker .mpa-pk-zoomctl{position:absolute;right:12px;bottom:12px;display:flex; flex-direction:column;gap:6px;z-index:4} .mpa-picker .mpa-pk-zoomctl button{width:34px;height:34px;border:1px solid var(--mpa-line); background:#fff;border-radius:6px;font-size:17px;font-weight:700;color:var(--mpa-ink); cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.15);line-height:1;padding:0; /* themes commonly style bare button{} with uppercase/letter-spacing — a 2px letter-space shifts the + − ↺ glyphs off-centre in a 34px box */ text-transform:none;letter-spacing:0;font-family:inherit} .mpa-picker .mpa-pk-zoomctl button:hover{background:#f0f4f9} @media (pointer:coarse){ .mpa-picker .mpa-pk-zoomctl button{width:42px;height:42px;font-size:20px} } .mpa-picker .mpa-pk-diagram.is-zoomed > svg{cursor:grab} .mpa-picker .mpa-pk-diagram.is-panning > svg{cursor:grabbing} .mpa-picker .mpa-pk-part path{fill:none;stroke:#3a4149;stroke-width:.42; stroke-linecap:round;stroke-linejoin:round; transition:stroke .1s,stroke-width .1s; /* hit-test the implied fill area too, not just the 0.42-wide stroke */ pointer-events:all} .mpa-picker .mpa-pk-part{cursor:pointer} /* invisible fat re-stroke of the same geometry = generous, shape-accurate click target. On hover/select the same band becomes a soft glow. */ .mpa-picker .mpa-pk-hit{pointer-events:stroke;cursor:pointer; transition:stroke .12s,stroke-opacity .12s} .mpa-picker .mpa-pk-part:hover path{stroke:var(--mpa-accent-d);stroke-width:.85} .mpa-picker .mpa-pk-part.is-sel path{stroke:var(--mpa-accent-d);stroke-width:1.05} .mpa-picker .mpa-pk-part:focus-visible{outline:2px solid var(--mpa-accent-d);outline-offset:2px} .mpa-picker .mpa-pk-part:focus-visible path{stroke:var(--mpa-accent-d);stroke-width:.85} /* Note: the circled part numbers are drawn INTO the line art (paths inside each part group) — there is no separate callout layer to style or toggle. */ .mpa-picker .mpa-pk-tip{position:absolute;pointer-events:none;background:#1b2a47; color:#fff;font-size:12.5px;padding:4px 9px;border-radius:4px;white-space:nowrap; opacity:0;transition:opacity .1s;z-index:5} /* sidebar — border/margin/padding zeroed because themes commonly style bare