/* An annotated screenshot: numbered pins on the image, a numbered legend under
   it. Pins carry no text of their own — the legend is the content, so the
   figure still reads on a narrow screen and to a crawler. */

.annotated__frame {
  position: relative;
}

/* Centred by flex, not by line-height: the border-box sizing these carry makes
   any line-height that matches the height overshoot the content box, which
   drops the digit off centre. */
.annotated__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 17px with a 2px ring: the top bar's icons sit 1.8% apart, so anything
     larger makes neighbouring pins collide there */
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  /* the ring keeps the pin readable over any pixel underneath it */
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65);
  color: #07130a;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1;
}

.annotated__legend {
  counter-reset: pin;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.55rem 2.2rem;
  margin: clamp(1.3rem, 2.4vw, 1.9rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}

.annotated__legend li {
  counter-increment: pin;
  position: relative;
  padding-left: 1.8rem;
  text-wrap: pretty;
}

.annotated__legend li::before {
  content: counter(pin);
  position: absolute;
  left: 0;
  top: 0.16em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid rgba(0, 200, 83, 0.45);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1;
}

.annotated__legend b {
  color: var(--cream);
  font-weight: 600;
}

/* The entry belonging to the pin currently open. */
.annotated__legend li.is-lit {
  color: var(--cream);
}

.annotated__legend li.is-lit::before {
  border-color: var(--accent);
  background: rgba(0, 200, 83, 0.14);
}

/* ---- enhanced: a pin tells you what it points at ---- */

button.annotated__pin {
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}

button.annotated__pin:hover,
button.annotated__pin[data-open] {
  transform: translate(-50%, -50%) scale(1.15);
}

/* Every pin sits in the top tenth of the window, so the tooltip always drops
   below it — above would fall outside the figure. */
.annotated__tip {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: max-content;
  max-width: min(19rem, 42vw);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(8, 8, 8, 0.97);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.79rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease;
}

/* Pins near an edge anchor their tooltip to that edge instead of centring it,
   so it cannot hang off the image. */
.annotated__pin[data-side="right"] .annotated__tip {
  left: -6px;
  transform: none;
}

.annotated__pin[data-side="left"] .annotated__tip {
  left: auto;
  right: -6px;
  transform: none;
}

.annotated__pin:hover .annotated__tip,
.annotated__pin:focus-visible .annotated__tip,
.annotated__pin[data-open] .annotated__tip {
  opacity: 1;
  visibility: visible;
}

/* One pulse when the figure first comes into view: a still green dot invites
   nobody to hover it. Added by js/presentation/reveal.js. */
@keyframes pin-pulse {
  from {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65), 0 0 0 2px rgba(0, 200, 83, 0.55);
  }
  to {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65), 0 0 0 13px rgba(0, 200, 83, 0);
  }
}

.annotated--seen .annotated__pin {
  animation: pin-pulse 1.2s ease-out 1;
}

/* Both breakpoints below come from one measurement, not from a device: the three
   pins in the top bar sit 1.9% of the frame apart, and the frame is the viewport
   less the page's gutters. So the spacing they get in pixels is a function of
   the window, and a pin wider than that spacing lands on its neighbour.

   1040px of viewport is where 1.9% stops being 17px, so the pin gets smaller. */
@media (max-width: 1040px) {
  .annotated__pin {
    width: 13px;
    height: 13px;
    font-size: 0.46rem;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
  }
}

/* 780px is where 1.9% stops being 13px, and 13px is as small as a numeral goes.
   Below it the pins would sit on each other instead of on what they name, so
   they go: the numbered legend under the frame carries all eight either way,
   which is why it, and not the pins, is the content. */
@media (max-width: 780px) {
  .annotated__pin {
    display: none;
  }

  /* And the legend's numbers go with them. A number is a promise that the same
     number is on the frame; with the pins gone it points at nothing, and the
     reader is left looking for it. Each entry names its own part, so the list
     still says all eight things — it just stops claiming to be a key. */
  .annotated__legend {
    gap: 0.85rem 2.2rem;
  }

  .annotated__legend li {
    padding-left: 0;
  }

  .annotated__legend li::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .annotated--seen .annotated__pin {
    animation: none;
  }

  button.annotated__pin,
  .annotated__tip {
    transition: none;
  }

  button.annotated__pin:hover,
  button.annotated__pin[data-open] {
    transform: translate(-50%, -50%);
  }
}