@layer components {
  /* Hand-drawn circle effect for search highlights */
  mark {
    --mark-color: oklch(var(--lch-info));
    --mark-padding: -0.5ch;

    background: none;
    color: var(--mark-color);
    position: relative;
    white-space: nowrap;
    font-weight: 600;
  }

  /* Circle effect - requires a span wrapper inside mark */
  mark span {
    opacity: 0.5;
    mix-blend-mode: multiply;

    @media (prefers-color-scheme: dark) {
      mix-blend-mode: screen;
    }
  }

  mark span::before,
  mark span::after {
    border: 2px solid var(--mark-color);
    content: "";
    inset: var(--mark-padding);
    position: absolute;
  }

  /* Left half of circle */
  mark span::before {
    border-inline-end: none;
    border-radius: 100% 0 0 75% / 50% 0 0 50%;
    inset-block-start: calc(var(--mark-padding) / 2);
    inset-inline-end: 50%;
  }

  /* Right half of circle */
  mark span::after {
    border-inline-start: none;
    border-radius: 0 100% 75% 0 / 0 50% 50% 0;
    inset-inline-start: 30%;
  }

  /* Fallback: if mark doesn't have span, use subtle highlight */
  mark:not(:has(span)) {
    background: color-mix(in srgb, var(--mark-color) 20%, transparent);
    color: var(--color-ink);
    padding-inline: 0.2ch;
    border-radius: var(--border-radius-sm);
  }
}