/* bitswan.ai's layer over the Bailey console mockup (index.html): the guided
   tour and the Close demo button. The mockup is a frozen build in Bailey's own
   styling; this layer is the site's, so it reads as the website talking about
   the product, not as part of it. Tokens repeat the site's (style.css) rather
   than importing it, because style.css would restyle the mockup underneath. */
.bst,.bst-close,.bst-exitfx{
  --lime:#ABFF00; --lime-h:#9BE600; --ink:#020202; --white:#FFFFFF; --grey:#BBBBBB;
  --sans:"Space Grotesk",-apple-system,system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",monospace;
}

/* catches clicks behind the tour so a visitor cannot wander off mid-step */
.bst-block{position:fixed;inset:0;z-index:2147483600;background:transparent}

/* the spotlight: a hole in a dimmed page, eased between targets */
.bst-spot{position:fixed;z-index:2147483601;pointer-events:none;border-radius:10px;
  box-shadow:0 0 0 2px var(--lime),0 0 0 9999px rgba(2,2,2,.62);
  transition:top .45s cubic-bezier(.65,0,.25,1),left .45s cubic-bezier(.65,0,.25,1),
             width .45s cubic-bezier(.65,0,.25,1),height .45s cubic-bezier(.65,0,.25,1)}

.bst-card{position:fixed;z-index:2147483602;width:340px;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--white);border-radius:14px;padding:22px 22px 18px;
  font-family:var(--sans);box-shadow:0 18px 50px rgba(0,0,0,.35);
  transition:top .45s cubic-bezier(.65,0,.25,1),left .45s cubic-bezier(.65,0,.25,1),opacity .2s}
.bst-card.is-moving .bst-body{opacity:.0}
.bst-body{transition:opacity .2s}
.bst-step{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin:0 0 10px}
.bst-title{font-weight:700;font-size:21px;line-height:1.15;letter-spacing:-.015em;margin:0 0 10px}
.bst-text{font-size:15px;line-height:1.5;color:#E6E6E6;margin:0}
.bst-text b{color:var(--white);font-weight:600}
.bst-foot{display:flex;align-items:center;gap:10px;margin-top:18px}
.bst-skip{margin-right:auto;background:none;border:0;padding:6px 0;color:var(--grey);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bst-skip:hover{color:var(--white)}
.bst-btn{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:10px 18px;cursor:pointer;border:0;transition:background .16s,color .16s}
.bst-back{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px #555}
.bst-back:hover{box-shadow:inset 0 0 0 1.5px var(--white)}
.bst-back[hidden],.bst-skip[hidden]{display:none}
.bst-btn{white-space:nowrap}
.bst-skip[hidden]~.bst-back{margin-left:auto}
.bst-next{background:var(--lime);color:var(--ink)}
.bst-next:hover{background:var(--lime-h)}
.bst-card button:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* after the tour: replay it, or switch to the other one */
.bst-again{position:fixed;left:16px;bottom:16px;z-index:2147483000;display:flex;align-items:center;gap:6px;
  background:var(--ink);border-radius:999px;padding:4px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.bst-again[hidden]{display:none}
.bst-again button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:8px 14px;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.bst-replay{background:var(--ink);color:var(--white)}
.bst-replay:hover{background:#1C1C1C}
.bst-replay i{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none}
.bst-other{background:transparent;color:var(--grey);text-decoration:underline;text-underline-offset:3px}
.bst-other:hover{color:var(--white)}
.bst-again button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* the closing card of the business tour points at nothing: dim only */
.bst-spot.is-none{box-shadow:0 0 0 9999px rgba(2,2,2,.62)}

/* last step: an invitation to the other tour */
.bst-switch{display:block;margin:14px 0 0;padding:12px 0 0;width:100%;text-align:left;background:none;border:0;border-top:1px solid #2A2A28;
  color:var(--lime);font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.bst-switch:hover{color:var(--white)}
.bst-switch[hidden]{display:none}

/* ---- Business tour: lime, warm, plain ---- */
.is-biz .bst-card{background:var(--lime);color:var(--ink);width:360px}
.is-biz .bst-step{color:var(--ink);opacity:.6}
.is-biz .bst-title{font-size:23px}
.is-biz .bst-text{color:var(--ink);font-size:16px}
.is-biz .bst-text b{color:var(--ink);font-weight:700}
.is-biz .bst-skip{color:rgba(2,2,2,.6)}
.is-biz .bst-skip:hover{color:var(--ink)}
.is-biz .bst-back{color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(2,2,2,.35)}
.is-biz .bst-back:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.is-biz .bst-next{background:var(--ink);color:var(--white)}
.is-biz .bst-next:hover{background:#1C1C1C}
.is-biz .bst-card button:focus-visible{outline-color:var(--ink)}
.is-biz .bst-switch{color:var(--ink);border-top-color:rgba(2,2,2,.2)}
.is-biz .bst-switch:hover{color:#333}

/* ---- Technical tour: ink, monospace, the evidence as a readout ---- */
.is-tech .bst-card{width:400px;border-radius:8px;box-shadow:0 0 0 1px #2A2A28,0 18px 50px rgba(0,0,0,.35)}
.is-tech .bst-step{letter-spacing:.08em;text-transform:none;font-size:11.5px}
.is-tech .bst-title{font-family:var(--mono);font-size:17px;line-height:1.3;letter-spacing:-.01em}
.is-tech .bst-text{font-size:14px;line-height:1.55;color:#D6D6D6}
.bst-spec{margin:14px 0 0;padding:10px 12px;background:#111;border-left:2px solid var(--lime);border-radius:4px;
  font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--lime);white-space:pre-wrap;overflow-x:auto}
.bst-spec[hidden]{display:none}
.is-tech .bst-spot{border-radius:4px}

/* Close demo takes the Admin badge's place at the right of the mockup's own
   header, as the loudest thing in it: the site's lime against Bailey's white. */
/* lifted above the tour's dimming, so leaving is always one click away */
.bst-close{position:relative;z-index:2147483603;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 12px;
  background:var(--lime);color:var(--ink);border:0;border-radius:999px;cursor:pointer;flex:none;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 0 0 1.5px var(--ink);transition:background .16s,transform .12s}
.bst-close:hover{background:var(--lime-h);transform:translateY(-1px)}
.bst-close:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bst-close svg{width:14px;height:14px;flex:none}
/* sample-app links that cannot open (site-layer.js switches them off) */
#root a[aria-disabled="true"]{cursor:default;text-decoration:none}
#root a[aria-disabled="true"] svg{opacity:.3}

/* the ink the site (app.js) then shrinks back into its Live demo pill */
.bst-exitfx{position:fixed;inset:0;z-index:2147483647;background:var(--ink);pointer-events:none}

/* the mockup's own "sample data" badge sits at the very top of the stack;
   bring it under the tour card so it cannot cover the buttons */
#bailey-demo-badge{z-index:2147483500}

/* phones: the card docks to the bottom instead of chasing the target */
@media(max-width:720px){
  /* the mockup's header runs off a phone screen, so the way out is pinned */
  .bst-close{position:fixed;top:12px;right:12px;box-shadow:0 0 0 1.5px var(--ink),0 6px 20px rgba(0,0,0,.25)}
  .bst .bst-card{left:16px!important;right:16px;top:auto!important;bottom:16px;width:auto}
}
@media(prefers-reduced-motion:reduce){
  .bst-spot,.bst-card,.bst-body{transition:none}
}