/* .skip-link: first focusable element, visible only on keyboard focus. */
@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-2);
    inset-block-start: var(--space-2);
    z-index: 10;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-s);
    background: var(--color-text);
    color: var(--color-surface);
    transform: translateY(-200%);

    &:focus { transform: none; color: var(--color-surface); }
  }
}