:root {
  --site-selection-background: var(--brand-purple);
  --site-selection-foreground: #ffffff;
}

/* Native selection remains the fallback, including when JavaScript is off. */
::selection {
  color: var(--site-selection-foreground);
  -webkit-text-fill-color: var(--site-selection-foreground);
  background-color: var(--site-selection-background);
  text-shadow: none;
}

::-moz-selection {
  color: var(--site-selection-foreground);
  background-color: var(--site-selection-background);
  text-shadow: none;
}

/* Tight heading leading can make a later native selection rectangle cover
   earlier glyphs. Paint those rectangles together UNDER the whole heading;
   native selection still supplies white text and normal copy/keyboard behavior. */
[data-selection-backdrop] {
  isolation: isolate;
}

[data-selection-backdrop="static"] {
  position: relative;
}

[data-selection-backdrop]::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--selection-x);
  top: var(--selection-y);
  width: var(--selection-width);
  height: var(--selection-height);
  background: var(--selection-rectangles);
  pointer-events: none;
  user-select: none;
}

[data-selection-backdrop]::selection,
[data-selection-backdrop] *::selection {
  background-color: transparent;
}

[data-selection-backdrop]::-moz-selection,
[data-selection-backdrop] *::-moz-selection {
  background-color: transparent;
}

@media (forced-colors: active) {
  [data-selection-backdrop]::before { display: none; }

  ::selection,
  [data-selection-backdrop]::selection,
  [data-selection-backdrop] *::selection {
    color: HighlightText;
    -webkit-text-fill-color: HighlightText;
    background-color: Highlight;
  }
}

html,
body {
  -webkit-user-select: text;
  user-select: text;
}

:where(
  h1, h2, h3, h4, h5, h6,
  p, span, a, button, label, li, dt, dd,
  blockquote, figcaption, footer, address, time,
  small, strong, em
) {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* Hover animations duplicate labels for motion. Only the visible/base line
   participates in selection so copied text is never repeated. */
.button-hover-text__line--hover,
.nav-hover-text__line--hover {
  -webkit-user-select: none !important;
  user-select: none !important;
}