/* Keep the shared comparison and model-specific controls in separate flow rows.
   This file intentionally loads last: legacy dock rules use flex and absolute
   drawers, which must not place a second control surface over the comparison. */
.gap-active .viewport-dock,
.gap-active .viewport-dock:has(#simple-view-options[open]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
}
.gap-active .viewport-dock > * { min-width: 0; }
.gap-active #simple-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 6px;
}
.gap-active #simple-comparison button {
  min-width: 0;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.gap-active #gap-view-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
.gap-active .gap-view-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 5px;
}
.gap-active #gap-view-controls button,
.gap-active #gap-view-controls select {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.gap-active .gap-view-choices select { grid-column: 1 / -1; width: 100%; }
.gap-active .gap-settings {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 8px;
}
.gap-active .gap-settings > summary {
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
}
.gap-active .gap-settings[open] {
  max-height: min(220px, 30dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gap-active .gap-native-layers label { min-height: 44px; min-width: 0; overflow-wrap: anywhere; }
.gap-active .gap-settings > label { min-width: 0; flex-wrap: wrap; }
.gap-active .gap-settings input[type=range] { min-width: 0; min-height: 44px; max-width: 100%; flex: 1; }
/* Body-only controls must not survive a switch to an isolated injury model. */
.gap-active #body-fit, .gap-active #body-muscle-notice { display: none; }
/* Patellar grades supplement, rather than replace, the two primary states. */
.viewport-dock:has(#simple-patella-grades:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 6px;
}
.viewport-dock:has(#simple-patella-grades:not([hidden])) #simple-comparison {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}
.viewport-dock:has(#simple-patella-grades:not([hidden])) #simple-comparison button { min-width: 0; }
.viewport-dock:has(#simple-patella-grades:not([hidden])) #simple-patella-grades { min-width: 0; }
.viewport-dock:has(#simple-patella-grades:not([hidden])) #simple-view-options > summary { width: 100%; }
.viewport-dock:has(#simple-patella-grades:not([hidden])) #simple-patella-grades button {
  min-width: 0;
  min-height: 44px;
}
@media (max-width: 850px) {
  .gap-active .viewport-dock { left: 7px; right: 7px; bottom: calc(38px + env(safe-area-inset-bottom, 0px)); }
  .gap-active #gap-view-controls { grid-template-columns: minmax(0, 1fr) 64px; }
  .gap-active #gap-view-controls button { font-size: 11px; padding: 6px 4px; }
  .gap-active .scene-heading { left: 12px; right: 12px; top: 14px; gap: 8px; }
  .gap-active #state-pill { margin-top: 0; padding: 4px 6px; font-size: 10px; letter-spacing: 0; }
  .gap-active #view-name { font-size: 11px; }
  .gap-active .simple-return { top: 62px; left: 12px; min-height: 44px; }
}

/* CRPS uses a descriptive reset label: keep it on its own readable row. */
@media (max-width: 850px) {
  .gap-active #gap-view-controls[data-crps="true"] { grid-template-columns: minmax(0, 1fr); }
  .gap-active #gap-view-controls[data-crps="true"] > button {
    width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* High-arch comparison has a descriptive reset label; keep a readable full-width row. */
@media (max-width: 850px) {
  .gap-active #gap-view-controls[data-high-arch="true"] { grid-template-columns: minmax(0, 1fr); }
  .gap-active #gap-view-controls[data-high-arch="true"] > button {
    width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }
}