/* Visitor page layout: compact "Training type" block + (on PC) a pinned map with a scrolling results list.
   Loaded after app.css. Only index.html uses it. */

/* ---------- compact Training type block (all screen sizes) ---------- */
.section-block{margin-bottom:20px}
.section-heading{margin-bottom:12px}
.section-heading h2{font-size:19px}
.type-card{min-height:68px;padding:12px 14px;gap:11px}
.type-icon{width:38px;height:38px;font-size:19px;border-radius:11px}
.type-card small{margin-top:3px}

/* ---------- PC, tall enough: everything visible, only the exercise list scrolls ---------- */
@media (min-width:1051px) and (min-height:700px){
  body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  .topbar{flex:none;height:64px}
  .page-shell{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;padding:14px clamp(18px,3vw,40px) 4px}
  .section-block{flex:none;margin-bottom:14px}
  .explorer-layout{flex:1 1 auto;min-height:0;align-items:stretch;gap:18px}

  /* left: map panel stays put */
  .map-panel{display:flex;flex-direction:column;min-height:0;padding:16px 18px;overflow:hidden}
  .map-panel .panel-heading{flex:none;margin-bottom:6px}
  .map-panel>.muted.small{display:none;flex:none;margin:0 0 4px}
  .body-map{position:relative;flex:1 1 0;min-height:0;width:100%;max-width:none;margin:4px 0 8px;display:block}
  .body-map svg{position:absolute;inset:0;width:100%;height:100%;max-height:none} /* figure scales to the space available */
  .muscle-chips{flex:none;max-height:104px;overflow-y:auto;padding-top:10px;gap:6px;scrollbar-width:thin;scrollbar-color:#3a4b60 transparent}
  .muscle-chip{padding:6px 10px}

  /* right: toolbar + filters stay, the list scrolls */
  .results-panel{display:flex;flex-direction:column;min-height:0}
  .results-toolbar{flex:none;padding:14px 20px;margin-bottom:12px}
  .filters{flex:none;padding:12px;margin-bottom:12px}
  #exercise-results{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;grid-auto-rows:max-content;/* keep cards at natural height and scroll, never squeeze */padding:2px 8px 12px 2px;scrollbar-width:thin;scrollbar-color:#3a4b60 transparent}
  .footer{flex:none;margin-top:6px;padding:8px 0}
}
/* shorter laptop screens (700-799px high): spend less height on labels so the figure stays big */
@media (min-width:1051px) and (min-height:700px) and (max-height:799px){
  .topbar{height:58px}
  .section-heading .eyebrow,.map-panel .eyebrow,.results-toolbar .eyebrow{display:none}
  .section-heading{margin-bottom:8px}
  .type-card{min-height:58px;padding:9px 13px}
  .type-icon{width:34px;height:34px;font-size:17px}
  .section-block{margin-bottom:10px}
  .map-panel{padding:12px 16px}
  .results-toolbar{padding:10px 18px}
}
/* roomy screens: show the hint text again */
@media (min-width:1051px) and (min-height:860px){ .map-panel>.muted.small{display:block} }

/* ---------- PC but short window: page scrolls, the map panel stays in view ---------- */
@media (min-width:1051px) and (max-height:699px){
  .map-panel{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
}