/* Scribe — the first-run walkthrough.
 *
 * Loaded after styles.css and built only from its tokens, so the card reads
 * as a note on the same paper as the panels: the panel's colour, its hairline
 * border, the account menu's soft shadow. Nothing here dims or blocks the
 * page. The ring lets every click through to what it marks, and the card
 * covers only its own corner. Everything here is created by lib/tour.js,
 * which also sets the positions. */

/* Above the page and the account menu (20), below the class picker's open
 * list (40), which is what someone is working in while it's up, and the
 * toast (50). Dialogs open in the top layer, over all of it, and the tour
 * hides while one is open. */
.tour-ring, .tour-card { position: fixed; z-index: 30; top: 0; left: 0; }
.tour-ring[hidden], .tour-card[hidden], .tour-card [hidden] { display: none; }

/* ---- The ring around the step's target ---------------------------------- */

.tour-ring {
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--accent-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: tour-pulse 2.4s ease-in-out infinite;
}
@keyframes tour-pulse {
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 9px color-mix(in srgb, var(--accent) 9%, transparent); }
}

/* ---- The card ------------------------------------------------------------ */

.tour-card { width: min(300px, calc(100vw - 24px)); padding: 14px 16px 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px var(--shadow); }
/* The step counter in the voice of the site's eyebrows; written "1 of 4", so a screen reader doesn't spell it out. */
.tour-count { display: block; font-size: 10px; font-weight: 650; letter-spacing: 1.5px; line-height: 1.4; text-transform: uppercase; color: var(--muted); }
.tour-title { margin: 6px 0 4px; font-size: 14px; font-weight: 600; line-height: 1.35; }
.tour-body { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.tour-actions { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.tour-card button { font-size: 12px; padding: 6px 12px; }
.tour-card button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Skipping is always there, but quiet: text, not a button shape. */
.tour-card .tour-skip { margin-right: auto; padding: 6px 2px; border: 0; background: transparent; color: var(--muted); }
.tour-card .tour-skip:hover:not(:disabled) { background: transparent; color: var(--text); }

/* A small diamond on the edge facing the target, drawn with two of its
 * borders so it reads as a notch in the card's own outline. lib/tour.js sets
 * how far along the edge it sits. */
.tour-arrow { position: absolute; width: 10px; height: 10px; background: var(--panel); border: 1px solid var(--line); transform: translate(-50%, -50%) rotate(45deg); }
.tour-card[data-placement="bottom"] .tour-arrow { top: 0; border-right-color: transparent; border-bottom-color: transparent; }
.tour-card[data-placement="top"] .tour-arrow { top: 100%; border-top-color: transparent; border-left-color: transparent; }
.tour-card[data-placement="right"] .tour-arrow { left: 0; border-top-color: transparent; border-right-color: transparent; }
.tour-card[data-placement="left"] .tour-arrow { left: 100%; border-bottom-color: transparent; border-left-color: transparent; }

/* ---- On a phone: a sheet along the bottom edge ---------------------------- */

/* There's no room beside anything, so the card spans the width and keeps
 * clear of the home indicator; the ring still marks the target above it. */
.tour-card[data-placement="dock"] {
  top: auto; right: 0; bottom: 0; left: 0; width: auto;
  padding: 14px max(18px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  border-width: 1px 0 0; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 24px var(--shadow-mid);
}
.tour-card[data-placement="dock"] .tour-arrow { display: none; }
/* lib/tour.js sets --tour-dock to the sheet's height while it's docked, so
 * the page gets that much room at its foot and its last buttons and links
 * can scroll up clear of it; the toast rises above it too (styles.css). */
body { padding-bottom: var(--tour-dock, 0px); }
.tour-card[data-placement="dock"] button { padding: 9px 14px; }
.tour-card[data-placement="dock"] .tour-skip { padding: 9px 2px; }

/* Heard, not seen: each step is read out as it arrives. */
.tour-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .tour-ring { animation: none; } }
@media print { .tour-ring, .tour-card { display: none; } }