/* Tasks guided tour — welcome modal + spotlight walkthrough.
   Deliberately large type: this is read once, by people who are new to the page. */

.tour-blocker { position:fixed; inset:0; z-index:9000; background:transparent; }
.tour-veil {
  position:fixed; z-index:9001; pointer-events:none;
  border-radius:16px; box-shadow:0 0 0 9999px rgba(7,16,30,.66), 0 0 0 3px rgba(114,216,211,.9), 0 0 34px 6px rgba(114,216,211,.35);
  transition:top .34s cubic-bezier(.3,.8,.3,1), left .34s cubic-bezier(.3,.8,.3,1), width .34s cubic-bezier(.3,.8,.3,1), height .34s cubic-bezier(.3,.8,.3,1), opacity .2s ease;
}
.tour-veil.no-target { top:50%; left:50%; width:0; height:0; border-radius:0; box-shadow:0 0 0 9999px rgba(7,16,30,.72); }

.tour-card {
  position:fixed; z-index:9002; width:min(468px,calc(100vw - 32px));
  padding:28px 30px 24px; border-radius:20px;
  background:#fff; color:var(--ink,#0d1117);
  overflow:auto; overscroll-behavior:contain;
  box-shadow:0 30px 80px rgba(7,16,30,.4), 0 3px 10px rgba(7,16,30,.14);
  transition:top .34s cubic-bezier(.3,.8,.3,1), left .34s cubic-bezier(.3,.8,.3,1), opacity .2s ease;
  animation:tour-card-in .28s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes tour-card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Welcome + finish cards sit centered and read bigger still */
.tour-card.is-centered { width:min(600px,calc(100vw - 32px)); left:50% !important; top:50% !important; transform:translate(-50%,-50%); padding:40px 44px 34px; animation:tour-hero-in .3s cubic-bezier(.2,.85,.3,1) both; }
@keyframes tour-hero-in { from { opacity:0; transform:translate(-50%,-46%) scale(.97); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }

.tour-kicker { display:block; margin-bottom:9px; color:var(--blue-mid,#005eb8); font:700 12px 'Figtree',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.tour-card h2 { margin:0 0 12px; font:700 26px/1.2 'Space Grotesk',sans-serif; letter-spacing:-.5px; }
.tour-card.is-centered h2 { font-size:36px; letter-spacing:-1.1px; }
.tour-card p { margin:0; color:var(--ink-soft,#374151); font-size:17px; line-height:1.6; }
.tour-card.is-centered p { font-size:19px; }
.tour-card p + p { margin-top:12px; }
.tour-card b { color:var(--ink,#0d1117); font-weight:700; }

.tour-points { display:grid; gap:16px; margin:26px 0 4px; padding:0; list-style:none; }
.tour-points li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:15px; align-items:start; font-size:17px; line-height:1.5; color:var(--ink-soft,#374151); }
.tour-points i { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--blue-soft,#e8f0fb); color:var(--blue,#003366); font:700 17px 'Space Grotesk',sans-serif; font-style:normal; }
.tour-points strong { display:block; color:var(--ink,#0d1117); font-size:17px; }

.tour-foot { display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:20px; border-top:1px solid var(--border,rgba(15,25,36,.08)); }
.tour-dots { display:flex; gap:7px; margin-right:auto; }
.tour-dots span { width:9px; height:9px; border-radius:50%; background:#d6dde6; transition:background .2s ease, width .2s ease; }
.tour-dots span.done { background:#a8b6c6; }
.tour-dots span.now { width:26px; border-radius:99px; background:var(--blue-mid,#005eb8); }
.tour-step-count { margin-right:auto; color:var(--ink-muted,#6b7280); font:700 14px 'Figtree',sans-serif; }

.tour-btn { min-height:48px; padding:0 22px; border:0; border-radius:11px; font:700 16px 'Figtree',sans-serif; cursor:pointer; transition:background .15s ease, transform .12s ease, box-shadow .15s ease; }
.tour-btn.primary { color:#fff; background:var(--blue,#003366); box-shadow:0 6px 18px rgba(0,51,102,.22); }
.tour-btn.primary:hover { background:#00284f; transform:translateY(-1px); }
.tour-btn.ghost { color:var(--ink-soft,#374151); background:var(--surface-2,#f1f5f9); border:1px solid var(--border,rgba(15,25,36,.08)); }
.tour-btn.ghost:hover { background:#e7edf4; }
.tour-btn.quiet { padding:0 12px; color:var(--ink-muted,#6b7280); background:transparent; font-size:15px; }
.tour-btn.quiet:hover { color:var(--ink,#0d1117); text-decoration:underline; }
.tour-card.is-centered .tour-btn { min-height:54px; padding:0 28px; font-size:17px; }
.tour-skip { position:absolute; top:16px; right:18px; }

/* The '?' launcher that lives in the Tasks action bar */
.area-help { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--border-mid,rgba(15,25,36,.14)); border-radius:10px; background:var(--surface,#fff); color:var(--blue,#003366); font:700 17px 'Figtree',sans-serif; cursor:pointer; box-shadow:var(--shadow-xs,0 1px 2px rgba(15,25,36,.06)); transition:background .18s ease, border-color .18s ease, transform .18s ease; }
.area-help:hover { background:var(--blue-soft,#e8f0fb); border-color:rgba(0,94,184,.34); transform:translateY(-1px); }
.area-help[hidden] { display:none; }

/* NB: deliberately no `overflow:hidden` on <body> during the tour — body overflow
   propagates to the viewport, which would stop scrollIntoView from reaching
   steps below the fold. The blocker already absorbs stray clicks. */

@media(max-width:720px){
  .tour-card { width:calc(100vw - 20px); padding:22px 20px 20px; border-radius:16px; }
  .tour-card.is-centered { width:calc(100vw - 20px); padding:28px 22px 24px; }
  .tour-card h2 { font-size:22px; }
  .tour-card.is-centered h2 { font-size:27px; }
  .tour-card p,.tour-card.is-centered p,.tour-points li,.tour-points strong { font-size:15.5px; }
  .tour-foot { flex-wrap:wrap; gap:10px; }
  .tour-btn { flex:1; min-height:46px; padding:0 14px; font-size:15px; }
  .tour-btn.quiet { flex:0 0 100%; }
  .tour-dots { flex-basis:100%; margin-bottom:2px; }
}
@media(prefers-reduced-motion:reduce){ .tour-veil,.tour-card,.tour-card.is-centered { transition:none; animation:none; } }