/* The guided tour (guide.js): the Play control in the step bar, the dimmed
   window with one lit target, and the caption under the window. */
.steps .guide-btn {
  margin-left: auto; align-self: center; flex: none;
  font: inherit; font-size: var(--text-small); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
}
.steps .guide-btn:hover { background: var(--paper-alt); border-color: var(--slate-300); }
.steps .guide-btn[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.steps .guide-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.panel .guide-dim { opacity: 0.45; transition: opacity 320ms var(--ease-out); }
.panel .guide-focus {
  outline: 2px solid var(--signal-500); outline-offset: 3px;
  position: relative; z-index: 1;
}
.panel.guide-running .happen { display: none; }
.guide-cap {
  display: flex; gap: 12px; align-items: baseline;
  font-size: var(--text-body); color: var(--ink);
  padding: 14px 2px 0; max-width: 74ch; min-height: 48px; margin: 0;
}
.guide-cap .n {
  color: var(--slate-400); font-size: var(--text-small);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .panel .guide-dim { transition: none; }
}