/* Utilities: single-purpose helpers the markup pairs with components. Their layer sits below the components
   (see css/layers.css), so a component rule refines a utility used on the same element. */
@layer utilities {
  [x-cloak] {
    display: none !important;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .d-stack {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-6);
    min-width: 0;
  }
  .d-pad {
    padding: var(--k-space-6) var(--k-space-7);
  }
  .d-muted {
    color: var(--k-muted);
    margin: 0;
  }
  .d-faint {
    color: var(--k-dim);
  }
  .d-fg {
    color: var(--k-fg);
  }
  .d-ok {
    color: var(--k-good);
  }
  .d-small {
    font-size: var(--k-text-6);
  }
  .d-pre {
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .d-push {
    margin-left: auto;
  }
  .d-end {
    justify-content: flex-end;
  }
  .d-narrow {
    max-width: 280px;
  }
  .d-ia {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-4);
  }
  .d-ia .k-ic,
  .d-ia .icon {
    width: var(--k-icon-3);
    height: var(--k-icon-3);
    color: var(--k-muted);
  }
  .d-trunc {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .d-count {
    font-family: var(--k-mono);
    font-size: var(--k-text-2);
    color: var(--k-dim);
    margin-left: var(--k-space-2);
  }
  /* a smaller figure in a key figure box (.a-kpi .val b) */
  .d-smaller {
    font-size: var(--k-display-5) !important;
  }
  .d-top-line {
    border-top: 1px solid var(--k-line);
  }
  .d-dot-top {
    margin-top: var(--k-space-3);
  }
}