/* ============================================================
   annotations.css — hand-drawn arrows + handwritten labels for Weblin.
   Pure CSS, no JavaScript. Optional companion to css.css.

   A Weblin port of "neat-annotations" by syabro (MIT):
     https://neat-annotations.syabro.com/
     https://github.com/syabro/neat-annotations
   Ported changes: classes → attribute selectors, data-note → note.
   Everything else (arrows, geometry, colours) is faithful to the original.

   Usage:
     <span ann ann-n ann-red note="check this">target</span>

   Attributes:
     ann                       base — required (highlighted target)
     ann-n  ann-ne  ann-e  ann-se  ann-s  ann-sw  ann-w  ann-nw
                               arrow direction (default: ann-n)
     ann-amber ann-blue ann-green ann-red ann-purple
                               colour (css.css [rainbow] also works)
     ann-no-mark               keep the target's own background
     note="…"                  label text; omit it for highlight-only mode

   Tuning custom properties (all optional):
     --ann-color  --ann-label-max-width  --ann-rotate
     --ann-arrow-x/y  --ann-text-x/y  --ann-target-gap
     --ann-label-gap  --ann-lower-label-gap  --ann-font

   Labels look best with Shantell Sans (falls back to system cursive):
     https://fonts.google.com/specimen/Shantell+Sans
   ============================================================ */

[ann] {
  --ann-color: light-dark(#898584, #b8b8bd);
  --ann-mark: light-dark(
    color-mix(in oklch, var(--ann-color) 10%, transparent),
    oklch(from var(--ann-color) l calc(c * 1.35) h / 24%)
  );
  --ann-font: 'Shantell Sans', cursive;
  --ann-target-gap: 5px;
  --ann-label-gap: 6px;
  --ann-lower-label-gap: -4px;
  --ann-label-max-width: 150px;
  --ann-arrow-x: 0px;
  --ann-text-x: 0px;
  --ann-arrow-y: 0px;
  --ann-text-y: 5px;
  --ann-rotate: -4deg;
  position: relative;
  display: inline-block;
  overflow: visible;
  line-height: 1.15;
  border-radius: 3px;
  background: var(--ann-mark);
  box-shadow:
    -0.3em 0 0 0 var(--ann-mark),
    0.3em 0 0 0 var(--ann-mark);
}

/* The handwritten label (data-note → note in the Weblin port) */
[ann]::after {
  content: attr(note);
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: var(--ann-label-max-width);
  transform: rotate(var(--ann-rotate));
  font-family: var(--ann-font);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ann-color);
  opacity: .9;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* The arrow — shared chrome; geometry lives in the direction rules */
[ann]::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 46px;
  height: 38px;
  transform-origin: 50% 50%;
  -webkit-mask: var(--_ann-arrow-mask) center / contain no-repeat;
  mask: var(--_ann-arrow-mask) center / contain no-repeat;
  background: var(--ann-color);
  opacity: .9;
  pointer-events: none;
}

/* No note → highlight-only mode: hide arrow and label */
[ann]:not([note])::before,
[ann]:not([note])::after,
[ann][note=""]::before,
[ann][note=""]::after { display: none; }

/* ------------------------------------------------------------
   Colours
   ------------------------------------------------------------ */
