/* Visible focus everywhere */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Don’t “pretty” focus away (only if :focus-visible is supported) */
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) {
    outline: none;
  }
}

/* Skip link: hidden until focused */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  z-index: 9999;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(var(--space-2));
}

/* Allow visually-hidden items (like skip links) to become visible on focus */
.visually-hidden.focusable:focus,
.visually-hidden.focusable:focus-visible {
  position: absolute !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* High contrast / forced colors support */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  a {
    color: LinkText;
  }

  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .button--primary,
  input[type="submit"].button--primary,
  button.button--primary {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  input,
  select,
  textarea {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .messages,
  .messages--status,
  .messages--warning,
  .messages--error {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .tabs a.is-active {
    outline: 1px solid CanvasText;
  }
}