/**
 * annotate.css — the visual language of the annotation layer.
 *
 * Self-contained: every colour and face the overlay uses is declared on
 * .spec-layer, so the system can be dropped over any UI without inheriting
 * or polluting that UI's own tokens.
 */

.spec-layer,
.spec-legend {
  --spec: #f20a8c;
  --spec-line: rgb(242 10 140 / 55%);
  --spec-wash-from: rgb(242 10 140 / 15%);
  --spec-wash-to: rgb(242 10 140 / 5%);
  --spec-edge: rgb(242 10 140 / 22%);
  --spec-tint: rgb(242 10 140 / 7%);
  --spec-guide: #85868a;
  --spec-lead: #6e6f73;
  --spec-wire: #55575b;
  --spec-dot: #66686c;
  --spec-chip: #050506;
  --spec-chip-text: #c7c3c8;
  --spec-chip-edge: transparent;
  --spec-mark: #f4f4f4;
  --spec-name: #77787c;
  --spec-mono: "IBM Plex Mono", ui-monospace, monospace;
  --spec-overhang: 56px;
}

.spec-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: visible;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
}

.spec-layer > *,
.spec-layer > * > * {
  position: absolute;
}

/* --------------------------------------------------------------- regions */

.spec-inset {
  border: 1px dashed var(--spec-guide);
}

.spec-divider {
  border-top: 1px dashed var(--spec-guide);
}

.spec-outline {
  box-shadow: 0 0 0 1px var(--spec-line);
}

.spec-band {
  border-block: 1px solid var(--spec-edge);
  background: linear-gradient(90deg, var(--spec-wash-from), var(--spec-wash-to));
}

/* A space that is not a fixed measure — it reads as an opening, not a slab. */
.spec-band--open {
  border-block-style: dashed;
  background: none;
}

/* ---------------------------------------------------------------- rulers */

.spec-ruler {
  color: var(--spec);
  font-family: var(--spec-mono);
  white-space: nowrap;
}

.spec-ruler__cap {
  background: var(--spec);
}

.spec-ruler--v {
  width: 0;
  border-left: 1px solid var(--spec);
}

.spec-ruler--v .spec-ruler__cap {
  left: 0;
  width: 14px;
  height: 1px;
}

.spec-ruler--v .spec-ruler__cap--start { top: 0; }
.spec-ruler--v .spec-ruler__cap--end { bottom: 0; }

.spec-ruler--v .spec-ruler__label {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.spec-ruler--h {
  height: 0;
  border-top: 1px solid var(--spec);
}

.spec-ruler--h .spec-ruler__cap {
  top: 0;
  width: 1px;
  height: 8px;
}

.spec-ruler--h .spec-ruler__cap--start { left: 0; }
.spec-ruler--h .spec-ruler__cap--end { right: 0; }

.spec-ruler--h .spec-ruler__label {
  bottom: 9px;
  left: 0;
}

/* ---------------------------------------------------------------- radius */

.spec-radius {
  border: 1px dashed var(--spec);
  border-radius: 50%;
  background: var(--spec-tint);
}

.spec-radius__label {
  color: var(--spec);
  font-family: var(--spec-mono);
  white-space: nowrap;
  transform: translateY(-50%);
}

.spec-radius__label--start {
  transform: translate(-100%, -50%);
}

/* -------------------------------------------------------------- callouts */

.spec-callout__line {
  border-top: 1px solid var(--spec-lead);
}

.spec-callout__text {
  width: 9.5rem;
  font-family: var(--spec-mono);
  color: var(--spec-lead);
  transform: translateY(-50%);
}

/* ----------------------------------------------------------------- notes */

/* Two presentations of one note. The leader-line form is the default; a
   breakpoint hides it and shows the pin, which needs no horizontal room. */

.spec-note__line {
  border-top: 1px solid var(--spec-lead);
}

.spec-note__text {
  display: flex;
  width: var(--spec-note-width, 15rem);
  gap: 0.55rem;
  color: var(--spec-note-text, var(--spec-lead));
  font-size: var(--spec-note-size, 0.8125rem);
  line-height: 1.45;
  transform: translateY(-50%);
}

.spec-note__text > * {
  position: relative;
}

.spec-note__text--left {
  flex-direction: row-reverse;
  text-align: right;
  transform: translate(-100%, -50%);
}

.spec-note__index,
.spec-note__pin,
.spec-legend__index {
  display: grid;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  color: var(--spec-pin-text, #fff);
  background: var(--spec-pin, var(--spec));
  font-family: var(--spec-mono);
  font-size: 0.6875rem;
  line-height: 1;
}

.spec-note__index,
.spec-legend__index {
  position: relative;
  margin-top: 0.05rem;
}

.spec-note__pin {
  display: none;
  transform: translate(-50%, -50%);
}

/* The keyed list, rendered outside the layer so it can sit at text measure
   under the figure. Hidden until a breakpoint asks for it. */
.spec-legend {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spec-legend__item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

/* ---------------------------------------------------------------- tokens */

.spec-token {
  display: flex;
  font-family: var(--spec-mono);
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1.15rem 0.5rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--spec-chip-edge);
  color: var(--spec-chip-text);
  background: var(--spec-chip);
  transform: translateX(-50%);
}

.spec-token__swatch {
  position: relative;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.spec-token__name {
  position: relative;
}

.spec-token__line {
  width: 1px;
  background: var(--spec-wire);
}

.spec-token__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--spec-dot);
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------------ name */

.spec-name {
  display: flex;
  font-family: var(--spec-mono);
  align-items: center;
  gap: 1rem;
  color: var(--spec-name);
  font-size: 1.15rem;
  white-space: nowrap;
  transform: translateX(-50%);
}

.spec-name__mark,
.spec-name__text {
  position: relative;
}

.spec-name__mark {
  width: 1.7rem;
  height: 1.7rem;
  border: 2px solid var(--spec-mark);
  transform: rotate(45deg);
}

@media (forced-colors: active) {
  .spec-layer {
    --spec: CanvasText;
    --spec-guide: CanvasText;
    --spec-lead: CanvasText;
  }
}