/* The guided tour on the dashboard kit. In a kit app the tour sits in the top layer, above the modal dialogs. */
[popover].tour-veil, [popover].tour-spot, [popover].tour-cursor, [popover].tour-cap, [popover].tour-bar { margin:0; border:0; padding:0; background:none; overflow:visible; color:var(--ink); width:auto; height:auto; }
.tour-veil { position:fixed; inset:0; width:100vw!important; height:100vh!important; cursor:default; }
.tour-cursor { position:fixed; inset:0 auto auto 0; width:22px!important; height:26px!important; pointer-events:none; will-change:transform; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition:scale .12s; }
.tour-cursor.down { scale:.86; }
.tour-ripple { position:fixed; z-index:2147483646; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:color-mix(in oklab,var(--accent) 30%,transparent); pointer-events:none; animation:tour-ripple .5s ease-out forwards; }
@keyframes tour-ripple { from { transform:scale(.3); opacity:1; } to { transform:scale(1.5); opacity:0; } }
.tour-spot { position:fixed; inset:auto; border-radius:12px!important; box-shadow:none; /* the cursor and the caption point; no ring is drawn round what they point at (owner, 02/11) */ pointer-events:none; transition:all .34s cubic-bezier(.22,1,.36,1); }
[popover].tour-cap { position:fixed; inset:auto; max-width:min(420px,calc(100vw - 24px)); pointer-events:none; transition:left .34s cubic-bezier(.22,1,.36,1),top .34s cubic-bezier(.22,1,.36,1); }
.tour-cap p { font-size:15.5px; line-height:1.42; margin:0; color:var(--ink); }
.tour-cap small { display:block; color:var(--muted); font-size:12px; margin-bottom:5px; }
[popover].tour-card { padding:14px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--line-strong,rgba(127,127,127,.3)); box-shadow:0 18px 44px rgba(0,0,0,.35); }
[popover].tour-strip { left:0!important; right:0; top:auto!important; bottom:0; max-width:none; padding:20px clamp(18px,8vw,120px) 72px; background:linear-gradient(transparent,rgba(5,8,14,.86) 42%); }
.tour-strip p { color:#fff; font-size:19px; max-width:64ch; } .tour-strip small { color:rgba(255,255,255,.66); }
[popover].tour-sub { left:50%!important; top:auto!important; bottom:78px; transform:translateX(-50%); width:min(760px,calc(100vw - 24px)); max-width:none; text-align:center; }
.tour-sub p { display:inline; padding:5px 10px; font-size:18px; line-height:1.75; color:#fff; background:rgba(8,10,15,.78); border-radius:7px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.tour-sub small { display:none; }
[popover].tour-bar { position:fixed; inset:auto auto 14px 50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:6px 8px 6px 14px; border-radius:22px; background:var(--surface); border:1px solid var(--line-strong,rgba(127,127,127,.3)); box-shadow:0 12px 30px rgba(0,0,0,.3); }
.tour-bar .round { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; }
.tour-bar .round:hover { background:color-mix(in oklab,var(--ink) 10%,transparent); }
.tour-bar .round svg { width:15px; height:15px; }
.tour-bar .track { width:min(180px,26vw); height:4px; border-radius:2px; background:color-mix(in oklab,var(--ink) 14%,transparent); overflow:hidden; }
.tour-bar .track b { display:block; height:100%; background:var(--accent); transition:width .3s; }
.tour-bar span { color:var(--muted); font-size:12.5px; white-space:nowrap; }
.tour-over { position:fixed; inset:0; z-index:2147483647; display:grid; place-items:center; padding:16px; background:rgba(5,8,14,.55); }
.tour-over > div { width:min(460px,100%); padding:22px; border-radius:18px; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong,rgba(127,127,127,.3)); box-shadow:0 24px 60px rgba(0,0,0,.4); }
.tour-over h2 { margin:0 0 8px; font-size:20px; }
.tour-over p { margin:0 0 18px; color:var(--muted); line-height:1.45; }
.tour-over nav { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
@media (max-width:640px) { .tour-sub p { font-size:15px; } .tour-strip p { font-size:16px; } [popover].tour-sub { bottom:66px; } }