/* annotate.css — the look of the specimen-chapter callout layer (annotate.js).
   Deliberately story.js's vocabulary: the accent, 1.5 px strokes, mono
   upper-case labels, corner brackets rather than closed panels. The two
   turntable chapters and the four story chapters have to read as one
   instrument. Nothing in here is loaded or referenced by styles.css. */

.annot {
  position: absolute;
  inset: 0;
  z-index: 5; /* over .chapter-canvas (3), under the spec panel */
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.annot-c {
  /* NO `opacity` rule here, ever. annotate.js writes the group's opacity as a
     PRESENTATION ATTRIBUTE every paint, and any CSS declaration — even
     `opacity: 0` as a starting state — outranks a presentation attribute and
     silently pins the whole layer invisible. (It did, on the first capture.) */
  transition: none;
}

/* --- the anchor itself: a small solid dot with a soft ring behind it, the
   same two-part mark story.js uses for a tracked point ------------------- */
.annot-dot {
  fill: var(--accent, #01a2f6);
  stroke: rgba(5, 6, 7, 0.55);
  stroke-width: 1;
}

.annot-halo {
  fill: none;
  stroke: var(--accent, #01a2f6);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- the leader: thin, accent, and never a straight diagonal — a single
   dogleg reads as a drawn callout, a diagonal reads as a stray line ------- */
.annot-leader {
  fill: none;
  stroke: var(--accent, #01a2f6);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
  vector-effect: non-scaling-stroke;
}

/* --- the label block ---------------------------------------------------- */
.annot-chip {
  /* The chips sit over a photograph, not over a scrim, so the fill has to
     carry the type on its own — 0.62 was legible on the dark car-park plate
     behind the Scrubber and not on the Sweeper's brighter corridor. */
  fill: rgba(5, 6, 7, 0.82);
  stroke: none;
}

.annot-bracket {
  fill: none;
  stroke: var(--accent, #01a2f6);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.annot-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--accent, #01a2f6);
}

.annot-detail {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  fill: var(--ink, #f2f4f6);
  opacity: 0.86;
}

/* --- coarse pointers: numbered pins on the machine, words in a list ------ */
.annot-badge {
  fill: rgba(5, 6, 7, 0.72);
  stroke: var(--accent, #01a2f6);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.annot-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  fill: var(--accent, #01a2f6);
}

.annot-list {
  display: none;
}

@media (pointer: coarse) {
  .annot-list {
    /* .chapter-inner is an ordered grid on mobile: .chapter-visual is order 1
       and .chapter-copy is order 2, so an unordered child lands at order 0 —
       ABOVE the machine, which is where the first mobile capture put it.
       Sharing the visual's order value drops it directly under the machine,
       because source order breaks the tie. */
    order: 1;
    display: grid;
    gap: 0.55rem;
    counter-reset: annot;
    /* the list sits straight on the scene photo, which is bright behind the
       machine on Sweeper 40's corridor — it needs its own ground */
    margin: 0.7rem 0 0.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--accent, #01a2f6) 22%, transparent);
    border-radius: 3px;
    background: rgba(5, 6, 7, 0.62);
    backdrop-filter: blur(7px);
    list-style: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 520ms ease, transform 520ms ease;
  }

  .annot-list[data-on] {
    opacity: 1;
    transform: none;
  }

  .annot-list li {
    counter-increment: annot;
    position: relative;
    padding-left: 1.7rem;
    line-height: 1.35;
  }

  /* the number ties the line to the pin drawn on the machine above it */
  .annot-list li::before {
    content: counter(annot);
    position: absolute;
    left: 0;
    top: 0.05em;
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--accent, #01a2f6) 55%, transparent);
    border-radius: 50%;
    font-size: 0.62rem;
    color: var(--accent, #01a2f6);
  }

  .annot-list b {
    display: block;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent, #01a2f6);
  }

  .annot-list span {
    display: block;
    /* .mono upper-cases; the detail line is a sentence, not a label */
    text-transform: none;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    color: var(--muted, #9aa3ab);
  }
}

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