/* ------------------------------------------------------------------ tour */
/* Moved out of app.css on 22 Sep 2026, verbatim, so the conjugation trainers can
   load the same walkthrough styling the reader uses. EXTRACTED, NOT COPIED: two
   copies would drift and nothing would say so. The only line that stayed behind
   is the `.panel` half of the reduced-motion block at the foot of app.css, which
   is the reader's panel and nothing to do with the tour. */

/* The guided walkthrough (js/tour.js). Everything sits above the app and
   nothing in the app knows it is there, so the tour can be removed by
   deleting one script tag and this block.

   THE SPOTLIGHT IS ONE BOX WITH A HUGE SHADOW. The lit rectangle is the
   element itself and the dimming is its box-shadow spread -- so there is a
   single thing to move, and the hole can never drift out of step with the
   mask, which is what happens when a cut-out is built from four surrounding
   panels. */
.tour-host { position: fixed; inset: 0; z-index: 60; display: none; }
.tour-host.tour-on { display: block; }

/* A STEP THE READER PERFORMS NEEDS THE REAL CONTROL TO BE CLICKABLE.
   The host covers the viewport, so while it swallows pointer events nothing
   underneath can be pressed -- which was fine when the tour worked every
   control itself, and is fatal now that some steps ask the reader to. On a
   "do" step the host stops intercepting and the card takes events back for
   itself; on a "show" step it keeps blocking, so a stray click cannot work a
   control the tour is in the middle of explaining. */
.tour-host.tour-interactive { pointer-events: none; }
.tour-host.tour-interactive .tour-card { pointer-events: auto; }

/* The lit control, while it is the reader's turn. A quiet pulse says "this
   one" without the card having to repeat itself. */
.tour-host.tour-interactive .tour-spot { animation: tour-pulse 1.7s ease-in-out infinite; }
@keyframes tour-pulse {
  0%, 100% { border-color: var(--gold); }
  50%      { border-color: rgba(244, 201, 93, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-host.tour-interactive .tour-spot { animation: none; }
}

/* THE POINTER AT THE CONTROL, on a step the reader performs.
   The card carries the explanation and can sit some way off -- beside the
   panel, or above a slider near the foot of the window. This is the other
   half: a small label ON the control with an arrow into it, so "press it" and
   "it" are never at opposite ends of the screen.
   It is display:none unless the host is interactive, so it exists only on the
   steps that ask for an action. */
.tour-poke {
  position: fixed;
  z-index: 61;
  display: none;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--gold);
  color: #22303a;
  font: 700 11.5px/1.25 system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(9, 26, 31, .3);
}
.tour-host.tour-interactive .tour-poke { display: block; }
.tour-poke::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
}
/* The label sits BELOW the control, so its arrow points up at it. */
.tour-poke.below::after { bottom: 100%; border-bottom-color: var(--gold); }
/* And vice versa. */
.tour-poke.above::after { top: 100%; border-top-color: var(--gold); }

/* The Dictionary step's worked example: one word in the blue a rooted word
   takes, one left plain, so the reader is shown the difference rather than
   told about it. --link and --quran-face are the app's own, so the example
   cannot drift away from the thing it illustrates. */
