/* PixelKit hand layer v1 - pen annotations for real DOM elements.
   Arrow + handwritten note pointing at any inline element. Pure CSS, no JS.
   Mechanism inspired by neat-annotations (MIT, syabro); shapes, tokens and
   dosage rules are PixelKit's own.

   Markup:  <span class="pk-ann pk-ann-n" data-note="перевірити">214</span>
   Rules:   the hand layer is OFF by default. Use it only when the author asks
            for it. Maximum three notes on one screen. Never in formal documents. */

.pk-ann {
  --pk-ann-color: var(--pk-coral, #c04f31);
  --pk-ann-font: var(--pk-hand, "Chalkboard SE", "Comic Sans MS", "Comic Neue", cursive);
  --pk-ann-size: .92rem;
  --pk-ann-arrow-w: 42px;
  --pk-ann-arrow-h: 34px;
  --pk-ann-gap: 4px;          /* target to arrow */
  --pk-ann-label-gap: 2px;    /* arrow to label */
  --pk-ann-label-max: 160px;
  --pk-ann-rotate: -3deg;
  --pk-ann-x: 0px;            /* nudge the whole note */
  --pk-ann-y: 0px;
  --pk-ann-draw: 620ms;
  position: relative;
  display: inline-block;
  line-height: inherit;
}

/* ---- marks on the target ---- */
/* default: a pen underline that repeats across wrapped lines */
.pk-ann {
  background-image: var(--pk-ann-underline);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: auto 5px;
  padding-bottom: 2px;
}
.pk-ann {
  --pk-ann-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 5' preserveAspectRatio='none'%3E%3Cpath d='M1 3.4c7-1.6 13-2 20-1.2 6 .7 11 1.7 17 1.2 3-.3 6-.9 9-1.9' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  color: var(--pk-ann-color);
}
.pk-mark-circle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M52 3C28 2 5 9 4 20c-1 11 22 18 47 17 23-1 45-7 45-17 0-9-18-15-40-17-8-.7-16-.6-23 .2' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 2px 8px;
}
.pk-mark-tint {
  background-image: none;
  background-color: color-mix(in oklab, var(--pk-ann-color) 14%, transparent);
  box-shadow: -.28em 0 0 color-mix(in oklab, var(--pk-ann-color) 14%, transparent),
               .28em 0 0 color-mix(in oklab, var(--pk-ann-color) 14%, transparent);
  padding-bottom: 0;
}
.pk-mark-none { background-image: none; padding-bottom: 0; }

