/* shared/site/tutorial.css — the float-over interactive tutorial for the demo apps.
   Scoped entirely under .sh-tut-* so it cannot restyle the host app.

   THE BOX WEARS THE APP'S OWN CLOTHES. tutorial.js samples the host page (its CSS
   custom properties where it has them, otherwise the computed style of its cards and
   buttons) and fills the --sh-* variables below: background, text, muted text, line,
   accent, radius and shadow tone. So the explainer reads as one of the app's own
   cards rather than a generic widget in a fixed palette. Every value has a fallback,
   so a page the sampler cannot read still gets a usable, readable box. */
.sh-tut-launcher{position:fixed;right:18px;bottom:18px;z-index:2147483000;display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;border:1px solid var(--sh-accent,#79c0ff);background:var(--sh-bg,#0b1220);color:var(--sh-fg,#e8eefc);
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  box-shadow:var(--sh-shadow,0 14px 34px -14px rgba(0,0,0,.85));
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease}
.sh-tut-launcher:hover{transform:translateY(-2px);border-color:var(--sh-accent,#9ecbff);
  background:color-mix(in srgb, var(--sh-accent,#79c0ff) 10%, var(--sh-bg,#0b1220))}
.sh-tut-launcher:focus-visible{outline:2px solid var(--sh-accent,#79c0ff);outline-offset:3px}
.sh-tut-launcher svg{width:16px;height:16px;display:block;color:var(--sh-accent,#79c0ff)}
.sh-tut-launcher .sh-tut-count{color:var(--sh-muted,#9fb4d8);font-weight:500;font-size:11.5px}
.sh-tut-pop{position:fixed;z-index:2147483001;max-width:calc(100vw - 24px);padding:12px 14px;border-radius:var(--sh-radius,12px);
  border:1px solid var(--sh-line,#727f96);background:var(--sh-bg,#0b1220);color:var(--sh-fg,#e8eefc);
  box-shadow:var(--sh-shadow,0 26px 60px -22px rgba(0,0,0,.92));font:inherit;font-size:13px;line-height:1.5}
.sh-tut-pop[hidden]{display:none}
.sh-tut-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;
  color:var(--sh-muted,#9fb4d8);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.sh-tut-kicker span:first-child{color:var(--sh-accent-ink,var(--sh-accent,#9ecbff));font-weight:600}
.sh-tut-title{display:block;margin-bottom:3px;font-size:14px;font-weight:650;color:var(--sh-fg,#f2f7ff);overflow-wrap:anywhere}
.sh-tut-text{color:var(--sh-muted,#c7d4ea);overflow-wrap:anywhere}
.sh-tut-actions{display:flex;align-items:center;gap:6px;margin-top:10px}
.sh-tut-btn{cursor:pointer;font:inherit;font-size:12px;padding:5px 10px;border-radius:calc(var(--sh-radius,12px) - 3px);
  border:1px solid var(--sh-line,#727f96);background:transparent;color:var(--sh-muted,#c7d4ea);
  transition:border-color .14s ease,background .14s ease,color .14s ease}
.sh-tut-btn:hover{border-color:var(--sh-accent,#79c0ff);color:var(--sh-fg,#f2f7ff);
  background:color-mix(in srgb, var(--sh-accent,#79c0ff) 12%, transparent)}
.sh-tut-btn:focus-visible{outline:2px solid var(--sh-accent,#79c0ff);outline-offset:2px}
.sh-tut-btn.sh-tut-next{border-color:var(--sh-accent,#79c0ff);color:var(--sh-fg,#dbeaff)}
.sh-tut-btn[disabled]{opacity:.45;cursor:default}
.sh-tut-spacer{flex:1 1 auto}
.sh-tut-target{position:relative;outline:2px solid var(--sh-accent,#79c0ff);outline-offset:3px;border-radius:4px;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--sh-accent,#79c0ff) 16%, transparent);transition:box-shadow .16s ease}
.sh-tut-dim{opacity:.55}
@media (max-width:560px){
  .sh-tut-launcher{right:12px;bottom:12px;padding:9px 12px;font-size:12px}
  .sh-tut-launcher .sh-tut-count{display:none}
  .sh-tut-pop{left:12px;right:12px;bottom:70px;top:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .sh-tut-launcher,.sh-tut-target{transition:none}
}