/* check-mark.css - ONE green tick for the whole product.
 *
 * The owner picked this on 2026-09-02 from three rendered options: the brand
 * lime disc #84D828 under a WHITE tick. That pairing measures 1.77:1, which is
 * below both the 4.5:1 text floor and the 3:1 non-text floor, and it is the
 * reason DESIGN.md and Rule 51 say never to put white on the lime. The owner
 * saw all three side by side at 40, 24 and 18px, with the numbers, and chose
 * this one anyway. It is a deliberate call, not an oversight: do NOT "fix" it
 * back to a deeper green without asking. The deeper-green variant that passes
 * at 5.01:1 is #15803d, kept below as .check-mark--aa if it is ever wanted.
 *
 * Before this file there were roughly 230 green ticks across about 90 files in
 * six different forms: Font Awesome glyphs tinted with a hex, Font Awesome
 * glyphs tinted with a Tailwind class, green tick HTML entities, inline SVG
 * check paths, CSS classes that painted their own disc, and CSS classes that
 * only set a colour. They disagreed on green (#10b981, #047857, #16a34a,
 * #059669, #14b8a6, #34d399, emerald-500, emerald-600, green-500) and on
 * whether the mark was a disc or a bare tick.
 *
 * Usage:  <span class="check-mark" aria-hidden="true"></span>
 * The mark sizes itself from the surrounding font-size, so it lines up with
 * whatever text it sits next to. Override with font-size, never width/height.
 *
 * Rollback is unlinking this file from the six base templates; no call site
 * holds the lime as a literal.
 *
 * Email cannot use this: mail clients strip most CSS and do not render
 * pseudo-elements reliably. Emails use the PNG at
 * /images/email-icons/check-circle.png instead.
 */

:root {
  --check-mark-bg: #84D828;   /* brand lime, the logo green */
  --check-mark-fg: #FFFFFF;   /* owner's choice, see the note above */
  --check-mark-bg-aa: #15803d;
}

.check-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  border-radius: 999px;
  background: var(--check-mark-bg);
  color: var(--check-mark-fg);
  line-height: 1;
  vertical-align: -0.2em;
  /* the tick is drawn, not typed, so no icon font has to load and
     typography.css's `body *` rule cannot steal the glyph (see the
     blank-icon-boxes incident) */
}

.check-mark::before {
  content: "";
  display: block;
  width: 0.5em;
  height: 0.26em;
  border-left: 0.13em solid currentColor;
  border-bottom: 0.13em solid currentColor;
  transform: translateY(-0.06em) rotate(-45deg);
}

/* Larger marks need a proportionally thinner stroke or they read as a blob. */
.check-mark--lg { font-size: 1.6em; }
.check-mark--lg::before { border-left-width: 0.11em; border-bottom-width: 0.11em; }

/* The contrast-passing variant, unused by default. */
.check-mark--aa { background: var(--check-mark-bg-aa); }

@media (prefers-reduced-motion: no-preference) {
  .check-mark { transition: transform 0.15s ease; }
}