/* Guided tutorials (tutorial.js): the dimmed screen with a hole cut around the
   one thing to look at, the ring around it, the card that says what to do, and
   the Help menu in the header that lists the tours. */

#help-pill{display:inline-flex;align-items:center;gap:7px;color:var(--accent);border-color:var(--accent-border);background:var(--accent-soft);cursor:pointer}
#help-pill i{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;font:700 10px/1 "Segoe UI",system-ui,sans-serif;font-style:normal}
#help-pill:hover{filter:brightness(1.12)}

#help-menu{position:fixed;z-index:85;width:min(360px,calc(100vw - 24px));padding:18px 18px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--border);box-shadow:0 18px 50px #000a;font-size:12.5px;animation:help-in .18s ease both}
@keyframes help-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#help-menu .help-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#help-menu .help-head strong{font-size:15px;font-weight:800;letter-spacing:-.2px}
#help-menu .help-x{padding:2px 8px;border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer}
#help-menu .help-x:hover{color:var(--text)}
#help-menu .help-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--muted);text-transform:uppercase;margin:14px 0 6px}
#help-menu .help-support{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--inset);border:1px solid var(--border)}
#help-menu .help-support a{color:var(--accent);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
#help-menu .help-support a:hover{text-decoration:underline}
#help-menu .help-copy{margin-left:auto;padding:5px 10px;font-size:11px;border-radius:8px;background:var(--panel);border:1px solid var(--border);color:var(--muted);cursor:pointer;white-space:nowrap}
#help-menu .help-copy:hover{border-color:var(--accent);color:var(--text)}
#help-menu .help-sub{font-size:12px;color:var(--muted);margin:8px 0 0}
#help-menu .help-sub a{color:var(--accent);text-decoration:none;font-weight:600}
#help-menu .help-sub a:hover{text-decoration:underline}
#help-menu .help-tut{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--inset);border:1px solid var(--border);margin-bottom:8px}
#help-menu .help-tut>div{min-width:0;flex:1}
#help-menu .help-tut strong{display:block;font-size:13px}
#help-menu .help-tut small{display:block;color:var(--muted);font-size:11.5px;line-height:1.4}
#help-menu .help-tut em{display:inline-block;margin-top:4px;font-style:normal;font-size:11px;font-weight:700;color:var(--green)}
#help-menu .help-tut button{padding:7px 13px;border-radius:9px;font-size:12px;font-weight:700;color:#0c0e11;background:var(--accent);border:1px solid var(--accent-border);cursor:pointer;white-space:nowrap}
#help-menu .help-tut button:hover{filter:brightness(1.08)}
#help-menu .help-tut button.again{background:transparent;color:var(--text);border-color:var(--border)}
#help-menu .help-tut button:disabled{opacity:.4;cursor:default;filter:none}
#help-menu .help-tut em.lock{color:var(--muted);font-weight:500}
#help-menu .help-tut em.lock a{color:var(--accent);text-decoration:none;font-weight:700}

/* ------------------------------------------------------------------ the tour */

