/* Mobile discovery. The photograph, decisions and navigation share one viewport. */
body.match-app{--blue:#344b36;--blue-soft:#edf3e9;--accent:#d5f78a;--ink:#202923;height:100dvh;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 85% 85%,#e3e9da,transparent 55%),#f2f3ee;color:var(--ink);display:flex;flex-direction:column;padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-left)) 0;font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif}
.match-app .match-header{position:relative;inset:auto;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:460px;height:54px;min-height:54px;padding:0;margin:0 auto;background:none;border:0;z-index:2}
.match-app .match-header .logo{font-size:27px;letter-spacing:-1.6px;width:auto;gap:7px;color:#24352c}.match-app .match-header .logo>span:first-child{font-style:normal;font-size:28px;border-radius:50%;width:32px;height:32px;background:#24352c;color:var(--accent)}.match-app .match-header .logo-dot{display:inline;color:#24352c}
.filter-orb{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff;background:#ffffff90;color:#293b2c;box-shadow:0 3px 12px #1c302307}.filter-orb #filter-count{position:absolute;top:-1px;right:-2px;width:18px;height:18px;border-radius:50%;background:#344b36;color:white;font-size:10px;display:grid;place-items:center}[hidden]{display:none!important}
.match-app .match-main{width:100%;max-width:460px;margin:0 auto;display:flex;flex:1;min-height:0;flex-direction:column}
.match-app .feed{position:relative;flex:1;min-height:0;height:auto;overflow:visible;border-radius:28px;background:transparent;box-shadow:0 16px 35px #19271a19;isolation:isolate}.match-app .feed:before{content:'';position:absolute;inset:12px 12px -7px;background:#bbc5b6;border-radius:28px;z-index:-1}.match-app .car{position:relative;display:flex;flex-direction:column;height:100%;min-height:0;border:1px solid #ffffff45;border-radius:28px;margin:0;background:#25302c;color:white;box-shadow:none;transition:transform .18s ease;will-change:transform;animation:card-arrive .35s ease both}
.match-app .visual{flex:1;min-height:65px;background:#748077;touch-action:pan-y;position:relative;overflow:hidden}.match-app .visual:before{content:'';position:absolute;inset:-25px;background:var(--car-image) center/cover;filter:blur(24px);opacity:.5}.match-app .visual:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#18251e25,transparent 30%,#25302c14 56%,#25302c3d 68%,#25302c7a 78%,#25302cbf 88%,#25302ceb 95%,#25302c 100%);pointer-events:none}.match-app .visual img{position:relative;width:100%;height:100%;padding:30px 0 22px;object-fit:contain;user-select:none;-webkit-user-drag:none;cursor:zoom-in}.match-app .photo-label{bottom:13px;left:19px;right:auto;font-size:10px;color:#ffffffe0;letter-spacing:.3px}
.match-app .car-body{position:relative;flex-shrink:0;top:calc(var(--body-lift, 0px) * -1);background:linear-gradient(180deg,#25302c00 0,#25302c 56px);padding:18px 22px 14px}.car-eyebrow{display:block;font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:#c7d3c5;margin:0 0 7px}.match-app .car h3{font-size:30px;line-height:1.08;letter-spacing:-1px;font-weight:650;margin:0 0 7px}.match-app .sub{color:#bcc7be;font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:345px}.quick-specs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}.quick-specs span{padding:6px 9px;border:1px solid #ffffff24;background:#ffffff08;border-radius:8px;font-size:10px;color:#edf1e9}.match-app .price-row{border-top:1px solid #ffffff26;padding-top:13px;gap:8px}.match-app .price{font-size:29px;font-weight:650;letter-spacing:-1px;line-height:1.1;color:#e8f6d4}.details-orb{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #ffffff45;border-radius:50%;background:transparent;color:#e8f6d4}.details-orb svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.5}.saved-mark{color:var(--accent);font-size:24px}
.match-app .glass-dock{display:flex;align-items:stretch;flex:0 0 66px;min-height:66px;width:min(100%,330px);margin:0 auto max(12px,env(safe-area-inset-bottom));padding:6px;gap:4px;border-radius:30px;border:1px solid #ffffffdd;background:linear-gradient(140deg,#ffffffe0,#ffffff60 50%,#ffffffae);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #fff,0 8px 30px #24342310;z-index:3}.match-app .glass-dock .nav-item{display:flex;position:relative;flex:1;min-width:0;height:52px;flex-direction:row;gap:9px;justify-content:center;align-items:center;border-radius:24px;padding:8px;color:#687465;font-size:11px;font-weight:650;background:transparent;box-shadow:none;transition:background .25s,color .25s}.match-app .glass-dock .nav-item.active{color:#2f442f;background:linear-gradient(135deg,#e1ebd6db,#dce7d2a0);box-shadow:inset 0 1px 1px #fff,0 2px 8px #23322205}.match-app .glass-dock .nav-item svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.match-app .glass-dock .nav-item span{display:inline;font-size:11px;line-height:1.2}.match-app .glass-dock .nav-item b{position:absolute;top:2px;right:8px;font-size:8px;line-height:15px;min-width:15px;border-radius:10px;color:#33442e;background:#d5e6bd;text-align:center;margin:0;padding:0 3px}.match-app .car.swiping-save,.match-app .car.swiping-skip{animation:none;transition:none}
.match-app .empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;background:#f9fbf5}.empty-heart{font-size:65px;color:#738865}.match-app .empty h2{font-size:27px;line-height:1.25;margin-top:14px}.match-app .empty p{font-size:13px;line-height:1.8}.match-app #toast{bottom:100px;border:1px solid #ffffff45;background:#26382dec;backdrop-filter:blur(16px);font-size:12px;text-align:center;max-width:90vw;width:max-content;pointer-events:none}
.match-app dialog{background:#f8f9f4;color:#28392c}.match-app .close{background:#e9ede3;color:#34482f}.match-app #detail{max-height:88dvh;overflow:auto}.cost-line{gap:18px;overflow-wrap:anywhere}.cost-line b{text-align:right}.detail-photo{padding:0;border:0;border-radius:10px;overflow:hidden;background:#e5e9e0}.detail-photo img{display:block}.match-app #photo-dialog{background:#111a15;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:64px 0 90px;border-radius:0;overflow:hidden;color:#fff}.match-app #photo-dialog .close{position:absolute;top:max(16px,env(safe-area-inset-top));right:18px;z-index:2;background:#ffffff25;color:#fff}.match-app #photo-image{width:100%;height:100%;object-fit:contain;touch-action:pan-y}.match-app #photo-caption{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:60px;right:60px;font-size:12px;text-align:center;color:#fff}#gallery-prev{left:12px}#gallery-next{right:12px}.match-app .picker-footer{background:#f8f9f4}.match-app .brand-tile{background:#fff}.match-app .primary:hover{background:#243b29}.match-app .brand-initial{background:#e9efdf;color:#445738}
@keyframes card-arrive{from{opacity:.3;transform:translateY(8px) scale(.975)}to{opacity:1;transform:none}}
@media(min-width:761px){body.match-app{padding-top:18px;background:radial-gradient(ellipse at 10% 30%,#e4ebdc,transparent 40%),radial-gradient(ellipse at 85% 80%,#dee8d1,transparent 40%),#f2f3ee}.match-app .match-main{max-height:790px}.match-app .glass-dock{margin-top:0}.match-app .match-header{flex-shrink:0}.gesture-hint{display:block}}
@media(max-height:760px){.match-caption{padding:6px 2px 14px}.match-caption h1{font-size:27px}.section-kicker{font-size:8px;margin-bottom:4px}.match-app .match-header{height:46px;min-height:46px}.match-app .car-body{padding:3px 18px 16px}.match-app .car h3{font-size:25px}.quick-specs{margin:10px 0}.match-app .price{font-size:26px}.decision-bar{flex-basis:83px}.decision.like{width:60px;height:60px}.decision.skip{width:52px;height:52px}.match-app .glass-dock{min-height:60px;flex-basis:60px}.match-app .glass-dock .nav-item{height:46px}.match-app .visual img{padding-top:25px}}
@media(max-width:360px){body.match-app{padding-left:12px;padding-right:12px}.match-caption h1{font-size:25px}.match-app .car h3{font-size:24px}.match-app .sub{max-width:255px}.match-app .car-body{padding-left:16px;padding-right:16px}.quick-specs span{font-size:9px;padding:5px 7px}}
@media(max-height:480px){body.match-app{height:auto;min-height:100dvh;overflow:auto}.match-app .match-main{flex:none;height:590px}.match-app .glass-dock{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.match-app *{animation:none!important;transition:none!important}}
.match-app #toast{opacity:0;visibility:hidden;transition:opacity .2s,transform .2s}.match-app #toast.show{opacity:1;visibility:visible}
.match-app .title-row>div{min-width:0}.match-app .sub{max-width:100%}

@media(min-height:481px) and (max-height:600px){.match-caption{padding:3px 2px 10px}.section-kicker{display:none}.match-caption h1{font-size:23px}.match-app .car h3{font-size:21px}.match-app .car-body{padding:2px 14px 12px}.car-eyebrow{font-size:8px;margin-bottom:5px}.match-app .sub{font-size:9px}.quick-specs{margin:7px 0}.quick-specs span{padding:4px 6px;font-size:9px}.match-app .price-row{padding-top:8px}.match-app .price{font-size:23px}.decision-bar{flex-basis:73px}.decision.like{width:54px;height:54px}.decision.skip{width:46px;height:46px}.match-app .glass-dock{min-height:56px;flex-basis:56px;margin-bottom:8px}.match-app .glass-dock .nav-item{height:42px}.match-app .badges{top:9px;left:10px;right:10px}.match-app .badge{padding:5px 8px;font-size:8px}.match-app .visual img{padding:16px 0}.match-app .photo-label{bottom:8px;font-size:9px}}

/* Compact gesture-first catalogue: no promotional heading or action toolbar. */
.match-app .match-main{padding-top:8px;padding-bottom:16px}
.match-app .car,.match-app .visual{touch-action:pinch-zoom}
.match-app .feed{overflow:hidden;overscroll-behavior:contain}
.match-app .feed:before{display:none}
.match-app .glass-dock{flex-shrink:0}

.match-app .photo-zone{position:absolute;top:0;bottom:0;z-index:3;border:0;border-radius:0;background:transparent;padding:0;touch-action:pinch-zoom}
.photo-zone-left{left:0;width:24%;cursor:w-resize}.photo-zone-right{right:0;width:24%;cursor:e-resize}.photo-zone-center{left:24%;width:52%;cursor:zoom-in}
.match-app .photo-zone:focus-visible{outline:2px solid #d5f78a;outline-offset:-5px}.match-app .visual .photo-label{pointer-events:none}

.price-inline{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}.price-origin{font-size:10px;font-weight:400;letter-spacing:0;color:#bcc7be;white-space:nowrap}

.match-app #photo-dialog{padding:0 0 calc(76px + env(safe-area-inset-bottom));touch-action:pan-y pinch-zoom;overscroll-behavior:contain}
.match-app #photo-dialog .close{top:auto;bottom:max(16px,env(safe-area-inset-bottom));right:max(18px,env(safe-area-inset-right))}
.match-app #photo-caption{left:20px;right:80px;bottom:max(28px,calc(env(safe-area-inset-bottom) + 12px));text-align:left}
.match-app #photo-image{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-drag:none}

.match-app .photo-zone::after{content:'';position:absolute;inset:0;opacity:0;pointer-events:none}
.match-app .photo-zone-right::after{background:linear-gradient(90deg,transparent,#07130d38)}
.match-app .photo-zone-left::after{background:linear-gradient(270deg,transparent,#07130d38)}
.match-app .photo-zone:focus:not(:focus-visible){outline:none}
.match-app .photo-zone:focus-visible{outline:1px solid #ffffff80;outline-offset:-6px}
.match-app .visual img.photo-transition-ghost{position:absolute;user-select:none;pointer-events:none}
.match-app #photo-dialog .photo-transition-ghost{object-fit:contain;padding:0}

/* Quiet masthead; all vehicle metadata lives in the bottom panel. */
.match-app .match-header{height:48px;min-height:48px;padding:0 2px}
.match-app .match-header .logo{font-size:24px;letter-spacing:-1.3px;gap:8px;font-weight:750}
.match-app .match-header .logo>span:first-child{width:28px;height:28px;font-size:23px;background:transparent;color:#344b36;border:1px solid #344b3626;border-radius:9px}
.match-app .filter-orb{width:40px;height:40px;background:linear-gradient(145deg,#ffffffd9,#ffffff50);border:1px solid #ffffffde;box-shadow:inset 0 1px 0 #fff,0 3px 12px #22362706;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.match-app .match-main{padding-top:6px}
.match-app .visual img{padding:0;object-fit:contain}
.match-app .visual:before{opacity:.8;filter:blur(22px)}
.match-app .visual:after{background:linear-gradient(180deg,#15251b05 55%,#25302c12 72%,#25302c)}
.match-app .car{border-color:#ffffff50;box-shadow:0 2px 2px #ffffff50 inset}
.match-app .quick-specs{gap:5px}
.match-app .quick-specs span{padding:5px 8px}
@media(max-width:360px){.match-app .quick-specs span{padding:4px 6px;font-size:9px}}

/* Continuous card motion and directional feedback, without swipe labels. */
.match-app .car{animation:none;transition:transform .38s cubic-bezier(.2,.75,.2,1)}
.match-app .car.is-dragging{transition:none}
.match-app .car.departing{position:absolute;inset:0;z-index:6;pointer-events:none;transition:none}
.match-app .car:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:7;opacity:0;transition:opacity .18s ease}
.match-app .car.swiping-save:after{background:linear-gradient(90deg,transparent 25%,#429b6540 60%,#43ae738c);opacity:var(--swipe-tint,0)}
.match-app .car.swiping-skip:after{background:linear-gradient(270deg,transparent 25%,#b74d4540 60%,#d4544d8c);opacity:var(--swipe-tint,0)}
/* One continuous glass lens slides between destinations. */
.match-app .glass-dock{position:relative;isolation:isolate;background:linear-gradient(125deg,#ffffff70,#ffffff20 45%,#ffffff50);border:1px solid #ffffffb0;box-shadow:inset 0 1px 0 #fff,inset 1px 0 1px #ffffff90,inset 0 -1px 1px #a8b7a440,0 10px 28px #23351f18;backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%)}
.match-app .glass-dock:before{content:'';position:absolute;inset:5px auto 5px 5px;width:calc(50% - 7px);border-radius:25px;background:linear-gradient(140deg,#ffffffb0,#dce9cc55 50%,#ffffff75);border:1px solid #ffffffc9;box-shadow:inset 0 1px 2px #fff,inset 0 -1px 3px #b0c0a540,0 3px 12px #24392213;backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);transition:transform .5s cubic-bezier(.22,.85,.23,1);z-index:0}
.match-app.garage-view .glass-dock:before{transform:translateX(calc(100% + 4px))}
.match-app .glass-dock .nav-item,.match-app .glass-dock .nav-item.active{z-index:1;background:transparent;box-shadow:none;transition:color .3s ease}
.match-app .glass-dock .nav-item svg{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.match-app .glass-dock .nav-item.active svg{transform:translateY(-1px) scale(1.06)}
@media(prefers-reduced-motion:reduce){.match-app .glass-dock:before,.match-app .car:after{transition:none}}
/* Give the vehicle the available screen, retaining safe-area clearance. */
body.match-app{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));padding-top:max(3px,env(safe-area-inset-top))}
.match-app .match-header{max-width:620px;height:44px;min-height:44px;padding:0 10px}
.match-app .match-main{max-width:620px;max-height:none;padding-top:3px;padding-bottom:8px}
.match-app .feed,.match-app .car{border-radius:24px}
.match-app .glass-dock{min-height:58px;flex-basis:58px;margin-bottom:max(6px,env(safe-area-inset-bottom));padding:4px}
.match-app .glass-dock .nav-item{height:48px}
@media(min-width:761px){.match-app .match-main,.match-app .match-header{max-width:min(720px,calc(100dvh - 100px))}}
@media(max-height:600px){.match-app .glass-dock{min-height:54px;flex-basis:54px}.match-app .glass-dock .nav-item{height:44px}}

.match-app .feed>.car{position:relative;z-index:2}
.match-app .feed>.car.under-card{position:absolute;inset:0;z-index:0;pointer-events:none;transform:scale(.985);filter:brightness(.92)}
.match-app .feed>.car.departing{position:absolute;z-index:6}

/* Saved cars are a browsable collection, independent of discovery gestures. */
.match-app.garage-view .feed{overflow-y:auto;overflow-x:hidden;scroll-snap-type:none;box-shadow:none;border-radius:0;overscroll-behavior:contain;touch-action:pan-y}
.garage-collection{padding:6px 4px 18px}.garage-heading{display:flex;align-items:baseline;justify-content:space-between;padding:8px 5px 18px}.garage-heading h1{margin:0;font-size:27px;letter-spacing:-1px;font-weight:650}.garage-heading>span{font-size:11px;color:#75826d}
.garage-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.garage-card{position:relative;min-width:0;overflow:hidden;border-radius:21px;background:#26362d;box-shadow:0 5px 15px #22332212;border:1px solid #ffffff80}
.garage-open{display:block;width:100%;height:100%;border:0;padding:0;text-align:left;background:transparent;color:#f1f5e9}
.garage-photo{position:relative;aspect-ratio:1/1.1;overflow:hidden;background:#dce1d7}.garage-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.garage-open:hover .garage-photo img{transform:scale(1.04)}
.garage-photo:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#26362d)}.garage-photo>span{position:absolute;bottom:9px;left:12px;z-index:1;font-size:10px;color:#eef5e4}
.garage-info{padding:3px 12px 15px}.garage-info h2{font-size:17px;letter-spacing:-.5px;line-height:1.2;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.garage-info p{font-size:10px;color:#c1cbbb;margin:0 0 12px;line-height:1.6}.garage-info strong{display:block;font-size:18px;letter-spacing:-.6px;color:#e3f7c9}.garage-info small{display:block;font-size:8px;color:#b8c6b1;margin-top:4px}
.garage-remove{position:absolute;right:7px;top:7px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff60;background:#20342b75;backdrop-filter:blur(16px);color:#d5f78a}.garage-remove svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:1.4}
@media(max-width:360px){.garage-grid{gap:8px}.garage-info{padding-left:10px;padding-right:10px}.garage-info h2{font-size:15px}.garage-info strong{font-size:16px}}
@media(min-width:900px){.garage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Discovery controls float inside the card instead of consuming a header row. */
.match-app .match-main{position:relative;padding-top:0}
.match-app .match-header{position:absolute;top:12px;left:14px;right:14px;width:auto;height:44px;min-height:44px;max-width:none;margin:0;padding:0;z-index:8;pointer-events:none}
.match-app .match-header .logo,.match-app .match-header .filter-orb{pointer-events:auto}
.match-app .match-header .logo{color:#fff;text-shadow:0 1px 10px #07190d66;font-size:23px;gap:6px}
.match-app .match-header .logo>span:first-child{color:#e0ffc1;background:#19372845;border-color:#ffffff45;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.match-app .match-header .logo-dot{color:#fff}
.match-app .match-header .filter-orb{width:44px;height:44px;color:#fff;background:linear-gradient(145deg,#ffffff35,#ffffff12);border-color:#ffffff75;box-shadow:inset 0 1px 1px #ffffff70,0 3px 16px #14261a16}
.match-app .filter-orb svg circle{fill:#657568}
.match-app .visual:after{background:linear-gradient(180deg,#11231950,transparent 24%,transparent 60%,#25302c)}
.match-app.garage-view .match-header{position:relative;inset:auto;flex:0 0 48px;margin:0 10px;width:auto}
.match-app.garage-view .match-header .logo,.match-app.garage-view .match-header .logo-dot{color:#263b2d;text-shadow:none}
.match-app.garage-view .match-header .logo>span:first-child{color:#344b36;background:#ffffff65;border-color:#344b3626}
.match-app.garage-view .match-header .filter-orb{color:#344b36;background:#ffffff80}

.match-app #saved-car-dialog{width:min(620px,calc(100vw - 12px));max-width:none;height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:none;padding:0;border-radius:24px;background:#25302c;overflow:hidden}
.saved-car-content{height:100%;width:100%}
.match-app #saved-car-dialog .car{height:100%;margin:0}
.match-app #saved-car-dialog .saved-car-close{position:absolute;top:12px;right:12px;z-index:9;float:none;width:44px;height:44px;color:white;background:#213b2b60;border:1px solid #ffffff70;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

/* Reset bottom-sheet defaults for the full saved-car viewer. */
.match-app #saved-car-dialog{position:fixed;inset:0;margin:auto;outline:none;border:0;box-shadow:0 18px 80px #0004}
.match-app #saved-car-dialog:before{display:none;content:none}
.match-app #saved-car-dialog .saved-car-content{height:100%;min-height:0;overflow:hidden}
.match-app #saved-car-dialog .car{border:0;border-radius:inherit;box-shadow:none;min-height:0}
.match-app #saved-car-dialog .saved-car-content{border-radius:inherit}
.match-app #saved-car-dialog .visual{min-height:0}

/* The photo ends in crisp rectangular edges that read as a hard seam against
   the blurred backdrop, most noticeably on a phone. Fading its own edges lets
   it dissolve instead of stopping.
   A mask applies to the element box, and with object-fit:contain the picture
   fills only part of that box — so the box is first made to match the picture:
   the aspect ratio is set from the loaded image (4/3 covers most of the
   catalogue until then) and the element shrinks to fit. Browsers without
   mask-composite simply see no fade. */
.match-app .visual{display:grid;place-items:center;padding:0}
.match-app .visual img{
 /* Full card width; the height follows the picture's own ratio, and only a
    portrait shot ever hits the height limit and shrinks back. */
 width:100%;height:auto;max-height:100%;
 aspect-ratio:4/3;
 padding:0;
 /* Only the bottom edge is faded — that is the one that has to carry into the
    card body. The sides stay sharp: fading them dimmed the car itself. One
    gradient, so no mask-composite and nothing to fall back from. */
 -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent 100%);
 mask-image:linear-gradient(180deg,#000 calc(100% - 56px),transparent 100%);
}

/* The price now leads the card, so its rule sits under it rather than above. */
.match-app .car-body>.price-row{
 border-top:0;
 border-bottom:1px solid #ffffff26;
 padding-top:0;
 padding-bottom:12px;
 margin-bottom:13px;
}

/* Short screens compressed the old padding-top; the spacing moved to the
   bottom with the divider, so the compression follows it. */
@media(max-height:760px){
 .match-app .car-body>.price-row{padding-bottom:10px;margin-bottom:11px}
}
@media(min-height:481px) and (max-height:600px){
 .match-app .car-body>.price-row{padding-bottom:7px;margin-bottom:8px}
}

/* The price leads by size and precision rather than by a coloured capsule —
   a filled block reads as a sticker. A hairline in the accent colour runs
   beneath it, and only the currency mark is tinted. */
.match-app .price-inline{display:flex;align-items:baseline;column-gap:12px;row-gap:2px;flex-wrap:wrap}
.match-app .price{
 position:relative;
 display:inline-block;
 padding:0 0 9px;
 background:none;
 border-radius:0;
 box-shadow:none;
 color:#f4f8f0;
 font-size:34px;
 font-weight:640;
 letter-spacing:-1.4px;
 line-height:1;
 font-variant-numeric:tabular-nums;
}
.match-app .price:after{
 content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
 background:linear-gradient(90deg,#d5f78a,#d5f78a 62%,#d5f78a00);
}
.match-app .price i{
 font-style:normal;color:#cdee80;font-size:.62em;font-weight:600;
 margin-left:5px;letter-spacing:0;
}
.match-app .price-origin{color:#9fb0a0;font-size:10px;line-height:1.2}
@media(max-width:360px){.match-app .price{font-size:28px;letter-spacing:-1.1px}}
@media(min-height:481px) and (max-height:600px){.match-app .price{font-size:26px;padding-bottom:7px}}

/* Figures, not pills: value first and large, label quiet underneath, hairlines
   between. Reads in one pass instead of four separate objects. */
.match-app .spec-row{
 display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
 margin:15px 0 0;
}
.match-app .spec-row>div{
 position:relative;padding-left:13px;
}
.match-app .spec-row>div:first-child{padding-left:0}
.match-app .spec-row>div+div:before{
 content:'';position:absolute;left:0;top:3px;bottom:3px;width:1px;background:#ffffff1f;
}
.match-app .spec-row b{
 display:block;font-size:21px;font-weight:650;letter-spacing:-.6px;line-height:1.1;
 color:#f2f6ee;font-variant-numeric:tabular-nums;
}
.match-app .spec-row span{
 display:block;margin-top:3px;font-size:9px;letter-spacing:1.3px;
 text-transform:uppercase;color:#93a394;
}

/* The inspection is the thing these listings have that a phone snapshot on a
   classifieds site does not — a grade on a fixed scale and a measured report.
   Shown where the card has the height for it. */
/* Shown when the card actually has the room; seatDescription() decides and
   toggles `hidden`, because a viewport-height breakpoint cannot see how tall
   the photograph left the card. */
.match-app .inspection{
 display:flex;align-items:center;gap:13px;
 margin:17px 0 0;padding-top:15px;border-top:1px solid #ffffff1a;
}
.match-app .grade-scale{display:flex;gap:4px;flex:0 0 auto}
.match-app .grade-scale span{
 display:grid;place-items:center;width:25px;height:25px;border-radius:8px;
 font-size:12px;font-weight:650;line-height:1;
 color:#7d8d7e;background:#ffffff0a;border:1px solid #ffffff14;
}
.match-app .grade-scale span.on{
 color:#1b2a1c;background:#d5f78a;border-color:#d5f78a;
 box-shadow:0 4px 14px #d5f78a33;transform:scale(1.08);
}
.match-app .inspection p{margin:0;font-size:11px;line-height:1.45;color:#aebaad}
.match-app .inspection p span{
 display:block;font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:#7f8f80;
}
.match-app .inspection p b{color:#e8f6d4;font-weight:650}

@media(max-width:360px){
 .match-app .spec-row b{font-size:18px}
 .match-app .grade-scale span{width:22px;height:22px;font-size:11px}
}

/* Thumbnails along the foot of the viewer. Twenty-odd angles per car, so
   reaching the interior or the engine bay is one tap rather than a dozen. */
#photo-dialog img#photo-image{padding:64px 12px 126px}
#photo-thumbs{
 position:absolute;left:0;right:0;
 bottom:max(12px,env(safe-area-inset-bottom));
 display:flex;gap:7px;padding:2px 14px;
 overflow-x:auto;overscroll-behavior-x:contain;
 scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#photo-thumbs::-webkit-scrollbar{display:none}
#photo-thumbs .photo-thumb{
 flex:0 0 auto;width:56px;height:42px;padding:0;
 border:1px solid #ffffff26;border-radius:9px;overflow:hidden;
 background:#ffffff0f;opacity:.5;cursor:pointer;
 transition:opacity .2s ease,border-color .2s ease,transform .2s ease;
}
#photo-thumbs .photo-thumb img{width:100%;height:100%;padding:0;object-fit:cover;display:block}
#photo-thumbs .photo-thumb.on{
 opacity:1;border-color:#d5f78a;transform:translateY(-3px);
 box-shadow:0 5px 16px #00000059;
}
#photo-thumbs .photo-thumb:hover,#photo-thumbs .photo-thumb:focus-visible{opacity:1}
#photo-thumbs .photo-thumb:focus-visible{outline:2px solid #d5f78a;outline-offset:2px}
@media(max-height:520px){
 #photo-dialog img#photo-image{padding:52px 12px 96px}
 #photo-thumbs .photo-thumb{width:46px;height:35px}
}
@media(prefers-reduced-motion:reduce){#photo-thumbs .photo-thumb{transition:none}}

/* The foot of the viewer now stacks: thumbnails at the very bottom, caption
   and close button above them. These sit at the end of the file because the
   design moves both to the bottom edge further up, and this has to win. */
#photo-dialog{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
#photo-dialog #photo-caption{
 bottom:calc(max(12px,env(safe-area-inset-bottom)) + 64px);
 left:20px;right:82px;text-align:left;
}
.match-app #photo-dialog .close{
 top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 58px);
 right:max(18px,env(safe-area-inset-right));
}
@media(max-height:520px){
 #photo-dialog{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
 #photo-dialog #photo-caption{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 52px)}
 .match-app #photo-dialog .close{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 48px)}
}

/* Compact form, used when the card has room for the inspection but not for it
   at full size. Same information, tighter. */
.match-app .inspection.compact{margin-top:11px;padding-top:10px;gap:10px}
.match-app .inspection.compact .grade-scale span{width:21px;height:21px;font-size:10px;border-radius:7px}
.match-app .inspection.compact p{font-size:10px;line-height:1.35}
.match-app .inspection.compact p span{font-size:8px;letter-spacing:1.1px}