/* Guided tour.
   Screens are recreations built from the APP'S OWN classes (.card, .grid, .btn,
   .line, .metric, .row), so the live stylesheet paints them and they match the
   real UI. Only the player chrome below is bespoke. Recreations rather than the
   live app because the welcome modal is signed-out only -- driving the real UI
   would show gated Profiles/Inventory and would overwrite the visitor's work. */

.tourBackdrop{
  position:fixed;
  inset:0;
  /* Above the welcome modal (2147483645). */
  z-index:2147483646;
  display:grid;
  place-items:center;
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 10%,rgba(3,6,11,.94)),rgba(3,6,11,.96));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  opacity:0;
  visibility:hidden;
  transition:opacity .32s ease,visibility .32s ease;
}
.tourBackdrop.is-open{opacity:1;visibility:visible}

.tourShell{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(1000px,100%);
  /* Explicit height, not just a cap: the stage is flex:1 with min-height:0, so
     without a resolved height on the shell it collapses to nothing and only the
     header and footer render. */
  height:min(94dvh,760px);
  max-height:min(94dvh,760px);
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
  border-radius:22px;
  overflow:hidden;
  background:color-mix(in srgb,var(--panel) 97%,black 3%);
  box-shadow:0 40px 120px rgba(0,0,0,.66),0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent);
  transform:translateY(14px) scale(.99);
  transition:transform .4s cubic-bezier(.2,.85,.2,1);
}
.tourBackdrop.is-open .tourShell{transform:none}

/* ---------- header: chapter progress + title ---------- */
.tourBar{
  position:relative;
  z-index:10;
  padding:13px 16px 11px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),var(--panel));
}
.tourChapters{display:flex;gap:5px;margin-bottom:11px}
.tourChapter{
  position:relative;
  flex:1 1 0;
  height:3px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in srgb,var(--line) 70%,transparent);
  cursor:pointer;
}
.tourChapter i{
  position:absolute;
  inset:0;
  display:block;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent2,var(--accent)),var(--accent));
}
.tourChapter.done i{width:100%}
.tourChapter.active i{width:var(--tour-progress,0%)}
.tourBarRow{display:flex;align-items:center;gap:11px}
.tourBadge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 10px;
  border:1px solid color-mix(in srgb,var(--accent) 36%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-raised,var(--panel2)));
  color:var(--accent2,var(--accent));
  font-size:.57rem;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
}
.tourBadge::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 8px #ef4444;
  animation:tourRec 1.9s ease-in-out infinite;
}
@keyframes tourRec{0%,100%{opacity:1}50%{opacity:.25}}
.tourHeading{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  font-size:.98rem;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tourStep{color:var(--muted);font-size:.7rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.tourClose{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:9px;
  background:color-mix(in srgb,var(--surface-raised,var(--panel2)) 88%,transparent);
  color:var(--muted);
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease,transform .16s ease;
}
.tourClose:hover{color:var(--text);border-color:var(--accent);transform:rotate(90deg)}

/* ---------- stage ---------- */
.tourStage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),
    var(--surface-input,var(--panel));
}
/* Faint grid so the staged screens read as "product", not as a bare div. */
.tourStage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 5%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,transparent) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 50% 40%,black,transparent 78%);
}
/* Vignette sells the "recording" framing. */
.tourStage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 70px 12px rgba(0,0,0,.34);
}

/* ---------- footer: caption + transport ---------- */
.tourFooter{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:12px 16px 14px;
  border-top:1px solid color-mix(in srgb,var(--accent) 15%,var(--line));
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,var(--surface-raised,var(--panel2))),var(--surface-raised,var(--panel2)));
}
.tourTransport{display:flex;align-items:center;gap:7px}
.tourTransport[hidden]{display:none}
.tourActions{display:flex;align-items:center;gap:9px;margin-left:auto}
.tourBtn{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:9px;
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 88%,transparent);
  color:var(--text);
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.tourBtn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);transform:translateY(-1px)}
.tourBtn svg{width:15px;height:15px;fill:currentColor}
.tourFinish{
  min-height:34px;
  padding:0 15px;
  border-radius:9px;
  border:1px solid color-mix(in srgb,var(--accent2,var(--accent)) 70%,var(--line));
  background:linear-gradient(135deg,var(--accent2,var(--accent)),var(--accent));
  color:var(--accent-ink,#fff);
  font-size:.79rem;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease;
}
.tourFinish:hover{transform:translateY(-1px);box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 30%,transparent)}

