/* Constrain inner scrolling to the available screen, keeping primary actions reachable. */
#compare,#save{display:flex;flex-direction:column}
#comparison,#final-plan{flex:1;min-height:0}
#comparison{display:flex;flex-direction:column}
.page-heading{flex:none}
.compare-grid{height:auto;flex:1;min-height:0}
.below-compare{flex:none;min-height:38px}
.compare-bike{flex:none;height:clamp(150px,22vh,245px)}
.card-actions{position:sticky;bottom:0;background:var(--bg);z-index:2}
.final-grid{height:100%}
.comparison-mode{height:100%}
.price-extra{font-size:12px;font-weight:400;line-height:1.6;color:var(--green);vertical-align:middle;letter-spacing:0}
.total-row strong{text-align:right}
/* Modal dialogs occupy the browser top layer, above the decorative cycling cursor. */
body:has(dialog[open]),body:has(dialog[open]) dialog,body:has(dialog[open]) dialog *{cursor:default}
body:has(dialog[open]) dialog button,body:has(dialog[open]) dialog a,body:has(dialog[open]) dialog summary,body:has(dialog[open]) dialog select,body:has(dialog[open]) dialog label{cursor:pointer}
body:has(dialog[open]) dialog input,body:has(dialog[open]) dialog textarea{cursor:text}
body:has(dialog[open]) dialog input[type=radio],body:has(dialog[open]) dialog input[type=checkbox]{cursor:pointer}
body:has(dialog[open]) dialog::backdrop{cursor:default}
body:has(dialog[open]) #cyclist{display:none}
@media(max-width:999px){#comparison,#final-plan{flex:initial;min-height:initial}.compare-grid{display:block}.card-actions{position:static}.comparison-mode{height:auto}.final-grid{height:auto}.compare-bike{height:280px}}