/* Single-purpose helpers. Kept deliberately short. */

/* Hidden visually, available to assistive technology. Every declaration is
 * !important on purpose: the class is used from unlayered component CSS (the
 * settings gear's only accessible name, the search field's instructions, the
 * chart's data table), and an important declaration inside a layer beats any
 * normal declaration outside it, so no component rule can unhide the text or
 * change its box by accident. */
.visually-hidden:not(:focus, :active) {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-xs));
  align-items: center;
}

.stack-l {
  --flow-space: var(--space-l);
}

.text-muted {
  color: var(--text-muted);
}

.measure {
  max-inline-size: var(--measure);
}

.full-bleed {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}