/* The editor's highlighter (from editor-skin.css), for the AMA's page and desk: as tall as
   a line, leaning ends, more dye where the tip landed and lifted, soft edges and streaks.
   ink.js writes the dye for the theme and sweeps a new stroke on. Green only. */
@property --hl-wet { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --hl-reach { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
mark { color: inherit; background: none; }
html[data-ds] .editor-highlight {
  --hl: var(--hl-green, oklch(0.9 0.075 140 / 0.72));
  --hl-deep: var(--hl-green-deep, var(--hl));
  --hl-cap: var(--hl-green-cap, transparent);
  --hl-grain: var(--hl-green-grain);
  --hl-now: color-mix(in oklab, var(--hl), var(--hl-deep) calc(var(--hl-wet) * 55% + var(--hl-lift, 0%)));
  --hl-top: calc(0.1em + var(--hl-jitter, 0em));
  --hl-height: calc(1.16em + var(--hl-swell, 0em));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.1em 0.12em;
  margin: 0 -0.12em;
  background-image:
    linear-gradient(104deg, var(--bg-canvas) 0.08em, transparent 0.1em),
    linear-gradient(104deg, transparent calc(100% - 0.1em), var(--bg-canvas) calc(100% - 0.08em)),
    var(--hl-edge, linear-gradient(transparent, transparent)),
    linear-gradient(90deg, var(--hl-cap) 0, var(--hl-cap) 0.06em, transparent 0.42em, transparent calc(100% - 0.42em), var(--hl-cap) calc(100% - 0.06em), var(--hl-cap) 100%),
    var(--hl-grain, linear-gradient(transparent, transparent)),
    linear-gradient(var(--hl-now), var(--hl-now));
  background-repeat: no-repeat;
  background-size: 0.3em var(--hl-height), 0.3em var(--hl-height), var(--hl-reach) var(--hl-height), var(--hl-reach) var(--hl-height), var(--hl-reach) var(--hl-height), var(--hl-reach) var(--hl-height);
  background-position: 0 var(--hl-top), 100% var(--hl-top), 0 var(--hl-top), 0 var(--hl-top), 0 var(--hl-top), 0 var(--hl-top);
}
html[data-ds] .editor-highlight:nth-of-type(4n+1) { --hl-edge: var(--hl-edge-1); --hl-jitter: -0.02em; --hl-swell: 0.03em; }
html[data-ds] .editor-highlight:nth-of-type(4n+2) { --hl-edge: var(--hl-edge-2); --hl-jitter: 0.02em; --hl-swell: -0.03em; }
html[data-ds] .editor-highlight:nth-of-type(4n+3) { --hl-edge: var(--hl-edge-3); --hl-jitter: 0.01em; --hl-swell: 0.02em; }
html[data-ds] .editor-highlight:nth-of-type(4n) { --hl-edge: var(--hl-edge-4); --hl-jitter: -0.01em; --hl-swell: -0.02em; }

/* Wet ink wiped away leaves a smear that soaks in (from editor-skin.css) */
html[data-ds] .ink-smears { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
html[data-ds] .ink-smear { position: absolute; white-space: pre; pointer-events: none; transform-origin: var(--origin) 50%; animation: ink-smear 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes ink-smear {
  0% { opacity: var(--a0); filter: blur(0.35px); transform: translateX(0) scaleX(1); }
  30% { opacity: var(--a1); filter: blur(0.8px); transform: translateX(calc(var(--dir) * 2px)) scaleX(1.25); }
  100% { opacity: 0; filter: blur(1.5px); transform: translateX(calc(var(--dir) * 4px)) scaleX(1.5); }
}

/* MovieBrain's bear is a tonal drawing, so by night it keeps its tones (inverted, the dark
   nose and eyes turned white, a photo negative: Mustafa, 2026-10-29), lifted a little to
   read on the dark paper */
[data-theme="dark"] .bear { filter: brightness(1.12); }