/*
 * Additions to the Gybe design system, kept deliberately small.
 *
 * The design system's contract says not to invent tokens, colours, radii or
 * fonts, and not to restyle its components. Everything here is either a
 * mechanical fix (anchor offset under the sticky header, screen-reader-only
 * text) or the wizard, which is an interactive form the marketing site has no
 * equivalent for. The wizard uses only tokens from section 3.
 *
 * One flagged exception: form validation needs a warning state, and the token
 * list has no semantic status colours. Rather than invent one, --warn reuses
 * #f5a524, the star colour already defined in the system.
 */

:root {
  --header-h: 4.5rem;
  --warn: #f5a524;
  --warn-tint: rgba(245, 165, 36, 0.12);
  --stop: #c2382b;
  --stop-tint: rgba(194, 56, 43, 0.09);
}

/* Anchored sections must clear the sticky header rather than sliding under it. */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.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;
}

/* The design system sets `a { color: inherit; text-decoration: none }` globally,
   which is right for nav and cards but wrong for links inside running prose. */
.prose a,
.linkish {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover,
.linkish:hover { color: var(--blue-bright); }