/* ============================================================
   SearchFlow guided tour — "the helper"
   Spotlight coach-marks over the real page. Built 2026-08-18.

   Depends on the design tokens in sf.css (--navy, --amber, --ink…).
   Nothing here is page-specific: the steps come from window.SF_TOUR.

   ⚠️ .head is position:sticky z-index:50, so every layer here starts
      at 9000 to sit above it.
   ============================================================ */

.sft-launch,
.sft-hello,
.sft-veil,
.sft-ring,
.sft-panel { font-family: var(--sans); }

/* ---------- the launcher ---------- */
.sft-launch{
  position:fixed; left:1rem; z-index:9002;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  width:52px; height:52px; padding:0; border:0; cursor:pointer;
  border-radius:50%; background:linear-gradient(180deg,var(--navy-hi),var(--navy-deep));
  display:grid; place-items:center;
  box-shadow:0 2px 6px rgba(11,21,38,.22), 0 14px 30px -10px rgba(11,21,38,.45);
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
.sft-launch:hover{ transform:translateY(-2px) scale(1.04);
  box-shadow:0 4px 10px rgba(11,21,38,.26), 0 20px 40px -12px rgba(11,21,38,.5); }
.sft-launch:active{ transform:translateY(0) scale(.98) }
.sft-launch:focus-visible{ outline:3px solid var(--amber); outline-offset:3px }
.sft-launch svg{ width:26px; height:26px; display:block }
.sft-launch[hidden]{ display:none }

/* the amber "there is something here" pulse — one authored moment, not a loop of them */
.sft-launch::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--amber); opacity:0;
  animation:sft-pulse 3.6s cubic-bezier(.16,1,.3,1) 1.2s 3;
}
@keyframes sft-pulse{
  0%   { opacity:.85; transform:scale(1) }
  70%  { opacity:0;   transform:scale(1.45) }
  100% { opacity:0;   transform:scale(1.45) }
}

/* ---------- the welcome bubble ---------- */
.sft-hello{
  position:fixed; left:1rem; z-index:9002;
  bottom:calc(4.9rem + env(safe-area-inset-bottom));
  width:min(310px, calc(100vw - 2rem));
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.05rem 1.05rem;
  box-shadow:0 2px 8px rgba(11,21,38,.10), 0 26px 54px -18px rgba(11,21,38,.34);
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .34s cubic-bezier(.16,1,.3,1), transform .34s cubic-bezier(.16,1,.3,1);
}
.sft-hello.in{ opacity:1; transform:none }
.sft-hello[hidden]{ display:none }
.sft-hello h3{ margin:0 0 .3rem; font-size:1rem; font-weight:750; letter-spacing:-.01em; color:var(--ink) }
.sft-hello p{ margin:0 0 .85rem; font-size:.9rem; line-height:1.5; color:var(--ink-soft) }
.sft-hello-row{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap }

/* ---------- the veil + the spotlight ---------- */
.sft-veil{
  position:fixed; inset:0; z-index:9000; pointer-events:auto;
  background:rgba(8,26,54,.60);
  opacity:0; transition:opacity .3s ease;
  -webkit-backdrop-filter:saturate(.85); backdrop-filter:saturate(.85);
}
.sft-veil.in{ opacity:1 }
.sft-veil[hidden], .sft-ring[hidden], .sft-panel[hidden]{ display:none }

/* The cut-out: a huge spread shadow paints the dim everywhere EXCEPT this box,
   so the real section underneath stays fully legible and clickable-looking. */
.sft-ring{
  position:fixed; z-index:9001; pointer-events:none;
  border-radius:14px;
  box-shadow:0 0 0 9999px rgba(8,26,54,.60), 0 0 0 2px var(--amber),
             0 0 34px -4px rgba(239,163,28,.55);
  opacity:0;
  transition:opacity .3s ease,
             top .5s cubic-bezier(.16,1,.3,1), left .5s cubic-bezier(.16,1,.3,1),
             width .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1);
}
.sft-ring.in{ opacity:1 }
/* When the ring is showing it owns the dimming, so the flat veil steps back. */
.sft-veil.has-ring{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none }

