/* =====================================================================
 * 6. IN-APP WALKTHROUGH — bottom-right, all PHA apps
 * Launcher is a labeled pill ("Take the tour") that sits directly above
 * the existing help-chat launcher (.pha-chat-launcher, 56px circle, 20px
 * offset) so the two are visually coordinated (same corner, stacked,
 * shared radius language) rather than competing. The label is real
 * visible text (not just aria-label/title) so first-time users notice
 * and understand the control at a glance. Uses only the existing Civic
 * Modern tokens (--pha-blue / --pha-text / --pha-hairline).
 * ===================================================================== */
.pha-tour-launcher{
  position:fixed; right:20px; bottom:88px; z-index:9997;
  display:flex; align-items:center; gap:7px;
  height:40px; padding:0 16px 0 12px; border-radius:20px;
  background:#fff; color:var(--pha-blue); border:1.5px solid var(--pha-blue);
  font-family:var(--pha-font-body, Inter, system-ui, sans-serif);
  font-size:13px; font-weight:700; line-height:1; white-space:nowrap;
  cursor:pointer; box-shadow:0 6px 16px rgba(16,22,26,.18);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pha-tour-launcher svg{ width:18px; height:18px; flex:none; }
.pha-tour-launcher:hover{ background:var(--pha-blue); color:#fff; transform:scale(1.05); box-shadow:0 8px 20px rgba(16,22,26,.24); }
.pha-tour-launcher:focus-visible{ outline:2px solid var(--pha-blue); outline-offset:2px; }

.pha-tour-overlay{
  position:fixed; inset:0; z-index:9998;
  background:rgba(20,24,29,.45);
  pointer-events:none;
  max-width:100vw; overflow:hidden;
}
.pha-tour-spotlight{
  position:fixed; border-radius:10px;
  box-shadow:0 0 0 4px var(--pha-blue), 0 0 0 9999px rgba(20,24,29,.45);
  transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  pointer-events:none;
  max-width:100vw;
}
.pha-tour-tooltip{
  position:fixed; z-index:9999; max-width:340px;
  background:#fff; color:var(--pha-text);
  border:1px solid var(--pha-hairline); border-radius:var(--pha-radius-lg,12px);
  box-shadow:0 12px 32px rgba(20,24,29,.18);
  padding:16px 18px; font-family:var(--pha-font-body, Inter, system-ui, sans-serif);
  outline:none;
}
.pha-tour-progress{
  font-family:var(--pha-font-mono, 'IBM Plex Mono', monospace);
  font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--pha-blue); margin-bottom:6px;
}
.pha-tour-title{ font-size:16px; font-weight:700; margin:0 0 6px; color:var(--pha-text); }
.pha-tour-body{ font-size:14px; line-height:1.5; margin:0 0 14px; color:var(--pha-text); }
.pha-tour-actions{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pha-tour-actions-right{ display:flex; gap:8px; }
.pha-tour-btn{
  font-family:var(--pha-font-body, Inter, sans-serif); font-size:13px; font-weight:600;
  padding:7px 14px; border-radius:8px; border:1px solid var(--pha-hairline);
  background:#fff; color:var(--pha-text); cursor:pointer;
}
.pha-tour-btn:hover{ background:var(--pha-canvas,#f4f6f8); }
.pha-tour-btn:focus-visible{ outline:2px solid var(--pha-blue); outline-offset:2px; }
.pha-tour-btn-primary{ background:var(--pha-blue); border-color:var(--pha-blue); color:#fff; }
.pha-tour-btn-primary:hover{ background:var(--pha-blue-hover, #235ba8); }
.pha-tour-btn-ghost{ background:transparent; border-color:transparent; color:var(--pha-text-muted,#55606b); }
.pha-tour-btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* =====================================================================
 * UNANCHORED STEP MODE (D105) -- first-class, not a degraded fallback.
 * Used for steps whose real UI (map selection, auto-fill review, the
 * determination/refusal result, the comparability worksheet) lives in a
 * signed-in workspace with no live anchor on the page the tour runs on.
 * Rather than a broken 16x16px spotlight at the origin, the step is
 * presented as a deliberately centered narrative card: no boxed-off
 * element, a slightly darker full backdrop (there is nothing to spare
 * from the dim, since nothing is being highlighted), and a visible
 * "Preview" chip so it reads as intentional narrative, not a mistake.
 * ===================================================================== */
.pha-tour-overlay--unanchored{ background:rgba(20,24,29,.6); }
.pha-tour-tooltip--unanchored{
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%); width:min(420px, calc(100vw - 32px)); max-width:min(420px, calc(100vw - 32px));
  border:1.5px solid var(--pha-blue);
}
.pha-tour-tooltip--unanchored .pha-tour-progress::before{
  content:'PREVIEW \2014 SIGNED-IN WORKSPACE'; display:block; color:var(--pha-text-muted,#55606b);
  font-size:10px; letter-spacing:.06em; margin-bottom:2px;
}
@media (max-width:480px){
  .pha-tour-tooltip--unanchored{ width:calc(100vw - 24px); max-width:calc(100vw - 24px); }
}

@media print{
  .pha-tour-launcher, .pha-tour-overlay, .pha-tour-spotlight, .pha-tour-tooltip{ display:none !important; }
}

@media (max-width:480px){
  .pha-tour-launcher{ right:16px; bottom:78px; height:36px; padding:0 12px 0 10px; font-size:12px; gap:6px; }
  .pha-tour-launcher svg{ width:16px; height:16px; }
  .pha-tour-tooltip{ max-width:none; }
}

/* Below ~420px there isn't room for icon + full label + the chat FAB
   without crowding (measured live at 390px: "Take the tour" plus the
   circular icon pushed past comfortable tap-target spacing next to the
   chat FAB) -- keep the control visible and tappable by shrinking to
   icon + short "Tour" label rather than icon-only (still real text, not
   just aria-label). Bug fix (D105): this rule used to trigger only under
   359px, so the intended swap never actually fired at the 390px width
   the tour is tested at -- the short-label span existed in markup but
   stayed permanently display:none while the full label stayed visible,
   i.e. dead code at the breakpoint that mattered. Threshold raised so
   the swap is live exactly where it's needed. */
@media (max-width:420px){
  .pha-tour-launcher .pha-tour-launcher-label{ display:none; }
  .pha-tour-launcher .pha-tour-launcher-label-short{ display:inline; }
  .pha-tour-launcher{ padding:0 14px 0 12px; width:auto; height:36px; justify-content:center; border-radius:18px; }
}
.pha-tour-launcher-label-short{ display:none; }