/* Simulator guided tour overlay.
 *
 * Loaded only by the simulator index page. Every rule is scoped under a `.tour`
 * class (or a `[data-tour-*]` hook) so nothing here touches the page when the
 * tour is not running. Design tokens come from theme.css, which is loaded
 * first; the only colours declared here are the two tour-local tokens below,
 * and they are declared per theme so the overlay follows the theme switch.
 *
 * Palette semantics (design system): rose --accent marks the reader's current
 * position and the primary action, teal --accent-2 carries information and
 * small type, and the --spectral gradient marks position along a sequence -
 * which is exactly what the step progress bar is.
 */

:root {
  /* Solid fallback first, then the color-mix() refinement: color-mix() is
     unsupported below iOS Safari 16.2 / Chrome 111, and the scrim is the one
     thing that must never fail to paint. */
  --tour-scrim: rgba(7, 6, 15, 0.74);
  --tour-scrim: color-mix(in srgb, var(--app-bg) 74%, transparent);
  --tour-z: 1200;   /* above #tip (1000), the sticky topbar (30), #run-btn (20) */
}

[data-theme="light"] {
  --tour-scrim: rgba(25, 20, 48, 0.42);
  --tour-scrim: color-mix(in srgb, #191430 42%, transparent);
}

/* ---------------- layers ---------------- */

/* The root never intercepts pointer events: the reader must be able to press
   Propagate while the gate step is on screen, and poking at a highlighted
   control mid-step is how anyone learns an instrument. Only the card itself
   opts back in. */
.tour {
  position: fixed;
  inset: 0;
  z-index: var(--tour-z);
  pointer-events: none;
}

/* Centred steps (welcome, finish) have no spotlight, so a plain scrim dims
   the whole page instead. */
.tour-scrim {
  position: fixed;
  inset: 0;
  background: var(--tour-scrim);
  pointer-events: none;
}

/* The spotlight. One element paints the entire scrim with its own box shadow,
   which keeps the lit region a real hole rather than four rectangles kept in
   sync.
   The `top: 0; left: 0` pair is an origin pin, not a directional layout call:
   tour.js drives position with a translate in VIEWPORT coordinates, which the
   model has already mirrored for RTL. Translating also keeps the moving
   spotlight on the compositor instead of relaying out every frame. */
.tour-hole {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  border: 2px solid var(--accent);
  border-radius: var(--r-md, 12px);
  box-shadow: 0 0 0 200vmax var(--tour-scrim);
  pointer-events: none;
  transition:
    transform var(--t-med, 0.26s) var(--ease-out, ease),
    width var(--t-med, 0.26s) var(--ease-out, ease),
    height var(--t-med, 0.26s) var(--ease-out, ease);
}

/* A slow ring on the action gate: the one step that asks for a press. */
.tour-hole::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid var(--accent);
  border-radius: inherit;
  opacity: 0;
}
.tour-hole.is-gate::after {
  animation: tour-pulse 2s var(--ease-out, ease) infinite;
}
@keyframes tour-pulse {
  0% { opacity: 0.6; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.035); }
  100% { opacity: 0; transform: scale(1.035); }
}

/* ---------------- the card ---------------- */

/* Same origin-pin plus translate as the spotlight, so the entry animation can
   never fight the positioning transform. */
.tour-card {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0, 0, 0);
  width: min(360px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 18px 20px 16px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px);
  box-shadow: var(--elev-3);
  pointer-events: auto;
  font-family: var(--font-body);
  animation: tour-in var(--t-med, 0.26s) var(--ease-out, ease) both;
}
@keyframes tour-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Progress: a mono step count over a spectral rail. The gradient marks the
   reader's position along the sequence, which is the only thing it means. */
.tour-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.tour-rail {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--rule);
  overflow: hidden;
}
.tour-rail span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--spectral);
  transition: width var(--t-med, 0.26s) var(--ease-out, ease);
}
.tour-count {
  font-family: var(--font-mono);
  font-size: var(--fs-label, 11.5px);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent-2);
  white-space: nowrap;
}

.tour-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--text);
  text-wrap: balance;
}
.tour-title:focus { outline: none; }
.tour-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tour-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}
.tour-note {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--accent-2);
}
.tour-note[hidden] { display: none; }

.tour-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0 0;
}
.tour-links[hidden] { display: none; }
.tour-links a {
  color: var(--accent-2);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border-block-end: 1px solid transparent;
}
.tour-links a:hover { border-block-end-color: var(--accent-2); }

/* ---------------- controls ---------------- */

.tour-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}
/* Pushes everything after it to the inline end, in both directions. */
.tour-spacer { flex: 1 1 auto; }

.tour-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 8px);
  background: var(--panel-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.tour-btn:hover { border-color: var(--accent); }
.tour-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-btn[hidden] { display: none; }

.tour-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  /* No literal fallback: --accent-ink is defined in BOTH themes, and a dark
     fallback here would be invisible on the light theme's rose. */
  color: var(--accent-ink);
}
.tour-btn--primary:hover { filter: brightness(1.06); }

/* Skip and "Not now" are quiet, but never hidden and never smaller than the
   control they sit beside: declining has to be as easy as accepting. */
.tour-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-weight: 400;
}
.tour-btn--quiet:hover { color: var(--text); border-color: var(--border); }

/* ---------------- page-side entry points ---------------- */

/* The prompt sits on its own line under the empty-state sentence. */
.tour-empty-wrap {
  display: block;
  margin-block-start: 10px;
  font-size: 14px;
}

/* The empty state is pointer-events: none so it never blocks the plot area;
   its tour prompt has to opt back in. */
.tour-empty {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 6px;
  padding: 4px 2px;
  background: none;
  border: none;
  border-block-end: 1px solid var(--accent-2);
  color: var(--accent-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tour-empty:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------- responsive: bottom sheet ---------------- */

/* At and below the simulator's mobile boundary the card stops chasing an
   anchor and docks to the bottom edge. tour.js clears the inline coordinates
   in this mode and keeps the spotlight scrolled clear of the sheet. */
@media (max-width: 768px) {
  .tour-card {
    transform: none;
    inset-inline: 8px;
    inset-block-end: 0;
    inset-block-start: auto;
    width: auto;
    max-width: none;
    border-start-start-radius: var(--r-lg, 16px);
    border-start-end-radius: var(--r-lg, 16px);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-block-end: max(16px, env(safe-area-inset-bottom));
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .tour-title { font-size: 19px; }
  .tour-body { font-size: 14.5px; }
}

/* ---------------- Arabic ---------------- */

/* Arabic is cursive: the letters are drawn joined, so tracking pulls the joins
   open and the word reads as broken. Extra room goes into word spacing
   elsewhere; here the tracked mono label simply relaxes into a weight change. */
html[lang="ar"] .tour-count {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
html[lang="ar"] .tour-title { letter-spacing: 0; line-height: 1.35; }

/* ---------------- touch ---------------- */

@media (pointer: coarse) {
  .tour-btn { min-height: 44px; min-width: 44px; padding: 10px 16px; }
  .tour-empty { min-height: 44px; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .tour-hole { transition: none; }
  .tour-hole.is-gate::after { animation: none; opacity: 0.6; }
  .tour-card { animation: none; }
  .tour-rail span { transition: none; }
}