/* ---------- the step panel ---------- */
.sft-panel{
  position:fixed; z-index:9003;
  width:min(340px, calc(100vw - 2rem));
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.05rem 1.15rem 1.1rem;
  box-shadow:0 2px 8px rgba(11,21,38,.10), 0 30px 60px -20px rgba(11,21,38,.38);
  opacity:0; transform:translateY(8px);
  transition:opacity .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1),
             top .45s cubic-bezier(.16,1,.3,1), left .45s cubic-bezier(.16,1,.3,1);
}
.sft-panel.in{ opacity:1; transform:none }
.sft-panel h3{
  margin:0 .5rem .35rem 0; font-size:1.05rem; font-weight:750;
  letter-spacing:-.015em; line-height:1.25; color:var(--ink);
}
.sft-panel p{ margin:0 0 .95rem; font-size:.92rem; line-height:1.55; color:var(--ink-soft) }
.sft-panel p b, .sft-panel p strong{ color:var(--ink); font-weight:700 }

.sft-x{
  position:absolute; top:.5rem; right:.5rem;
  width:30px; height:30px; padding:0; border:0; border-radius:8px;
  background:transparent; color:var(--ink-faint); cursor:pointer;
  display:grid; place-items:center; transition:background .15s ease, color .15s ease;
}
.sft-x:hover{ background:var(--surface-2); color:var(--ink) }
.sft-x:focus-visible{ outline:2px solid var(--blue); outline-offset:1px }
.sft-x svg{ width:15px; height:15px; display:block }

.sft-foot{ display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.sft-dots{ display:flex; align-items:center; gap:.34rem }
/* ⛔ The active dot used to grow 6px → 18px wide. Animating width re-laid out
   every sibling dot on each frame, and it bought nothing: scaling a circle
   stays a circle, so the amber + size change reads just as clearly with no
   layout cost and no distortion. Transform and colour only. */
.sft-dot{
  width:6px; height:6px; border-radius:50%; background:var(--line-strong);
  transition:background .25s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.sft-dot.on{ background:var(--amber); transform:scale(1.5) }
.sft-dot.done{ background:var(--ink-faint) }
.sft-count{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  color:var(--ink-faint); text-transform:uppercase; white-space:nowrap;
}
.sft-btns{ display:flex; align-items:center; gap:.45rem }
.sft-panel .btn{ padding:.56em 1em; font-size:.86rem; border-radius:10px }

/* ---------- mobile: the panel becomes a bottom sheet ---------- */
@media (max-width:640px){
  .sft-launch{ width:48px; height:48px; left:.85rem;
    bottom:calc(.85rem + env(safe-area-inset-bottom)) }
  .sft-launch svg{ width:23px; height:23px }
  .sft-hello{ left:.85rem; right:.85rem; width:auto;
    bottom:calc(4.5rem + env(safe-area-inset-bottom)) }

  .sft-panel{
    left:0 !important; right:0; bottom:0; top:auto !important;
    width:auto; max-width:none;
    border-radius:18px 18px 0 0; border-bottom:0;
    padding:1.05rem 1.15rem calc(1.05rem + env(safe-area-inset-bottom));
    transform:translateY(14px);
    box-shadow:0 -2px 10px rgba(11,21,38,.10), 0 -22px 50px -18px rgba(11,21,38,.4);
  }
  .sft-panel.in{ transform:none }
  /* the grab handle reads as "this is a sheet" */
  .sft-panel::before{
    content:""; position:absolute; top:.5rem; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:2px; background:var(--line-strong);
  }
  .sft-panel h3{ margin-top:.55rem }
  .sft-panel .btn{ padding:.66em 1.05em; font-size:.9rem }
  .sft-foot{ gap:.5rem }
  .sft-count{ display:none }
}

/* Very short viewports (landscape phones): keep the sheet from eating the page. */
@media (max-height:460px){
  .sft-panel{ max-height:64vh; overflow:auto }
}

@media (prefers-reduced-motion:reduce){
  .sft-launch, .sft-hello, .sft-veil, .sft-ring, .sft-panel, .sft-dot{ transition:none }
  .sft-launch::after{ animation:none }
  .sft-hello, .sft-panel{ transform:none }
}