/* v4.1.12. The setup tutorial's marks (tour-ui.js), for the dashboard and the Studio. They read
   the host's tokens and define none. One fixed width. Above the page and its sticky bar, under
   menus (30), dialogs (.lib-dialog, 60) and notices (80): what the customer opened is on top. */

.tour-layer{position:fixed;inset:0;z-index:25;pointer-events:none}
.tour-layer[hidden]{display:none}

/* What is pointed at: an edge around it, nothing over it. */
.tour-ring{position:fixed;border:2px solid var(--blue);border-radius:var(--r-input);pointer-events:none}
.tour-ring[hidden]{display:none}

.tour-mark{position:fixed;width:340px;max-width:calc(100vw - 16px);padding:16px 20px;pointer-events:auto;
  background:var(--raised);color:var(--ink);border:1px solid var(--line-card);border-radius:var(--r-tile);
  box-shadow:var(--shadow-lift)}
/* A card that points at nothing: in the corner, over as little of the page as it can be. */
.tour-mark.free{left:auto;top:auto;right:24px;bottom:24px}
.tour-mark.enter{animation:tour-in var(--dur-enter) var(--ease)}
@keyframes tour-in{from{opacity:0}to{opacity:1}}

.tour-meta{margin:0 0 4px;font-size:var(--t-12);color:var(--ink-3)}
.tour-title{margin:0;font-family:var(--display);font-size:var(--t-16);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.tour-body{margin:8px 0 0;font-size:var(--t-13);line-height:1.55;color:var(--ink-2)}
.tour-lost{color:var(--ink-3)}
.tour-ticks{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--t-13)}
.tour-ticks li{display:flex;align-items:center;gap:8px}
.tour-ticks li::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--good)}
.tour-thumb{display:block;width:100%;max-height:160px;object-fit:cover;margin-top:12px;border-radius:var(--r-media);background:var(--well)}
.tour-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.tour-acts .tour-skip{margin-left:auto;font-size:var(--t-12);color:var(--ink-3)}

/* The welcome's plan line, over its words (an openDialog body, tour-dash.js). */
.lib-dialog-box .tour-welcome-plan{margin:0 0 8px;font-size:var(--t-13);font-weight:600;color:var(--ink)}
/* The welcome's four chapters (an openDialog body, tour-dash.js). */
.tour-welcome-list{margin:12px 0 0;padding-left:20px;font-size:var(--t-13);line-height:1.7;color:var(--ink)}

/* Why Learn's tutorial button is off (review 5: "Your plan is not active"). */
.tour-why{margin-left:8px;font-size:var(--t-12);color:var(--ink-3)}

.tour-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* A phone: a sheet along the bottom, the whole width. What it points at is scrolled above it. */
/* (v4.1.17, B12: its foot is the host's --tour-foot, the dashboard's tab bar on a phone; 0 elsewhere.) */
.tour-mark.sheet{left:0;right:0;bottom:var(--tour-foot,0px);top:auto;width:auto;max-width:none;max-height:50vh;overflow-y:auto;
  border-radius:var(--r-card) var(--r-card) 0 0;border-width:1px 0 0;padding:16px}
/* (review 10) At the top, for an element in the bottom half (the Studio's Generate video). */
.tour-mark.sheet.top{top:0;bottom:auto;border-radius:0 0 var(--r-card) var(--r-card);border-width:0 0 1px}
/* (v4.1.20, K: under a phone's notch, its words below it; 0 everywhere else.) */
.tour-mark.sheet.top{padding-top:calc(16px + env(safe-area-inset-top, 0px))}

@media (prefers-reduced-motion:reduce){
  .tour-mark.enter{animation:none}
}