@layer utilities {
  .txt-x-small { font-size: var(--text-x-small); }
  .txt-small { font-size: var(--text-small); }
  .txt-strong { color: var(--color-ink); font-weight: 500; }
  .txt-dark { color: var(--color-ink-dark); }
  .txt-subtle { color: var(--color-ink-medium); }
  .txt-muted { color: var(--color-ink-light); }
  .txt-faint { color: var(--color-ink-lighter); }
  .txt-mono { font-family: var(--font-mono); }
  .txt-tabular { font-variant-numeric: tabular-nums; }
  .txt-nowrap { white-space: nowrap; }
  .txt-pre-line { white-space: pre-line; }

  .inline-form { display: inline-flex; }

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

    nav,
    [popover] {
      display: none;
    }
  }

  /* iOS Safari zooms into any field set below 16px */
  @media screen and (width < 768px) {
    input,
    select,
    textarea {
      font-size: 16px;
    }
  }

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

  .for-screen-reader {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
}