/* ---------- welcome modal launch button ---------- */
.welcomeActionRow{display:flex;gap:9px;justify-content:flex-end}
.welcomeActionRow .btn{margin:0}
#welcomeTourStart{
  min-width:0;
  min-height:44px;
  padding:10px 16px;
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-raised,var(--panel2)));
  color:var(--text);
  font-weight:700;
}
#welcomeTourStart:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface-raised,var(--panel2)))}

/* ---------- responsive ---------- */
@media(max-width:820px){
  .tourShell{max-height:min(94dvh,700px)}
    .tCards{grid-template-columns:1fr;gap:7px}
  .tCard:nth-child(3){display:none}
  .tGrid{grid-template-columns:1fr}
  .tField.wide{grid-column:1/-1}
  .tPriceMeta{display:none}
    .tourActions{margin-left:auto}
  .tourHeading{font-size:.88rem}
  .tourStep{display:none}
}
@media(max-width:620px){
  .tourShell{border-radius:17px}
  .tField:nth-child(n+5){display:none}
  .tLine:nth-child(n+6){display:none}
  .tRow:nth-child(n+4){display:none}
  .tourFinish{flex:1 1 auto}
  .welcomeActionRow{flex-direction:row}
  .welcomeActionRow .btn{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px}
}

/* Motion-sensitive viewers get the same content without the animation:
   states are applied instantly and each scene simply holds longer. */
@media(prefers-reduced-motion:reduce){
  .tourBackdrop,.tourShell,.tourScreen,.tCard,.tRow,.tLine,.tChip,.tAlert,
  .tComposition i,.tTrack i,.tourCursor,.tourBtn,.tourFinish{
    transition:none!important;
    animation:none!important;
  }
  .tourCursor{display:none}
  .tourBadge::before{animation:none}
}

/* ================= layout: stage + narration ================= */
.tourBody{position:relative;flex:1 1 auto;min-height:0;display:flex}
.tourStage{flex:1 1 auto;min-width:0}
.tourApp{
  height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px 22px 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
/* The recreations use the app's own .card/.grid/.btn, so they inherit the live
   theme. Only trim the outer spacing the real page provides. */
.tourApp>.card{margin:0}
/* Flex children shrink by default, so a tall card was squashed to fit instead of
   overflowing -- scrollHeight never exceeded clientHeight and the stage could not
   scroll at all. Anything past the fold (profit margin, marketplace fee,
   rounding) was simply unreachable. Keep natural heights so the stage scrolls. */
.tourApp>*{flex:0 0 auto}
.tourApp .card h2{font-size:1rem;margin:0 0 10px}
.tourApp input[readonly]{cursor:default}

.tourFocus{
  border-color:var(--accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)!important;
  background:color-mix(in srgb,var(--accent) 7%,var(--surface-input,var(--panel)))!important;
}
.tourPress{
  transform:scale(.97);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 26%,transparent)!important;
  transition:transform .16s ease,box-shadow .16s ease;
}
.tourRowIn{animation:tourIn .42s cubic-bezier(.2,.85,.2,1) both}
@keyframes tourIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tourLineHot{
  border-radius:9px;
  outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);
  outline-offset:2px;
  background:color-mix(in srgb,var(--accent) 12%,transparent)!important;
  transition:background .25s ease,outline-color .25s ease;
}
/* stand-ins for the app's themed select controls */
.tourSelect{
  display:flex;align-items:center;min-height:34px;padding:6px 11px;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  border-radius:9px;background:var(--surface-input,var(--panel));
  color:var(--text);font-size:.8rem;
}
.tourSelectSet{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.tourAdvancedBody{display:grid;gap:12px;margin-top:10px}
.tourAdvancedBody .settingGroup{margin:0}
.tourApp .advancedSummary{cursor:default}

/* ================= narration ================= */
.tourNarration{
  flex:0 0 268px;
  display:flex;
  flex-direction:column;
  min-height:0;
  border-left:1px solid color-mix(in srgb,var(--accent) 16%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface-raised,var(--panel2))),var(--surface-raised,var(--panel2)));
}
.tourNarration[hidden]{display:none}
.tourNarration h3{
  margin:0;padding:12px 15px 9px;
  color:var(--accent2,var(--accent));
  font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
}
.tourNotes{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:11px 13px 16px;list-style:none;display:grid;gap:9px;align-content:start;
}
.tourNote{
  display:grid;grid-template-columns:auto 1fr;gap:9px;
  color:var(--muted);font-size:.76rem;line-height:1.45;
  animation:tourIn .34s ease both;
}
.tourNote b{color:var(--text);font-weight:700}
.tourNoteMark{
  width:15px;height:15px;margin-top:2px;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  position:relative;
}
.tourNote.done .tourNoteMark{
  border-color:var(--accent2,var(--accent));
  background:var(--accent2,var(--accent));
}
.tourNote.done .tourNoteMark::after{
  content:"";position:absolute;left:3px;top:1px;width:4px;height:8px;
  border:solid var(--accent-ink,#fff);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.tourNote.done{color:var(--text)}

/* ================= prompts ================= */
.tourPrompt{
  position:absolute;inset:0;z-index:8;
  display:grid;place-items:center;padding:22px;
  background:color-mix(in srgb,var(--bg) 62%,rgba(3,6,11,.72));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transition:opacity .28s ease;
}
.tourPrompt[hidden]{display:none}
.tourPrompt.in{opacity:1}
.tourPromptCard{
  display:grid;justify-items:center;gap:12px;
  width:min(470px,100%);padding:26px 26px 22px;text-align:center;
  border:1px solid color-mix(in srgb,var(--accent) 46%,var(--line));
  border-radius:19px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel));
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 30px color-mix(in srgb,var(--accent) 16%,transparent);
  animation:tourPop .4s cubic-bezier(.2,.85,.2,1) both;
}
@keyframes tourPop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.tourPromptIcon{
  display:grid;place-items:center;width:56px;height:56px;border-radius:17px;
  border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 20%,var(--surface-raised,var(--panel2))),var(--surface-input,var(--panel)));
  color:var(--accent2,var(--accent));
  animation:tourPulse 2.6s ease-in-out infinite;
}
@keyframes tourPulse{0%,100%{box-shadow:0 0 24px color-mix(in srgb,var(--accent) 18%,transparent)}50%{box-shadow:0 0 38px color-mix(in srgb,var(--accent) 34%,transparent)}}
.tourPromptIcon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tourPromptCard h3{margin:0;font-size:1.18rem;letter-spacing:-.02em}
.tourPromptCard p{margin:0;max-width:46ch;color:var(--muted);font-size:.86rem;line-height:1.55}

