/* Landing-page walkthrough furniture — standalone.
   ------------------------------------------------------------------------
   The five spine-based products get these rules from indivesta-spine.css.
   The "Trace family" pages (DrawingQuote, SecurityReview, SupplierESG,
   FunderReport) deliberately do NOT load the spine — their class names
   collide with it — so they load this instead. Same class names, same
   behaviour; the palette comes from the four variables below, which each
   page maps to its own tokens.

   Pairs with /assets/js/walkthrough.js (IND.walkthrough).                */

.wt-console{
  position:relative;
  --wt-ink:      var(--wt-c-ink, #14120F);
  --wt-paper:    var(--wt-c-paper, #FFFFFF);
  --wt-line:     var(--wt-c-line, #e5e0d8);
  --wt-muted:    var(--wt-c-muted, rgba(20,18,15,.66));
  --wt-accent:   var(--wt-c-accent, #B4761A);
  --wt-accent-rgb: var(--wt-c-accent-rgb, 180,118,26);
  --wt-mono:     var(--wt-c-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
}

/* ---- one screen: the console is capped and its panes scroll inside it ---- */
@media (min-width:900px){
  .wt-console--fit{
    display:flex;flex-direction:column;
    max-height:calc(100vh - var(--wt-headroom, 40px));
    max-height:calc(100dvh - var(--wt-headroom, 40px));
    overflow:hidden;                /* the cap has to clip, or the overflow
                                       paints over the sections around it */
  }
  .wt-console--fit .wt-panes{flex:1 1 auto;min-height:0;align-items:stretch !important;}
  .wt-console--fit .wt-panes > *{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:1.25rem;}
  /* the ghost pointer belongs to the console, but if a product puts it inside the
     pane row anyway it must not be given a scroller — its caption hangs well
     outside its 22px box and would be clipped away. */
  .wt-console--fit .wt-panes > .wt-pointer{overflow:visible;padding:0;min-height:0;}
  .wt-console--fit .wt-panes > *::-webkit-scrollbar{width:9px;}
  .wt-console--fit .wt-panes > *::-webkit-scrollbar-track{background:transparent;}
  .wt-console--fit .wt-panes > *::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.16);border-radius:9px;border:2px solid transparent;background-clip:padding-box;
  }
  .wt-console--fit .wt-panes > *:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);background-clip:padding-box;}
}

/* ---- controls ---- */
.wt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:14px;}
.wt-controls{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap;}
.wt-toggle{display:inline-flex;border:1px solid var(--wt-line);border-radius:999px;padding:3px;gap:2px;background:var(--wt-paper);flex:none;}
.wt-toggle-btn{
  font-family:var(--wt-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 14px;border:0;background:none;border-radius:999px;color:var(--wt-muted);cursor:pointer;
  white-space:nowrap;flex:none;width:auto;height:auto;
  transition:background-color .2s ease,color .2s ease;
}
.wt-toggle-btn.is-on{background:var(--wt-ink);color:var(--wt-paper);}
.wt-play-btn{
  font-family:var(--wt-mono);font-size:11px;letter-spacing:.05em;font-weight:600;
  padding:7px 14px;border-radius:8px;border:1px solid var(--wt-line);background:var(--wt-paper);
  color:var(--wt-ink);cursor:pointer;white-space:nowrap;flex:none;width:auto;height:auto;
  transition:border-color .2s ease,color .2s ease;
}
.wt-play-btn:hover{border-color:var(--wt-muted);}
.wt-play-btn.paused{color:var(--wt-accent);border-color:var(--wt-accent);}
.wt-reset-btn{color:var(--wt-muted);}
.wt-reset-btn:hover{color:var(--wt-ink);}
.wt-bar-hint{flex:1 1 240px;min-width:0;margin:0;font-size:12px;line-height:1.5;color:var(--wt-muted);}

/* always one click from the full-size tool */
.wt-tool-link{
  flex:none;margin-left:auto;white-space:nowrap;text-decoration:none;
  font-family:var(--wt-mono);font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:7px 14px;border-radius:8px;border:1px solid var(--wt-line);
  background:var(--wt-paper);color:var(--wt-ink);transition:border-color .2s ease,background-color .2s ease;
}
.wt-tool-link:hover{border-color:var(--wt-ink);}
@media (max-width:560px){ .wt-tool-link{margin-left:0;} }
@media (max-width:560px){
  .wt-bar{gap:8px;}
  .wt-bar .wt-controls{flex:1 1 100%;min-width:0;flex-wrap:wrap;gap:8px;}
}

/* ---- the narration band ---- */
.wt-say{
  display:flex;align-items:flex-start;gap:16px;
  padding:14px 18px 14px 14px;margin-bottom:18px;
  border:1px solid var(--wt-line);border-left:4px solid var(--wt-accent);border-radius:12px;
  background:rgba(var(--wt-accent-rgb),.07);
}
.wt-say.flash{animation:wtSayFlash 1.1s ease-out;}
@keyframes wtSayFlash{
  0%,18%{background:rgba(var(--wt-accent-rgb),.2);}
  100%{background:rgba(var(--wt-accent-rgb),.07);}
}
.wt-say__meta{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;width:104px;padding-top:1px;}
.wt-say__count{
  font-family:var(--wt-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wt-paper);background:var(--wt-accent);padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.wt-say__stage{
  font-family:var(--wt-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wt-accent);text-align:center;line-height:1.35;
}
.wt-say__text{margin:0;flex:1;min-width:0;font-size:14.5px;line-height:1.6;color:var(--wt-ink);text-wrap:pretty;}
.wt-say__text b{font-weight:700;}
@media (max-width:640px){
  .wt-say{flex-direction:column;gap:9px;}
  .wt-say__meta{flex-direction:row;align-items:center;gap:9px;width:auto;}
  .wt-say__stage{text-align:left;}
}

/* ---- the ghost pointer, and the caption that travels with it ---- */
.wt-pointer{
  position:absolute;top:0;left:0;width:22px;height:22px;z-index:40;pointer-events:none;
  transform:translate(-9999px,-9999px);opacity:0;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .25s ease;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
.wt-pointer[hidden]{display:none;}
.wt-pointer.visible{opacity:1;}
.wt-pointer-bob{display:block;position:relative;}
.wt-pointer.hint .wt-pointer-bob{animation:wtBob 1.1s ease-in-out infinite;}
@keyframes wtBob{0%,100%{transform:translate(0,0);}50%{transform:translate(-3px,4px);}}
.wt-pointer-ring{
  position:absolute;left:-7px;top:-7px;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--wt-accent);opacity:0;
}
.wt-pointer.pulse .wt-pointer-ring{animation:wtPulse .6s ease-out;}
@keyframes wtPulse{0%{transform:scale(.3);opacity:.9;}100%{transform:scale(1.9);opacity:0;}}
.wt-pointer-say{
  position:absolute;left:19px;top:15px;white-space:nowrap;pointer-events:none;
  font-family:var(--wt-mono);font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:var(--wt-ink);color:var(--wt-paper);padding:4px 9px;border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);opacity:0;transition:opacity .2s ease;
}
.wt-pointer.visible .wt-pointer-say{opacity:1;}
.wt-pointer-say:empty{display:none;}
.wt-pointer.flip-x .wt-pointer-say{left:auto;right:16px;}
.wt-pointer.flip-y .wt-pointer-say{top:auto;bottom:14px;}
@media (prefers-reduced-motion:reduce){
  .wt-pointer{transition:none;}
  .wt-pointer.hint .wt-pointer-bob,.wt-pointer.pulse .wt-pointer-ring{animation:none;}
  .wt-say.flash{animation:none;}
}

/* while auto play drives, the reader watches rather than clicks */
.wt-console.is-auto .wt-panes button,
.wt-console.is-auto .wt-panes input,
.wt-console.is-auto .wt-panes textarea,
.wt-console.is-auto .wt-panes label{pointer-events:none;}