/* Compact working surface, with navigation that fits the available height. */
:root{--rail-width:82px}
.shell{min-width:0}
#sidebar{padding:10px 6px max(10px,env(safe-area-inset-bottom));gap:6px}
.side-brand{flex:none;min-height:44px;margin-bottom:4px}
.side-brand img{width:32px;height:32px}
#shopping-nav{overflow:visible;gap:4px}
#shopping-nav button,.side-bottom a{min-height:0;height:clamp(32px,calc((100dvh - 100px)/9),58px);padding:5px 2px;gap:4px;font-size:.75rem;line-height:1.2;border-radius:9px}
#shopping-nav svg,.side-bottom svg{width:20px;height:20px}
.side-bottom{gap:3px;margin-top:auto;padding-top:6px}
.side-bottom a{height:clamp(32px,calc((100dvh - 100px)/9),50px)}
.topbar{height:52px;padding:0 18px;gap:10px}
.topbar-brand{display:flex;align-items:center;gap:7px;flex:none;min-width:0;color:var(--ink);font:700 1rem/1.2 Manrope,sans-serif;letter-spacing:-.3px;text-decoration:none;white-space:nowrap}
.topbar-brand img{display:none;flex:none}
.topbar-brand .brand-app{color:var(--accent)}
.topbar-actions{gap:8px}
.account-avatar{width:30px;height:30px}
.account-button{font-size:.8125rem;gap:7px}
#main{padding:16px 18px max(18px,env(safe-area-inset-bottom))}
.heading{gap:12px;margin-bottom:14px;flex-wrap:wrap}
h1{font-size:1.375rem;letter-spacing:-.4px;overflow-wrap:anywhere}
.heading-actions{gap:8px}
.heading-actions button{font-size:.8125rem;min-height:36px;padding:8px 11px}
.heading-actions svg{width:18px;height:18px}
.shopping-surface{grid-template-columns:164px minmax(0,1fr);min-height:330px;border-radius:12px}
.list-panel{padding:15px 9px}
.list-panel h2{margin:0 7px 10px;font-size:.8125rem}
.list-nav button{padding:8px 7px;gap:7px;font-size:.8125rem;min-height:36px}
.list-count{font-size:.75rem}
.surface-path{min-height:42px;padding:10px 14px;gap:7px;font-size:.75rem;flex-wrap:wrap}
.toolbar{padding:10px 12px;gap:10px;flex-wrap:wrap}
.search-field{flex:1 1 180px;border-radius:8px;padding:0 10px}
.search-field input{min-height:36px;font-size:.875rem;padding:8px 0}
.toolbar select{width:166px;max-width:100%;font-size:.8125rem;min-height:36px;padding:8px}
.surface-content{padding:12px}
.grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));align-items:start}
.card{padding:13px;border-radius:11px;gap:0}
.card h2{font-size:.9375rem;line-height:1.35;margin:8px 0 3px;letter-spacing:-.2px}
.card p{font-size:.8125rem;line-height:1.4;margin:4px 0}
.card .price{font-size:1.25rem;line-height:1.3;margin:7px 0 9px}
.badge{font-size:.75rem;line-height:1.3;padding:3px 6px}
.card img{height:96px;margin-bottom:10px;border-radius:7px}
.card:has(img){display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 10px;align-items:start}
.card:has(img)>img{grid-column:1;grid-row:1/4;width:64px;height:64px;margin:0}
.card:has(img)>.badge,.card:has(img)>h2,.card:has(img)>.muted{grid-column:2;margin:0;justify-self:start}
.card:has(img)>:not(img):not(.badge):not(h2):not(.muted){grid-column:1/-1}
.actions{gap:6px;max-width:100%}
.card .actions{margin-top:6px;padding-top:7px;font-size:.75rem}
.card .actions button{font-size:.75rem;min-height:32px;padding:6px 8px;border-radius:8px}
.card .actions a{padding:5px 0;font-size:.75rem;overflow-wrap:anywhere}
.price-summary{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;font-size:.75rem;margin:0 0 9px}
.price-movement{display:inline-flex;align-items:baseline;gap:4px;line-height:1.3;font-weight:600}
.price-movement>span[aria-hidden]{flex:none}
.price-summary .price-rise,.offer-card .price-rise{color:var(--accent)}
.price-summary .price-drop,.offer-card .price-drop{color:#28734b}
.offer-card .price-movement{font-size:.8125rem;margin-top:6px}
.price-summary button{min-height:32px;padding:6px 8px;font-size:.75rem;border-radius:8px}
.price-summary button{flex:1 0 100%}
.surface-status{padding:9px 12px;font-size:.75rem;flex-wrap:wrap}
.empty{padding:40px 18px}
.empty h2{font-size:1.0625rem}
.price-alerts{padding:12px 14px;margin-bottom:12px;border-radius:10px}
.price-alerts h2{font-size:.875rem}
.price-alerts p{margin-top:6px}
.alert-item{padding:6px 9px;min-height:34px;font-size:.8125rem}
.price-alerts .offer-heading button{padding:6px 9px;min-height:34px;font-size:.75rem}
dialog{width:min(600px,calc(100vw - 24px));padding:20px;max-height:calc(100dvh - 24px);overflow-x:hidden}
.modal-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.modal-bar h2{margin:0;align-self:center;overflow-wrap:anywhere}
.modal-close{display:grid;place-items:center;flex:none;width:36px;height:36px;min-height:36px;padding:8px;border:0;background:transparent}
.modal-close svg{width:20px;height:20px}
.modal-body{min-width:0}
dialog h2{font-size:1.125rem}
dialog h3{font-size:.9375rem}
dialog p{font-size:.8125rem;line-height:1.5}
dialog label{font-size:.8125rem;gap:5px;margin:9px 0}
dialog input,dialog select,dialog textarea{font-size:.875rem;padding:9px;min-height:36px}
dialog button{font-size:.8125rem;padding:8px 10px;min-height:36px}
dialog textarea{min-height:70px}
.two{gap:10px}
.offer-section{margin:16px 0;padding:14px 0}
.offer-editor{margin:12px 0;padding:10px 12px}
.offer-editor legend{font-size:.8125rem}
.offer-list{gap:10px;margin:14px 0}
.offer-card{padding:12px}
.offer-heading h3{font-size:.9375rem}
.offer-heading strong{font-size:1.125rem}
.watch-choice input{min-height:18px;padding:0}
td,th{padding:10px;font-size:.8125rem}
th{font-size:.75rem}
#notice:empty{display:none}
#notice{position:fixed;z-index:45;inset:auto 18px max(18px,env(safe-area-inset-bottom)) auto;width:max-content;max-width:min(420px,calc(100vw - 36px));margin:0;padding:11px 14px;font-size:.875rem;line-height:1.45;border:1px solid #eecdd2;box-shadow:0 5px 24px #27313f20}
.dialog-notice{font-size:.875rem;padding:9px 11px}
@media(max-width:1180px){.shopping-surface{grid-template-columns:148px minmax(0,1fr)}#main{padding:14px}.card{padding:12px}}
@media(max-width:980px){.shopping-surface{grid-template-columns:minmax(0,1fr)}.list-panel{display:none}}
@media(max-width:760px),(max-height:420px){
 :root{--rail-width:0px}.shell{display:block}
 .topbar{height:52px;padding:0 8px;gap:5px}.topbar-actions{gap:3px}
 .topbar-brand{flex:1;font-size:.875rem;min-height:44px}
 .topbar-brand img{display:block;width:24px;height:24px}
 .account-button>span:not(.account-avatar){display:none}.account-button{padding:5px}.quiet{font-size:.75rem;padding:6px}
 #sidebar{gap:6px;padding:10px 10px max(10px,env(safe-area-inset-bottom))}
 #sidebar .side-brand{min-height:44px;margin:0 0 6px;padding:0 42px 0 4px}
 #menu-close{top:10px;right:8px}
 #shopping-nav{gap:4px}
 #shopping-nav button,.side-bottom a{height:clamp(36px,calc((100dvh - 110px)/9),44px);min-height:0;padding:7px 10px;gap:10px;font-size:.875rem;line-height:1.25}
 .side-bottom{margin-top:auto;padding-top:6px}
 #main{padding:12px 10px max(16px,env(safe-area-inset-bottom))}
 .heading{gap:10px;margin-bottom:12px}h1{font-size:1.25rem}
 .heading-actions button{min-height:38px;font-size:.8125rem;padding:8px 10px}
 .shopping-surface{display:block;min-height:280px}
 .surface-path{min-height:38px;padding:8px 10px}
 .toolbar{padding:10px;gap:8px}.toolbar select{font-size:.875rem;min-height:40px}
 .search-field input{font-size:1rem;min-height:40px}
 .surface-content{padding:10px}.card img{height:88px}
 .card .actions button,.price-summary button{min-height:38px}
 .surface-status{padding:8px 10px}.surface-status>span:last-child{display:none}
 .two{grid-template-columns:minmax(0,1fr)}
 dialog input,dialog select,dialog textarea{font-size:1rem;min-height:40px}
 dialog button{min-height:40px}.watch-choice input{min-height:18px}
 .offer-card{padding:11px}.offer-editor{padding:8px 10px}
 #notice{inset:auto 10px max(10px,env(safe-area-inset-bottom)) auto;max-width:calc(100vw - 20px)}
}
@media(max-width:460px){.topbar-brand .brand-name{display:flex;flex-direction:column;gap:1px;font-size:.8125rem;line-height:1.1}.heading-actions{width:100%}.heading-actions #add{flex:1}.search-field{flex-basis:100%}.toolbar select{width:100%;max-width:100%}.price-alerts{padding:10px}.offer-heading{gap:8px}}
@media(max-height:420px){
 #sidebar .side-brand{min-height:36px;margin-bottom:2px}
 #sidebar .side-brand img{width:28px;height:28px}
 #shopping-nav,.side-bottom{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;flex:none}
 #shopping-nav button,.side-bottom a{height:36px;padding:5px 7px;gap:7px;font-size:.8125rem}
 #shopping-nav svg,.side-bottom svg{width:18px;height:18px}
 .side-bottom{margin-top:auto;padding-top:6px}
 .topbar{height:46px}#main{padding-top:10px}.card img{height:72px}
}

/* Touch devices also use the full-screen dialog in wide landscape. */
@media(max-width:760px),(max-height:420px),(hover:none) and (pointer:coarse) and (max-width:1024px){
 body:has(dialog[open]){overflow:hidden}
 dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 dialog .modal-bar{position:sticky;top:0;z-index:2;align-items:center;margin:0;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--border);background:var(--paper)}
 dialog .modal-bar h2{font-size:1.0625rem;line-height:1.35}
 dialog .modal-close{width:44px;height:44px;min-height:44px;padding:12px}
 dialog .modal-body{padding:16px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));overflow-wrap:anywhere}
 dialog input,dialog select,dialog textarea{font-size:1rem;min-height:40px}
}