[ann-amber] {
  --ann-color: light-dark(#b8751a, #f0b45a);
  /* the highlight uses bright yellow (#ffb000) to avoid a muddy
     background; color-mix with transparent creates a marker tint */
  --ann-mark: light-dark(
    color-mix(in oklch, #ffb000 14%, transparent),
    color-mix(in oklch, #ffb000 22%, transparent)
  );
}
[ann-blue]   { --ann-color: light-dark(#3b72c4, #78a9ef); }
[ann-green]  { --ann-color: light-dark(#2f8f5b, #67c792); }
[ann-red]    { --ann-color: light-dark(#c45a38, #ee8a6e); }
[ann-purple] { --ann-color: light-dark(#8657c8, #b998ef); }
[ann-no-mark] { --ann-mark: transparent; }

/* Bridge: css.css's [rainbow] colours annotations too. The animation
   (registered --rainbow-hue, 3s loop) lives in css.css — explicit
   colour attributes above still win over it. */
[ann][rainbow]:not(:is([ann-amber],[ann-blue],[ann-green],[ann-red],[ann-purple])) {
  --ann-color: var(--rainbow, currentColor);
}

@media (forced-colors: active) {
  [ann]::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

/* ------------------------------------------------------------
   Directions — the suffix is the compass direction the arrow
   POINTS; the label sits on the arrow's tail side.

   Default: north (arrow below the target, pointing up at it).
   Bare [ann] and explicit [ann-n] both land here.
   ------------------------------------------------------------ */
[ann]:not(:is([ann-ne],[ann-e],[ann-se],[ann-s],[ann-sw],[ann-w],[ann-nw]))::before {
  left: calc(50% - 23px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 4px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 35 C22 26 22 15 23 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17 10 L23 3 L29 10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[ann]:not(:is([ann-ne],[ann-e],[ann-se],[ann-s],[ann-sw],[ann-w],[ann-nw]))::after {
  left: calc(50% + var(--ann-text-x));
  top: calc(100% + var(--ann-target-gap) + 31px + var(--ann-lower-label-gap) + var(--ann-text-y));
  transform: translateX(-50%) rotate(var(--ann-rotate));
}

[ann-ne]::before {
  left: calc(50% - 40px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 6px + var(--ann-arrow-y));
  transform: translateX(-10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 32 C16 30 28 18 40 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M30 10 L40 6 L36 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[ann-ne]::after {
  left: calc(50% - 34px + var(--ann-text-x));
  top: calc(100% + var(--ann-target-gap) + 26px + var(--ann-lower-label-gap) + var(--ann-text-y));
  transform: translateX(-60%) rotate(var(--ann-rotate));
}

[ann-e]::before {
  left: calc(-1 * var(--ann-target-gap) - 43px + var(--ann-arrow-x));
  top: calc(50% - 19px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19 C15 18 31 18 43 19' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M36 13 L43 19 L36 25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[ann-e]::after {
  right: calc(100% + var(--ann-target-gap) + 39px + var(--ann-label-gap) - var(--ann-text-x));
  top: calc(50% - 5px + var(--ann-text-y));
  transform: translateY(-50%) rotate(var(--ann-rotate));
}

[ann-se]::before {
  left: calc(50% - 40px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 32px + var(--ann-arrow-y));
  transform: translateX(-10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6 C16 8 28 20 40 32' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M36 22 L40 32 L30 28' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[ann-se]::after {
  left: calc(50% - 34px + var(--ann-text-x));
  bottom: calc(100% + var(--ann-target-gap) + 26px + var(--ann-label-gap) - var(--ann-text-y));
  transform: translateX(-60%) rotate(var(--ann-rotate));
}

[ann-s]::before {
  left: calc(50% - 23px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 35px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 4 C22 13 22 24 23 35' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17 29 L23 36 L29 29' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[ann-s]::after {
  left: calc(50% + var(--ann-text-x));
  bottom: calc(100% + var(--ann-target-gap) + 31px + var(--ann-label-gap) - var(--ann-text-y));
  transform: translateX(-50%) rotate(var(--ann-rotate));
}

[ann-sw]::before {
  left: calc(50% - 6px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 32px + var(--ann-arrow-y));
  transform: translateX(10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 6 C30 8 18 20 6 32' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 22 L6 32 L16 28' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[ann-sw]::after {
  left: calc(50% + 34px + var(--ann-text-x));
  bottom: calc(100% + var(--ann-target-gap) + 26px + var(--ann-label-gap) - var(--ann-text-y));
  transform: translateX(-40%) rotate(var(--ann-rotate));
}

[ann-w]::before {
  left: calc(100% + var(--ann-target-gap) - 3px + var(--ann-arrow-x));
  top: calc(50% - 19px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43 19 C32 18 15 18 3 19' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 13 L3 19 L10 25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[ann-w]::after {
  left: calc(100% + var(--ann-target-gap) + 40px + var(--ann-label-gap) + var(--ann-text-x));
  top: calc(50% - 5px + var(--ann-text-y));
  transform: translateY(-50%) rotate(var(--ann-rotate));
}

[ann-nw]::before {
  left: calc(50% - 6px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 6px + var(--ann-arrow-y));
  transform: translateX(10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 32 C30 30 18 18 6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16 10 L6 6 L10 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[ann-nw]::after {
  left: calc(50% + 34px + var(--ann-text-x));
  top: calc(100% + var(--ann-target-gap) + 26px + var(--ann-lower-label-gap) + var(--ann-text-y));
  transform: translateX(-40%) rotate(var(--ann-rotate));
}