/* enhancements.css — additive accessibility & polish layered on top of
   system.css. The exported design (system.css) is never edited; everything
   here is purely additive so the visual system stays intact. */

/* Consistent, on-brand keyboard focus (only for keyboard users). */
:focus-visible {
  outline: 2px solid var(--accent, #e11d48);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip-to-content link — visually hidden until focused. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-150%);
  background: var(--ink, #0b1220);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-2, 4px);
  font: 600 0.9rem/1 var(--font-body, system-ui), sans-serif;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--accent, #e11d48);
  outline-offset: 2px;
}

/* <main> is the skip target (tabindex=-1); never show its focus ring. */
main:focus {
  outline: none;
}

/* Invalid form fields (complements the existing .field.invalid styling). */
.input[aria-invalid='true'],
.select[aria-invalid='true'],
.textarea[aria-invalid='true'] {
  border-color: var(--accent, #e11d48);
}

/* Fully tuck the resting toast below the fold. system.css uses
   translate(-50%,120%) which, combined with bottom:24px, leaves a ~14px sliver
   visible on load; this clears it. .toast.show still wins when shown. */
.toast:not(.show) {
  transform: translate(-50%, calc(100% + 40px));
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}