/* Onboarding tour (LH-177). Tokens come from app.css; this file defines none.
   z 95: above the drawer (30/60), rail (40/70), tag popover (50) and help (90); below the toast (100) and skip (200). */
.tour{position:fixed;inset:0;z-index:95;pointer-events:none}

/* The spotlight is a box sized to the target; its huge spread shadow is the scrim. The page stays clickable. */
.tour-hole{position:fixed;left:0;top:0;border-radius:var(--r-panel);pointer-events:none;
  box-shadow:0 0 0 2px var(--hl-edge),0 0 0 200vmax color-mix(in oklch,var(--ink) 40%,transparent)}
.tour-hole.none{box-shadow:0 0 0 200vmax color-mix(in oklch,var(--ink) 40%,transparent)}
:root[data-theme="dark"] .tour-hole{box-shadow:0 0 0 2px var(--hl),0 0 0 200vmax color-mix(in oklch,var(--bg) 72%,transparent)}
:root[data-theme="dark"] .tour-hole.none{box-shadow:0 0 0 200vmax color-mix(in oklch,var(--bg) 72%,transparent)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tour-hole{box-shadow:0 0 0 2px var(--hl),0 0 0 200vmax color-mix(in oklch,var(--bg) 72%,transparent)}
  :root:not([data-theme="light"]) .tour-hole.none{box-shadow:0 0 0 200vmax color-mix(in oklch,var(--bg) 72%,transparent)}
}

.tour-pop{position:fixed;left:0;top:0;pointer-events:auto;width:min(360px,calc(100vw - 24px));box-sizing:border-box;
  background:var(--panel);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-panel);box-shadow:var(--shadow);
  padding:14px 16px 12px;opacity:0;transform:translateY(4px);transition:opacity .18s ease-out,transform .18s ease-out}
.tour-pop.in{opacity:1;transform:none}
.tour-pop:not(.in){pointer-events:none}
.tour-pop.center{left:50%;top:50%;width:min(420px,calc(100vw - 24px));transform:translate(-50%,calc(-50% + 4px))}
.tour-pop.center.in{transform:translate(-50%,-50%)}
/* Focus lands on the dialog so screen readers read the step; the card itself shows no ring, its buttons do. */
.tour-pop:focus,.tour-pop:focus-visible{outline:none}
.tour-act .btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tour-n{margin:0 0 4px;font-size:var(--fs-xs);color:var(--mute);font-variant-numeric:tabular-nums}
.tour-pop h2{margin:0 0 6px;font-size:var(--fs-l);line-height:1.25;font-weight:650;color:var(--ink)}
.tour-b p{margin:0 0 8px;font-size:var(--fs-s);line-height:1.5;color:var(--ink2)}
.tour-b{margin-bottom:12px}
.tour-act{display:flex;align-items:center;gap:8px}
.tour-act .sp{flex:1}
.tour-act .btn{min-width:64px}
.tour-act .btn:disabled{opacity:.45;cursor:default}
.tour-act .tour-skip{min-width:0;padding:0 6px;border-color:transparent;background:transparent;color:var(--ink2);font-weight:500}
.tour-act .tour-skip:hover{color:var(--ink);text-decoration:underline}

/* Replay controls: hidden until /api/onboarding answers (signed in). In the account header row they sit
   before Sign out (account.css orders the header by id). */
.acct .hbtn[data-tour]{order:5}
.help .tourrow{margin:10px 0 0}

/* The resume card (saved step on another page) is non-blocking: no scrim, a small card in the corner. */
.tour.mini .tour-hole{display:none}
@media (min-width: 761px){
  .tour.mini .tour-pop.center{left:auto;top:auto;right:16px;bottom:44px;width:min(340px,calc(100vw - 32px));transform:translateY(4px)}
  .tour.mini .tour-pop.center.in{transform:none}
}

/* Phone: the popover docks to the bottom with 40px buttons. */
@media (max-width: 760px){
  .tour-pop,.tour-pop.center{left:0;right:0;top:auto;bottom:0;width:auto;transform:translateY(8px);
    border-width:1px 0 0;border-radius:var(--r-panel) var(--r-panel) 0 0;padding:14px 16px calc(12px + env(safe-area-inset-bottom))}
  .tour-pop.in,.tour-pop.center.in{transform:none}
  .tour-pop.up{top:0;bottom:auto;border-width:0 0 1px;border-radius:0 0 var(--r-panel) var(--r-panel);padding-bottom:12px;transform:translateY(-8px)}
  .tour-pop.up.in{transform:none}
  .tour-act .btn{height:40px}
}
@media (prefers-reduced-motion: reduce){
  .tour-pop{transition:none}
}