/* TOUR-T1 (fleet #126): first-login tour overlay — scrim + spotlight + captions.
   Tokens only (scope §4): --tour-* are defined in BOTH :root (light) and
   :root[data-theme="dark"] below, so light/dark parity holds. The scrim is the
   scope §1.1 dim (rgba(10,12,10,.72)) in both themes — a dim layer is theme-
   agnostic by design; caption text/ring/card all use theme tokens.
   Inert until tour.js builds #tourOverlay (the element does not exist in the
   HTML, so none of these rules can paint on a normal page load). */

/* ---- tour tokens (audit #126 D1): defined HERE so the module ships with zero
   index.html diff and every var() below resolves in BOTH themes.
   --tour-scrim = scope §1.1 dim (theme-agnostic).
   --tour-ring: the inner border of the two-tone spotlight ring. No single colour
   clears 3:1 against BOTH the dim outside (composited ≈ #494b48 light / #0b0d0d
   dark) and the lit page inside — see the corrected contrast note on .tour-spot
   (audit #126 N1): the outer ring carries the dim side, the inner border carries
   the lit side. Light uses the near-black ink (#18241d = --fg, 16.0:1 vs a white
   card); dark keeps the accent (#35c77b = --pri, 8.9:1 vs the dark dim).
   --tour-ring-soft: opaque companion for the glow box-shadow (a translucent
   var() in a shadow color is allowed but keeps the audit's opaque rule). */
:root {
  --tour-scrim: rgba(10, 12, 10, 0.72);
  --tour-ring: #18241d;          /* inner border: 16.0:1 vs a white lit card */
  --tour-ring-outer: #f7f9f7;    /* outer ring: 8.3:1 vs the dim (contrast-bearer) */
  --tour-ring-soft: #3a4a41;     /* glow */
}
:root[data-theme="dark"] {
  --tour-scrim: rgba(10, 12, 10, 0.72);
  --tour-ring: #35c77b;          /* inner border: 8.9:1 vs the dark dim */
  --tour-ring-outer: #0a2417;    /* outer ring: dark halo, 16.3:1 vs the lit card */
  --tour-ring-soft: #1d5c3c;     /* glow */
}

/* pointer-events:none on the ROOT is what makes the cutout genuinely pass through:
   the overlay root covers the whole viewport at z-index 9000, so if it were
   auto-hit-testable it would win every hit-test inside the cutout before the app's
   control could. With none, only the opt-in children (.tour-scrim, .tour-card) take
   clicks — the clip-path hole in the scrim then falls through to the REAL control
   (audit #126 D3). */
#tourOverlay { position:fixed; inset:0; z-index:9000; pointer-events:none; font:15px/1.5 system-ui,Arial,sans-serif; }
#tourOverlay[hidden] { display:none; }

/* ---- dim layer with a real cutout (scope §1.1 + §1.3) ----
   A single fixed layer painted with var(--tour-scrim) and punched with a
   clip-path polygon (fill-rule evenodd: outer viewport ring, inner hole).
   clip-path removes the hole from the element's GEOMETRY, not just its paint,
   so hit-testing inside the cutout falls through to the REAL control underneath
   while the scrim still swallows clicks everywhere else — verified in Chromium.
   This is what makes advance-on-real-action work: the app's own handler runs.
   (The previous four-rect/inset-shadow dim painted *over* the cutout, so the
   spotlight was never clickable; audit #126 D3.)
   tour.js sets --l/--t/--w/--h (the hole, viewport px) and --vw/--vh.
   The inset() fallback below is only for engines without polygon support; it
   paints no hole, which is the old (wrong) behaviour, not a regression. */
.tour-scrim {
  position:absolute; inset:0; pointer-events:auto;
  background:var(--tour-scrim);
  clip-path: inset(0 0 0 0);
  /* Two subpaths, each explicitly closed, so evenodd treats them as outer-rect +
     inner-hole. Omitting the closing repeat of the first point leaves the outer
     subpath open and Chromium fills a triangular wedge from the viewport corner
     to the hole (verified in a screenshot). */
  clip-path: polygon(evenodd,
    0 0, var(--vw, 100vw) 0, var(--vw, 100vw) var(--vh, 100vh), 0 var(--vh, 100vh), 0 0,
    var(--l, 0px) var(--t, 0px),
    calc(var(--l, 0px) + var(--w, 0px)) var(--t, 0px),
    calc(var(--l, 0px) + var(--w, 0px)) calc(var(--t, 0px) + var(--h, 0px)),
    var(--l, 0px) calc(var(--t, 0px) + var(--h, 0px)),
    var(--l, 0px) var(--t, 0px));
}
/* fade 200ms (scope §1.1) */
#tourOverlay .tour-scrim, #tourOverlay .tour-spot { opacity:0; transition:opacity .2s ease; }
#tourOverlay.tour-in .tour-scrim, #tourOverlay.tour-in .tour-spot { opacity:1; }
#tourOverlay.tour-out .tour-scrim, #tourOverlay.tour-out .tour-spot { opacity:0; }

