/* Hybrid layout: stable typography with an adaptive workspace. */
@media (min-width:761px){
 html,body{min-width:0;overflow-x:hidden}
 body{--adaptive-panel:520px}
 .preview-note,.top,.top-nav{width:100%!important;min-width:0}
 .top{padding-left:max(28px,calc((100vw - 1280px)/2 + 28px))!important;padding-right:max(28px,calc((100vw - 1280px)/2 + 28px))!important}
 .top-nav>div,.app-shell{box-sizing:border-box;width:min(1280px,100%)!important;min-width:0;max-width:1280px!important}
 .top-nav>div{margin-left:auto!important;margin-right:auto!important}
 .app-shell{margin-left:max(0px,calc((100vw - 1280px)/2))!important;margin-right:0!important}
 .app-shell{container-type:inline-size}
 .app-shell #main{width:100%;min-width:0}
 .top,.top-nav,.preview-note,.app-shell{transition:width .36s cubic-bezier(.22,.72,.24,1),margin .36s cubic-bezier(.22,.72,.24,1),padding .36s cubic-bezier(.22,.72,.24,1),transform .36s cubic-bezier(.22,.72,.24,1)!important}
 .top-nav>div{transition:width .36s cubic-bezier(.22,.72,.24,1),padding .36s cubic-bezier(.22,.72,.24,1)!important}
 body.vehicle-panel-open .preview-note,
 body.vehicle-panel-open .top,
 body.vehicle-panel-open .top-nav{width:calc(100% - var(--adaptive-panel))!important;min-width:0;transform:none!important}
 body.vehicle-panel-open .app-shell{width:min(1280px,calc(100% - var(--adaptive-panel)))!important;min-width:0;max-width:1280px!important;margin-left:max(0px,calc((100vw - var(--adaptive-panel) - 1280px)/2))!important;margin-right:0!important;transform:none!important}
 body.vehicle-panel-open .top{padding-left:max(28px,calc((100vw - var(--adaptive-panel) - 1280px)/2 + 28px))!important;padding-right:max(28px,calc((100vw - var(--adaptive-panel) - 1280px)/2 + 28px))!important;transform:none!important}
 body.vehicle-panel-open .top-nav>div{width:min(1280px,100%)!important;min-width:0;max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;transform:none!important}
 body.vehicle-panel-open .top-nav{width:100%!important;transform:translateX(-260px)!important}
 body.vehicle-panel-open .top-nav>div{width:min(1280px,100vw)!important;min-width:0;max-width:1280px!important}
 .vehicle-panel-open .top-nav button{min-width:164px;flex:0 0 164px}
 .vehicle-panel-open .top-nav button>span+span{min-width:0;overflow:hidden}
 .vehicle-panel-open .top-nav strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .vehicle-panel-open .top-nav small{display:none!important}
 .vehicle-panel-open :is(.car-title,.car-brand-line,.price-row strong,.compare-toggle){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .vehicle-panel-open .showroom-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;padding-bottom:0}
 .vehicle-panel-open .showroom-toolbar .showroom-nav{flex:1 0 auto;width:auto;min-width:max-content;min-height:58px;overflow-x:auto;gap:20px}
 .vehicle-panel-open .showroom-toolbar .showroom-nav button{padding-top:15px;padding-bottom:15px}
 .vehicle-panel-open .showroom-conditions{flex:0 0 auto;width:auto;justify-content:flex-end;margin-left:auto;padding:7px 0}
 .vehicle-panel-open .showroom-conditions .quote-select{min-width:0}
 .vehicle-panel-open #saved-view .garage-hero{grid-template-columns:minmax(220px,.8fr) minmax(340px,1.2fr);gap:12px;padding:22px;overflow:hidden}
 .vehicle-panel-open #saved-view .garage-hero-copy{min-width:0;padding:4px 7px}
 .vehicle-panel-open #saved-view .garage-hero-copy h1,
 .vehicle-panel-open #saved-view .garage-hero-copy p{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .vehicle-panel-open #saved-view .garage-stats{width:100%;min-width:0}
 .vehicle-panel-open #saved-view .garage-stats button{min-width:0}
 .vehicle-panel-open #saved-view .garage-condition{grid-column:1/-1;width:100%;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
 .vehicle-panel-open #saved-view .garage-condition strong{width:auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .vehicle-panel-open #saved-view .garage-panel-heading>div{min-width:0}
 .vehicle-panel-open #saved-view .garage-panel-heading h2,
 .vehicle-panel-open #saved-view .garage-panel-heading p{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #saved-view,.garage-hero,.garage-panels{transition:width .36s cubic-bezier(.22,.72,.24,1),margin .36s cubic-bezier(.22,.72,.24,1),padding .36s cubic-bezier(.22,.72,.24,1),gap .36s cubic-bezier(.22,.72,.24,1),transform .36s cubic-bezier(.22,.72,.24,1);will-change:width,margin,transform}
 .vehicle-panel-open #saved-view .garage-recent-grid{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr!important;overflow:visible;margin:0;padding:2px 0 12px}
 .vehicle-panel-open #saved-view :is(#saved-cars,#recent-cars) .car-card{width:100%;min-width:0}
 .vehicle-panel-open #garage-compare-panel .comparison-grid{display:grid;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(230px,250px);gap:12px;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:3px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin}
 .vehicle-panel-open #garage-compare-panel .compare-column{width:auto;min-width:0;scroll-snap-align:start}
 .vehicle-panel-open #garage-compare-panel :is(.compare-identity h2,.compare-prices strong,.compare-column dd){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #detail-dialog.config-dialog{position:fixed!important;inset:0 0 0 auto!important;width:var(--adaptive-panel)!important;min-width:var(--adaptive-panel);max-width:var(--adaptive-panel)!important;height:100dvh;transform:none}
}
@container (min-width:900px){
 .vehicle-panel-open #saved-view .garage-hero{grid-template-columns:minmax(220px,.85fr) minmax(350px,1.15fr) minmax(220px,.72fr)}
 .vehicle-panel-open #saved-view .garage-condition{grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;gap:0}
}
/* When the drawer sits entirely outside the centered 1280px workspace, keep that workspace still. */
@media (min-width:2320px){
 body.vehicle-panel-open .preview-note,
 body.vehicle-panel-open .top,
 body.vehicle-panel-open .top-nav{width:100%!important;transform:none!important}
 body.vehicle-panel-open .top{padding-left:max(28px,calc((100vw - 1280px)/2 + 28px))!important;padding-right:max(28px,calc((100vw - 1280px)/2 + 28px))!important}
 body.vehicle-panel-open .top-nav>div{width:min(1280px,100%)!important;margin-left:auto!important;margin-right:auto!important}
 body.vehicle-panel-open .app-shell{width:min(1280px,100%)!important;margin-left:max(0px,calc((100vw - 1280px)/2))!important;margin-right:0!important;transform:none!important}
 body.vehicle-panel-open .explore-hero-inner{grid-template-columns:1fr 1fr}
 body.vehicle-panel-open .explore-hero-cars{position:relative;right:auto;top:auto;width:auto;visibility:visible;opacity:1;transition:opacity 380ms cubic-bezier(.22,.74,.22,1),visibility 0s}
 body.vehicle-panel-open .showroom-toolbar{display:flex;align-items:center;gap:24px;min-height:66px;padding-bottom:0}
 body.vehicle-panel-open .showroom-toolbar .showroom-nav{width:auto;min-height:66px;gap:24px;overflow-x:auto}
 body.vehicle-panel-open .showroom-toolbar .showroom-nav button{padding:18px 2px}
 body.vehicle-panel-open .showroom-conditions{width:auto;justify-content:flex-start;padding:10px 0}
 body.vehicle-panel-open #saved-view .garage-recent-grid{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(270px,310px);overflow-x:auto;margin:0;padding:2px 2px 13px}
}
/* Compact PC: spacing and columns adapt, typography remains stable. */
@media (min-width:761px) and (max-width:1279px){
 .top{padding-left:24px!important;padding-right:24px!important}
 .top-nav>div{padding-left:16px;padding-right:16px}
 .app-shell #main{padding-left:22px;padding-right:22px}
 .vehicle-panel-open .showroom-grid,
 .vehicle-panel-open #home-cars,
 .vehicle-panel-open #home-recent-cars,
 .vehicle-panel-open .garage-saved-grid{grid-template-columns:1fr!important}
 .vehicle-panel-open .explore-hero-cars{display:none}
 .vehicle-panel-open .explore-hero-inner{grid-template-columns:1fr}
 body.vehicle-panel-open .top-nav{transform:translateX(-260px)!important}
}
/* Tablet-sized desktop window: compact drawer plus a single usable workspace column. */
@media (min-width:761px) and (max-width:960px){
 body{--adaptive-panel:440px}
 .top .official-logo{width:180px}
 .top-nav button{padding-left:6px;padding-right:6px}
 .showroom-grid,#home-cars,#home-recent-cars,.garage-saved-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .vehicle-panel-open .showroom-grid,
 .vehicle-panel-open #home-cars,
 .vehicle-panel-open #home-recent-cars,
 .vehicle-panel-open .garage-saved-grid{grid-template-columns:1fr!important}
 .vehicle-panel-open .top .platform{display:none!important}
 .vehicle-panel-open .showroom-conditions .quote-select{flex:1}
 .vehicle-panel-open .showroom-conditions summary{justify-content:center}
 #detail-dialog .config-picker.open .config-picker-menu,.config-options-sheet:not([hidden]){width:var(--adaptive-panel)}
 body.vehicle-panel-open .top-nav{transform:translateX(-40px)!important}
}
@media (max-width:760px){
 html,body{min-width:0;max-width:100%;overflow-x:hidden}
 .app-shell{width:auto!important;min-width:0;max-width:none!important}
 #detail-dialog.config-dialog{width:100%!important;min-width:0;max-width:100%!important}
}
@media (prefers-reduced-motion:reduce){
 .top,.top-nav,.preview-note,.app-shell,.top-nav>div{transition:none!important}
}