/*
 * Styling for callouts.js — code callouts. Loaded only by decks that use them.
 */

/* The wrapper the plugin puts around a <pre> is the positioning context; a
   label fades in beside its line, vertically centred on it. */
.reveal .callouts {
  position: relative;
}

.reveal .callouts .callout {
  position: absolute;
  right: 24px; /* inside the code window's padding */
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.5em;
  font-style: italic;
  color: #ffd54f; /* annotation amber — warm against the cool code */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.reveal .callouts .callout.on {
  opacity: 1;
}

/* Floating form: a shaft sized by the plugin to reach back to the line, with a
   head at its far end, in the accent blue. */
.reveal .callouts .callout .shaft {
  position: absolute;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--ece-accent);
}

.reveal .callouts .callout .shaft::before {
  content: '';
  position: absolute;
  left: -9px;
  top: -4px;
  border-right: 10px solid var(--ece-accent);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* Inline form: the label sits on a blank row the plugin inserted above its
   line, still pinned to the window's right edge, with a chevron pointing down
   at the line instead of a shaft. */
.reveal .callouts .callout .chevron {
  display: none;
  color: var(--ece-accent);
  vertical-align: -0.05em;
  margin-right: 0.5em;
}

.reveal .callouts .callout.inline .shaft {
  display: none;
}

.reveal .callouts .callout.inline .chevron {
  display: inline-block;
}