/* Rack and Mat. Two looks on one set of markup (Hal, 2 Nov 2026): Garage (rubber floor, chalk, safety yellow) and Lab (clinical, hex lights).
   Each look is a set of custom properties on html[data-look]; the rules below only use the properties. Fonts: fonts.css, added by look.js
   after the first paint. Polish pass (Hal, 2 Nov): yellow only for the primary action, the selected card and the headline numbers. */

:root,[data-look=garage]{
  color-scheme:dark;
  --bg:#141517;--surface:#1e2023;--surface-2:#26292d;--ink:#f3f1ea;--muted:#b4b8be;--line:#3a3e44;--line-2:#5a5f66;--field:#121315;
  --accent:#ffd400;--accent-ink:#121212;--focus:#ffd400;--link:#f3f1ea;
  --red:#e8423f;--blue:#3b82f6;--green:#22b35e;
  --ok:#5fe08f;--one:#ff9f43;--no:#ff7b72;--unk:#9cc3ff;
  --hero-ink:#f3f1ea;--hero-muted:#c7cacf;--shot-bg:#2a2d31;
  --plan-floor:#2a2d31;--plan-rack:#ffd400;--plan-rack-line:#111214;--plan-load:rgba(59,130,246,.42);--plan-walk:rgba(34,179,94,.36);--plan-bench:#8b9097;--plan-plate:#e8423f;
  --r:6px;--r-lg:8px;--shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);
  --display:"Big Shoulders Display","Barlow Condensed","Arial Narrow",Impact,sans-serif;--body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --h-case:uppercase;--h-track:.01em;--h1:clamp(2.6rem,5.6vw,4.8rem);--h1-lh:.9;--h-weight:850;
  --ground:
    radial-gradient(rgba(255,255,255,.075) .8px,transparent 1.3px) 0 0/7px 9px,
    radial-gradient(rgba(255,255,255,.05) .8px,transparent 1.4px) 3px 4px/11px 13px,
    radial-gradient(rgba(0,0,0,.45) .9px,transparent 1.5px) 5px 2px/9px 7px,
    linear-gradient(90deg,rgba(0,0,0,.6) 0 2px,transparent 2px) 0 0/240px 240px,
    linear-gradient(0deg,rgba(0,0,0,.6) 0 2px,transparent 2px) 0 0/240px 240px,
    linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px) 2px 0/240px 240px,
    #141517;
  --stripe:repeating-linear-gradient(-45deg,#ffd400 0 10px,#111214 10px 20px);
}
[data-look=lab]{
  color-scheme:light;
  --bg:#eef1f5;--surface:#fff;--surface-2:#f4f6f9;--ink:#0d141b;--muted:#4b5764;--line:#dde3ea;--line-2:#b7c1cc;--field:#fff;
  --accent:#0062cc;--accent-ink:#fff;--focus:#0062cc;--link:#0d141b;
  --red:#d92d20;--blue:#1d6fe0;--green:#12945a;
  --ok:#0b7a3c;--one:#8a5100;--no:#b42318;--unk:#475467;
  --hero-ink:#fff;--hero-muted:#c5d3e2;--shot-bg:#f1f4f8;
  --plan-floor:#f6f8fb;--plan-rack:#0d141b;--plan-rack-line:#0d141b;--plan-load:rgba(29,111,224,.18);--plan-walk:rgba(18,148,90,.18);--plan-bench:#98a2b3;--plan-plate:#d92d20;
  --r:12px;--r-lg:20px;--shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);
  --display:"Space Grotesk","Inter",system-ui,sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --h-case:none;--h-track:-.02em;--h1:clamp(2.3rem,4.6vw,3.8rem);--h1-lh:1.02;--h-weight:700;
  --ground:#eef1f5;
  --stripe:linear-gradient(90deg,#0062cc,#36c5f0);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1rem/1.55 var(--body);overflow-x:hidden}
[data-look=garage] body{font-size:1.0625rem}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--display);font-weight:var(--h-weight);text-transform:var(--h-case);letter-spacing:var(--h-track);line-height:1.1}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:56px 0 14px}
h3{font-size:1.2rem;margin:0}
[data-look=garage] h3{font-size:1.45rem;line-height:1}
.card h3{font-size:1.02rem;line-height:1.2}
[data-look=garage] .card h3{font-size:1.22rem;line-height:1.02}
.num,input,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
select{font-family:var(--body)}
.muted{color:var(--muted)}.small{font-size:.85rem;color:var(--muted);margin:0}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:9;background:var(--accent);color:var(--accent-ink);padding:10px 14px;border-radius:var(--r);font-weight:700}
.skip:focus{top:12px}
picture,picture img{display:block;width:100%;height:auto}

