/* ==========================================================================
   Annotation — "conversion annotation" notes on demo pages.
   Hidden by default; shown while <html data-annotations="on"> (set by the
   kit pill). The positioned parent must be position: relative.

   <aside class="annotation">
     <span class="annotation__label">◎ HERO VARIANT B · PRODUCT</span>
     Why this section exists and what it converts to.
   </aside>

   Modifiers:  .annotation--left     anchor to the left edge instead of the right
               .annotation--light    light card (for dark sections)
               .annotation--static   in normal flow instead of absolutely placed
   Offset:     style="--annotation-top: 24px"   (default 16px)
   ========================================================================== */

.annotation {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  top: var(--annotation-top, 16px);
  z-index: 6;
  display: none;
  width: min(300px, calc(100% - 32px));
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--graphite-900);
  color: var(--graphite-mist);
  font: 400 13px/1.5 'Geist', sans-serif;
}

[data-annotations="on"] .annotation { display: block; }

.annotation__label {
  display: block;
  margin-bottom: 8px;
  font: 500 11px/1 'Geist Mono', monospace;
  letter-spacing: .08em;
  color: var(--scrub-300);
}

.annotation--left {
  left: clamp(16px, 3vw, 40px);
  right: auto;
}

.annotation--light {
  background: var(--graphite-mist);
  color: var(--graphite-900);
}
.annotation--light .annotation__label { color: var(--scrub-600); }

.annotation--static {
  position: static;
  width: auto;
  max-width: 640px;
}