/* Presentation only. Scoped to established components; no canvas sizing. */
.tool-card:focus-visible,.data-tool-card:focus-visible,.guide-card:focus-visible{outline:2px solid #54dbab;outline-offset:4px}
.tool-card:is(:hover,:focus-visible) .tool-action{color:#fff}
.tool-card .tool-copy{min-height:112px}
@media(prefers-reduced-motion:reduce){.tool-card .tool-media img{transition:none}.tool-card:hover .tool-media img{transform:none}}
.bm-quiet-action,.bm-distance-preset{font:inherit;color:inherit;border:1px solid #466257;border-radius:6px;background:transparent;padding:8px 12px;cursor:pointer;min-height:38px}
.bm-quiet-action:hover,.bm-distance-preset:hover{background:#183128;border-color:#71b49a}
.bm-quiet-action:focus-visible,.bm-distance-preset:focus-visible{outline:2px solid #54dbab;outline-offset:3px}
.bm-distance-preset[aria-pressed=true]{background:#1b4938;border-color:#54dbab;color:#dcfff0}
.bm-distance-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.bm-quick-exit{margin-right:auto}
/* Rankings: preserve all metrics, expose secondary ones on demand. */
body:has(#rankings) .metric-strip{border:0;border-block:1px solid var(--line);background:none;margin-bottom:0}
body:has(#rankings) .metric{padding:12px 16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
body:has(#rankings) .metric strong{font-size:20px;line-height:1.3;margin:0}
body:has(#rankings) .metric small{font-size:11px}
body:has(#rankings) #rankings{margin-top:20px}
body:has(#rankings) #rankings .panel__header{min-height:72px;padding-block:16px}
#rankings .filters{align-items:end;flex-wrap:wrap}
#rankings .table-wrap{overflow:auto;max-height:72vh;scrollbar-gutter:stable}
#rankings thead th{position:sticky;top:0;z-index:2}
#rankings.bm-ui-ready:not(.bm-details-on) :is(th,td,col):is(:nth-child(4),:nth-child(5),:nth-child(7),:nth-child(8)){display:none}
#rankings.bm-ui-ready:not(.bm-details-on) .ranking-table{min-width:700px;table-layout:auto}
#rankings.bm-ui-ready:not(.bm-details-on) .ranking-col{width:auto}
.bm-distance-control label{display:flex;flex-direction:column;gap:10px}
.bm-explainer-head .bm-quick-exit{margin-left:auto;margin-right:10px;font-size:13px;white-space:nowrap}
#rankings .ranking-table td{font-variant-numeric:tabular-nums}
@media(max-width:760px){#rankingDetailToggle{display:none}body:has(#rankings) .metric{padding:10px 6px}body:has(#rankings) .metric small{display:none}}
/* Keep complete input controls within ordinary laptop-height screens. */
@media(min-width:1000px) and (max-height:850px){
 body:is(.mode-drop,.mode-mortar,.mode-zone):not(.has-analysis-image):not([data-input-mode=manual]){
  & .dropzone{padding:20px 26px}
  & .empty-onboarding{gap:8px}
  & .empty-title{font-size:32px}
  & .empty-flow{margin-top:14px;gap:20px}
  & .empty-actions{margin-top:12px;gap:8px}
  & .drop-step-heading{min-height:98px;padding-bottom:10px}
  & .drop-monitor-screen{max-height:142px}
  & .drop-step-heading h3{font-size:18px}
  & .drop-save-note{margin:0}
 }
 .bm-explainer .bm-explainer-body{padding-top:20px;padding-bottom:20px}
 .bm-explainer .bm-brief-title{margin-bottom:18px}
}
/* Comparison: give controls priority over framing and repeated metadata. */
body:has(#simulatorTitle) .page-intro{margin-bottom:22px;padding-top:24px}
body:has(#simulatorTitle) .page-intro .lead{max-width:760px}
body:has(#simulatorTitle) .simulator-head{padding-block:14px}
body:has(#simulatorTitle) .global-controls{padding-block:18px}
body:has(#simulatorTitle) .data-source-strip{padding-block:10px}
body:has(#simulatorTitle) .intro-data-note{color:#bdc9c3}
/* Guides: browse first, proof after the shortlist. */
body:has(.guide-featured) .guide-proof{margin-top:32px}
body:has(.guide-featured) .guide-proof-image{max-height:190px;object-fit:cover}
body:has(.guide-featured) .guide-section-head p{max-width:660px}
@media(prefers-reduced-motion:reduce){.bm-distance-preset,.bm-quiet-action{transition:none}}