/* tour.css, VerifAIer Guided Platform Tour. Loaded after site.css. Reuses tokens. */
.st-meta-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem}
.st-chip{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.st-chip--brand{color:var(--brand);border-color:rgba(0,229,160,.3);background:var(--brand-bg)}
/* Q&A blocks */
.st-qa{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.st-qa .st-card p{font-size:.95rem}
/* progressive paths */
.st-path{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem}
.st-path h3{font-size:1.05rem}
.st-path .st-chip{margin-top:.5rem}
.st-path ol{margin:1rem 0 0 1.1rem;color:var(--muted);font-size:.92rem}
.st-path ol li{margin-bottom:.4rem}
.st-path ol li a{color:var(--brand)}
/* stepper */
.st-steps{display:flex;flex-direction:column;gap:1rem}
.st-step{display:grid;grid-template-columns:auto 1fr auto;gap:1.25rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.15rem 1.4rem;transition:border-color var(--t),transform var(--t)}
.st-step:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.st-step__num{width:34px;height:34px;border-radius:50%;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;font-weight:700;font-size:.9rem;box-shadow:inset 0 0 0 1px rgba(0,229,160,.25)}
.st-step.done .st-step__num{background:var(--brand);color:var(--inverse)}
.st-step__body h3{font-size:1.02rem}
.st-step__body p{color:var(--muted);font-size:.9rem;margin-top:.2rem}
.st-step__meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.55rem}
.st-step__go{white-space:nowrap}
@media (max-width:640px){.st-step{grid-template-columns:auto 1fr;gap:.9rem}.st-step__go{grid-column:1 / -1;justify-self:start}}
/* evaluation table */
.st-eval__wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.st-eval{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
.st-eval th,.st-eval td{padding:.8rem 1rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.st-eval thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.st-eval tbody tr:last-child td{border-bottom:none}
.st-eval tbody tr:hover td{background:rgba(255,255,255,.02)}
.st-eval td.t{white-space:nowrap;color:var(--brand);font-family:var(--mono);font-size:.82rem}
/* sticky tour bar */
/* z-index 95 keeps the bar under the sticky header (z-index 100) and under the skip link (200),
   so it is never the topmost thing on the page. --tourbar-h reserves exactly the space it
   occupies, including the iOS home-indicator inset, so it cannot cover a page CTA. */
:root{--tourbar-h:60px}
body.has-tourbar{padding-bottom:calc(var(--tourbar-h) + env(safe-area-inset-bottom,0px))}
.st-tourbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;align-items:center;gap:.75rem;
  padding:.55rem var(--px);padding-bottom:calc(.55rem + env(safe-area-inset-bottom,0px));
  background:rgba(10,13,19,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);max-width:100vw;overflow:hidden}
.st-tourbar .st-btn{padding:.5rem 1rem;font-size:.85rem}
.st-tourbar__nav{flex:0 0 auto;white-space:nowrap}
.st-tourbar__nav svg{width:16px;height:16px;flex:0 0 auto}
.st-tourbar__hint{color:inherit;opacity:.72;font-weight:500;max-width:16rem;overflow:hidden;text-overflow:ellipsis}
.st-tourbar__hint::before{content:'· '}
.st-tourbar__mid{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.7rem;font-size:.85rem;color:var(--muted)}
.st-tourbar__step{color:var(--faint);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;white-space:nowrap}
.st-tourbar__concept{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-tourbar__meta{font-family:var(--mono);font-size:.72rem;color:var(--faint);white-space:nowrap}
.st-tourbar__prog{display:flex;gap:5px;flex:0 0 auto}
.st-tourbar__dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.st-tourbar__dot.done{background:var(--brand-dim)}
.st-tourbar__dot.cur{background:var(--brand);box-shadow:0 0 8px var(--brand)}
.st-tourbar__close{width:36px;height:36px;flex:0 0 auto;border-radius:var(--r);color:var(--faint);display:grid;place-items:center;font-size:1.1rem}
.st-tourbar__close:hover{background:rgba(255,255,255,.06);color:var(--text)}
.st-tourbar a:focus-visible,.st-tourbar button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.st-disabled{opacity:.4;pointer-events:none}

/* Below 900px the next step's concept is dropped before anything functional is. */
@media (max-width:900px){.st-tourbar__hint{display:none}.st-tourbar__meta{display:none}}
/* Below 640px the bar keeps current step, progress, Back, Next and Dismiss. The concept label
   is the only thing that shrinks, and it truncates rather than wrapping the bar to two rows. */
@media (max-width:640px){
  :root{--tourbar-h:56px}
  .st-tourbar{gap:.5rem;padding-left:.75rem;padding-right:.75rem}
  .st-tourbar .st-btn{padding:.5rem .7rem}
  .st-tourbar__navlbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .st-tourbar__mid{gap:.5rem}
  .st-tourbar__concept{font-size:.8rem}
}
/* Very narrow screens: the dots go, the written position stays. */
@media (max-width:400px){.st-tourbar__prog{display:none}}

@media (prefers-reduced-motion:reduce){
  .st-tourbar,.st-tourbar .st-btn,.st-step{transition:none}
  .st-tourbar .st-btn:hover,.st-step:hover{transform:none}
  .st-tourbar__dot.cur{box-shadow:none;outline:2px solid var(--brand);outline-offset:1px}
}
