/* Force Modelling opt-in outputs: the Extra outputs checkboxes and the
   Weight / Speed & time result tabs (force-model.js, force-model-forecast.js). */

.force-model-outputs {
  margin: 0.6rem 0 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.force-model-outputs legend {
  padding: 0 0.25rem;
}

.force-model-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.force-model-tab {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  border-radius: 6px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.force-model-tab.active {
  background: var(--blue-800);
  border-color: var(--blue-500);
  color: var(--blue-100);
}
.force-model-tab:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

.force-model-speed-panel {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
/* The Results card is a fixed-height flex column that scrolls. Only the charts
   may give up height; text rows keep their natural height so an expanded
   results table scrolls the card instead of squashing them together. */
#force-model-results-card > :not(#force-model-chart),
.force-model-speed-panel > :not(#force-model-speed-chart) {
  flex-shrink: 0;
}
.force-model-speed-panel[hidden] {
  display: none;
}
.force-model-speed-empty {
  margin: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
/* Two stacked plots (speed over moving time) need more height than one. */
#force-model-speed-chart {
  min-height: 560px;
}