/* Polly's welcome tour (js/tour.js, docs/plan/2026-10-05-polly-welcome-tour.md). Tokens only; no new colours. */
.pt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pt-x { position: absolute; top: 4px; inset-inline-end: 6px; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: var(--r-pill); }
.pt-x:hover { color: var(--ink); }
.pt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pt-mute { min-width: 40px; }
/* the section chip and its spoken panel sit above the phone tab bar, on the end side */
.pt-chip, .pt-say { position: fixed; z-index: 60; inset-inline-end: 16px; bottom: 16px; }
.pt-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line, var(--accent-line)); border-radius: var(--r-pill); padding: 4px 14px 4px 6px; }
.pt-chip img { width: 28px; height: 28px; object-fit: contain; }
.pt-say { display: flex; align-items: center; gap: 10px; width: min(380px, calc(100vw - 32px)); padding: 12px 40px 12px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line, var(--accent-line)); border-radius: var(--r-lg); }
.pt-say .pt-cat { width: 64px; height: 64px; flex: none; margin: 0; }
.pt-say-body { min-width: 0; flex: 1; }
.pt-say .pt-d { margin: 2px 0 0; }
@media (max-width: 760px) { .pt-chip, .pt-say { bottom: calc(var(--dock-h, 64px) + 12px + env(safe-area-inset-bottom, 0px)); } .pt-say { inset-inline: 12px; width: auto; } }

.pt-shield { position: fixed; inset: 0; z-index: 90; background: transparent; }
.pt-ring { position: fixed; z-index: 91; pointer-events: none; border-radius: var(--r-sm); box-shadow: 0 0 0 3px var(--accent), 0 0 0 100vmax rgba(14, 16, 36, .58); }
.pt-ring.pt-none { box-shadow: 0 0 0 100vmax rgba(14, 16, 36, .58); }
.pt-guide { position: fixed; z-index: 92; left: 0; top: 0; display: flex; flex-direction: column; pointer-events: auto; }
.pt-guide.pt-up { flex-direction: column; }
.pt-guide.pt-go { transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pt-card { position: relative; padding: 14px 16px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line, var(--accent-line)); border-radius: var(--r-lg); box-shadow: 0 12px 36px rgba(14, 16, 36, .28); }
.pt-h { display: block; padding-inline-end: 28px; font-size: 1.05rem; }
.pt-d { margin: 4px 0 12px; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }
.pt-n { margin-inline-end: auto; color: var(--muted); font-size: .85rem; }
.pt-cat { display: block; width: 104px; height: 104px; object-fit: contain; pointer-events: none; }
/* above the target: the cat stands under the card, right on top of the ring; below it: the cat sits above the card */
.pt-guide:not(.pt-up) { flex-direction: column-reverse; }
.pt-walk .pt-cat { animation: pt-bob .35s ease-in-out infinite alternate; }
@keyframes pt-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }

:where(html:not(.a11y-contrast)) .pt-chip, :where(html:not(.a11y-contrast)) .pt-say, :where(html:not(.a11y-contrast)) .pt-card { box-shadow: 0 10px 30px rgba(14, 16, 36, .22); }
html.a11y-contrast .pt-ring { box-shadow: 0 0 0 4px currentColor, 0 0 0 100vmax rgba(0, 0, 0, .7); }
html.a11y-contrast .pt-ring.pt-none { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .7); }
html.a11y-contrast .pt-chip, html.a11y-contrast .pt-say, html.a11y-contrast .pt-card { border: 2px solid currentColor; }

html.pref-calm .pt-guide, html.pref-easy .pt-guide { transition: none; }
html.pref-calm .pt-walk .pt-cat, html.pref-easy .pt-walk .pt-cat { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .pt-guide.pt-go { transition: none; }
  .pt-walk .pt-cat { animation: none; }
}
html.kids .pt-shield, html.kids .pt-ring, html.kids .pt-guide, html.kids .pt-replay { display: none; }