#tour{position:fixed;inset:0;z-index:100;pointer-events:none}
dialog #tour{color:var(--text);font:13px/1.5 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
#tour .tour-mask{position:absolute;inset:0;width:100%;height:100%}
#tour .tour-mask path{fill:#05070a;fill-opacity:.66}
#tour .tour-ring{position:absolute;box-sizing:border-box;border:2px solid var(--accent);border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 4px #ffbe1a2e,0 0 34px #ffbe1a66;animation:tour-pulse 1.8s ease-in-out infinite}
#tour.ready .tour-ring{border-color:var(--green);box-shadow:0 0 0 4px #7ee08a2e,0 0 34px #7ee08a66;animation:none}
#tour .tour-ring.nudge{animation:tour-nudge .4s ease}
@keyframes tour-pulse{0%,100%{box-shadow:0 0 0 4px #ffbe1a2e,0 0 34px #ffbe1a66}50%{box-shadow:0 0 0 7px #ffbe1a1a,0 0 46px #ffbe1a99}}
@keyframes tour-nudge{0%,100%{transform:none}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

#tour .tour-card{position:absolute;left:0;top:0;width:min(390px,calc(100vw - 24px));pointer-events:auto;background:var(--panel);color:var(--text);
  border:1px solid var(--accent-border);border-radius:16px;padding:18px 20px 16px;box-shadow:0 30px 80px #000c;font-size:13.5px;line-height:1.5;
  animation:tour-in .3s ease both}
#tour .tour-card.glide{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
#tour .tour-card.centered{width:min(460px,calc(100vw - 24px))}
@keyframes tour-in{from{opacity:0}to{opacity:1}}
#tour .tour-bar{height:3px;border-radius:3px;background:var(--border);margin:-4px 0 12px;overflow:hidden}
#tour .tour-bar i{display:block;height:100%;background:var(--accent);transition:width .3s ease}
#tour .tour-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--accent);text-transform:uppercase;margin-bottom:6px}
#tour h3{font-size:17px;font-weight:800;letter-spacing:-.2px;margin:0 0 8px;line-height:1.3}
#tour .tour-body p{margin:0 0 8px}
#tour .tour-body p:last-child{margin-bottom:0}
#tour .tour-body ul{margin:4px 0 0;padding-left:18px}
#tour .tour-body li{margin:3px 0}
#tour .tour-body b{color:#fff}
#tour .tour-hint{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:var(--inset);border:1px solid var(--border);font-size:12.5px;color:var(--text)}
#tour kbd{display:inline-block;padding:1px 7px;border-radius:6px;font:600 12px ui-monospace,Menlo,monospace;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);vertical-align:1px}
#tour .tour-how{margin:12px 0 0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
#tour .tour-how::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);flex:none}
#tour.ready .tour-how::before{background:var(--green);box-shadow:0 0 8px var(--green)}
#tour .tour-wait{margin:12px 0 0;font-size:12px;color:var(--muted);font-style:italic}
#tour .tour-alert{margin:12px 0 0;padding:9px 12px;border-radius:10px;font-size:12.5px;color:var(--red);background:#2a1513;border:1px solid #5c2f2a}
#tour .tour-alert.soft{color:var(--gold);background:var(--accent-soft);border-color:var(--accent-border)}
/* Applause */
.tour-cheer{position:fixed;inset:0;z-index:102;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;padding:24px;background:radial-gradient(circle at 50% 45%,#2e220699 0,#05070ae6 60%);pointer-events:auto;animation:tour-in .3s ease both;color:var(--text)}
.tour-cheer.out{animation:tour-out .45s ease forwards}
@keyframes tour-out{to{opacity:0}}
.tour-cheer-stage{position:relative;width:200px;height:200px;display:grid;place-items:center;margin-bottom:10px}
.tour-cheer-stage svg{color:var(--accent);filter:drop-shadow(0 0 24px #ffbe1a88);animation:tour-pop .7s cubic-bezier(.2,.9,.3,1.4) both}
.tour-cheer-stage .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:tour-ring 1.6s ease-out both}
.tour-cheer-stage .ring.two{animation-delay:.35s}.tour-cheer-stage .ring.three{animation-delay:.7s}
.tour-cheer-stage b{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:2px;background:var(--accent);opacity:0;transform:rotate(var(--a)) translateY(0);animation:tour-spark calc(1.1s * var(--d)) ease-out var(--t) both}
.tour-cheer-stage b:nth-child(3n){background:var(--green)}.tour-cheer-stage b:nth-child(5n){background:#fff}
.tour-cheer h2{font-size:28px;font-weight:800;letter-spacing:-.3px;text-transform:none;margin:0;max-width:560px;text-wrap:balance;animation:tour-rise .6s .25s ease both}
#tour.cheering .tour-card,#tour.cheering .tour-ring{visibility:hidden}
.tour-cheer p{margin:0;max-width:520px;color:var(--muted);font-size:14px;animation:tour-rise .6s .45s ease both}
@keyframes tour-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes tour-ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes tour-spark{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-150px) scale(.4)}}
@keyframes tour-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.tour-cheer *{animation-duration:.01s!important}}
#tour .tour-actions{display:flex;align-items:center;gap:10px;margin-top:16px}
#tour .tour-spacer{flex:1}
#tour .tour-btn{padding:9px 16px;border-radius:10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:#0c0e11;background:var(--accent);border:1px solid var(--accent-border);transition:filter .15s,opacity .15s}
#tour .tour-btn:hover:not(:disabled){filter:brightness(1.08)}
#tour .tour-btn:disabled{opacity:.35;cursor:default}
#tour .tour-btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
#tour .tour-btn.ghost:hover:not(:disabled){border-color:var(--accent);filter:none}
#tour .tour-link{padding:0;border:0;background:none;font:inherit;font-size:12px;color:var(--muted);cursor:pointer}
#tour .tour-link:hover{color:var(--accent);text-decoration:underline}
#tour .tour-link[data-tour=fill]{color:var(--accent)}

.tour-toast{position:fixed;z-index:101;left:50%;bottom:28px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--accent-border);color:var(--text);padding:12px 18px;border-radius:12px;box-shadow:0 18px 50px #000a;font-size:13px;max-width:min(560px,92vw)}
@media(prefers-reduced-motion:reduce){#tour .tour-ring,#tour .tour-card{animation:none;transition:none}}