/*!
 * highlight.css v0.1.0
 * A collection of CSS-based text highlight effects.
 * MIT License — https://github.com/GoBoldlyForward/highlight.css
 */

:root {
  --hl-color: #fff59d;
  --hl-stroke: currentColor;
  --hl-duration: 0.6s;
}

:root[data-theme="dark"] { --hl-color: #fde047; }

/* Shared base — survives line wraps via box-decoration-break. */
.hl-marker,
.hl-marker-thin,
.hl-marker-tall,
.hl-marker-full,
.hl-marker-pen,
.hl-marker-gradient,
.hl-marker-double,
.hl-marker-uneven,
.hl-marker-fade,
.hl-underline,
.hl-underline-thick,
.hl-strike-soft,
.hl-sweep {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
}

.hl-marker {
  background-image: linear-gradient(180deg, transparent 60%, var(--hl-color) 60%);
}

.hl-marker-thin {
  background-image: linear-gradient(180deg, transparent 80%, var(--hl-color) 80%);
}

.hl-marker-tall {
  background-image: linear-gradient(180deg, transparent 30%, var(--hl-color) 30%);
}

.hl-marker-full {
  background-color: var(--hl-color);
  padding: 0.05em 0.15em;
}

.hl-marker-pen {
  background-image: linear-gradient(
    180deg,
    transparent 55%,
    color-mix(in srgb, var(--hl-color) 70%, transparent) 55%
  );
}

.hl-marker-gradient {
  background-image: linear-gradient(90deg, var(--hl-color), transparent);
}

.hl-marker-double {
  background-image:
    linear-gradient(180deg, transparent 22%, var(--hl-color) 22%, var(--hl-color) 34%, transparent 34%),
    linear-gradient(180deg, transparent 72%, var(--hl-color) 72%, var(--hl-color) 84%, transparent 84%);
}

.hl-marker-uneven {
  background-image: linear-gradient(172deg, transparent 55%, var(--hl-color) 60%);
}

.hl-marker-fade {
  background-image: linear-gradient(
    180deg,
    transparent 50%,
    var(--hl-color) 55%,
    var(--hl-color) 85%,
    transparent 95%
  );
}

.hl-underline {
  background-image: linear-gradient(
    180deg,
    transparent 92%,
    var(--hl-stroke) 92%,
    var(--hl-stroke) 98%,
    transparent 98%
  );
}

.hl-underline-thick {
  background-image: linear-gradient(
    180deg,
    transparent 85%,
    var(--hl-stroke) 85%,
    var(--hl-stroke) 98%,
    transparent 98%
  );
}

.hl-underline-double {
  text-decoration: underline double var(--hl-stroke);
  text-underline-offset: 4px;
}

.hl-underline-wavy {
  text-decoration: underline wavy var(--hl-stroke);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hl-underline-dashed {
  text-decoration: underline dashed var(--hl-stroke);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hl-underline-dotted {
  text-decoration: underline dotted var(--hl-stroke);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* SCRIBBLES — color baked into the SVG (#333). Override background-image to retint. */
.hl-scribble,
.hl-scribble-rough,
.hl-scribble-zigzag,
.hl-scribble-loose,
.hl-scribble-double {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: repeat-x;
  background-position: 0 100%;
  padding-bottom: 0.18em;
}

.hl-scribble {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'><path d='M0 6 Q 8 2 16 5 Q 24 9 32 5 Q 40 1 48 6 Q 56 10 64 5 Q 72 2 80 6 Q 88 9 96 5 Q 104 1 112 6 Q 116 7 120 6' fill='none' stroke='%23333' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-size: auto 0.5em;
}

.hl-scribble-rough {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14'><path d='M0 8 C 3 1 8 13 14 5 C 18 0 24 14 30 7 C 35 1 40 13 46 4 C 50 13 56 1 62 9 C 66 3 72 13 78 5 C 82 0 88 12 94 6 C 98 1 104 14 110 4 C 114 13 120 1 126 8 C 130 14 136 2 140 7' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-size: auto 0.6em;
}

.hl-scribble-zigzag {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'><path d='M0 7 L 6 3 L 12 8 L 18 2 L 24 7 L 30 3 L 36 8 L 42 2 L 48 7 L 54 3 L 60 7' fill='none' stroke='%23333' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/></svg>");
  background-size: auto 0.5em;
}

.hl-scribble-loose {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'><path d='M0 6 Q 12 0 25 6 Q 37 12 50 6 Q 62 0 75 6 Q 87 12 100 6' fill='none' stroke='%23333' stroke-width='1.3' stroke-linecap='round'/></svg>");
  background-size: auto 0.6em;
}

.hl-scribble-double {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'><path d='M0 6 Q 8 2 16 5 Q 24 9 32 5 Q 40 1 48 6 Q 56 10 64 5 Q 72 2 80 6 Q 88 9 96 5 Q 104 1 112 6 Q 116 7 120 6' fill='none' stroke='%23333' stroke-width='1.3' stroke-linecap='round'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'><path d='M0 5 Q 10 9 20 5 Q 30 1 40 6 Q 50 9 60 4 Q 70 1 80 6 Q 90 9 100 5 Q 110 1 120 5' fill='none' stroke='%23333' stroke-width='1.1' stroke-linecap='round'/></svg>");
  background-position: 2px 100%, -3px 92%;
  background-size: auto 0.5em, auto 0.45em;
}

[data-theme="dark"] .hl-scribble {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'><path d='M0 6 Q 8 2 16 5 Q 24 9 32 5 Q 40 1 48 6 Q 56 10 64 5 Q 72 2 80 6 Q 88 9 96 5 Q 104 1 112 6 Q 116 7 120 6' fill='none' stroke='%23ccc' stroke-width='1.4' stroke-linecap='round'/></svg>");
}
[data-theme="dark"] .hl-scribble-rough {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 14'><path d='M0 8 C 3 1 8 13 14 5 C 18 0 24 14 30 7 C 35 1 40 13 46 4 C 50 13 56 1 62 9 C 66 3 72 13 78 5 C 82 0 88 12 94 6 C 98 1 104 14 110 4 C 114 13 120 1 126 8 C 130 14 136 2 140 7' fill='none' stroke='%23ccc' stroke-width='1.6' stroke-linecap='round'/></svg>");
}
[data-theme="dark"] .hl-scribble-zigzag {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'><path d='M0 7 L 6 3 L 12 8 L 18 2 L 24 7 L 30 3 L 36 8 L 42 2 L 48 7 L 54 3 L 60 7' fill='none' stroke='%23ccc' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'/></svg>");
}
[data-theme="dark"] .hl-scribble-loose {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12'><path d='M0 6 Q 12 0 25 6 Q 37 12 50 6 Q 62 0 75 6 Q 87 12 100 6' fill='none' stroke='%23ccc' stroke-width='1.3' stroke-linecap='round'/></svg>");
}
[data-theme="dark"] .hl-scribble-double {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'><path d='M0 6 Q 8 2 16 5 Q 24 9 32 5 Q 40 1 48 6 Q 56 10 64 5 Q 72 2 80 6 Q 88 9 96 5 Q 104 1 112 6 Q 116 7 120 6' fill='none' stroke='%23ccc' stroke-width='1.3' stroke-linecap='round'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'><path d='M0 5 Q 10 9 20 5 Q 30 1 40 6 Q 50 9 60 4 Q 70 1 80 6 Q 90 9 100 5 Q 110 1 120 5' fill='none' stroke='%23ccc' stroke-width='1.1' stroke-linecap='round'/></svg>");
}

.hl-strike {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.hl-strike-thick {
  text-decoration: line-through;
  text-decoration-thickness: 4px;
}

.hl-strike-wavy {
  text-decoration: line-through wavy var(--hl-stroke);
  text-decoration-thickness: 2px;
}

.hl-strike-soft {
  background-image: linear-gradient(
    180deg,
    transparent 47%,
    var(--hl-stroke) 47%,
    var(--hl-stroke) 53%,
    transparent 53%
  );
}

/* Sweep — toggle via .is-active or :hover. */
.hl-sweep {
  background-image: linear-gradient(180deg, transparent 60%, var(--hl-color) 60%);
  background-size: 0% 100%;
  background-position: 0 0;
  transition: background-size var(--hl-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.hl-sweep:hover,
.hl-sweep.is-active {
  background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hl-sweep { transition: none; }
}