/* ================= setup screen ================= */
.tourSetup{height:100%;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;gap:15px;padding:22px 24px 24px}
.tourSetupHead{display:grid;justify-items:center;gap:9px;text-align:center}
.tourSetupHead h3{margin:0;font-size:1.3rem;letter-spacing:-.025em}
.tourSetupHead p{margin:0;max-width:52ch;color:var(--muted);font-size:.85rem;line-height:1.5}
.tourMark{
  display:grid;place-items:center;width:54px;height:54px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 15%,var(--surface-raised,var(--panel2))),var(--surface-input,var(--panel)));
  color:var(--accent2,var(--accent));
}
.tourMark img{width:36px;height:36px;object-fit:contain}
.tourMark.done svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tourPicks{display:grid;gap:8px}
.tourPicks.shake{animation:tourShake .42s ease}
@keyframes tourShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tourPick{
  position:relative;
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:11px;
  padding:11px 13px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 85%,transparent);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.tourPick:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));transform:translateY(-1px)}
.tourPick input{position:absolute;opacity:0;pointer-events:none}
.tourPickBox{
  width:19px;height:19px;border-radius:6px;position:relative;
  border:2px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:var(--surface-input,var(--panel));
  transition:background .18s ease,border-color .18s ease;
}
.tourPick input:checked~.tourPickBox{background:var(--accent);border-color:var(--accent)}
.tourPick input:checked~.tourPickBox::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--accent-ink,#fff);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.tourPick input:focus-visible~.tourPickBox{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.tourPickIcon{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent2,var(--accent));
}
.tourPickIcon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tourPickCopy{display:grid;gap:2px;min-width:0}
.tourPickCopy strong{font-size:.84rem}
.tourPickCopy small{color:var(--muted);font-size:.72rem;line-height:1.35}
.tourPickTag{
  padding:3px 9px;border-radius:999px;font-size:.6rem;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--muted) 40%,var(--line));
  color:var(--muted);
}
.tourPickTag.free{border-color:color-mix(in srgb,var(--good,#4ade80) 55%,var(--line));color:var(--good,#4ade80)}
.tourGhost{
  min-height:34px;padding:0 14px;border-radius:9px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 88%,transparent);
  color:var(--text);font-size:.78rem;font-weight:700;white-space:nowrap;
}
.tourGhost:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ================= shared bits for the shorter sections ================= */
.tourCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.tCard{display:grid;gap:6px;padding:11px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--surface-input,var(--panel)) 88%,transparent)}
.tCardTop{display:flex;align-items:center;gap:7px}
.tDot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.tCard strong{font-size:.78rem}
.tCard small{color:var(--muted);font-size:.65rem}
.tCard em{color:var(--accent2,var(--accent));font-style:normal;font-size:.72rem;font-weight:800}
.tourRows{display:grid;gap:6px}
.tRow{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:10px;background:color-mix(in srgb,var(--surface-input,var(--panel)) 84%,transparent)}
.tRow.low{border-color:color-mix(in srgb,var(--warn,#f59e0b) 60%,var(--line));background:color-mix(in srgb,var(--warn,#f59e0b) 10%,transparent)}
.tRowName{display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600}
.tRowQty{color:var(--muted);font-size:.72rem;align-self:center;font-variant-numeric:tabular-nums}
.tTrack{grid-column:1/-1;height:5px;border-radius:999px;background:color-mix(in srgb,var(--line) 65%,transparent);overflow:hidden}
.tTrack i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent2,var(--accent)),var(--accent));transition:width .7s cubic-bezier(.2,.85,.2,1)}
.tRow.low .tTrack i{background:linear-gradient(90deg,var(--warn,#f59e0b),#ef4444)}
.tAlert{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--warn,#f59e0b) 55%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--warn,#f59e0b) 12%,transparent);font-size:.73rem}
.tAlertDot{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--warn,#f59e0b);color:#1a1205;font-weight:900;font-size:.72rem}
.tourAiBody{display:grid;gap:8px;margin-top:10px}
.tourAiBlock{padding:10px 12px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--surface-input,var(--panel)) 86%,transparent)}
.tourAiBlock strong{display:block;color:var(--accent2,var(--accent));font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:3px}
.tourAiBlock p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.45}

/* ================= responsive ================= */
@media(max-width:900px){
  .tourBody{flex-direction:column}
  .tourNarration{flex:0 0 auto;max-height:34%;border-left:0;border-top:1px solid color-mix(in srgb,var(--accent) 16%,var(--line))}
  .tourApp{padding:15px 15px 20px}
  .tourCards{grid-template-columns:1fr}
}
@media(max-width:620px){
  .tourShell{border-radius:17px}
  .tourPick{grid-template-columns:auto 1fr auto;gap:9px;padding:10px}
  .tourPickIcon{display:none}
  .tourActions{gap:7px;flex:1 1 auto}
  .tourActions .tourFinish,.tourActions .tourGhost{flex:1 1 auto}
  .tourPromptCard{padding:20px 18px 18px}
  .tourNarration{max-height:40%}
}
@media(prefers-reduced-motion:reduce){
  .tourRowIn,.tourNote,.tourPromptCard,.tourPromptIcon,.tourPicks,.tSpark,.tPrinterImage.tImgLoading::after{animation:none!important}
  .tourFocus,.tourPress,.tourLineHot,.tTrack i,.tSpoolWrap,.tProfileSave,.tPrinterPlaceholder svg{transition:none!important}
}

/* ================= Filament & Printer Profiles chapter ================= */
.tProfileBuild{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center}
.tSpoolStage,.tPrinterStage{display:grid;justify-items:center;gap:9px;padding:4px 2px}
.tSpool{width:118px;height:118px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.tSpoolDisc{fill:color-mix(in srgb,var(--surface-raised,var(--panel)) 72%,var(--line));stroke:color-mix(in srgb,var(--accent) 28%,var(--line));stroke-width:2}
.tSpoolWrap{stroke:color-mix(in srgb,var(--muted) 42%,transparent);transition:stroke .6s cubic-bezier(.2,.85,.2,1)}
.tSpoolHub{fill:color-mix(in srgb,var(--surface-input,var(--panel)) 88%,var(--line))}
.tSpoolHole{fill:var(--bg,#0d1218)}
.tSpoolTag,.tPrinterStage .tSpoolTag{text-align:center;min-width:0}
.tSpoolTag strong{display:block;font-size:.82rem;line-height:1.2}
.tSpoolTag small{color:var(--muted);font-size:.66rem}
.tRatePreview{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:11px 16px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,transparent)}
.tRatePreview span{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--muted)}
.tRatePreview b{font-size:1.2rem;font-weight:800;color:var(--accent2,var(--accent));font-variant-numeric:tabular-nums;transition:color .2s ease}
.tPrinterImage{position:relative;display:grid;place-items:center;width:120px;height:96px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--surface-input,var(--panel)) 84%,transparent);overflow:hidden}
.tPrinterPlaceholder svg{width:52px;height:52px;fill:none;stroke:color-mix(in srgb,var(--muted) 70%,var(--accent));stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.65;transition:stroke .5s ease,opacity .5s ease}
.tPrinterImage.tImgLoading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 18%,color-mix(in srgb,var(--accent) 38%,transparent) 50%,transparent 82%);transform:translateX(-100%);animation:tShimmer .85s ease}
.tPrinterImage.tImgLoaded{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.tPrinterImage.tImgLoaded .tPrinterPlaceholder svg{stroke:var(--accent);opacity:1}
@keyframes tShimmer{to{transform:translateX(100%)}}
.tProfileFields{min-width:0}
.tProfileSave{margin-top:13px;width:100%;justify-content:center;transition:background .25s ease,border-color .25s ease,transform .2s ease}
.tProfileSave.tSaved{background:var(--good,#22c55e)!important;border-color:var(--good,#22c55e)!important;color:#04140a!important}
.tLibrary{margin-top:16px}
.tLibraryTitle{margin:0 0 9px;font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.tCardNew{position:relative;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 12px 26px color-mix(in srgb,var(--accent) 22%,transparent)}
.tCardBadge{position:absolute;top:-8px;right:8px;padding:2px 8px;border-radius:999px;background:var(--accent);color:#04121f;font-size:.58rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.tSpark{position:absolute;z-index:6;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,var(--accent2,var(--accent)),var(--accent));pointer-events:none;transform:translate(-50%,-50%);animation:tSparkFly .82s ease-out var(--d,0s) both}
@keyframes tSparkFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.85)}}
@media(max-width:640px){
  .tProfileBuild{grid-template-columns:1fr;justify-items:center}
  .tProfileFields{width:100%}
}

/* ================= explanation -> field flight ================= */
/* A pulse leaves the narration line and lands on the field about to be filled,
   so the viewer never has to guess which control the text refers to. */
.tourFly{
  position:absolute;
  z-index:9;
  left:0;top:0;
  width:14px;height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#fff,var(--accent2,var(--accent)) 45%,var(--accent) 100%);
  box-shadow:0 0 14px 3px color-mix(in srgb,var(--accent) 60%,transparent);
  transition:transform .66s cubic-bezier(.36,.03,.28,1),opacity .22s ease;
}
/* comet tail, faded so it reads as motion rather than a second object */
.tourFly::after{
  content:"";
  position:absolute;
  right:8px;top:50%;
  width:26px;height:2px;
  transform:translateY(-50%);
  border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent));
  opacity:.85;
}
.tourFly.landed{opacity:0}

