/* A small, deliberately short set of layout/accessibility utilities that
 * genuinely get reused across components and phases. Not a utility-class
 * framework - one-off spacing/layout needs belong in the component's own
 * CSS file. */

:where(:focus-visible) {
  outline: 2px solid var(--hs-color-primary-500);
  outline-offset: 2px;
  border-radius: var(--hs-radius-sm);
}

.hs-container {
  width: 100%;
  max-width: var(--hs-container-max-width);
  margin-inline: auto;
  padding-inline: var(--hs-container-padding-inline);
}

.hs-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hs-skip-link {
  position: fixed;
  inset-inline-start: var(--hs-space-16);
  top: var(--hs-space-16);
  z-index: var(--hs-z-toast);
  padding: var(--hs-space-12) var(--hs-space-20);
  background: var(--hs-color-surface);
  color: var(--hs-color-text);
  border-radius: var(--hs-radius-md);
  box-shadow: var(--hs-shadow-large);
  transform: translateY(-150%);
  transition: transform var(--hs-transition-fast) var(--hs-ease);
}

.hs-skip-link:focus {
  transform: translateY(0);
}