/* DeployBot UI, utilities layer: single-purpose helpers. This layer outranks every other one,
   so none of them needs !important. .mono and .micro (base) and .mb and .mt (layout) stay in
   their layers: later rules override them on purpose (see the notes there). */

@layer utilities {
  /* ---- helpers */

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

  .faint {
    color: var(--faint);
  }

  .small {
    font-size: var(--text-3);
  }

  .nowrap {
    white-space: nowrap;
  }

  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  [hidden] {
    display: none;
  }

  .st-accent {
    color: var(--accent-text);
  }

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

  .st-info {
    color: var(--info);
  }

  .st-warn {
    color: var(--warn);
  }

  .st-prod {
    color: var(--prod);
  }

  .st-ok {
    color: var(--ok);
  }

  .st-fail {
    color: var(--fail);
  }

  .wrap-any {
    overflow-wrap: anywhere;
  }

  .strong {
    font-weight: 600;
  }
}