/* ══ GUIDES · the ways in (guide.js) ══════════════════════════════════════
 * Loaded on every page, so only the entry points live here; the player's own
 * styles (guide-player.css) load on the first play. The standard is
 * docs/GUIDES.md. Two ways in, the same on every page:
 *   · .guide-top   a ghost button in the page's title row ("How it works").
 *                  Once its guide has been watched (guide.js sets
 *                  [data-guide-seen]) it keeps only its play mark; the name
 *                  stays in its tooltip and for screen readers.
 *   · .guide-link  a quiet line under an empty state's main button, in a
 *                  <p class="guide-empty">. It stays for the next first visit. */
.guide-top svg { width: 13px; height: 13px; }
.guide-top[data-guide-seen] { width: 34px; padding: 8px; justify-content: center; }
.guide-top[data-guide-seen] .guide-top-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
p.guide-empty { margin: 18px 0 0; }
.guide-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: 12.5px;
              color: var(--c-ink-3); text-decoration: none; }
.guide-link svg { width: 11px; height: 11px; }
.guide-link:hover { color: var(--c-ink); }
/* A guide for one section of a page: the same quiet line, at the section's top right. */
p.guide-section { margin: 0 0 -6px; text-align: right; }
/* "Test your agent": its guide line sits beside the title. On a phone the
   panel's controls live in the setup sheet, which a guide cannot light. */
.rail-head .rail-guide { margin-left: auto; margin-right: 8px; white-space: nowrap; }
@media (max-width: 760px) { .rail-head .rail-guide { display: none; } }
/* Call history's empty state: the guide line under the sentence, centred like it. */
p.hist-guide { margin: 0 0 22px; text-align: center; }