/* The program page's Training Targets tab (Views::Programs::Show) and its rows
   (Components::TargetRangeInputs with bounds:, target_band_controller.js).
   The bar of actions sits above the groups; each group is a closed
   disclosure whose summary is the name and its values. */

.target-preset {
  width: auto;
  min-width: 8rem;
}

.target-groups {
  display: grid;
  gap: var(--space-2);
  align-items: start;
  margin-top: var(--space-3);
}

/* The summary is a flex row (arrow, then this): the group's name, and the
   values in force beside it, wrapping under it on a phone. A MeterList row
   squeezes its label away when the value runs long, which these do. */
.target-summary {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--space-3);
  min-width: 0;
}

.target-summary-name {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
}

.target-summary-value {
  flex: 1 1 auto;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.target-rows {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
}

.target-note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.target-row {
  display: grid;
  gap: var(--space-1);
}

.target-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.target-row-label {
  font-size: var(--text-md);
  font-weight: 500;
}

.target-row-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The slider itself is the calibration cards' (range-slider-*, in
   calibration_card.css). A row adds only what a band on a phone needs: the
   wrap may break so the numbers drop under the track, the track is a full tap
   tall, and the lower thumb can be raised above the upper when both sit at
   the top. */
.target-row-control {
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.target-row-track {
  height: var(--tap);
  flex: 1 1 12rem;
}

.target-row-thumb[data-raised] {
  z-index: 1;
}

.target-row-numbers {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

@media (min-width: 64rem) {
  .target-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}