/* the source line lifts slightly as the pulse leaves it */
.tourNote.sending{
  color:var(--text);
}
.tourNote.sending .tourNoteMark{
  border-color:var(--accent2,var(--accent));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
  transition:box-shadow .3s ease,border-color .3s ease;
}

/* arrival pulse on the destination field */
.tourLand{
  animation:tourLandPulse .62s ease-out;
}
@keyframes tourLandPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 62%,transparent)}
  60%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 6%,transparent)}
  100%{box-shadow:0 0 0 14px transparent}
}

@media(prefers-reduced-motion:reduce){
  .tourFly{display:none}
  .tourLand{animation:none!important}
  .tourNote.sending .tourNoteMark{transition:none!important}
}

/* ================= hidden must actually hide ================= */
/* Author rules like .tourAdvancedBody{display:grid} outrank the UA sheet's
   [hidden]{display:none}, which is why Advanced Options rendered expanded
   despite carrying the attribute. Re-assert it for everything in the tour. */
.tourShell [hidden]{display:none!important}

/* ================= circle-the-target ring ================= */
.tourRing{
  position:absolute;
  z-index:9;
  pointer-events:none;
  overflow:visible;
  opacity:1;
  transition:opacity .4s ease;
}
.tourRing ellipse{
  fill:none;
  stroke:var(--accent2,var(--accent));
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
/* A soft, translucent light that orbits the target: a faint wide "dust" trail with
   a brighter short head chasing round it (dash offset animated in JS). */
.tourRingTrail{
  stroke-width:7;
  stroke-opacity:.12;
  filter:blur(1.4px) drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 40%,transparent));
}
.tourRingHead{
  stroke-width:2.5;
  stroke-opacity:.5;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 55%,transparent));
}
.tourRing.fade{opacity:0}

