/*
 * Touch-target sizing for the graph builder's dense per-instrument controls.
 *
 * The desktop layout stays compact for mouse/trackpad — density is a stated
 * product value. On a COARSE pointer (touch: operators on a phone or tablet near
 * equipment, per PRODUCT.md) the swatches, resets, selects and the row tap area
 * grow to the 44px WCAG 2.5.5 minimum. Keyed to pointer type, not screen width,
 * so a touchscreen laptop with a trackpad keeps the dense layout while a tablet
 * gets real touch targets. Scoped to the builder form via its Stimulus controller
 * so nothing else is affected; lives here because the frozen nexus.css build
 * can't express a pointer media query.
 */
/*
 * Threshold band row: swatch → label → reset. The label grows so the reset trails
 * at the row's end (a tidy right-aligned reset column) instead of interrupting the
 * swatch→label reading order. Defined here because flex-1/ml-auto aren't in the
 * frozen nexus.css build.
 */
.gb-band { display: flex; align-items: center; gap: 0.5rem; }
.gb-band__label { flex: 1 1 auto; min-width: 0; }

/*
 * On wide screens the short Graph Details card tracks the long instrument list
 * instead of leaving a dead void below it. align-self:start keeps the grid item at
 * its content height so it can stick; it scrolls normally when the columns stack.
 */
@media (min-width: 1024px) {
  .gb-aside {
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
}

@media (pointer: coarse) {
  [data-controller~="graph-builder"] input[type="color"] {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }

  [data-controller~="graph-builder"] .btn-xs {
    height: 2.75rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  [data-controller~="graph-builder"] .select-xs {
    height: 2.75rem;
    min-height: 2.75rem;
    font-size: 0.875rem;
  }

  /* The whole instrument label is the checkbox tap target — give it real height. */
  [data-controller~="graph-builder"] label[data-action] {
    min-height: 2.75rem;
  }

  [data-controller~="graph-builder"] .checkbox-sm {
    width: 1.5rem;
    height: 1.5rem;
  }
}