/* ── Deck framework · autopilot controls (autopilot.js) ──────────────────────
   The pilot mascot sits in the bottom-right corner just above .deck-counter;
   a click slides its control bar out to the left. Theme tokens only. Deck
   chrome is z-index 100 and the cue strip 200, so this sits between them. */

.pilot {
  position: fixed; z-index: 150;
  right: clamp(10px, 1.8vw, 22px);
  bottom: calc(clamp(10px, 1.8vh, 22px) + 22px);
  display: flex; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.pilot > * { pointer-events: auto; }

.pilot__mascot {
  width: clamp(52px, 6vw, 76px); aspect-ratio: 352 / 384;
  padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%;
}
.pilot__mascot img { width: 100%; height: 100%; display: block; object-fit: contain; }
.pilot__mascot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
/* nodding while it talks, and only then: an idle deck runs no animation here */
.pilot.is-talking .pilot__mascot { animation: pilot-talk .5s ease-in-out infinite alternate; }
@keyframes pilot-talk { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-3px) rotate(1.5deg); } }
/* a paused pilot wears a small pause badge */
.pilot[data-state="paused"] .pilot__mascot::after {
  content: '⏸'; position: absolute; right: -2px; top: -2px;
  font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 8px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
}
.pilot__mascot { position: relative; }

.pilot__bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  max-width: min(78vw, 560px);
  margin-bottom: 8px; padding: 6px 8px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--font-mono); font-size: 12px;
  opacity: 0; visibility: hidden; transform: translateX(16px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.pilot.is-open .pilot__bar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.pilot__bar button, .pilot__bar select {
  font: inherit; color: inherit; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 8px;
  min-height: 30px; padding: 2px 8px; cursor: pointer;
}
.pilot__play { min-width: 40px; font-size: 14px !important; color: var(--accent) !important; }
.pilot__bar button:hover, .pilot__bar button.is-hot,
.pilot__bar select:hover, .pilot__bar select.is-hot { border-color: var(--accent); }
.pilot__bar button:focus-visible, .pilot__bar select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pilot__speed, .pilot__langs { display: inline-flex; align-items: center; gap: 4px; }
.pilot__step { min-width: 26px; padding: 2px 4px !important; }
.pilot__lang[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.pilot__credit { color: var(--muted); font-size: 11px; }
.pilot__credit:empty { display: none; }
.pilot__hint { display: none; color: var(--muted); font-size: 11px; }
.pilot.is-held .pilot__hint { display: inline; }

/* a line whose recording did not load, shown while it would have been said */
.pilot__cap {
  position: fixed; z-index: 150; left: 50%; bottom: calc(clamp(10px, 1.8vh, 22px) + 28px);
  transform: translateX(-50%); max-width: min(86vw, 760px);
  padding: 8px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 15px; line-height: 1.45; text-align: center;
  display: none;
}
.pilot__cap.is-on { display: block; }

@media (prefers-reduced-motion: reduce) {
  .pilot__bar { transition: none; }
  .pilot.is-talking .pilot__mascot { animation: none; }
}
@media print { .pilot, .pilot__cap { display: none !important; } }