/*
  Utilities: u-* single-purpose helpers, plus the few rules that must beat every
  component. This is the only stylesheet allowed to use !important.
*/
@layer utilities {
  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }

  /* Hidden visually, still announced. */
  .u-visually-hidden:not(:focus, :focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: var(--space-0) !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .u-text-secondary {
    color: var(--color-text-secondary) !important;
  }

  .u-text-tertiary {
    color: var(--color-text-tertiary) !important;
  }

  .u-text-center {
    text-align: center !important;
  }

  .u-nowrap {
    white-space: nowrap !important;
  }

  .u-tabular-nums {
    font-variant-numeric: tabular-nums !important;
  }

  /* Keeps running text at a readable line length inside wide panels. */
  .u-measure {
    max-width: var(--measure) !important;
  }

  .u-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* boot.js sets data-js on <html> before first paint. */
  :root:not([data-js]) .u-js-only {
    display: none !important;
  }

  :root[data-js] .u-no-js-only {
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: var(--duration-instant) !important;
      animation-iteration-count: 1 !important;
      transition-duration: var(--duration-instant) !important;
      scroll-behavior: auto !important;
    }
  }

  @media print {
    .u-no-print {
      display: none !important;
    }
  }
}