/* ---------- header and the look switch ---------- */
.top{position:relative;z-index:3;background:color-mix(in srgb,var(--bg) 86%,transparent);border-bottom:1px solid var(--line)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:var(--stripe)}
[data-look=lab] .top{background:#05080c;border-bottom-color:#18222d}
[data-look=lab] .top::after{height:1px;bottom:-1px;opacity:.8}
.topin{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font:var(--h-weight) 1.35rem/1 var(--display);text-transform:var(--h-case);letter-spacing:var(--h-track);color:var(--ink);text-decoration:none;min-height:44px}
[data-look=lab] .brand{color:#fff}
.mark{width:26px;height:26px;flex:none;border-radius:50%;background:radial-gradient(circle,#141517 0 18%,var(--red) 19% 62%,#141517 63% 70%,var(--red) 71%)}
[data-look=lab] .mark{border-radius:0;background:#fff;clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);box-shadow:0 0 12px #7fe9ff}
.look,.units{display:inline-flex;padding:3px;gap:3px;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);background:var(--surface)}
[data-look=lab] .look{background:#0e1620;border-color:#22303e}
.look button,.units button{font:600 .95rem/1 var(--body);min-height:44px;min-width:64px;padding:0 14px;border:0;border-radius:var(--r);background:transparent;color:var(--ink);cursor:pointer}
[data-look=lab] .look button{color:#dce6f0}
.look button[aria-pressed=true],.units button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
[data-look=lab] .look button[aria-pressed=true]{background:#fff;color:#05080c}
[data-look=garage] .look button{text-transform:uppercase;letter-spacing:.06em;font-family:var(--display);font-size:1.05rem;font-weight:800}

/* ---------- hero: headline left, the look's render right ---------- */
.hero{position:relative;overflow:hidden;color:var(--hero-ink);padding:48px 0 56px;isolation:isolate}
.heroin{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.kicker{margin:0 0 12px;font:700 .82rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kicker a{color:inherit}
.hero h1{font-size:var(--h1);line-height:var(--h1-lh);margin:0 0 18px}
.lead{font-size:1.15rem;margin:0;max-width:44ch;color:var(--hero-muted)}
.herofig{aspect-ratio:3/2;border-radius:var(--r-lg);overflow:hidden;background:#0b0c0e;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.herofig .heroart,.herofig img{width:100%;height:100%;object-fit:cover}
[data-look=garage] .hero-lab,[data-look=lab] .hero-garage{display:none}
[data-look=garage] .herofig{border:1px solid #2c2f33}
[data-look=lab] .herofig{background:#e9edf2;border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 6px rgba(143,232,255,.06),0 24px 60px rgba(0,0,0,.5)}
.hero-sm{padding:44px 0 56px}.hero-sm .heroin{display:block}.hero-sm h1{font-size:clamp(2.1rem,5vw,3.6rem)}
.cta{display:inline-flex;margin-top:18px}
[data-look=garage] .hero{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 80%)}
[data-look=lab] .hero{background:#05080c}
[data-look=lab] .kicker{color:#8fe8ff}
.hexlights{display:none}
[data-look=lab] .hexlights{display:block;position:absolute;left:-10px;top:-10px;width:calc(100% + 20px);height:calc(100% + 20px);z-index:0;opacity:.9;animation:flick 1.4s steps(1,end) 1 both}
[data-look=lab] .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,8,12,.94) 0,rgba(5,8,12,.82) 42%,rgba(5,8,12,.5) 70%,rgba(5,8,12,.35)),linear-gradient(0deg,rgba(5,8,12,.7),transparent 45%)}
@keyframes flick{0%{opacity:0}6%{opacity:.6}9%{opacity:.05}16%{opacity:.8}19%{opacity:.2}28%{opacity:.9}31%{opacity:.5}40%,100%{opacity:.9}}
@media (prefers-reduced-motion:reduce){[data-look=lab] .hexlights{animation:none}*{scroll-behavior:auto!important}}

/* ---------- panels, planner: the form, then the plan and headroom large ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px}
.planner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:22px;margin-top:28px;align-items:start}
.ph{font:var(--h-weight) 1.25rem/1.1 var(--display);text-transform:var(--h-case);letter-spacing:var(--h-track);margin:0 0 12px}
[data-look=garage] .ph{font-size:1.5rem}
.presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chip{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 10px 6px 6px;font:600 .9rem/1.2 var(--body);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;text-align:left}
.chip:hover{border-color:var(--line-2)}
.chip .roomthumb{flex:none;width:60px}
.chip .roomthumb img{width:60px;height:40px;object-fit:contain}
.chip .ct{display:flex;flex-direction:column;gap:2px;min-width:0}
.chip .num{font-size:.76rem;color:var(--muted);font-weight:400}
.hint{margin:8px 0 14px;font-size:.82rem;color:var(--muted)}
.units{margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid .wide{grid-column:1/-1}
.room label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:600}
.room small{font-weight:400;color:var(--muted);font-size:.78rem}
input,select{font-size:1rem;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:var(--r);min-height:44px;padding:8px 12px;width:100%;min-width:0}
input:hover,select:hover{border-color:var(--line-2)}
input::placeholder{color:var(--muted);opacity:1}
.bench{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:14px}
.check,.cmpbox{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check input,.cmpbox input{width:22px;height:22px;min-height:0;accent-color:var(--ink)}
.pick{flex-direction:row!important;align-items:center;flex:1 1 240px;min-width:0}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;font:700 .95rem/1.1 var(--body);border-radius:var(--r);border:1.5px solid var(--line-2);background:transparent;color:var(--ink);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.primary,.btn.cta{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover,.btn.cta:hover{filter:brightness(1.06)}
.btn.ghost{border-color:var(--line)}
[data-look=garage] .btn{text-transform:uppercase;letter-spacing:.05em;font-family:var(--display);font-weight:800;font-size:1.05rem}
.views{display:grid;gap:22px;align-items:start}
figure{margin:0}
figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.pname{font-size:.9rem;color:var(--muted)}
.svgbox{position:relative;width:100%}
.svgbox svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.planbox{aspect-ratio:173/100}
.sidebox{aspect-ratio:2880/2820}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:12px 0 0;font-size:.82rem;color:var(--muted)}
.key{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:2px;border:1px solid var(--line)}
.k-rack{background:var(--plan-rack)}.k-load{background:var(--plan-load)}.k-walk{background:var(--plan-walk)}.k-over{background:repeating-linear-gradient(45deg,var(--no) 0 3px,transparent 3px 6px)}
.press{margin:0;font-size:1rem;min-height:4.6em}
.view3d .press{margin-top:14px}

/* the drawings: user units are millimetres; --fs is set per drawing */
.pl-floor{fill:var(--plan-floor)}
.pl-wall{fill:none;stroke:var(--ink);stroke-width:4px;vector-effect:non-scaling-stroke}
.pl-zone{stroke:none}.pl-load{fill:var(--plan-load)}.pl-walk{fill:var(--plan-walk)}
.pl-over{fill:url(#pl-hatch);stroke:var(--no);stroke-width:2.5px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.pl-hatch-bg{fill:var(--no);fill-opacity:.12}.pl-hatch-fg{fill:var(--no);fill-opacity:.42}
.pl-rack{fill:var(--plan-rack);stroke:var(--plan-rack-line);stroke-width:2px;vector-effect:non-scaling-stroke}
.pl-rack.pl-over{fill:url(#pl-hatch)}
.pl-bar{stroke:var(--ink);stroke-width:4px;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pl-plate{fill:var(--plan-plate)}
.pl-bench{fill:var(--plan-bench);stroke:var(--ink);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.pl-doorgap{stroke:var(--plan-floor);stroke-width:7px;vector-effect:non-scaling-stroke}
.pl-door{stroke:var(--ink);stroke-width:2px;vector-effect:non-scaling-stroke}
.pl-swing{fill:none;stroke:var(--muted);stroke-width:1.5px;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.pl-dim,.pl-lab,.pl-small{font-family:var(--mono);font-size:calc(var(--fs) * 1px);fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:calc(var(--fs) * .22px);stroke-linejoin:round}
.pl-dim{font-weight:700}.pl-small{font-size:calc(var(--fs) * .82px);fill:var(--muted)}
.pl-lab-over{fill:var(--no);font-weight:700}
.sd-floor{fill:var(--line)}.sd-buildup{fill:var(--blue);fill-opacity:.55}
.sd-ceiling{stroke:var(--ink);stroke-width:3px;vector-effect:non-scaling-stroke}
.sd-obstruction{stroke:var(--accent);stroke-width:3px;stroke-dasharray:8 6;vector-effect:non-scaling-stroke}
.sd-clear{stroke:var(--accent);stroke-width:3px;vector-effect:non-scaling-stroke}
.sd-rack{fill:none;stroke:var(--ink);stroke-width:5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sd-person{fill:none;stroke:var(--ink);stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sd-plate{fill:var(--plan-plate)}.sd-hub{fill:var(--plan-floor)}
.sd-rack.pl-over,.sd-person.pl-over{fill:none;stroke:var(--no);stroke-dasharray:none}
.sd-plate.pl-over{fill:var(--no)}

/* ---------- verdict summary: one slim bar, its segments are the filters ---------- */
.results{margin-top:44px}
.verdict{display:grid;gap:14px}
.big{margin:0;font:var(--h-weight) clamp(1.7rem,4.4vw,3rem)/1.05 var(--display);text-transform:var(--h-case);letter-spacing:var(--h-track)}
.big .num{font-family:var(--display);font-size:1.45em;color:var(--accent)}
[data-look=lab] .big .num{color:var(--accent)}
.vbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.seg{display:flex;gap:3px;flex:1 1 520px;min-width:0;border-radius:var(--r);overflow:hidden}
.seg button{flex:var(--n,1) 1 auto;min-width:max-content;min-height:44px;display:flex;align-items:center;gap:6px;padding:0 12px;border:0;border-top:3px solid var(--c);font:600 .85rem/1.1 var(--body);text-align:left;color:var(--ink);background:color-mix(in srgb,var(--c) 16%,var(--surface));cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button .n{font:800 1.05rem/1 var(--mono)}
.seg [data-show=fit]{--c:var(--ok)}.seg [data-show=check]{--c:var(--one)}.seg [data-show=unknown]{--c:var(--unk)}.seg [data-show=no]{--c:var(--no)}
.seg button[aria-pressed=true]{background:color-mix(in srgb,var(--c) 34%,var(--surface));box-shadow:inset 0 -3px 0 var(--ink)}
.seg button:disabled{cursor:default}
.sort{display:inline-flex;align-items:center;gap:10px;font-weight:600}.sort select{width:auto}

/* ---------- compare ---------- */
.compare{margin-top:16px}.cmphead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
#cmp-note{margin:10px 0 0;min-height:1.3em}

/* ---------- cards: picture, name and result, meters, then the actions along the bottom ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:12px;min-height:60vh}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:0 14px 14px;display:flex;flex-direction:column;gap:9px;cursor:pointer;overflow:hidden;font-size:.92rem}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.shot{position:relative;margin:0 -14px;aspect-ratio:3/2;background:var(--shot-bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.shot picture,.shot img{width:100%;height:100%;object-fit:contain}
.shot.photo img{object-fit:contain;background:#fff}
.credit{position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:99px;font-size:.74rem;line-height:1.4;background:rgba(10,11,12,.78);color:#fff}
.credit a{color:#fff;display:inline-block;padding:2px 0}
.shotlink{display:block;width:100%;height:100%;cursor:pointer}
.shotlink:hover .credit,.shotlink:focus-visible .credit{text-decoration:underline}
.shotlink:focus-visible{outline-offset:-3px}
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.badge{flex:none;display:inline-flex;align-items:center;gap:5px;font:700 .68rem/1 var(--body);padding:5px 7px;border-radius:999px;border:1.5px solid currentColor;color:var(--unk);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
[data-look=garage] .badge{border-radius:3px}
.bi{font-weight:900}
.v-fits .badge,.v-one_way .badge{color:var(--ok)}.v-check .badge{color:var(--one)}.v-no .badge{color:var(--no)}
.vline{margin:0;font-size:.86rem;font-weight:600;line-height:1.35}
.vline.s-fail{color:var(--no)}.vline.s-pass_one,.vline.s-warn{color:var(--one)}
.meters{display:grid;gap:7px}
.mtop{display:flex;justify-content:space-between;gap:8px;font-size:.76rem}
.mlab{color:var(--muted);font-weight:600}.mval{font-size:.74rem}
.mtrack{height:6px;margin-top:5px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.mfill{display:block;height:100%;background:var(--ok);border-radius:99px}
.meter.over .mfill{background:repeating-linear-gradient(45deg,var(--no) 0 6px,color-mix(in srgb,var(--no) 55%,transparent) 6px 12px)}
.meter.over .mval{color:var(--no);font-weight:700}
.warnbox{margin:0;padding:8px 10px 8px 12px;font-size:.8rem;border-radius:var(--r);background:var(--surface-2);border-left:3px solid var(--one)}
.quiet{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.qchip{font-size:.74rem;padding:3px 8px;border-radius:99px;border:1px dashed var(--line-2);color:var(--muted)}
.qnote{font-size:.74rem;color:var(--muted)}
.facts{margin:0;font-size:.76rem;color:var(--muted)}
.facts .src{display:inline-block;min-height:0;font-size:inherit;padding:14px 0;margin:-14px 0;line-height:16px}      /* a 44 px tap target without spreading the line */
.cfoot{margin-top:auto;display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.caveat{margin:0;font-size:.78rem;font-weight:600}
.buy{display:flex;flex-wrap:wrap;gap:8px}
.buy .btn{flex:1 1 auto;min-height:44px;padding:6px 10px;font-size:.82rem;white-space:nowrap}
[data-look=garage] .buy .btn{font-size:.9rem}
.disc{margin:0}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.acts .btn{min-height:44px;padding:4px 10px;font-size:.8rem}
.cmpbox{font-size:.84rem}
.pagelink,.src{display:inline-flex;align-items:center;min-height:44px;font-size:.8rem}

/* ---------- tables, eBay ---------- */
.tablewrap{overflow-x:auto}.tablewrap.panel{padding:0}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.8rem;color:var(--muted);font-weight:700}
thead th{text-transform:uppercase;letter-spacing:.05em}
tr:last-child td,tr:last-child th{border-bottom:0}
.n{white-space:nowrap}
td a{display:inline-block;padding:2px 0}
.t-fits,.t-one_way{color:var(--ok);font-weight:700}.t-check{color:var(--one);font-weight:700}.t-no{color:var(--no);font-weight:700}.t-unknown{color:var(--unk)}
#cmp-table th.v-fits,#cmp-table th.v-one_way,#cmp-table th.v-check,#cmp-table th.v-no{color:var(--ink);font-size:.9rem;text-transform:none;letter-spacing:0}
.ebay{margin-top:56px;padding-top:4px;padding-bottom:20px;border:2px dashed var(--line-2);border-radius:var(--r-lg);max-width:1352px}
.eblist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.ebitem{display:flex;gap:12px;min-width:0}.ebitem img{flex:none;object-fit:cover;border-radius:var(--r);background:var(--line)}
.ebtext{min-width:0}.ebtitle{font-size:.92rem;overflow-wrap:anywhere}.ebmeta,.ebfit{margin:4px 0 0;font-size:.82rem;color:var(--muted)}

/* ---------- how we check: the envelope drawing, labels over it in HTML so units switch ---------- */
.envelope{margin-bottom:18px;padding:12px 12px 16px}
.envbox{position:relative}
[data-look=garage] .envbox{background:radial-gradient(ellipse at 50% 60%,#2b2e33,#1e2023 70%);border-radius:var(--r)}
[data-look=lab] .envbox{background:radial-gradient(ellipse at 50% 60%,#f7f9fb,#fff 70%);border-radius:var(--r)}
.envlabels{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.envlabels li{font:600 .82rem/1.2 var(--mono);padding:5px 9px;border-radius:99px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);white-space:nowrap}
.envlabels.placed{margin:0}
.envlabels.placed li{position:absolute;transform:translate(-50%,-50%);box-shadow:var(--shadow)}
.envelope figcaption{margin-top:10px;padding:0 6px}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.tile p{margin:0;font-size:.92rem}
.tile .fig{font:var(--h-weight) 2.1rem/1 var(--display);text-transform:var(--h-case);letter-spacing:var(--h-track);color:var(--ink);margin-bottom:12px}
.tile .fig span{font-family:var(--mono);font-size:.82em;letter-spacing:-.02em}
.how>.muted{margin-top:16px}

/* ---------- rack pages, legal pages, footer ---------- */
.rackpage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;margin-top:-28px;position:relative;z-index:2}
.rackpage>.shot{margin:0;padding:0;border-radius:var(--r-lg);aspect-ratio:4/3}
.rackpage>section:last-child{grid-column:1/-1}
.rackpage .buy{display:flex;flex-wrap:wrap}
.spec th{width:42%}.np{color:var(--muted);font-size:.9em}
.prose{max-width:860px;padding-top:24px;padding-bottom:24px}
.prose h1{font-size:clamp(2rem,5vw,3.2rem);margin:24px 0 12px}
.foot{margin-top:72px;padding:24px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.foot p{margin:6px 0}

/* ---------- 3D view (Hal, 2 Nov 2026): space held before three.js arrives, so nothing shifts ---------- */
.view3d figcaption{align-items:center}
.v3dreset{margin-left:auto;min-height:44px;padding:4px 12px;font-size:.82rem}
.v3dbox{position:relative;width:100%;aspect-ratio:16/10;max-height:560px;border-radius:var(--r);background:var(--surface-2);overflow:hidden}
.v3dbox canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.v3dbox canvas:active{cursor:grabbing}
.v3dbox canvas:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.v3dnote{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px;text-align:center;color:var(--muted);font-size:.9rem}

/* ---------- the results binder (Hal, 2 Nov 2026): folder tabs, Racks first, then each kind of kit ---------- */
.binder{margin-top:44px}
.bintabs{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;padding:6px 12px 0;margin-bottom:-1px;position:relative;z-index:1;scrollbar-width:thin}
.bintab{flex:none;min-height:44px;margin-top:6px;padding:8px 14px 8px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:var(--surface);color:var(--muted);font:600 .88rem/1.1 var(--body);cursor:pointer;white-space:nowrap}
.bintab .kn{font:400 .74rem/1 var(--mono);color:var(--muted);margin-left:2px}
.bintab:hover{color:var(--ink);border-color:var(--line-2)}
.bintab[aria-selected=true]{margin-top:0;padding-bottom:14px;background:var(--surface-2);color:var(--ink);border-color:var(--line-2);border-bottom:1px solid var(--surface-2);box-shadow:inset 0 3px 0 var(--accent)}
.bintab[aria-selected=true] .kn{color:var(--ink)}
.binpage{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px}
.binpage[hidden]{display:none}

/* ---------- kit pages in the binder ---------- */
.kithead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:14px}
.kitblurb{margin:0;max-width:62ch;font-size:.92rem}
.kitall{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kitall .buy .btn{flex:none}
.kitlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.kititem{display:flex;flex-direction:column;gap:6px;padding:0 14px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kshot{margin:0 -14px 6px;aspect-ratio:4/3}
.kittitle{min-width:0}.kith{margin:0 0 4px}
.kititem .kname{margin:0;font:700 .98rem/1.25 var(--body);text-transform:none;letter-spacing:0}      /* over [data-look] h3 */
.kseller{font-weight:400;font-size:.82rem;color:var(--muted)}
.kfacts{margin:0;font-size:.84rem;color:var(--muted)}
.kroom{margin:0;font-size:.84rem;font-weight:600}
.kwarn{margin:0;font-size:.84rem;font-weight:700;color:var(--no)}
.ksrc{margin:0}
.kititem .buy{margin-top:auto}

/* Long sections below the fold are laid out only as they come near the screen (Lighthouse, 2 Nov 2026). */
.cards,.ebay,.how,.alltab{content-visibility:auto;contain-intrinsic-size:auto 2400px}

/* ---------- narrow screens: down to 360 px ---------- */
@media (min-width:901px){.planner .room{position:sticky;top:16px}}
@media (max-width:1100px){.planner{grid-template-columns:minmax(300px,360px) minmax(0,1fr)}}
@media (max-width:900px){
  .heroin{grid-template-columns:minmax(0,1fr);gap:24px}
  .planner{grid-template-columns:minmax(0,1fr)}.rackpage{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .wrap{padding:0 16px}.hero{padding:32px 0 36px}.hero-sm{padding:32px 0 48px}
  .panel{padding:16px}.grid{gap:10px}
  .look button{min-width:56px;padding:0 10px}
  .seg{display:grid;grid-template-columns:1fr 1fr;flex-basis:100%}.seg button{min-width:0}
  .cards{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .eblist{grid-template-columns:minmax(0,1fr)}
  .kitlist{grid-template-columns:minmax(0,1fr)}
  .binpage{padding:14px 12px;border-radius:0 0 var(--r-lg) var(--r-lg)}.bintabs{padding:4px 4px 0}.bintab{padding:8px 11px;font-size:.84rem}
  .v3dbox{aspect-ratio:4/3}
  .ebay{margin-left:16px;margin-right:16px;padding-left:12px;padding-right:12px}
  .brand{font-size:1.15rem}
  .chip{min-height:52px;font-size:.84rem}.chip .roomthumb{width:48px}.chip .roomthumb img{width:48px;height:32px}
  .envlabels.placed li{font-size:.7rem;padding:3px 6px}
  [data-look=lab] .hero::after{background:linear-gradient(180deg,rgba(5,8,12,.84),rgba(5,8,12,.9))}
}