/* Small helpers. They come last, so they win. */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    left: var(--s-2);
    top: var(--s-2);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--s-4);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: none;
  }

  .tabular {
    font-variant-numeric: tabular-nums;
  }

  /*
   * A text link that is a target of its own (a phone number, "Wachtwoord vergeten?"), not a word in a sentence: a 44px
   * high hit area. The padding is cancelled by the negative margin, so the text and the lines around it stay put.
   */
  .text-link {
    display: inline-block;
    padding: 13px var(--s-2);
    margin: -13px calc(var(--s-2) * -1);
  }

  .text-link:active {
    opacity: 0.6;
  }
}