/* The transparent native dialog owns focus; its surface owns the scrolling content. */
html:has(dialog.modal-dialog[open]){overflow:hidden;scrollbar-gutter:stable}
:is(#match-dialog,#compare-dialog,#checkout-dialog).modal-dialog{--modal-room:calc(100dvh - 112px);width:min(1180px,calc(100vw - 128px));max-width:none;max-height:var(--modal-room);padding:0;margin:auto;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;scroll-padding:0}
:is(#match-dialog,#compare-dialog,#checkout-dialog).modal-dialog[open]{display:block}
dialog.modal-dialog::backdrop{background:#060c16b3;backdrop-filter:blur(5px)}
dialog.modal-dialog>.modal-surface{min-width:0;max-height:var(--modal-room);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 24px 100px #0006;padding:28px}
dialog.modal-dialog>.modal-close{position:absolute;inset:-48px 0 auto auto;display:grid;place-items:center;float:none;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:#f5f8fa;box-shadow:none;cursor:pointer;z-index:5;opacity:.8;transition:opacity .15s ease,transform .15s ease}
dialog.modal-dialog>.modal-close svg{width:25px;height:25px;pointer-events:none}
dialog.modal-dialog>.modal-close:hover{background:transparent;color:#fff;opacity:1;transform:scale(1.06)}
dialog.modal-dialog>.modal-close:focus-visible{outline:2px solid #a6eee0;outline-offset:-3px;opacity:1}
#match-dialog.modal-dialog{width:min(1440px,calc(100vw - 128px));height:min(1000px,var(--modal-room))}
#match-dialog.modal-dialog>.modal-surface{height:100%;display:flex;flex-direction:column;overflow:hidden;scrollbar-gutter:auto;padding:0;background:var(--bg)}
#checkout-dialog.modal-dialog{width:min(470px,calc(100vw - 32px))}
#checkout-dialog .modal-surface>p{font-size:13px;line-height:1.8;color:var(--muted)}
#checkout-dialog h2{margin-top:20px}
#compare-dialog .modal-surface>.eyebrow,#checkout-dialog .modal-surface>.eyebrow{margin-top:0}
dialog.modal-dialog [data-modal-initial]{width:fit-content;max-width:100%}
dialog.modal-dialog [data-modal-initial]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
#compare-title{font-size:24px;line-height:1.3;margin:8px 0 16px}
@media(min-width:2000px){#match-dialog.modal-dialog{width:min(1680px,calc(100vw - 128px));height:min(1180px,var(--modal-room))}}
@media(max-width:1050px){:is(#match-dialog,#compare-dialog).modal-dialog{width:calc(100vw - 48px)}}
@media(max-width:700px){
 :is(#match-dialog,#compare-dialog,#checkout-dialog).modal-dialog{--modal-room:calc(100dvh - 88px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));width:calc(100vw - 24px);max-width:470px;margin:max(60px,calc(env(safe-area-inset-top,0px) + 52px)) auto 16px}
 :is(#match-dialog,#compare-dialog).modal-dialog{max-width:none}
 dialog.modal-dialog>.modal-surface{padding:20px 16px;border-radius:10px;scrollbar-gutter:auto}
 #match-dialog.modal-dialog{height:var(--modal-room)}
 #match-dialog .match-shell-head{padding:16px}
 #compare-dialog .compare-headings{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 #compare-dialog .compare-headings article{min-width:0}
 #checkout-dialog h2{font-size:26px}
 #checkout-dialog input[type=email]{font-size:16px;min-width:0}
}
@media(prefers-reduced-motion:reduce){dialog.modal-dialog>.modal-close{transition:none}dialog.modal-dialog>.modal-close:hover{transform:none}}
/* Landscape phones and zoomed windows need one usable scroll surface, not a tiny inner pane. */
@media(max-height:600px){
 #match-dialog.modal-dialog{--modal-room:calc(100dvh - 76px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));margin:max(52px,calc(env(safe-area-inset-top,0px) + 52px)) auto 12px}
 #match-dialog.modal-dialog>.modal-surface{display:block;overflow:auto;scrollbar-gutter:stable}
 #match-dialog .match-shell-head{padding:14px 20px;gap:16px}
 #match-dialog .match-shell-title .eyebrow{display:none}
 #match-dialog #match-content{display:block;overflow:visible}
 #match-dialog .match-tabs{position:sticky;top:0;z-index:3;padding-inline:20px}
 #match-dialog .match-tabs button{min-height:44px}
 #match-dialog #match-body{overflow:visible;scrollbar-gutter:auto;padding:18px 20px}
}
@media(forced-colors:active){
 dialog.modal-dialog::backdrop{background:Canvas;opacity:.85}
 dialog.modal-dialog>.modal-surface{border-color:CanvasText}
 dialog.modal-dialog>.modal-close{color:CanvasText;opacity:1}
 dialog.modal-dialog>.modal-close:focus-visible{outline-color:Highlight}
}