.tour-eg {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: baseline;
  direction: rtl;
  margin: 10px 0;
  padding: 9px 12px;
  background: var(--paper-2, #f4f7f6);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--quran-face, "Al Qalam Quran Majeed"), serif;
  font-size: 21px;
  line-height: 1.9;
}
.tour-eg-on  { color: var(--link); }
.tour-eg-off { color: var(--ink); }

/* BOTH EXAMPLES ANSWER THE READER'S OWN CURSOR, on the user's instruction,
   7 Sep 2026. An animation that played by itself was tried first and rejected:
   it showed the gesture but the reader never made it, so what they learned was
   that the card moves, not that the page responds to them.
   These are rehearsals. Hover a word here and it turns blue exactly as it will
   out on the page; hover an ayah number and it lights exactly as it will.
   The rules below deliberately RESTATE `.word.has-page:hover` and
   `.irab .mark:hover` rather than reusing them: those two only apply inside
   the muṣḥaf and under a live Dictionary/I'rab switch, neither of which is
   true inside a tour card. Same tokens, so they cannot drift apart in colour;
   separate selectors, because the conditions are genuinely different. */
.tour-eg .tw {
  color: var(--ink);
  cursor: pointer;
  transition: color .1s;
}
.tour-eg .tw:hover { color: var(--link); }

.tour-eg-marks .mark {
  cursor: pointer;
  border-radius: 999px;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.tour-eg-marks .mark:hover {
  color: var(--accent-deep);
  background: var(--accent-soft);
  transform: scale(1.12);
}
.tour-eg-marks .mark:hover text { fill: var(--accent-deep); }

/* "Your turn" — shown on a do-step, hidden otherwise. */
.tour-do {
  display: none;
  margin: -6px 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.tour-host.tour-interactive .tour-do { display: block; }
/* Once the reader has done it, the cue says so and stops nagging in gold.
   Next is enabled at the same moment; the tour never advances on its own. */
.tour-do.tour-done { color: var(--ok, #1e7a52); }
.tour-host.tour-interactive .tour-do.tour-done ~ * .tour-spot,
.tour-host.tour-interactive:has(.tour-do.tour-done) .tour-spot { animation: none; }
.tour-skip {
  margin-inline-end: auto;
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.tour-skip[hidden] { display: none; }

.tour-spot {
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(9, 26, 31, .62);
  border: 2px solid var(--gold);
  pointer-events: none;
  transition: top .28s ease, left .28s ease,
              width .28s ease, height .28s ease;
}

/* SEVERAL LIGHTS AT ONCE (tour.js drawMulti, 24 Sep 2026). The box-shadow
   trick above cuts one hole only, so a step with two lights hides the single
   spotlight and uses a dimming layer clipped to the window minus each part,
   plus one gold ring per part. Only the trainers' tours use it. */
.tour-host.tour-multi .tour-spot { display: none; }
.tour-dim {
  position: fixed;
  inset: 0;
  background: rgba(9, 26, 31, .62);
  pointer-events: none;
}
.tour-ring {
  position: fixed;
  box-sizing: border-box;
  border: 2px solid var(--gold);
  border-radius: 4px;
  pointer-events: none;
}

/* No target for this step -- dim everything and let the card sit in the
   middle. The spotlight keeps its shadow so the ground does not flash. */
.tour-host.tour-nospot .tour-spot {
  top: 50%; left: 50%; width: 0; height: 0; border-color: transparent;
}
.tour-host.tour-nospot .tour-card {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.tour-card {
  position: fixed;
  width: min(330px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(9, 26, 31, .34);
  color: var(--ink);
  font-family: var(--sans);
}
.tour-card h3 {
  margin: 2px 0 7px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--accent-deep);
}
.tour-card p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-mid);
}
.tour-step {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tour-x {
  position: absolute;
  top: 6px; right: 8px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.tour-x:hover { color: var(--ink); }

.tour-nav { display: flex; gap: 8px; justify-content: flex-end; }
.tour-btn {
  padding: 6px 15px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 600 12.5px/1.2 var(--sans);
  cursor: pointer;
}
.tour-btn:disabled { opacity: .4; cursor: default; }
.tour-go {
  background: linear-gradient(135deg, #d9a72f, #b8860b);
  border-color: transparent;
  color: #fff;
}

/* The trigger, in the toolbar beside Settings. A question mark rather than a
   word: the bar is four rows on a phone already, and this is the one control
   a reader needs exactly once. */
/* It says "Tour" from 8 Sep 2026, on the user's instruction -- it was a "?".
   A word needs a pill, not the 26px circle a single glyph sat in, so this now
   takes its padding and type from .toolbar-toggle (the Settings button): the
   two are the same kind of control and should not be two shapes. */
.toolbar-tour {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-inline-start: 8px;
  padding: 5px 13px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 600 12px/1.2 var(--sans);
  cursor: pointer;
}
.toolbar-tour:hover { border-color: var(--accent); background: var(--tint); }

#toolbar.collapsed .toolbar-tour { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tour-spot { transition: none; }
}