/* Cliptica Editor — tutorial spotlight, popover and hotspots.
 *
 * Built entirely on the editor's own tokens (--surface*, --border*, --accent,
 * --radius, --shadow) so the tour reads as part of the Ledger design system
 * rather than a bolted-on library. Nothing here restyles an existing editor
 * component — every selector is .tour-*. (`body.tour-active` is set by
 * tour_ui.js and styled by nothing; it exists as a hook for the editor's own
 * CSS to suppress things during a tour.)
 *
 * z-index budget in this app: modals 8000, menus 8500, auth overlay 9999.
 * The tour sits at 8800 — above the editor and its menus (it explains them),
 * below the auth overlay (a session that expired mid-tour must win).
 */

.tour-root { position: fixed; inset: 0; z-index: 8800; display: none; }
.tour-root.tour-on { display: block; }

/* The cut-out. The dim is a box-shadow with a spread big enough to cover any
 * viewport, which is what gives a hard-edged hole with no seams — four abutting
 * translucent rectangles show hairline gaps at fractional device pixels.
 * pointer-events:none is essential: the shadow paints over the page but must
 * never eat the clicks meant for it. The .tour-block rects do the blocking. */
.tour-spot {
  position: fixed;
  border-radius: var(--radius, 10px);
  box-shadow: 0 0 0 9999px rgba(6, 6, 8, .72),
              0 0 0 1px var(--accent, #E8490F) inset,
              0 0 0 3px rgba(232, 73, 15, .25);
  pointer-events: none;
  transition: top .18s cubic-bezier(.2, 0, 0, 1), left .18s cubic-bezier(.2, 0, 0, 1),
              width .18s cubic-bezier(.2, 0, 0, 1), height .18s cubic-bezier(.2, 0, 0, 1);
}

/* Unanchored steps (placement:center, or a target that never resolved): one
 * flat scrim, no hole. */
.tour-root.tour-flat .tour-block:first-of-type { background: rgba(6, 6, 8, .72); }

/* touch-action:none so dragging on the scrim does not scroll the editor behind
 * it. Without it, one stray thumb-drag on a phone scrolls the target out from
 * under the spotlight. Steps with allowInteraction hide the blockers entirely,
 * so this never costs the user a gesture they were meant to have. */
.tour-block { position: fixed; display: none; touch-action: none; }

/* ── Popover ───────────────────────────────────────────────────────────── */
.tour-pop {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  background: var(--surface2, #18191D);
  border: 1px solid var(--border2, rgba(255, 255, 255, .10));
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 8px 28px rgba(0, 0, 0, .45));
  padding: 16px 16px 14px;
  color: var(--text, #F4F3EF);
  outline: none;
}
.tour-pop:focus-visible { border-color: var(--border3, rgba(255, 255, 255, .18)); }

.tour-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.tour-count {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #7E7F8A);
}

.tour-skip {
  background: none; border: none; padding: 2px 4px; margin: -2px -4px;
  font: inherit; font-size: 12px; color: var(--muted, #7E7F8A);
  cursor: pointer; border-radius: 4px;
}
.tour-skip:hover { color: var(--text, #F4F3EF); }
.tour-skip:focus-visible { outline: 2px solid var(--accent, #E8490F); outline-offset: 2px; }

.tour-title {
  margin: 10px 0 0; font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.3;
}

.tour-body {
  margin: 7px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--muted2, #A6A7AE);
}

.tour-media {
  display: block; width: 100%; height: auto; margin-top: 12px;
  border-radius: var(--radius-sm, 7px);
  border: 1px solid var(--border, rgba(255, 255, 255, .05));
  background: var(--surface3, #212227);
  aspect-ratio: 16 / 10; object-fit: cover;
}

.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

.tour-rail { display: flex; align-items: center; gap: 4px; flex: 1; }
.tour-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--surface3, #212227);
}
.tour-dot.done { background: var(--border3, rgba(255, 255, 255, .18)); }
.tour-dot.on { background: var(--accent, #E8490F); width: 14px; border-radius: 3px; }

.tour-btn {
  font: inherit; font-size: 12.5px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--radius-sm, 7px);
  cursor: pointer; border: 1px solid transparent;
}
.tour-btn:focus-visible { outline: 2px solid var(--accent, #E8490F); outline-offset: 2px; }
.tour-btn-ghost {
  background: none; color: var(--muted2, #A6A7AE);
  border-color: var(--border2, rgba(255, 255, 255, .10));
}
.tour-btn-ghost:hover:not(:disabled) { color: var(--text, #F4F3EF); border-color: var(--border3, rgba(255, 255, 255, .18)); }
.tour-btn-ghost:disabled { opacity: .4; cursor: not-allowed; }
.tour-btn-primary { background: var(--accent, #E8490F); color: #FFF7F2; }
.tour-btn-primary:hover { background: var(--accent-deep, #C93F0D); }

/* Visually hidden, but announced. Not display:none — that removes it from the
 * accessibility tree and the announcement never happens. */
.tour-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Mobile: bottom sheet ──────────────────────────────────────────────────
 * The card docks to the bottom and the spotlight is confined to the strip above
 * it (the "band", measured in tour_ui.js). `left/right:0` with `!important`
 * because the desktop path writes inline top/left every frame.
 *
 * 820px, NOT 768px: it has to match the editor's own collapse breakpoint in
 * editor.css and MOBILE_QUERY in tour_core.js. At 767px the 768-820 band ran
 * desktop spotlights over the phone stack. */
@media (max-width: 820px) {
  .tour-pop.tour-pop-sheet {
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: 100%;
    /* Was 68vh — two thirds of the screen for a card that is explaining the
     * other third. The sheet scrolls internally, so a cap this low costs a long
     * step a swipe of its own copy and buys every step a usable stage. dvh
     * first-wins over vh in browsers that support it, matching the editor's
     * 100dvh body: with vh alone, iOS Safari's retracting URL bar pushed the
     * footer buttons under the chrome. */
    max-height: 52vh;
    max-height: 52dvh;
    overflow-y: auto;
    overscroll-behavior: contain;   /* scrolling the copy must not scroll the editor */
    touch-action: pan-y;            /* ...but the horizontal swipe still reaches JS */
    border-radius: 14px 14px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* Media is the first thing to give up room on a phone: it is illustrative,
   * the copy is not. Capped rather than aspect-ratio'd so a wide phone in
   * landscape cannot hand the whole band to a video. */
  .tour-pop.tour-pop-sheet .tour-media {
    aspect-ratio: 16 / 9;
    max-height: 22vh;
    max-height: 22dvh;
    object-fit: cover;
  }
  /* Thumb targets. The editor's own mobile pass set a 44px floor via
   * `.btn{min-height:44px}` — nothing here is a `.btn`, so the tour missed it
   * and shipped a 24px Skip as the only way off a phone. */
  .tour-pop.tour-pop-sheet .tour-btn {
    min-height: 44px; padding: 10px 18px; font-size: 13.5px;
  }
  .tour-pop.tour-pop-sheet .tour-skip {
    min-height: 44px; padding: 6px 10px; margin: -6px -10px;
    display: inline-flex; align-items: center; font-size: 13px;
  }
  /* The rail is decorative and competes with Back/Next for a 375px row. */
  .tour-pop.tour-pop-sheet .tour-rail { flex-wrap: wrap; }

  /* ── Making room for the sheet ────────────────────────────────────────────
   * Scrolling a target clear of the card only works if there IS somewhere to
   * scroll to. There wasn't: the props column is the last thing on the page, so
   * the final panel's bottom half sat under the card with the page already at
   * its scroll limit, and the auto-editor modal (92vh, centred) kept its last
   * two options — Preview length and Generate edit — permanently below the
   * band with its own scroller already at the end.
   *
   * So while a tour is running on a phone, the page and the modal give the
   * sheet's height back. --tour-sheet / --tour-band are published by tour_ui.js
   * from the measured card; the fallbacks keep this inert if it ever runs
   * without them. */
  body.tour-active { padding-bottom: var(--tour-sheet, 0px); }

  body.tour-active #autoEditModal {
    /* beats the element's inline align-items:center */
    align-items: flex-start !important;
    padding-top: 8px;
  }
  body.tour-active #autoEditModal .ae-modal {
    max-height: calc(var(--tour-band, 92vh) - 16px);
  }

  /* The hotspot popover is ALSO docked as a sheet on phones, but those rules
   * cannot live here — see the block at the very end of this file. */
}

/* ── Contextual "?" hotspot ────────────────────────────────────────────── */
.tour-hotspot {
  /* 59, one below the editor's sticky mobile header (z-index:60). The button is
   * clamped below whatever is pinned to the top, but if that math is ever off
   * it must lose to the header rather than paint over Export. */
  position: fixed; z-index: 59;
  width: 22px; height: 22px; padding: 0;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border2, rgba(255, 255, 255, .10));
  background: var(--surface2, #18191D);
  color: var(--muted, #7E7F8A);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  cursor: pointer;
}
.tour-hotspot:hover { color: var(--text, #F4F3EF); border-color: var(--border3, rgba(255, 255, 255, .18)); }
.tour-hotspot:focus-visible { outline: 2px solid var(--accent, #E8490F); outline-offset: 2px; }

/* A 22px circle is a fine desktop affordance and half a finger. Grow the HIT
 * area to 44px without growing the mark: an invisible pseudo-element, sized off
 * the button's own (fixed-position) box. Deliberately not `width/height`, which
 * would put a large pale disc over the panel it is annotating. */
.tour-hotspot::after {
  content: ''; position: absolute; inset: -11px; border-radius: 50%;
}

.tour-hotspot-pop {
  position: fixed; z-index: 8600;
  width: min(300px, calc(100vw - 24px));
  background: var(--surface2, #18191D);
  border: 1px solid var(--border2, rgba(255, 255, 255, .10));
  border-radius: var(--radius, 10px);
  box-shadow: var(--shadow, 0 8px 28px rgba(0, 0, 0, .45));
  padding: 14px;
  color: var(--text, #F4F3EF);
}
.tour-hotspot-pop[hidden] { display: none; }
.tour-hotspot-title { margin: 0; font-size: 13.5px; font-weight: 600; }
.tour-hotspot-body { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted2, #A6A7AE); }
.tour-hotspot-close { margin-top: 12px; }

/* ── Reduced motion ────────────────────────────────────────────────────────
 * The spotlight glide is the only animation here; kill it rather than shorten
 * it. Media is swapped for a still frame in JS, which CSS cannot do. */
@media (prefers-reduced-motion: reduce) {
  .tour-spot { transition: none; }
}

/* ── RTL ───────────────────────────────────────────────────────────────────
 * Arabic runs the editor right-to-left. Positions are computed in JS from
 * measured rects, so nothing here mirrors — only type and flow do. */
[dir="rtl"] .tour-pop,
[dir="rtl"] .tour-hotspot-pop { text-align: right; }

/* UPPERCASE + letter-spacing is a Latin typographic device, and rtl.css strips
 * it from every equivalent label in the app. Arabic has no case, so the
 * transform does nothing while the tracking breaks the letter joins — the
 * single most obvious "this was not designed for Arabic" tell. */
[dir="rtl"] .tour-count {
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;   /* the mono face has no Arabic coverage */
}

/* The step counter reads "الخطوة 1 من 9" — Arabic text around Western
 * numerals. It is deliberately NOT an LTR island: isolating it would reorder
 * the Arabic words around the digits. Bidi already renders the numerals
 * left-to-right inside RTL text, which is correct. */

/* NO flex-direction override here, deliberately. A flex container inside
 * direction:rtl already lays its main axis right-to-left, so the footer
 * (rail, Back, Next) and the dot rail mirror themselves. Adding row-reverse
 * would flip them a second time and land back at the LTR order. */

/* ══ LATE mobile overrides ═══════════════════════════════════════════════════
 * MUST stay at the end of this file, for the same reason editor.css keeps one:
 * the mobile block above sits before the .tour-hotspot-pop base rules, so for
 * any property those rules also declare — width, padding, border-radius — the
 * base wins on equal specificity and the phone version silently does nothing.
 * (It did: the popover kept its 300px desktop width, floated off a 22px button
 * near the edge of a 375px screen.) */
@media (max-width: 820px) {
  /* Dock the hotspot popover as a sheet, like the tour card. `!important` on
   * top/left beats the inline placement placeHotspotPop() writes. */
  .tour-hotspot-pop {
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px 14px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .tour-hotspot-title { font-size: 15px; }
  .tour-hotspot-body { font-size: 13.5px; }
  .tour-hotspot-pop .tour-btn { min-height: 44px; padding: 10px 18px; font-size: 13.5px; }
}