/* ---- spotlight cutout: the ONLY pass-through region (scope §1.3) ----
   audit #126 D2: scrim/spot paint BELOW .tour-card/.tour-finish (z-index 2 vs
   3) so the Skip/Done buttons are hittable by a real mouse click.
   audit #126 D3: the ring is pure paint (pointer-events:none); pass-through comes
   from the scrim's clip-path hole, not from anything here.
   audit #126 N1 (corrected claim): WCAG 2.1 AA wants >=3:1 for this UI component
   on BOTH sides of the ring, and NO single colour can do it in light theme — the
   dim outside is dark (composited #494b48) while the spotlighted page inside is
   light (#eaeee9/white cards); an exhaustive hue scan finds zero colours clearing
   3:1 on both sides. The CONTRAST-BEARING element is the outer ring:
   --tour-ring-outer (near-white) is 8.3:1 against the dim in light theme, and the
   dark --tour-ring-outer is 16.3:1 against the lit interior in dark theme. The
   inner --tour-ring border carries the OTHER side (light: 16.0:1 vs the white
   card; dark: 8.9:1 vs the dim). Each theme's inner border clears 3:1 on one
   side only — the two-tone pair together is what separates the ring from both
   sides; the pixels, not the inner border alone, carry the 3:1 claim. */
.tour-spot {
  position:absolute; z-index:2; pointer-events:none; border-radius:10px;
  border:2px solid var(--tour-ring);
  box-shadow:0 0 0 2px var(--tour-ring-outer), 0 0 18px 2px var(--tour-ring-soft);
  transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}

/* ---- caption card ---- */
.tour-card {
  position:absolute; max-width:min(340px, calc(100vw - 24px));
  background:var(--card); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:12px 14px; pointer-events:auto; z-index:3;
}
.tour-card.hide { display:none; }
.tour-cap { margin:0; font-style:italic; font-size:15px; color:var(--fg); }
.tour-row { display:flex; justify-content:flex-end; margin-top:8px; }

/* Skip = ghost outline (scope §1.4); Done = primary. Both clear 36px on touch. */
.tour-skip {
  min-height:36px; padding:6px 14px; border-radius:var(--radius-md);
  background:transparent; border:1px solid var(--border-strong);
  color:var(--muted); font-size:13px; cursor:pointer;
}
.tour-skip:hover { color:var(--fg); border-color:var(--fg); }
.tour-done {
  min-height:36px; padding:6px 16px; border-radius:var(--radius-md);
  background:var(--pri); border:1px solid var(--pri);
  color:var(--pri-fg); font-size:13px; font-weight:600; cursor:pointer;
}

/* ---- sketch arrow (path stroke is inline var(--tour-ring); tilt per corner in JS) ---- */
.tour-arrow { position:absolute; pointer-events:none; z-index:3; }

/* ---- mobile (scope §3 mobile note + TOUR-T3 #128) ---- */
@media (max-width:800px) {
  /* The app's header popovers go position:fixed on mobile (index.html .mh-pop
     @media) and live at z-index 120 — UNDER this overlay's 9000 scrim, so the
     trace popover step 4 spotlights would be dimmed and its field untappable.
     While the tour is live, lift the popover layer above the scrim. Scoped to
     #tourOverlay:not([hidden]) so a normal page load is untouched, and observer-
     only (no app CSS/handler changed). */
  #tourOverlay:not([hidden]) ~ * .mh-pop,
  body:has(#tourOverlay:not([hidden])) .mh-pop { z-index: 9100; }
  /* Caption docks bottom-sheet style when the target is in the top half
     (.tour-sheet is toggled by tour.js). Full-width minus gutters, pinned to
     the bottom, never under the spotlight. */
  .tour-card.tour-sheet {
    left:12px !important; right:12px; top:auto !important; bottom:12px;
    max-width:none;
  }
  .tour-card.tour-sheet .tour-row { justify-content:flex-end; }
  /* Touch targets: Skip/Done never below 44px on phones (comfortably over the
     36px gate; matches the UX-T10 44px treatment for header-level controls). */
  .tour-skip, .tour-done { min-height:44px; padding:10px 18px; }
}