/* ================= color picker ================= */
.tourApp .unifiedColorPicker{
  grid-column:1/-1;
  display:grid;
  gap:9px;
  margin-top:4px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-input,var(--panel)) 82%,transparent);
}
.tourApp .unifiedColorHeader{
  display:flex;
  align-items:center;
  gap:11px;
  flex-wrap:wrap;
}
.tourApp .unifiedColorTitle{flex:1 1 190px;min-width:0}
.tourApp .unifiedColorTitle label{display:block;margin:0 0 2px}
.tourApp .unifiedColorTitle p{margin:0;color:var(--muted);font-size:.68rem;line-height:1.35}
.tourApp .unifiedColorSelected{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 11px 5px 6px;
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  border-radius:999px;
  background:var(--surface-raised,var(--panel2));
  font-size:.75rem;
}
.tourApp .unifiedColorPreview{
  width:19px;height:19px;border-radius:50%;
  border:1px solid color-mix(in srgb,#fff 22%,transparent);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background .3s ease;
}
.tourApp .colorToggle{
  min-height:32px;
  padding:0 14px;
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));
  border-radius:9px;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface-raised,var(--panel2)));
  color:var(--text);
  font-size:.75rem;
  font-weight:700;
  cursor:default;
}
.tourApp .unifiedSwatches{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(30px,1fr));
  gap:7px;
  padding-top:3px;
}
.tourApp .swatch{
  width:100%;
  aspect-ratio:1;
  min-height:28px;
  padding:0;
  border:1px solid color-mix(in srgb,#fff 18%,transparent);
  border-radius:8px;
  background:var(--swatch,#888);
  cursor:default;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tourApp .swatch.picked{
  border-color:var(--accent2,var(--accent));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent);
  transform:scale(1.12);
}

/* ================= scrolling ================= */
/* The stage scrolls during the tour and while the viewer reviews a finished
   step, so a tall card such as Advanced Options is always reachable. */
.tourApp{scrollbar-width:thin}
.tourApp::-webkit-scrollbar{width:9px}
.tourApp::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 32%,var(--line));
}
.tourApp::-webkit-scrollbar-track{background:transparent}

