/* site/tour.css — the first-run tour (site/tour.js). One green: the ☰ / ▾ / 🔇 luminous ring of video_stage.css
 * (#39ff14 on dark glass, Dom 2026-10-12). Green marks the ring, the dots and the main button; the copy is ivory on
 * near-black so it reads at a glance in light and dark. */
.vt-root {
  --vt-green: #39ff14; --vt-glow: rgba(57, 255, 20, .5); --vt-ink: #eae5d9; --vt-ink-2: #b9b3a6; --vt-card: rgba(21, 19, 15, .94);
  position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
.vt-root [hidden] { display: none !important; }
.vt-btn { white-space: nowrap; }
.vt-shade { position: absolute; inset: 0; pointer-events: auto; background: transparent; }
.vt-root:not(.vt-has-target) .vt-shade { background: rgba(0, 0, 0, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* the spotlight: the page is dimmed by the ring's own giant shadow, so the real control stays sharp */
.vt-ring {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; border-radius: 12px;
  border: 1.5px solid var(--vt-green);
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .62), 0 0 10px 2px var(--vt-glow), inset 0 0 8px rgba(57, 255, 20, .25);
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), width .42s cubic-bezier(.2, .8, .2, 1),
              height .42s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.vt-ring.vt-pulse::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--vt-green);
  animation: vt-pulse 1.1s ease-out .35s 2;
}
@keyframes vt-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.08); } }

/* the card */
.vt-card {
  position: absolute; width: min(380px, calc(100vw - 24px)); pointer-events: auto; box-sizing: border-box;
  padding: 1.1rem 1.2rem 1rem; border-radius: 14px; color: var(--vt-ink); background: var(--vt-card);
  border: 1px solid rgba(57, 255, 20, .55);
  box-shadow: 0 0 14px rgba(57, 255, 20, .22), 0 18px 50px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: left .42s cubic-bezier(.2, .8, .2, 1), top .42s cubic-bezier(.2, .8, .2, 1);
}
.vt-card.vt-centre { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); text-align: center; }
.vt-card.vt-in { animation: vt-in .38s cubic-bezier(.2, .8, .2, 1); }
.vt-card.vt-centre.vt-in { animation: vt-in-c .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes vt-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes vt-in-c { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }

.vt-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.6rem; margin-bottom: .35rem; }
.vt-centre .vt-top { justify-content: flex-end; }
.vt-count { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-green); text-shadow: 0 0 6px var(--vt-glow); }
.vt-skip { font: inherit; font-size: .82rem; color: var(--vt-ink-2); background: none; border: 0; padding: .45rem .2rem; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.vt-skip:hover { color: var(--vt-ink); }
.vt-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: 1.65rem; line-height: 1.12; margin: 0 0 .45rem; color: #fff; }
.vt-centre .vt-title { font-size: 2.05rem; }
.vt-body { font-size: 1rem; line-height: 1.5; margin: 0 0 .9rem; color: var(--vt-ink); }

.vt-dots { display: flex; gap: .35rem; margin-bottom: .85rem; }
.vt-centre .vt-dots { justify-content: center; }
.vt-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(234, 229, 217, .22); transition: background .3s, box-shadow .3s, width .3s; }
.vt-dot.on { background: var(--vt-green); box-shadow: 0 0 5px var(--vt-glow); }
.vt-dot.now { width: 20px; border-radius: 4px; }

.vt-nav { display: flex; gap: .6rem; justify-content: flex-end; }
.vt-centre .vt-nav { justify-content: center; }
.vt-btn { font: inherit; font-size: .95rem; font-weight: 600; min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px; cursor: pointer; }
.vt-back { color: var(--vt-ink); background: transparent; border: 1px solid rgba(234, 229, 217, .3); }
.vt-back:hover { border-color: var(--vt-ink); }
.vt-next {
  color: var(--vt-green); background: rgba(0, 0, 0, .55); border: 1.5px solid var(--vt-green);
  box-shadow: 0 0 8px 1px var(--vt-glow), inset 0 0 6px rgba(57, 255, 20, .2); text-shadow: 0 0 5px rgba(57, 255, 20, .6);
}
.vt-next:hover { background: rgba(57, 255, 20, .12); }
.vt-next:active { transform: scale(.97); }
.vt-btn:focus-visible, .vt-skip:focus-visible { outline: 2px solid var(--vt-green); outline-offset: 3px; }

