/* ==========================================================================
   EQUIDEM DESIGN SYSTEM - MARKERS (components/markers.css)
   A clean, linear highlighter band (no thick rounded capsule) with AAA
   contrast between the white label and the civic background colour.
   ========================================================================== */

.marker-effect {
  position: relative;
  display: inline;
  line-height: 1;
  z-index: 1;
  white-space: nowrap;
}

.marker-effect::before {
  content: '';
  position: absolute;
  left: -0.16em;
  right: -0.16em;
  /* Calibrated against the real self-hosted faces (Alfa Slab One ascenders
     reach 0.81em above the baseline, Roboto Flex/Lato descenders 0.22-0.25em
     below it at small sizes). The offsets are resolved against the inline
     content box, which already includes the font descent, so the band starts a
     hair below the descent line (-0.02em) and grows to 1.20em: that clears the
     dot of "i", the tops of "l/b/d/f/t" and accented capitals as well as the
     tails of "p/g/q", without shifting the band down the way a taller-only
     box does. */
  bottom: -0.02em;
  height: 1.2em;
  border-radius: var(--radius-xs);
  z-index: -1;
}

.marker-red { color: var(--color-marker-red-text); }
.marker-red::before { background-color: var(--color-marker-red-bg); }

.marker-green { color: var(--color-marker-green-text); }
.marker-green::before { background-color: var(--color-marker-green-bg); }

.marker-blue { color: var(--color-marker-blue-text); }
.marker-blue::before { background-color: var(--color-marker-blue-bg); }