@media(prefers-reduced-motion:reduce){
  .tourRing{display:none}
  .tourApp .swatch,.tourApp .unifiedColorPreview{transition:none!important}
}

/* ---- anchored callouts (Summary Breakdown) ----
   Used instead of the side feed where a note belongs to one specific line.
   Enters softly: a short rise plus a fade, no scale or bounce, so a card
   appearing next to a number does not pull the eye off the number. */
.tourCallout{
  position:absolute; z-index:6; width:min(340px,72%);
  padding:13px 15px;
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius:14px;
  background:color-mix(in srgb, var(--surface-raised, var(--panel)) 94%, var(--accent));
  box-shadow:0 1px 2px rgba(8,12,20,.18), 0 16px 34px -12px rgba(8,12,20,.45);
  color:var(--text);
  opacity:0; transform:translateY(8px);
  transition:opacity .34s ease, transform .34s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.tourCallout.in{ opacity:1; transform:none; }
.tourCallout.above{ transform:translateY(-8px); }
.tourCallout.above.in{ transform:none; }
.tourCallout b{ display:block; margin-bottom:5px; color:var(--accent2, var(--accent)); font-size:.82rem; font-weight:800; }
.tourCallout p{ margin:0 0 7px; font-size:.8rem; line-height:1.55; color:var(--text); opacity:.92; }
.tourCallout p:last-child{ margin-bottom:0; }
.tourCallout em{ font-style:normal; font-weight:700; opacity:1; }
/* Small pointer toward the line the card describes. */
.tourCalloutArrow{
  position:absolute; left:50%; top:-6px; width:11px; height:11px; margin-left:-5px;
  border-left:1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-top:1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background:inherit; transform:rotate(45deg); border-radius:2px 0 0 0;
}
.tourCallout.above .tourCalloutArrow{ top:auto; bottom:-6px; transform:rotate(225deg); }
@media(prefers-reduced-motion:reduce){
  .tourCallout{ transition:none; opacity:1; transform:none; }
}

/* ---- in-development chapters ---- */
.tourPick.inDev{ opacity:.62; cursor:not-allowed; }
.tourPick.inDev input{ cursor:not-allowed; }
.tourPickTag.inDev{
  border-color:color-mix(in srgb, var(--warn,#f59e0b) 55%, var(--line));
  color:var(--warn,#f59e0b);
}