/* Guided tour for new editors (2026-10-16). Its own file so no shared stylesheet changes.
   Uses the app's own colour variables with fallbacks, so it follows the live look and the Cinema look alike.
   A ring around the real thing being explained, and one plain card beside it. No glow. */
.tour-layer { position: fixed; inset: 0; z-index: 9000; }
.tour-shade { position: fixed; inset: 0; background: transparent; }
.tour-layer.dim .tour-shade { background: rgba(0, 0, 0, 0.72); }
.tour-spot {
  position: fixed; border-radius: 8px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ink, #f2ede7), 0 0 0 100vmax rgba(0, 0, 0, 0.72);
  transition: left 0.22s ease, top 0.22s ease, width 0.22s ease, height 0.22s ease;
}
/* tour.js sets left, top, width and max-height itself, against the part of the page the person can see */
.tour-card {
  position: fixed; left: 12px; top: 12px; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px;
  background: var(--panel, #1d1916); color: var(--ink, #f2ede7);
  border: 1px solid var(--hair, var(--line, #2e2823)); border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.tour-card:focus { outline: none; }
.tour-card.sheet { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.tour-card [hidden] { display: none !important; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-count { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted, #a89e97); font-variant-numeric: tabular-nums; }
.tour-skip { background: none; border: 0; padding: 4px 2px; color: var(--muted, #a89e97); font: inherit; font-size: 0.82rem; text-decoration: underline; cursor: pointer; }
.tour-skip:hover { color: var(--ink, #f2ede7); }
.tour-bar { height: 3px; background: var(--line, #2e2823); border-radius: 2px; overflow: hidden; }
.tour-bar i { display: block; height: 100%; width: 0; background: var(--ink, #f2ede7); transition: width 0.22s ease; }
.tour-card h2 { margin: 2px 0 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.tour-body { display: flex; flex-direction: column; gap: 8px; font-size: 0.95rem; line-height: 1.55; color: var(--ink, #f2ede7); }
.tour-body p { margin: 0; }
.tour-body ul { margin: 0; padding: 0 0 0 1.15em; display: flex; flex-direction: column; gap: 7px; }
.tour-body b { font-weight: 650; }
.tour-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.tour-card button:focus-visible, .tour-skip:focus-visible { outline: 2px solid var(--ink, #f2ede7); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-bar i { transition: none; }
}