/* ---- label ---- */
.pk-ann::after {
  content: attr(data-note);
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: var(--pk-ann-label-max);
  font-family: var(--pk-ann-font);
  font-size: var(--pk-ann-size);
  font-weight: 600;
  line-height: 1.15;
  color: var(--pk-ann-color);
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* ---- arrow ---- */
.pk-ann::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: var(--pk-ann-arrow-w);
  height: var(--pk-ann-arrow-h);
  background: var(--pk-ann-color);
  -webkit-mask: var(--pk-ann-arrow) center / contain no-repeat;
  mask: var(--pk-ann-arrow) center / contain no-repeat;
  pointer-events: none;
}
.pk-ann {
  /* tail top-left, tip bottom-right */
  --pk-ann-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 34'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4c-1.5 7.5.5 14 5.5 19 3.5 3.5 8 5.8 13 7'/%3E%3Cpath d='M18.5 28.5c2.4.5 4.6.9 7 1.5'/%3E%3Cpath d='M23.5 23c.7 2.6 1.4 5 2 7'/%3E%3C/g%3E%3C/svg%3E");
  /* mirrored: tail top-right, tip bottom-left */
  --pk-ann-arrow-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 34'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 4c1.5 7.5-.5 14-5.5 19-3.5 3.5-8 5.8-13 7'/%3E%3Cpath d='M23.5 28.5c-2.4.5-4.6.9-7 1.5'/%3E%3Cpath d='M18.5 23c-.7 2.6-1.4 5-2 7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- eight positions: n ne e se s sw w nw ---- */
.pk-ann-n::before  { bottom: calc(100% + var(--pk-ann-gap)); left: 50%; transform: translate(calc(-50% + var(--pk-ann-x)), var(--pk-ann-y)) rotate(28deg); }
.pk-ann-n::after   { bottom: calc(100% + var(--pk-ann-gap) + var(--pk-ann-arrow-h) + var(--pk-ann-label-gap)); left: 50%; transform: translate(calc(-50% + var(--pk-ann-x)), var(--pk-ann-y)) rotate(var(--pk-ann-rotate)); text-align: center; }

.pk-ann-s::before  { top: calc(100% + var(--pk-ann-gap)); left: 50%; transform: translate(calc(-50% + var(--pk-ann-x)), var(--pk-ann-y)) rotate(208deg); }
.pk-ann-s::after   { top: calc(100% + var(--pk-ann-gap) + var(--pk-ann-arrow-h) + var(--pk-ann-label-gap)); left: 50%; transform: translate(calc(-50% + var(--pk-ann-x)), var(--pk-ann-y)) rotate(var(--pk-ann-rotate)); text-align: center; }

.pk-ann-e::before  { left: calc(100% + var(--pk-ann-gap)); top: 50%; transform: translate(var(--pk-ann-x), calc(-50% + var(--pk-ann-y))) rotate(118deg); }
.pk-ann-e::after   { left: calc(100% + var(--pk-ann-gap) + var(--pk-ann-arrow-w) + var(--pk-ann-label-gap)); top: 50%; transform: translate(var(--pk-ann-x), calc(-50% + var(--pk-ann-y))) rotate(var(--pk-ann-rotate)); }

.pk-ann-w::before  { right: calc(100% + var(--pk-ann-gap)); top: 50%; transform: translate(var(--pk-ann-x), calc(-50% + var(--pk-ann-y))) rotate(-118deg); }
.pk-ann-w::after   { right: calc(100% + var(--pk-ann-gap) + var(--pk-ann-arrow-w) + var(--pk-ann-label-gap)); top: 50%; transform: translate(var(--pk-ann-x), calc(-50% + var(--pk-ann-y))) rotate(var(--pk-ann-rotate)); text-align: right; }

.pk-ann-ne::before { bottom: calc(100% - 2px); left: calc(100% - 6px); transform: translate(var(--pk-ann-x), var(--pk-ann-y)) rotate(0deg); -webkit-mask-image: var(--pk-ann-arrow-m); mask-image: var(--pk-ann-arrow-m); }
.pk-ann-ne::after  { bottom: calc(100% + var(--pk-ann-arrow-h) - 6px); left: calc(100% + 10px); transform: translate(var(--pk-ann-x), var(--pk-ann-y)) rotate(var(--pk-ann-rotate)); }

.pk-ann-nw::before { bottom: calc(100% - 2px); right: calc(100% - 6px); transform: translate(var(--pk-ann-x), var(--pk-ann-y)); }
.pk-ann-nw::after  { bottom: calc(100% + var(--pk-ann-arrow-h) - 6px); right: calc(100% + 10px); transform: translate(var(--pk-ann-x), var(--pk-ann-y)) rotate(var(--pk-ann-rotate)); text-align: right; }

.pk-ann-se::before { top: calc(100% - 2px); left: calc(100% - 6px); transform: translate(var(--pk-ann-x), var(--pk-ann-y)) rotate(-90deg); }
.pk-ann-se::after  { top: calc(100% + var(--pk-ann-arrow-h) - 6px); left: calc(100% + 10px); transform: translate(var(--pk-ann-x), var(--pk-ann-y)) rotate(var(--pk-ann-rotate)); }

.pk-ann-sw::before { top: calc(100% - 2px); right: calc(100% - 6px); transform: translate(var(--pk-ann-x), var(--pk-ann-y)) rotate(90deg); -webkit-mask-image: var(--pk-ann-arrow-m); mask-image: var(--pk-ann-arrow-m); }
.pk-ann-sw::after  { top: calc(100% + var(--pk-ann-arrow-h) - 6px); right: calc(100% + 10px); transform: translate(var(--pk-ann-x), var(--pk-ann-y)) rotate(var(--pk-ann-rotate)); text-align: right; }

/* ---- colors: series and statuses only ---- */
.pk-ann-blue   { --pk-ann-color: var(--pk-blue, #3a6cbf); }
.pk-ann-mint   { --pk-ann-color: var(--pk-mint, #2f8f63); }
.pk-ann-violet { --pk-ann-color: var(--pk-violet, #8256b8); }
.pk-ann-warn   { --pk-ann-color: var(--pk-warn, #96690a); }
.pk-ann-ink    { --pk-ann-color: var(--pk-ink, #191a1c); }

/* ---- draw-on: text first, then the arrow, once ---- */
@keyframes pk-ann-label { from { opacity: 0; transform: translateY(3px) } }
@keyframes pk-ann-ot { from { clip-path: inset(0 0 100% 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes pk-ann-ob { from { clip-path: inset(100% 0 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes pk-ann-ol { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes pk-ann-or { from { clip-path: inset(0 0 0 100%) } to { clip-path: inset(0 0 0 0) } }

.pk-ann::after { animation: pk-ann-label 320ms ease-out both; }
.pk-ann::before { animation: pk-ann-ot var(--pk-ann-draw) ease-out 240ms both; }
.pk-ann-s::before, .pk-ann-se::before, .pk-ann-sw::before { animation-name: pk-ann-ob; }
.pk-ann-e::before { animation-name: pk-ann-ol; }
.pk-ann-w::before { animation-name: pk-ann-or; }

.pk-ann-still::before, .pk-ann-still::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .pk-ann::before, .pk-ann::after { animation: none; }
}

/* ---- print: the note stays, the animation does not ---- */
@media print {
  .pk-ann::before, .pk-ann::after { animation: none; }
}