/* Text highlighting, v2 (Bryan approved 14 November 2026).
 *
 * Same classes, colors and meanings as styles/highlights.css, which stays
 * published unchanged for cached pages. v2 softens the light-mode inline fills
 * from the 300-level highlighter shades to lighter tints of the same hues, so
 * a marked phrase still stands out in its category color while the text
 * around it stays crisp: dark text on every tint measures above 11:1 (WCAG
 * AAA). Caution keeps a slightly deeper tint than the others. Block emphasis
 * and dark mode are unchanged.
 */

/* Yellow highlight - key facts and insights */
.highlight {
  background-color: #fef08a;
  color: #1a1a1a;
  padding: 0.1em 0.3em;
  border-radius: 0.15rem;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Teal/cyan highlight - clinical recommendations */
.highlight-clinical {
  background-color: #a7f3e4;
  color: #1a1a1a;
  padding: 0.1em 0.3em;
  border-radius: 0.15rem;
}

/* Orange highlight - cautions and warnings (BOLDER) */
.highlight-caution {
  background-color: #fdcb9b;
  color: #1a1a1a;
  padding: 0.1em 0.3em;
  border-radius: 0.15rem;
}

/* Pink/rose highlight - critical warnings or liability */
.highlight-critical {
  background-color: #fbcfe8;
  color: #1a1a1a;
  padding: 0.1em 0.3em;
  border-radius: 0.15rem;
}

/* Purple/violet highlight - definitions or key terms */
.highlight-term {
  background-color: #ddd6fe;
  color: #1a1a1a;
  padding: 0.1em 0.3em;
  border-radius: 0.15rem;
}

/* Blue highlight - examples or case references */
.highlight-example {
  background-color: #bae6fd;
  color: #1a1a1a;
  padding: 0.1em 0.3em;
  border-radius: 0.15rem;
}

/* Lime/green highlight - classic highlighter green */
.highlight-green {
  background-color: #d9f99d;
  color: #1a1a1a;
  padding: 0.1em 0.3em;
  border-radius: 0.15rem;
}

/* Dark mode inline highlights.

   The previous values kept dark text (#1a1a1a) on a half-opaque wash. Over the
   dark page that wash composites to a mid tone, so the pair measured 3.37:1 to
   4.48:1 across the seven classes, all under WCAG AA. Dark text needs a light
   background, and translucency over a dark page cannot provide one, so the two
   goals do not reconcile.

   Follow the block rules below instead: a low-alpha wash carries the color and
   the text keeps the theme's own light color. Each alpha is the strongest that
   still clears 7:1 against that text, so the tint stays visible (about 2:1
   against the page) without dropping the text below AAA. */
:is([data-bs-theme="dark"], body.quarto-dark) .highlight {
  background-color: rgba(253, 224, 71, 0.26);
  color: inherit;
}

:is([data-bs-theme="dark"], body.quarto-dark) .highlight-clinical {
  background-color: rgba(94, 234, 212, 0.28);
  color: inherit;
}

:is([data-bs-theme="dark"], body.quarto-dark) .highlight-caution {
  background-color: rgba(251, 146, 60, 0.36);
  color: inherit;
}

:is([data-bs-theme="dark"], body.quarto-dark) .highlight-critical {
  background-color: rgba(249, 168, 212, 0.31);
  color: inherit;
}

:is([data-bs-theme="dark"], body.quarto-dark) .highlight-term {
  background-color: rgba(196, 181, 253, 0.31);
  color: inherit;
}

:is([data-bs-theme="dark"], body.quarto-dark) .highlight-example {
  background-color: rgba(125, 211, 252, 0.29);
  color: inherit;
}

:is([data-bs-theme="dark"], body.quarto-dark) .highlight-green {
  background-color: rgba(190, 242, 100, 0.25);
  color: inherit;
}