/* phone: a bottom sheet (top when the control lives in the bottom half, i.e. the thumb dock) */
@media (max-width: 699px) {
  .vt-card:not(.vt-centre) { left: 10px !important; right: 10px; width: auto; top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .vt-card:not(.vt-centre)[data-at="top"] { top: calc(10px + env(safe-area-inset-top)); bottom: auto; }
  .vt-title { font-size: 1.5rem; }
  .vt-nav .vt-btn { flex: 1; }
}

.vt-root.vt-out { opacity: 0; transition: opacity .25s ease; }
.vt-reduced .vt-ring, .vt-reduced .vt-card { transition: none; }
.vt-reduced .vt-card.vt-in, .vt-reduced .vt-ring.vt-pulse::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .vt-ring, .vt-card { transition: none; }
  .vt-card.vt-in, .vt-card.vt-centre.vt-in, .vt-ring.vt-pulse::after { animation: none; }
}
html.vt-open { overscroll-behavior: none; }

/* During the tour the bars stay in view (Dom 26 Oct): the top bar that otherwise folds away until the mouse comes up
   (video_stage.css body.bar-auto) is held open, without touching the reader's own setting. */
/* Desktop only (Dom's iPhone, 27 Oct): on a phone the reader folds the bar to the logo on purpose, and held open it is a
   solid strip over the top of the poet's face (only the nose down showed on step 5). No phone stop on a poem needs it. */
@media (min-width: 700px) {
  html.vt-open body.bar-auto .topbar {
    background: var(--paper) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .4) !important; pointer-events: auto !important;
  }
  html.vt-open body.bar-auto .topbar > * { opacity: 1 !important; visibility: visible !important; }
}
html.vt-dock body.dock-thumb.dock-tucked .stage-dock { transform: none !important; }
/* 25 stops: smaller dots so the row fits a phone */
.vt-dots { gap: .22rem; flex-wrap: wrap; }
.vt-dot { width: 6px; height: 6px; }
.vt-dot.now { width: 16px; }

/* the poem list demo (tour.js showDrop): a copy of the native <select>'s options, dropping open */
.vt-drop {
  position: absolute; z-index: 2; pointer-events: none; box-sizing: border-box; padding: .3rem; border-radius: 10px;
  background: rgba(21, 19, 15, .97); border: 1.5px solid var(--vt-green); box-shadow: 0 0 10px var(--vt-glow), 0 14px 40px rgba(0, 0, 0, .6);
  transform-origin: top center; animation: vt-drop .32s cubic-bezier(.2, .8, .2, 1);
}
.vt-drop.vt-up { transform-origin: bottom center; }
@keyframes vt-drop { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } }
.vt-drop-row { font-size: .9rem; color: var(--vt-ink); padding: .45rem .6rem .45rem 1.6rem; border-radius: 6px; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .2s, color .2s; }
.vt-drop-row.on::before { content: '✓'; position: absolute; left: .55rem; color: var(--vt-green); }
.vt-drop-row.hi { background: rgba(57, 255, 20, .16); color: #fff; }
.vt-drop-more { font-size: .75rem; color: var(--vt-ink-2); padding: .35rem .6rem .2rem 1.6rem; }
@media (prefers-reduced-motion: reduce) { .vt-drop { animation: none; } }

/* the views demo (tour.js showViews): which of the four views is on screen */
.vt-views { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.vt-view { font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid rgba(234, 229, 217, .25); color: var(--vt-ink-2); transition: all .25s; }
.vt-view.on { color: var(--vt-green); border-color: var(--vt-green); box-shadow: 0 0 6px var(--vt-glow); }
.vt-view-desc { display: block; }
.vt-view-how { display: block; margin-top: .5rem; font-size: .88rem; color: var(--vt-ink-2); }

/* the ? in the top menu that starts the tour (tour.js boot): the ☰'s luminous green ring, small enough for a phone bar */
.topnav .vt-nav-tour {
  width: 1.7rem; height: 1.7rem; min-width: 1.7rem; padding: 0 !important; border-radius: 50%; align-self: center;
  display: inline-flex; align-items: center; justify-content: center; font: 700 .9rem/1 Inter, system-ui, sans-serif;
  color: #39ff14 !important; background: rgba(0, 0, 0, .55) !important; border: 1.5px solid #39ff14 !important;
  box-shadow: 0 0 6px 1px rgba(57, 255, 20, .45); text-shadow: 0 0 4px rgba(57, 255, 20, .7);
}
.topnav .vt-nav-tour:hover { background: rgba(57, 255, 20, .14) !important; }

/* taps on the tour's buttons are handled on touchend (tour.js tap): no double-tap zoom, no grey tap flash */
.vt-card, .vt-card button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.vt-btn:active, .vt-skip:active { transform: scale(.96); }