/* Accessibility baseline for every tier.
   Provenance (NexVerto/NexVerto@9c16799, apps/website/public): premium.css lines 41-66 (focus ring, skip link, link
   underline that draws only on hover or focus), accessibility.css (same reveal for inline links, reduced motion),
   premium.css lines 967-968 (24 px targets). Added here: .visually-hidden and forced-colours care. */

html { scroll-padding-top: var(--header-h, 96px); -webkit-text-size-adjust: 100%; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; left: 16px; top: -120px; z-index: var(--z-system, 90);
  padding: 12px 18px; border-radius: var(--radius-2, 10px);
  background: var(--surface); --link-ink: var(--ink); font-weight: 600;
}
.skip:focus { top: 12px; }

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

/* Links never carry a resting underline. The anchor itself is always transparent, so an underline a browser forces on
   it (Firefox "Always underline links") has no colour to draw with. The visible text sits in a child, normally .t,
   which carries the ink: --link-ink, set where a link's colour is chosen. The underline draws on hover or focus
   (nexverto.com's premium.css does the same). Every link's text therefore needs an element around it. */
a { text-decoration: none; color: transparent !important; }
a > * { color: var(--link-ink, var(--accent)) !important; }
a > .t {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: left bottom; background-repeat: no-repeat; background-size: 0 1px;
  transition: background-size var(--dur-2, 180ms) var(--ease-out, ease-out), color var(--dur-2, 180ms);
}
a:is(:hover, :focus-visible) > .t { background-size: 100% 1px; }

/* Standalone links and controls meet the 24 px minimum target (WCAG 2.5.8); touch controls aim for 44 px in each tier. */
:where(a, button, [role="button"], input, select, summary) { min-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a > .t { transition: none; }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  a > .t { background-image: none; }
  a:is(:hover, :focus-visible) > .t { text-decoration: underline; }
}

/* nexverto.com link rule: no link carries a resting underline. */
a { text-decoration: none !important; }