/* app-find.css — styling for the parts-search route only. * * Every rule is scoped under #find. app-core.css owns 273 class names and 19 of * them collide with the ones in here, so an unscoped rule would silently restyle * the Paddock, the Garage or the build pages. Generated from search.html by * scratchpad/build-find-css.js; the palette variables sit on #find rather than * :root for the same reason. */ #find{--ink:#16161a;--ink2:#3d3d44;--ink3:#5c5c66;--line:#e2e2dd;--line2:#cfcfc8;--paper:#ffffff;--sink:#f7f7f4;--sink2:#efefea;--accent:#b8340f;--accent-ink:#8e2709;--accent-wash:#fdf1ec;--ok:#146c43;--ok-wash:#e7f4ec;--ok-line:#c3e2d0;--warn:#8a5a00;--warn-wash:#fdf3e0;--warn-line:#ecd6a8;--no:#96331f;--no-wash:#fbeeea;--no-line:#eccfc6;--uni:#4a4a55;--uni-wash:#f0f0ee;--sans:"Segoe UI",system-ui,-apple-system,Inter,sans-serif;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace;--r:10px;--shadow:0 1px 2px rgba(20,20,25,.05), 0 8px 24px rgba(20,20,25,.06)}#find *,#find *::before,#find *::after{box-sizing:border-box}#find,#find{height:100%}#find{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}#find button{font:inherit;color:inherit;cursor:pointer}#find input,#find select,#find textarea{font:inherit;color:inherit}#find .hide{display:none!important}#find .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}#find .sf{display:flex;align-items:center;gap:11px;background:var(--paper);border:1.5px solid var(--line2);border-radius:999px;padding:12px 18px;box-shadow:var(--shadow);transition:border-color .13s,box-shadow .13s}#find .sf:focus-within{border-color:var(--ink3);box-shadow:0 1px 2px rgba(20,20,25,.06),0 10px 30px rgba(20,20,25,.10)}#find .sf input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px}#find .sf input::placeholder{color:#83838d}#find .sf .ic{flex:0 0 auto;color:#6a6a74;display:flex}#find .sf .go{flex:0 0 auto;border:0;background:var(--accent);color:#fff;border-radius:999px;padding:8px 17px;font-size:14px;font-weight:600}#find .sf .go:hover{background:var(--accent-ink)}#find #home{max-width:1080px;margin:0 auto;padding:0 28px 90px;text-align:center}#find .f-brandrow{padding:84px 0 6px}#find .wordmark{font-size:58px;font-weight:700;letter-spacing:-.045em;margin:0;line-height:1}#find .tagline{color:var(--ink3);font-size:15.5px;margin:12px 0 34px}#find #home .sf{max-width:640px;margin:0 auto}#find .hintrow{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:18px 0 0}#find .hint{border:1px solid var(--line);background:var(--sink);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--ink2)}#find .hint:hover{border-color:var(--line2);background:var(--sink2)}#find .carcta{margin:30px auto 0;max-width:660px;display:flex;align-items:center;gap:14px;justify-content:center;border:1px dashed var(--line2);background:var(--sink);border-radius:var(--r);padding:14px 18px;text-align:left}#find .carcta p{margin:0;font-size:13.5px;color:var(--ink2)}#find .carcta b{color:var(--ink)}#find .linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}#find .linkbtn:hover{color:var(--accent-ink)}#find .hothead{display:flex;align-items:baseline;gap:12px;margin:56px 0 16px;text-align:left;flex-wrap:wrap}#find .hothead h2{font-size:16px;margin:0;letter-spacing:-.01em}#find .hothead span{font-size:13px;color:var(--ink3)}#find .hotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}#find .hot{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;align-items:stretch;transition:border-color .13s,transform .13s,box-shadow .13s}#find .hot:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow)}#find .hot .f-ph{height:124px;border-radius:7px;background:var(--sink2);overflow:hidden;display:flex;align-items:center;justify-content:center}#find .hot .f-ph img{width:100%;height:100%;object-fit:cover}#find .hot .bd{font-size:12.5px;color:var(--ink3);font-weight:600}#find .hot .f-nm{font-size:14px;line-height:1.35;margin:0;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#find .hot .f-ft{display:flex;align-items:baseline;gap:10px;margin-top:auto}#find .hot .pc{font-size:14.5px;font-weight:700}#find .hot .ow{font-size:12.5px;color:var(--ink3)}#find .f-skel{border:1px solid var(--line);border-radius:var(--r);height:232px;background:var(--sink);animation:find-pulse 1.2s ease-in-out infinite}@keyframes find-pulse{0%,100%{opacity:1}50%{opacity:.55}}@media (prefers-reduced-motion:reduce){#find .f-skel{animation:none}}#find #find-topbar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 24px}#find .tb{display:flex;align-items:center;gap:18px;max-width:1560px;margin:0 auto}#find .tbmark{font-size:22px;font-weight:700;letter-spacing:-.04em;border:0;background:none;padding:0;flex:0 0 auto}#find #find-topbar .sf{flex:1 1 auto;max-width:660px;padding:9px 15px;box-shadow:none}#find .tbend{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}#find .carchip{display:flex;align-items:center;gap:9px;border:1px solid var(--line2);background:var(--paper);border-radius:999px;padding:5px 13px 5px 6px;font-size:13px}#find .carchip .sq{width:26px;height:26px;border-radius:50%;background:var(--accent-wash);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px;flex:0 0 auto}#find .carchip b{font-weight:600}#find .carchip .f-sw{color:var(--ink3);font-size:12.5px;border:0;background:none;padding:0;text-decoration:underline;text-underline-offset:2px}#find .stagebtn{border:1px solid var(--line2);background:var(--paper);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600}#find .stagebtn:hover{background:var(--sink)}#find .stagebtn .ct{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:7px;border-radius:999px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:700}#find .addcarbtn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600}#find .addcarbtn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}#find .rwrap{display:grid;grid-template-columns:262px minmax(0,1fr);gap:34px;max-width:1560px;margin:0 auto;padding:22px 24px 90px}#find .rail{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 100px);overflow:auto;padding-right:4px}#find .fgroup{border-bottom:1px solid var(--line);padding:0 0 16px;margin:0 0 16px}#find .fgroup:last-child{border-bottom:0}#find .fgroup h3{font-size:12.5px;margin:0 0 10px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);font-weight:700}#find .fitbox{border:1px solid var(--line2);background:var(--sink);border-radius:var(--r);padding:13px}#find .fitbox.f-on{border-color:var(--ok-line);background:var(--ok-wash)}#find .fitbox.guessed{border:1.5px dashed var(--warn-line);background:var(--warn-wash)}#find .fitbox p{margin:0 0 10px;font-size:13px;color:var(--ink2);line-height:1.5}#find .fitbox .full{display:block;width:100%;text-align:center;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;padding:9px;font-size:13.5px;font-weight:600;margin-top:10px}#find .fitbox .full:hover{background:var(--accent-ink)}#find .chk{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;color:var(--ink2);cursor:pointer}#find .chk input{width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto;margin:0}#find .chk .ct{margin-left:auto;color:var(--ink3);font-size:12.5px;font-variant-numeric:tabular-nums}#find .chk:hover{color:var(--ink)}#find .f-more{border:0;background:none;padding:4px 0;color:var(--accent);font-size:13px;font-weight:600}#find .prow{display:flex;align-items:center;gap:8px;margin-top:4px}#find .prow input{width:100%;min-width:0;border:1px solid var(--line2);border-radius:7px;padding:7px 9px;font-size:13px}#find .prow span{color:var(--ink3);font-size:13px}#find .clearall{border:0;background:none;padding:0;color:var(--ink3);font-size:13px;text-decoration:underline;text-underline-offset:3px}#find .rhead{display:flex;align-items:baseline;gap:14px;margin:0 0 16px;flex-wrap:wrap}#find .rhead .ct{font-size:13.5px;color:var(--ink3)}#find .rhead .ct b{color:var(--ink);font-weight:600}#find .sortsel{margin-left:auto;border:1px solid var(--line2);border-radius:8px;padding:7px 11px;font-size:13px;background:var(--paper)}#find .res{display:flex;gap:18px;padding:18px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;background:var(--paper);transition:border-color .13s,box-shadow .13s}#find .res:hover{border-color:var(--line2);box-shadow:var(--shadow)}#find .res .f-ph{flex:0 0 132px;height:112px;border-radius:8px;background:var(--sink2);overflow:hidden;display:flex;align-items:center;justify-content:center}#find .res .f-ph img{width:100%;height:100%;object-fit:cover}#find .res .bd{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}#find .res .f-brand{font-size:12.5px;color:var(--ink3);font-weight:600}#find .res h3{font-size:16px;margin:0;font-weight:600;line-height:1.32;letter-spacing:-.005em}#find .res .desc{font-size:13.5px;color:var(--ink2);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#find .res .meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;color:var(--ink3);align-items:center}#find .res .meta .f-pn{font-family:var(--mono);font-size:12px}#find .res .f-rt{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:0 0 176px}#find .res .price{font-size:19px;font-weight:700;letter-spacing:-.01em}#find .res .store{font-size:12.5px;color:var(--ink3)}#find .titlelink{border:0;background:none;padding:0;text-align:left;font:inherit;color:inherit}#find .titlelink:hover{text-decoration:underline;text-underline-offset:2px}#find .fit{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:12.5px;font-weight:600;border:1px solid transparent}#find .fit .f-d{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}#find .fit.chassis{background:var(--ok-wash);color:var(--ok);border-color:var(--ok-line)}#find .fit.likely{background:var(--warn-wash);color:var(--warn);border-color:var(--warn-line)}#find .fit.universal{background:var(--uni-wash);color:var(--uni);border-color:var(--line2)}#find .fit.unknown{background:var(--sink);color:var(--ink3);border-color:var(--line2)}#find .fit.no{background:var(--no-wash);color:var(--no);border-color:var(--no-line)}#find .fitline{font-size:12.5px;color:var(--ink3);margin:0}#find .ownfit{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:5px;padding:2px 7px;border:1px solid var(--line2);color:var(--ink2);background:var(--sink)}#find .f-acts{display:flex;gap:6px;width:100%;justify-content:flex-end}#find .act{border:1px solid var(--line2);background:var(--paper);border-radius:8px;padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--ink2)}#find .act:hover{background:var(--sink);color:var(--ink)}#find .act.f-on{background:var(--ink);border-color:var(--ink);color:#fff}#find .act.inst{border-color:var(--ok-line);color:var(--ok);background:var(--ok-wash)}#find .act.inst:hover{background:#dcefe4}#find .locked{font-size:12.5px;color:var(--ink3);text-align:right;line-height:1.45}#find .guess{border:1.5px dashed var(--line2);background:var(--sink);border-radius:var(--r);padding:15px 17px;margin:0 0 16px}#find .guess.conf{border-color:var(--warn-line);background:var(--warn-wash)}#find .guess .top{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}#find .guess .bd{flex:1 1 320px;min-width:0}#find .gtag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);background:var(--paper);border:1px solid var(--warn-line);border-radius:999px;padding:2px 9px;margin-bottom:8px}#find .guess h4{margin:0 0 4px;font-size:15.5px;letter-spacing:-.01em}#find .guess p{margin:0;font-size:13px;color:var(--ink2);line-height:1.5}#find .gacts{display:flex;gap:8px;flex:0 0 auto}#find .gbtn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;padding:9px 15px;font-size:13px;font-weight:600;white-space:nowrap}#find .gbtn:hover{background:var(--accent-ink)}#find .gbtn.sec{background:var(--paper);color:var(--ink2);border-color:var(--line2)}#find .gbtn.sec:hover{background:var(--sink2);color:var(--ink)}#find .gchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}#find .gchip{border:1px solid var(--line2);background:var(--paper);border-radius:999px;padding:8px 14px;font-size:13px;text-align:left}#find .gchip:hover{border-color:var(--ink3);background:var(--sink2)}#find .gchip b{font-weight:600}#find .gchip .f-n{color:var(--ink3);font-size:12.5px;margin-left:7px}#find .f-empty{border:1px dashed var(--line2);border-radius:var(--r);padding:44px 28px;text-align:center;background:var(--sink)}#find .f-empty h3{margin:0 0 8px;font-size:16px}#find .f-empty p{margin:0;color:var(--ink3);font-size:14px}#find .morebtn{display:block;width:100%;border:1px solid var(--line2);background:var(--paper);border-radius:var(--r);padding:14px;font-size:14px;font-weight:600;margin-top:6px}#find .morebtn:hover{background:var(--sink)}#find .rowskel{border:1px solid var(--line);border-radius:var(--r);height:150px;margin-bottom:12px;background:var(--sink);animation:find-pulse 1.2s ease-in-out infinite}@media (prefers-reduced-motion:reduce){#find .rowskel{animation:none}}#find .veil{position:fixed;inset:0;background:rgba(22,22,26,.42);z-index:60;display:flex;align-items:center;justify-content:center;padding:26px}#find .sheet{background:var(--paper);border-radius:14px;width:100%;max-width:530px;padding:26px;box-shadow:0 18px 60px rgba(0,0,0,.28);max-height:88vh;overflow:auto}#find .sheet.wide{max-width:680px}#find .sheet h2{margin:0 0 6px;font-size:20px;letter-spacing:-.015em}#find .sheet .f-sub{margin:0 0 20px;color:var(--ink3);font-size:13.5px;line-height:1.55}#find .fld{margin-bottom:14px}#find .fld label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:6px;letter-spacing:.02em}#find .fld input,#find .fld select,#find .fld textarea{width:100%;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;font-size:14px;background:var(--paper)}#find .fld textarea{min-height:84px;resize:vertical;font-family:inherit}#find .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}#find .prim{width:100%;border:0;background:var(--accent);color:#fff;border-radius:9px;padding:12px;font-size:14.5px;font-weight:600;margin-top:6px}#find .prim:hover{background:var(--accent-ink)}#find .prim[disabled]{opacity:.6;cursor:default}#find .f-ghost{width:100%;border:1px solid var(--line2);background:var(--paper);border-radius:9px;padding:11px;font-size:14px;font-weight:600;margin-top:9px}#find .f-ghost:hover{background:var(--sink)}#find .note{margin:16px 0 0;padding:12px 14px;background:var(--accent-wash);border-radius:8px;font-size:12.5px;color:var(--accent-ink);line-height:1.5}#find .f-err{margin:0 0 14px;padding:11px 13px;background:var(--no-wash);border:1px solid var(--no-line);border-radius:8px;font-size:13px;color:var(--no)}#find .xrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}#find .x{border:0;background:none;padding:4px;color:var(--ink3);font-size:20px;line-height:1;flex:0 0 auto}#find .x:hover{color:var(--ink)}#find .stagegrp{margin-bottom:22px}#find .stagegrp h3{font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px;font-weight:700}#find .srow{display:flex;gap:12px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px}#find .srow .f-ph{width:52px;height:44px;border-radius:6px;background:var(--sink2);overflow:hidden;flex:0 0 auto}#find .srow .f-ph img{width:100%;height:100%;object-fit:cover}#find .srow .bd{flex:1 1 auto;min-width:0}#find .srow .f-nm{font-size:13.5px;font-weight:600;margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#find .srow .br{font-size:12.5px;color:var(--ink3)}#find .srow .pc{font-size:14px;font-weight:700;flex:0 0 auto}#find .srow .mv{border:1px solid var(--line2);background:var(--paper);border-radius:7px;padding:6px 9px;font-size:12.5px;font-weight:600;flex:0 0 auto}#find .srow .mv:hover{background:var(--sink)}#find .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1.5px solid var(--line2);padding-top:13px;margin-top:6px;font-size:14px}#find .tot b{font-size:18px}#find .logpart{display:flex;gap:12px;align-items:center;background:var(--sink);border-radius:9px;padding:12px;margin-bottom:18px}#find .logpart .f-ph{width:56px;height:48px;border-radius:6px;overflow:hidden;background:var(--sink2);flex:0 0 auto}#find .logpart .f-ph img{width:100%;height:100%;object-fit:cover}#find .logpart .f-nm{font-size:13.5px;font-weight:600;margin:0;line-height:1.32}#find .logpart .br{font-size:12.5px;color:var(--ink3)}#find .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:11px 20px;font-size:13.5px;font-weight:500;z-index:80;box-shadow:0 10px 30px rgba(0,0,0,.25)}@media (max-width:1080px){#find .rwrap{grid-template-columns:1fr;gap:22px}#find .rail{position:static;max-height:none}#find .hotgrid{grid-template-columns:repeat(2,1fr)}}@media (max-width:680px){#find .hotgrid{grid-template-columns:1fr}#find .res{flex-wrap:wrap}#find .res .f-rt{flex:1 1 100%;align-items:flex-start}#find .wordmark{font-size:42px}#find .f-brandrow{padding:52px 0 6px}} #find .acctbtn:hover{background:var(--sink2);color:var(--ink)} #find .tbnav{flex:0 0 auto;border:0;background:none;padding:6px 2px;font-size:14px;font-weight:600;color:var(--ink2);white-space:nowrap}#find .tbnav:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}#find .acctbtn{display:flex;align-items:center;justify-content:center;height:36px;padding:0 14px;flex:0 0 auto;border:1px solid var(--line2);background:var(--paper);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink2);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#find .acctbtn:hover{background:var(--sink2);color:var(--ink)}#find .signinbtn{height:36px;padding:0 16px;flex:0 0 auto;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap}#find .signinbtn:hover{background:var(--accent-ink);border-color:var(--accent-ink)} #find .homebar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1560px;margin:0 auto;padding:16px 4px 0;text-align:left} /* The Paddock is hidden for now. The route, its painter and the centred layout are all still here — deleting these two rules brings the link back in both places. With it gone the landing corner has nothing on its left, so the cluster closes up to the right rather than floating in the middle. */ #find .tbnav{display:none} #find .homebar{justify-content:flex-end} /* Edge to edge: the header row was capped at 1560 and centred, which left the wordmark and the account floating well inside the window. Only the 24px of breathing room in #find-topbar holds them off the glass now. */ #find #find-topbar .tb{max-width:none} #find .carchip .carname{border:0;background:none;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#find .carchip .carname:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px} /* The landing corner is a sibling of #home, not a child: #home is the centred 1080 reading column and the corner has to agree with the header about where the right edge is. #home hid it for free when it was inside; now it says so. */ #find .homebar{display:none} body[data-view="landing"] #find .homebar{display:flex;justify-content:flex-end;align-items:center;gap:16px;max-width:none;margin:0;padding:16px 24px 0} /* ...and its three controls are a row, like the header end. Without this the carchip (display:flex) forced a line break and they stacked. */ #find #home-acct{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} /* ── the search route on the dark ground ──────────────────────────────────── #find's own palette. The chrome is dark; anything holding a PART is paper. */ #find{ --paper:#131917; --sink:#0F1412; --sink2:#18201D; --line:rgba(214,232,224,0.12); --line2:rgba(214,232,224,0.22); --ink:#EDF2EF; --ink2:#B4C0BA; --ink3:#8A968F; --accent:#34E89E; --accent-ink:#7DF3C4; --accent-wash:rgba(52,232,158,0.12); --ok:#34E89E; --ok-wash:rgba(52,232,158,0.10); --ok-line:rgba(52,232,158,0.30); --warn:#FCD34D; --warn-wash:rgba(252,211,77,0.10);--warn-line:rgba(252,211,77,0.30); --no:#FDA4AF; --no-wash:rgba(253,164,175,0.10); --no-line:rgba(253,164,175,0.30); --uni:#B4C0BA; --uni-wash:rgba(180,192,186,0.09); --r:16px; } /* The route paints its own ground, and it has to reach the bottom of the WINDOW, not the bottom of its content. The base reset above gives #find background:var(--paper), which the dark palette re-points to the chrome #131917 — a shade off body's #0B0E0D. On a tall window (or any short page: the landing, a one-row result set, an empty state) the box ended above the fold and the two near-blacks met in a hard seam straight across the page. Filling rather than recolouring is deliberate. #find-topbar is painted var(--paper) too, and it is opaque for a reason — rows have to disappear under it as they scroll. Drop #find to body's #0B0E0D and that sticky header stops matching what it sits on and reads as a lighter band the moment you scroll. So the ground keeps its colour and gains a floor instead. Scoped to the two views where #find IS the page. On every other route findChrome('off') keeps this element as the shared HEADER with #main in flow below it, and an unscoped floor here pushes the whole garage down a full viewport. data-view is the only thing that tells the two apart. */ body[data-view="landing"] #find, body[data-view="results"] #find{ min-height:100vh; } /* ── white cards on the dark ──────────────────────────────────────────────── The palette is re-scoped ON THE CARD, so every child reads the light values without a single child rule being rewritten. That is what makes this ~40 lines instead of a second stylesheet. */ #find .res, #find .hot, #find .fitbox, #find .sheet, #find .srow, #find .f-empty, #find .rail{ --paper:#FFFFFF; --sink:#F3F5F4; --sink2:#E9EDEB; --line:#E2E6E4; --line2:#CBD1CE; --ink:#0F1412; --ink2:#454C49; --ink3:#6A726E; --cat-ink:color-mix(in srgb, var(--cat,#6A726E) 38%, #0F1412); /* The accent has to come down here too, and for a long time it did not: #34E89E is chosen to emit on a near-black ground and measures 1.59:1 on paper. Every accent-coloured thing inside a card was failing on it — "Show all 9" in the rail, .linkbtn, the "Installed" pill. #07724A is the same hue (157deg), walked down to paper lightness: 5.97:1 on white, which puts it in the family with the paper treatments already used below (#146c43, #7A5300, #98332A: 6.4-7.4:1). --on-accent flips to white because anything FILLED with the accent in here now has a dark fill; near-black on #07724A would be 1.3:1. */ --accent:#07724A; --accent-ink:#05563A; --on-accent:#FFFFFF; --accent-wash:rgba(7,114,74,0.09); --ok:#07724A; --ok-wash:rgba(7,114,74,0.09); --ok-line:rgba(7,114,74,0.28); /* The accent was not the only one that never came down. The other three emitting hues reach a card the same way — through an inline style="color:var(--…)" that app-core.js writes, so no rule in here could have overridden them; only the custom property can move. Same walk as the accent above: hue held, lightness dropped to paper, contrast measured on #FFFFFF. --accent-2 #22D3EE 1.81:1 -> #0E6E80 5.90:1 (hue 188 -> 189) --warn #FCD34D 1.44:1 -> #7A5300 6.85:1 (hue 46 -> 41) --hot #FDA4AF 1.89:1 -> #98332A 7.39:1 (hue 353 -> 5) The last two are the exact paper amber and paper red this file already uses for .fit.likely and .fit.no, so a B/C/D grade lands in the family the row is built from rather than introducing two more colours. */ --accent-2:#0E6E80; --warn:#7A5300; --hot:#98332A; /* --faint is a GUARD, not a fix — nothing in a card resolves it today. It is here because fitGradeHtml's ungraded branch spells its "no fit data" caption color:var(--faint) inline, and #8A968F is 3.07:1 on white. This file never asks for that branch (the rows pass seed:true, which returns an empty string instead), so the trap is armed for the NEXT caller, not this one. #6A726E is --ink3 two lines up: the dark theme's tertiary and paper's tertiary are the same role, so nothing new enters the palette and no pixel moves today. 3.07 -> 4.95. Scope note for whoever comes next: this block covers what app-core.js ACTUALLY renders into a card, not everything that could. --muted, --mod, --gain, --info and --ink all fail on paper too (1.13-1.88:1) and none is reachable yet, because fitGradeHtml is the only app-core partial that renders in here. If another one follows it in, its colours have to come down with it. */ --faint:#6A726E; background:#FFFFFF; color:var(--ink); border:0; border-radius:var(--radius); box-shadow:var(--shadow-card); } #find .res{padding:18px} #find .res:hover{transform:translateY(-1px);background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3), 0 20px 48px rgba(0,0,0,.42)} #find .hot{padding:16px} #find .hot .f-ph{border-radius:12px;background:var(--sink)} #find .hot .bd{color:var(--ink3);font-weight:600} #find .rail{padding:18px;align-self:start} #find .rail .fitbox{box-shadow:none;border:1px solid var(--line);border-radius:12px} /* ── the one gradient, on the primary action only ───────────────────────── */ #find .sf .go, #find .prim, #find .fitbox .full, #find .gbtn:not(.sec), #find .addcarbtn{ background:var(--grad);color:#06140F;border:0;font-weight:700; } /* Sign in is NOT a primary action, and until the door opened nobody ever saw it claim to be: the shell bounced signed-out visitors before this header rendered, so .signinbtn's inherited solid-accent fill sat beside "Add your car" on the landing and made two filled buttons out of one cluster. It takes .acctbtn's outline instead — the control that occupies this exact slot once you are signed in — so the cluster does not restyle itself the moment /api/auth/me answers. */ #find .signinbtn{background:transparent;border:1px solid var(--line2);color:var(--ink2)} #find .signinbtn:hover{background:rgba(255,255,255,0.08);border-color:var(--ink3);color:var(--ink)} #find .sf{background:rgba(255,255,255,0.05);border:1px solid var(--line2); border-radius:999px;box-shadow:none;backdrop-filter:blur(10px)} #find #home .sf{background:rgba(255,255,255,0.07)} #find .hint{background:rgba(255,255,255,0.06);border:1px solid var(--line2);color:var(--ink)} #find .hint:hover{background:#fff;color:#0F1412;border-color:#fff} /* black circular badge, black pill fitment tag */ #find .carchip .sq{background:#0F1412;color:#34E89E;border-radius:50%} /* Same 1.66:1 failure as the Sign in label: the staging count is the one number in the header that tells you something is pending, and it was white on mint. */ #find .stagebtn .ct{color:var(--on-accent)} #find .fit{border-radius:999px;font-weight:700;letter-spacing:.01em;border:0;padding:5px 11px; background:#0F1412;color:#EDF2EF} #find .fit.chassis{background:#0F1412;color:#34E89E} /* the other states sit on PAPER, so they get paper treatments — the dark washes they inherited measured 1.39:1 on a white card */ #find .res .fit.likely{background:#FEF3C7;color:#7A5300} #find .res .fit.universal{background:#EEF1EF;color:#454C49} #find .res .fit.unknown{background:#F3F5F4;color:#5A625E} #find .res .fit.no{background:#FEE9E7;color:#98332A} /* ── the category spectrum, reduced ───────────────────────────────────────── No colour on a product any more: the spine down each result row and the band across each tile are gone, and the image placeholder is plain grey. The hues survive only where they are a LEGEND rather than a decoration — the swatches beside the category filters — plus a light tint on the category label itself. catVars() still sets --cat on each row, so restoring the spine is one rule. */ #find .chk .swatch{width:9px;height:9px;border-radius:2px;background:var(--cat,var(--line2));flex:0 0 auto} #find .res .meta span:not(.f-pn){color:var(--cat-ink,var(--ink2));font-weight:600} #find .res.no-cat .meta span:not(.f-pn){color:var(--ink3)} #find .wordmark{letter-spacing:-.04em} /* ══ SMALL VIEWPORTS ════════════════════════════════════════════════════════ Two things collapse below the desktop layout, and both were measured before they were fixed, on a 390px viewport against live results: the header cluster car chip + Staging + account = 503px of controls in a 390px bar. It wrapped to FOUR rows, 103px tall, and on the results topbar it did not wrap at all — .tb is a nowrap row of flex:0 0 auto children, so it pushed the document to 932px and the whole page scrolled sideways. the filter rail 646px of controls stacked above the first result. Every search opened on filters instead of parts. Neither is solved by making things smaller. The cluster becomes one button and the rail becomes a drawer. ══════════════════════════════════════════════════ */ /* Both collapse controls are desktop-hidden; each breakpoint below turns its own on. */ #find .menubtn, #find .filterbtn, #find .railhead{ display:none; } #find-veil{ display:none; } /* ── the header menu ─────────────────────────────────────────────────────── */ #find .menubtn{ align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px; padding:0; border:1px solid var(--line2); background:transparent; color:var(--ink); border-radius:999px; position:relative; } #find .menubtn:hover{ background:rgba(255,255,255,0.08); } /* The staging count is the only thing in the collapsed cluster that changes on its own. A dot, not a number: the sheet carries the number. */ #find .menubtn[data-badge]::after{ content:""; position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px #0B0E0D; } #find .menusheet .mrow{ display:flex; align-items:center; gap:12px; width:100%; padding:14px 4px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; color:var(--ink); } #find .menusheet .mrow:last-child{ border-bottom:0; } #find .menusheet .mrow:hover{ color:var(--accent); } #find .menusheet .ml{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } #find .menusheet .ml b{ font-size:15px; font-weight:600; } #find .menusheet .ml span{ font-size:12.5px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #find .menusheet .mchev{ font-size:22px; line-height:1; color:var(--ink3); flex:0 0 auto; } #find .menusheet .ct{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:11.5px; font-weight:700; flex:0 0 auto; } /* Facet rows, at any width. "Suspension > Coilovers & Dampers" is a real category and the desktop rail is 262px — narrower than the drawer — so the label has to be allowed to wrap instead of squeezing the count off the row. */ #find .chk > span:not(.ct):not(.swatch){ min-width:0; overflow-wrap:anywhere; } #find .chk .ct{ flex:0 0 auto; } /* ── the Filters button ──────────────────────────────────────────────────── */ #find .filterbtn{ align-items:center; gap:7px; border:1px solid var(--line2); background:transparent; color:var(--ink); border-radius:999px; padding:8px 14px; font-size:13.5px; font-weight:600; flex:0 0 auto; white-space:nowrap; } #find .filterbtn:hover{ background:rgba(255,255,255,0.08); } /* .rhead .ct is the result-count text and would otherwise style this badge. */ #find .filterbtn .ct{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--accent); color:var(--on-accent); font-size:11px; font-weight:700; } /* Sticky, so the way out stays reachable after you have scrolled to Price. The background is the card's own paper, or rows would show through it. */ #find .railhead{ position:sticky; top:-18px; z-index:1; align-items:center; justify-content:space-between; gap:12px; margin:-18px -18px 8px; padding:16px 18px 12px; background:var(--paper); border-bottom:1px solid var(--line); } #find .railhead h2{ margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); } #find .railhead .x{ font-size:24px; line-height:1; color:var(--ink3); padding:2px 4px; } #find .railhead .x:hover{ color:var(--ink); } /* ══ <=1080px · the rail becomes a drawer ═════════════════════════════════ */ @media (max-width:1080px){ #find .rhead .filterbtn{ display:inline-flex; margin-left:auto; } #find .rhead .sortsel{ margin-left:0; } #find .railhead{ display:flex; } /* NO background here. .rail is in the white-card list further up, which re-scopes --ink/--ink2/--ink3 to the LIGHT palette on this element. Painting the panel dark and leaving those alone is what put #0F1412 text on a #0F1412 ground: the Filters heading measured 1.00:1 and every row under it 2.11–3.76. The rail stays the paper card it is on the desktop — same surface, moved — which is also what .sheet does for every other overlay in here. */ #find .rail{ position:fixed; top:0; left:0; bottom:0; z-index:59; width:min(340px, 86vw); max-height:none; margin:0; padding:18px 18px calc(20px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch; /* square against the screen edge, rounded where it meets the results */ border-radius:0 var(--radius) var(--radius) 0; box-shadow:0 0 60px rgba(0,0,0,.5); transform:translateX(-100%); transition:transform .24s cubic-bezier(.4,0,.2,1); visibility:hidden; } body.f-filters-open #find .rail{ transform:none; visibility:visible; } /* The drawer is out of flow, so the results column has the row to itself. */ #find .rwrap{ grid-template-columns:minmax(0,1fr); } #find-veil{ display:block; position:fixed; inset:0; z-index:58; background:rgba(6,12,10,.58); opacity:0; pointer-events:none; transition:opacity .24s ease; } body.f-filters-open #find-veil{ opacity:1; pointer-events:auto; } body.f-filters-open{ overflow:hidden; } } /* Defensive at every width: a car name is user data. "2021 BMW M3 Competition (G80)" already makes this chip 304px, and nothing stops a longer one. */ #find .carchip .carname{ max-width:min(38vw, 240px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:0; background:none; padding:0; color:inherit; font:inherit; } /* ══ <=900px · the header cluster becomes one button ══════════════════════ Not 680. The cluster needs mark 104 + field + chip 304 + Staging 79 + account 94 + gaps ~72, which is ~870px before the field gets a single pixel — so at 700px the nowrap row still pushed the document to 887px and the page scrolled sideways. 900 is where the full cluster genuinely stops fitting. */ @media (max-width:900px){ #find .menubtn{ display:flex; } /* Everything the button stands in for. The sheet carries all of it. */ #find .tbend > :not(.menubtn), #find .homebar #home-acct > :not(.menubtn){ display:none; } } /* ══ <=680px · phone metrics ══════════════════════════════════════════════ */ @media (max-width:680px){ /* Two rows: mark and menu, then the field across the full width. A search field is the reason this page exists; it should not be what gets squeezed. */ #find #find-topbar{ padding:10px 16px; } #find .tb{ flex-wrap:wrap; gap:10px 12px; } #find .tbmark{ order:1; } #find .tbend{ order:2; margin-left:auto; } #find #find-topbar .sf{ order:3; flex:1 0 100%; max-width:none; } #find .homebar{ padding:12px 16px 0; } #find #home{ padding:0 16px 70px; } #find .rwrap{ padding:18px 16px 80px; } /* The count and the controls stop fighting for one line. */ #find .rhead{ gap:10px; } #find .rhead .ct{ flex:1 0 100%; } } /* The drawer is a transform; honour the same motion preference the rest does. */ @media (prefers-reduced-motion:reduce){ #find .rail, #find-veil{ transition:none; } } /* ══ TOUCH ═════════════════════════════════════════════════════════════════ Two classes of defect, both found by measuring rather than looking. 1. iOS Safari zooms the whole page when you focus an input whose font-size is under 16px, and never zooms back out. Every field in every sheet was 14px and the price filters were 13px, so tapping "Min" threw the layout. The floor is a browser constant, not a taste call. 2. Hit areas. The guidance is 44px; these were 17-35px. Where a control has a visual size worth keeping — an inline link, a 24px close glyph — the target is expanded with a pseudo-element instead of padding, so nothing moves. */ @media (max-width:900px){ #find .prow input, #find .fld input, #find .fld select, #find .fld textarea, #find .sf input, #find .sortsel{ font-size:16px; } /* Invisible 44px target around controls whose drawn size should not change. */ #find .x, #find .linkbtn, #find .titlelink, #find .tbmark, #find .carchip .f-sw, #find .f-more, #find .clearall{ position:relative; } #find .x::after, #find .linkbtn::after, #find .titlelink::after, #find .tbmark::after, #find .carchip .f-sw::after, #find .f-more::after, #find .clearall::after{ content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:44px; min-height:100%; } /* The close glyph is narrow as well as short, so it needs width too. */ #find .x::after{ left:-10px; right:-10px; } /* These have room to actually grow. */ #find .act{ min-height:40px; } #find .hint{ min-height:40px; } #find .sf .go{ min-height:40px; } #find .filterbtn{ min-height:40px; } #find .sortsel{ min-height:40px; } /* Stretch the input to its container's content box so more of the pill focuses the field. NOT moving the container's vertical padding onto the input as well: that was tried, and because the input's natural line box is ~24px rather than the 40px the stretch was giving it, the landing pill collapsed 66px -> 50px. The remaining dead zone is the 9-12px of padding, which is normal for a field this size and not worth deforming the search bar over. */ #find .sf input{ align-self:stretch; } } /* ── the landing's legal footer ───────────────────────────────────────────── Sits on the dark ground rather than inside a card, so it reads #find's own palette (--ink3/--accent) and not the paper one re-scoped onto .res and .hot above. Full width, so its rule spans what the hot grid spans (1024 in the 1080 column) rather than reading as a stray line floating under a wider section. #home is centred, so the left-align is restated here. The link row is 44px tall on purpose — desktop.html is also what a phone gets below 767px, and these were the last two controls on the landing under size. */ #find .f-legal{margin:72px 0 0;padding-top:26px;border-top:1px solid var(--line);text-align:left} #find .f-legal .f-legal-links{display:flex;align-items:center;gap:12px;margin:0} #find .f-legal .f-legal-links a{display:inline-flex;align-items:center;min-height:44px; font-size:13.5px;font-weight:600;color:var(--accent);text-decoration:none} #find .f-legal .f-legal-links a:hover{text-decoration:underline;text-underline-offset:3px} #find .f-legal .f-legal-links span{color:var(--ink3)} /* ── the fitment grade on a result row ────────────────────────────────────── The markup is app-core.js's (fitGradeHtml → .own > .fg-pills + label), so the four-segment scale is one glyph across the product: this row, the part panel's hero strip, and the phone's parts lists. app-core.css styles it under .fit-strip and .row — neither is an ancestor of a result row — so the rules come down here unchanged except for the label, which takes the card's own tertiary ink instead of --faint (#8A968F is 3.07:1 on white; --ink3 is 4.95:1 at this size). It sits under the store line rather than beside the fit pill on purpose. The pill answers "does the catalog list this for my car"; the grade answers "how well did it go on for people who fitted it". Stacking them would read as one verdict arguing with itself. */ #find .res .own, #find .hot .own{font-family:var(--mono);font-size:12px;font-weight:700;flex-shrink:0;text-align:right;line-height:1.2} #find .res .own span, #find .hot .own span{display:block;font-size:10px;font-weight:400;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase;margin-top:2px} #find .res .own .fg-pills, #find .hot .own .fg-pills{display:flex;gap:3px;justify-content:flex-end;color:inherit} #find .res .own .fg-pills i, #find .hot .own .fg-pills i{width:11px;height:5px;border-radius:3px;background:currentColor} #find .res .own .fg-pills i.off, #find .hot .own .fg-pills i.off{opacity:.18} /* an estimate from web fitment notes, not owner ratings — the panel dims it the same */ #find .res .own.est, #find .hot .own.est{opacity:.72} /* On a TILE the grade rides the footer's right end. .f-ft is align-items:baseline so the price and the owner count share a text baseline; the grade is two stacked lines, which has no baseline worth sharing, so it opts out with align-self rather than the footer changing alignment for everything. Same paper palette either way — #find .hot is already in the white-card selector list above. */ #find .hot .f-ft .own{margin-left:auto;align-self:flex-end}