/* tour.css — the guided walk over the sample console, in GIVEN's own dress:
   black card, Sora + Inter, keyline frame with notched corners, achromatic only. */

:root{
  --t-ease:cubic-bezier(0.16,1,0.3,1);
  --t-edge:#2E2E2E; --t-steel:#8A8A8A; --t-silver:#C4C4C4;
  --t-dim:rgba(0,0,0,.62);
}

.is-touring #toasts{z-index:1300}

.tour{position:fixed;inset:0;z-index:1200;pointer-events:none;font-family:var(--sans)}
.tour[hidden],.tour [hidden]{display:none!important}

/* transparent click-catchers around the spotlight; the lid covers the hole on look-only steps */
.tour__block{position:fixed;pointer-events:auto;background:transparent;cursor:default}
.tour__lid{position:fixed;pointer-events:auto;background:transparent;cursor:default}

.tour__hole{
  position:fixed;top:50%;left:50%;width:0;height:0;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 2px #fff,0 0 0 200vmax var(--t-dim);
}
/* glide only when the spotlight moves to a new thing; while the page scrolls it stays glued */
.tour--moving .tour__hole{transition:top .38s var(--t-ease),left .38s var(--t-ease),width .38s var(--t-ease),height .38s var(--t-ease),box-shadow .2s ease}
.tour--nohole .tour__hole{box-shadow:0 0 0 0 transparent,0 0 0 200vmax var(--t-dim)}
.tour--click .tour__hole::after{
  content:"";position:absolute;inset:-7px;border-radius:16px;border:1.5px solid #fff;opacity:0;
  animation:tourPulse 1.8s var(--t-ease) infinite;
}
@keyframes tourPulse{0%{opacity:.85;transform:scale(.97)}70%{opacity:0;transform:scale(1.03)}100%{opacity:0}}

/* the card */
.tour__card{
  position:fixed;left:0;top:0;width:352px;max-width:calc(100vw - 24px);pointer-events:auto;
  background:#000;color:#fff;border:1px solid var(--t-edge);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  padding:18px 18px 0;
  -webkit-font-smoothing:antialiased;
}
.tour__card::before,.tour__card::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none}
.tour__card::before{top:0;left:0;border-top:1px solid var(--t-steel);border-left:1px solid var(--t-steel);clip-path:polygon(0 0,100% 0,0 100%)}
.tour__card::after{bottom:0;right:0;border-bottom:1px solid var(--t-steel);border-right:1px solid var(--t-steel);clip-path:polygon(100% 100%,0 100%,100% 0)}
.tour__card:focus{outline:none}
.tour__card.is-nudged{animation:tourNudge .32s var(--t-ease)}
@keyframes tourNudge{0%,100%{translate:0 0}30%{translate:-5px 0}65%{translate:4px 0}}

.tour__meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tour__count{
  font:800 11.5px/1.4 var(--serif);letter-spacing:.1em;color:var(--t-silver);
  border:1px solid var(--t-steel);border-radius:2px;padding:3px 8px;white-space:nowrap;
}
.tour__count b{color:#fff;font-weight:800}
.tour__kicker{font:500 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--t-steel)}

.tour__title{font:800 23px/1.12 var(--serif);letter-spacing:-.015em;color:#fff;margin:0 0 10px}
.tour__say{font:400 15.5px/1.5 var(--sans);color:#fff;margin:0}
.tour__do{
  display:flex;align-items:center;gap:9px;margin:12px 0 0;
  font:500 12.5px/1.4 var(--sans);color:var(--t-silver);
}
.tour__do::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.tour__do[hidden]{display:none}

.tour__nav{display:flex;align-items:center;gap:8px;margin:16px -18px 0;padding:10px 12px 12px 18px;border-top:1px solid var(--t-edge)}
.tour__sp{flex:1 1 auto}
.tour__btn{
  min-height:44px;min-width:44px;padding:0 16px;border-radius:2px;cursor:pointer;
  font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:#fff;border:1px solid var(--t-edge);
  transition:border-color .18s var(--t-ease),background .18s var(--t-ease),color .18s var(--t-ease);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;
}
.tour__btn:hover{border-color:#fff}
.tour__btn--primary{background:#fff;color:#000;border-color:#fff}
.tour__btn--primary:hover{background:#000;color:#fff}
.tour__btn--quiet{border-color:transparent;color:var(--t-steel);padding:0 6px}
.tour__btn--quiet:hover{color:#fff;border-color:transparent}
.tour__btn:disabled{opacity:.45;cursor:default}
.tour__btn:focus-visible{outline:1px solid var(--t-silver);outline-offset:3px}
.tour__btn .arrow{transition:transform .28s var(--t-ease)}
.tour__btn--primary:hover .arrow{transform:translateX(3px)}

.tour__bar{height:2px;margin:0 -18px;background:var(--t-edge);position:relative;overflow:hidden}
.tour__bar i{position:absolute;inset:0 auto 0 0;background:#fff;width:0;transition:width .5s var(--t-ease)}

/* intro + finish: centered, a little larger */
.tour__card.is-center{width:432px}
.tour__links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0}
.tour__links a{font:500 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--t-silver);text-decoration:none;border-bottom:1px solid var(--t-edge);padding:6px 0}
.tour__links a:hover{color:#fff;border-color:#fff}

/* phones: the card docks to the bottom edge as a sheet */
.tour__card.is-docked{left:12px!important;right:12px;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;transform:none!important}
.tour__card.is-docked .tour__title{font-size:21px}
.tour__card.is-docked .tour__say{font-size:15px}

.tour__live{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* after the tour: the persistent honesty chip + restart */
.sbx-dock{
  position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:120;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100vw - 28px);
  font-family:var(--sans);
}
.sbx-dock[hidden]{display:none}
/* room under the last lines of every page, so the dock never sits on them */
@media screen{ body.is-sandbox main{padding-bottom:88px} }
.sbx-chip,.sbx-dock__btn{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px;border-radius:99px;
  font:500 12.5px/1 var(--sans);white-space:nowrap;
}
.sbx-chip{background:#000;color:#fff;border:1px solid #000}
.sbx-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.sbx-dock__btn{background:#fff;color:#000;border:1px solid #000;cursor:pointer;text-decoration:none}
.sbx-dock__btn:hover{background:#000;color:#fff}
.sbx-dock__btn:focus-visible,.sbx-chip:focus-visible{outline:2px solid #000;outline-offset:2px}

@media (max-width:640px){
  #toasts{left:12px;right:12px;bottom:64px;align-items:stretch}
  .toast{max-width:none}
  .sbx-dock{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .sbx-chip,.sbx-dock__btn{min-height:44px;padding:0 12px;font-size:12px}
  .sbx-chip .long{display:none}
  /* on a phone the caption sheet already says what happened; toasts would sit on the spotlight */
  .is-touring #toasts{display:none}
  .tour__card.is-docked .tour__btn{padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  .tour__hole,.tour__card,.tour__bar i,.tour__btn,.tour__btn .arrow{transition:none!important}
  .tour--click .tour__hole::after{animation:none;opacity:.6;transform:none}
  .tour__card.is-nudged{animation:none}
}

@media print{ .tour,.sbx-dock{display:none!important} }