/* ===========================================
   Marker highlight: marker yellow behind two to four words that carry the
   promise in a page's main headline, ink text on it (10.85:1).

   It is the screen's one yellow element. Where a screen already has a yellow
   block or button in the same viewport, that one stays and the headline goes
   without. Never on body text, statuses, scores, findings, app screens, or
   reports and emails agencies send to their clients.

   A span, not <mark>: some screen readers announce <mark> as "highlighted",
   and this is decoration, not meaning. The words still read in order.
   =========================================== */

@layer components {
  .marker {
    /* Both themes: --color-accent and --color-primary-900 are not overridden
       under [data-theme="dark"], so the fill stays yellow and the text ink. */
    background-color: var(--color-accent);
    color: var(--color-primary-900);

    /* The fill clears the letters by 0.12em without padding, so a highlight
       that starts a line keeps its first letter on the column grid and lets
       the yellow bleed into the margin instead. Padding here pushed the
       headline off the rule that the breadcrumbs and the lede sit on. */
    box-shadow: 0.12em 0 0 var(--color-accent), -0.12em 0 0 var(--color-accent);

    /* A highlight that wraps keeps its padding on every line instead of
       being split open at the line break */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* No forced-colors rule on purpose: background-color and color are forced
     by the browser there anyway, and the user's palette should win. */
}