/* Visual Garage: original non-OEM illustration and local-only photos. */
#my-garage .visual-garage{min-width:0;max-width:100%;margin:20px 0 24px;padding:15px;background:#14191a;color:#edf2f1;border:1px solid #333c3c;overflow:hidden}
#my-garage .visual-garage-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:5px 15px;font-size:12px;letter-spacing:.03em}
#my-garage .visual-garage-head span{color:#b7c6c5;font-size:10px}
#my-garage .visual-stage{position:relative;width:100%;aspect-ratio:760/300;min-height:170px;margin:12px auto 8px;background:repeating-linear-gradient(0deg,transparent 0 24px,#ffffff0a 25px),repeating-linear-gradient(90deg,transparent 0 24px,#ffffff0a 25px);border:1px solid #374447}
#my-garage .visual-drawing{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#a8c6c9;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.75;pointer-events:none}
#my-garage .visual-pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:2px solid #fff;border-radius:50%;font-size:12px;font-weight:800;box-shadow:0 2px 12px #0009;z-index:1}
#my-garage .visual-pin:focus-visible{outline:3px solid #fff;outline-offset:4px}
#my-garage .visual-none{background:#647078;color:#fff}
#my-garage .visual-needed{background:#dd7437;color:#16191a}
#my-garage .visual-ordered{background:#2c86c9;color:#fff}
#my-garage .visual-fitted{background:#31895d;color:#fff}
#my-garage .visual-status{min-height:36px;margin:0 0 12px;color:#d8e2df;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
#my-garage .visual-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0 16px}
#my-garage .visual-key{display:flex;align-items:center;gap:8px;min-width:0;font-size:10px;line-height:1.4;color:#d7dfdd;overflow-wrap:anywhere}
#my-garage .visual-dot{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;font-size:10px}
#my-garage .visual-photos{border-top:1px solid #3a4847;padding-top:14px}
#my-garage .visual-photo-label{display:grid;gap:8px;margin:0;color:#e8eeee;font-size:11px}
#my-garage .visual-photo-label input{height:auto;max-width:100%;min-height:44px;padding:9px 0;background:transparent;border:0;color:#e8eeee;font-size:11px}
#my-garage .visual-photo-label input::file-selector-button{background:#fff;color:#202729;border:0;padding:9px 12px;margin-right:10px;font:inherit;font-weight:800;cursor:pointer}
#my-garage .visual-photo-note{font-size:10px;line-height:1.5;color:#b9c8c5;margin:7px 0 12px}
#my-garage .visual-backup{display:block;max-width:100%;min-height:44px;margin:0 0 14px;padding:9px 13px;border:1px solid #a4b5b2;background:#253537;color:#f5faf8;font-size:12px;font-weight:700;text-align:left;white-space:normal;overflow-wrap:anywhere}
#my-garage .visual-backup:focus-visible{outline:3px solid #fff;outline-offset:3px}
#my-garage .visual-photo-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#my-garage .visual-photo-frame{min-width:0}
#my-garage .visual-photo-frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
#my-garage .visual-photo-frame button{width:100%;min-height:44px;margin-top:5px;border:1px solid #738180;background:#252f30;color:#fff;font-size:11px}
@media(max-width:650px){#my-garage .visual-garage{padding:12px}#my-garage .visual-legend{grid-template-columns:1fr}#my-garage .visual-stage{min-height:170px}#my-garage .visual-pin{width:44px;height:44px;min-width:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){#my-garage .visual-stage{scroll-behavior:auto}}

/* Do not imply that every checklist part appears on a simplified schematic. */
#my-garage .visual-unmapped{margin:0 0 12px;padding:9px 11px;border-left:3px solid #dd7437;background:#273133;color:#f1e8dc;font-size:11px;line-height:1.6;overflow-wrap:anywhere}
/* Legibility improvements from production screenshots: small labels were hard to read. */
#my-garage .visual-garage-head span{font-size:12px}
#my-garage .visual-key{font-size:12px;line-height:1.5}
#my-garage .visual-status,#my-garage .visual-unmapped{font-size:12px}
#my-garage .visual-photo-note,#my-garage .visual-photo-label,#my-garage .visual-photo-label input{font-size:12px}
#my-garage .visual-photo-frame button{font-size:12px;padding:9px 5px;overflow-wrap:anywhere}
