/* The shell owns window height; the visual stage consumes only the remaining space. */
html, body { height: 100%; margin: 0; }
.site-shell {
  height: 100dvh;
  min-height: 0;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) minmax(15rem, 19rem);
  grid-template-rows: minmax(0, 1fr) 2.5rem;
  overflow: hidden;
}

.intro, .instrument, .metadata { min-height: 0; min-width: 0; }
.intro { padding: 1.25rem; gap: 1.5rem; overflow: auto; }
.intro h1 { font-size: 1.7rem; }
.side-nav { gap: 1rem; }
.instrument {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 1.25rem 1.5rem 0;
  overflow: hidden;
}
.activity-hero { gap: 0.2rem; padding-bottom: 0.75rem; }
.activity-hero h2 { margin-top: 0.25rem; font-size: 3rem; line-height: 1; }
.activity-hero p:first-of-type { font-size: 1.5rem; }
.activity-hero p:last-of-type { font-size: 1rem; }
.visual-wrap {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  margin: 0.75rem 0 0;
  padding: 0;
  overflow: hidden;
}
.visual-wrap .visual-frame,
.visual-wrap:is([data-mode="sailing"], [data-mode="cycling"]) .visual-frame {
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}
.visual-frame .park-map { min-height: 0; }
.visual-metrics { min-height: 3rem; }
.visual-metrics > div { padding: 0.4rem 0; }
.visual-wrap figcaption { display: block; padding: 0.5rem 0 0.75rem; }
.visual-wrap figcaption > div > span { margin-bottom: 0.25rem; font-size: 0.65rem; }
.visual-wrap figcaption p { font-size: 0.95rem; line-height: 1.2; max-width: none; }
.visual-wrap .legend { display: none; }
.metadata { padding: 1.25rem; gap: 1rem; overflow: auto; }
.global-meta, .activity-meta, .detail-card, .trace-controls { padding-bottom: 0.75rem; }
.global-meta { gap: 0.55rem; }
.global-meta div, .activity-meta div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
.global-meta span, .activity-meta span { font-size: 0.65rem; }
.global-meta strong, .activity-meta strong { font-size: 0.75rem; }
.detail-card p { font-size: 1rem; }
.site-footer { min-height: 0; padding: 0 1.25rem; gap: 1rem; font-size: 0.65rem; }
.site-footer span { width: 1.5rem; height: 1.5rem; }

@media (max-height: 700px) {
  .activity-hero h2 { font-size: 2rem; }
  .activity-hero p:first-of-type { font-size: 1.2rem; }
  .intro { gap: 0.75rem; }
  .intro .positioning { font-size: 0.8rem; }
  .side-nav { gap: 0.7rem; }
  .visual-wrap figcaption { display: none; }
}

@media (max-width: 980px) {
  .site-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 2rem; padding: 0; }
  .intro { display: none; }
  .instrument { grid-template-rows: auto auto minmax(0, 1fr) auto; padding: 0 0.75rem; }
  .mobile-nav { position: static; padding: 0.6rem 0; gap: 0.25rem; grid-template-columns: 1fr repeat(6, minmax(0, 1fr)) 1.75rem; overflow: visible; }
  .mobile-nav strong { font-size: 0.75rem; }
  .mobile-mode-button { font-size: 0.65rem; padding: 0.6rem 0; }
  .menu-button { width: 1.5rem; padding: 0.5rem 0; }
  .activity-hero { padding: 0.5rem 0; }
  .activity-hero h2 { font-size: 2rem; }
  .activity-hero p:first-of-type { font-size: 1.2rem; }
  .activity-hero p:last-of-type { font-size: 0.75rem; }
  .activity-index { display: none; }
  .visual-wrap { margin: 0; }
  .visual-wrap figcaption { display: none; }
  .instrument > .trace-controls { order: initial; margin: 0; padding: 0.4rem 0; border: 0; }
  .trace-controls button { min-height: 2rem; }
  .metadata {
    position: absolute;
    z-index: 40;
    inset: 3.4rem 0 2rem;
    background: var(--paper);
    padding: 1rem;
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .global-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-meta { grid-template-columns: 1fr; }
  .global-meta div, .activity-meta div { display: grid; }
  .global-meta strong, .activity-meta strong { margin: 0; text-align: right; color: var(--ink); }
  .site-footer { padding: 0 0.75rem; }
}

@media (max-width: 980px) and (max-height: 500px) {
  .activity-hero { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 1rem; padding: 0.25rem 0; }
  .activity-hero h2 { font-size: 1.4rem; }
  .activity-hero p:last-of-type { display: none; }
  .mobile-nav { padding: 0.2rem 0; }
}

@media (max-width: 560px) {
  .mobile-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-nav strong { grid-column: 1 / 3; grid-row: 1; }
  .mobile-nav .menu-button { grid-column: 3; grid-row: 1; justify-self: end; }
  .mobile-mode-button { font-size: 0.7rem; }
  .mobile-mode-button:nth-of-type(-n+3) { grid-row: 2; }
  .mobile-mode-button:nth-of-type(n+4) { grid-row: 3; }
  .metadata { top: 8rem; }
}