/* Scenario walkthrough overlay
 * Coach note, target ring, pointer, progress, controls, end card.
 * z-index: 600 (above coach-tour at 500).
 */

/* ------------------------------------------------------------------ */
/* SAMPLE BAR (simplified, 2026-07-11 round 2)                        */
/* One centered cluster: circled chevron-left, SAMPLE REPORT,         */
/* circled chevron-right, separator, circled X. No persona label, no  */
/* step counter. The bar TOUCHES the nav (container drops 36px).      */
/* Everything below it is the live app, untouched.                    */
/* ------------------------------------------------------------------ */

.sw-ribbon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  height: 36px;
  display: none; /* JS sets flex while armed */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  background: #1D2430;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}

.sw-ribbon-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f26419;
  white-space: nowrap;
}

/* Exact centering (David: the LABEL is centered in the viewport):
   the chevron trio is the centered group; separator + X trail off
   its right edge without shifting the tag off 50%. */
.sw-ribbon-center { position: relative; display: flex; align-items: center; gap: 10px; }
.sw-ribbon-trail {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 10px; display: flex; align-items: center; gap: 10px;
}

.sw-ribbon-nav {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.25px solid rgba(251,248,241,0.75);
  color: rgba(251,248,241,0.75);
  background: transparent; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sw-ribbon-nav svg { width: 14px; height: 14px; display: block; }
.sw-ribbon-nav:hover { border-color: #fbf8f1; color: #fbf8f1; }
.sw-ribbon-nav[disabled] { opacity: 0.35; cursor: default; }
.sw-ribbon-nav[disabled]:hover { border-color: rgba(251,248,241,0.75); color: rgba(251,248,241,0.75); }

.sw-ribbon-sep { width: 1px; height: 16px; background: rgba(251,248,241,0.28); flex-shrink: 0; }

/* Labeled exit pill (relay 14): replaces the bare circled X on both bars */
.sw-ribbon-exit {
  height: 24px; border-radius: 999px;
  border: 1.25px solid rgba(251,248,241,0.75);
  color: rgba(251,248,241,0.75);
  background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
}
.sw-ribbon-exit svg { width: 12px; height: 12px; display: block; }
.sw-ribbon-exit:hover { border-color: #fbf8f1; color: #fbf8f1; }

/* Geometry (David, 2026-07-11): the bar's bottom edge and the nav's
   top edge must TOUCH. The container itself drops 36px -- the old
   padding-top approach left a background strip on the deploy. The
   nav keeps its stock sticky top: 0 and sits flush under the bar. */
body.sw-armed .container { top: 36px; height: calc(100dvh - 36px); }

/* Full demo: bar + framed app together (relay 14).
   body.vv-demo is the demo-session bar; it coexists with the app shell
   frame (.app-framed) unlike the walkthrough bar which only lived on
   the unframed questions screen. */
body.vv-demo .container { top: 36px; height: calc(100dvh - 36px); }
body.vv-demo.app-framed .container {
  left: var(--shell-container-left);
  top: 36px;
  width: var(--shell-container-w);
  height: calc(100dvh - 36px);
  border-radius: var(--shell-container-radius);
}
/* Sidebar squares drop 36px so the first square still aligns to the nav's
   bottom edge (70px stock + 36px bar) and the report-view panel anchor,
   which is derived from the Reports square's live DOM position, stays true */
body.vv-demo .sidebar-nav { padding-top: calc(70px + 36px); }

/* MOBILE (relay 19): at <=768px the shell swaps the sidebar for a fixed
   56px bottom tab bar and un-frames the container (shell.css). The three
   desktop demo-frame rules above must not leak past that breakpoint:
   the left offset shifted all content right by the rail width, the
   100dvh height covered the tab bar's room, and the 106px padding-top
   pushed the tab-bar icons out of the 56px bar. */
@media (max-width: 768px) {
  body.vv-demo.app-framed .container {
    left: 0;
    width: 100vw;
    top: 36px;
    height: calc(100dvh - 36px - var(--shell-tab-bar-h) - env(safe-area-inset-bottom));
    border-radius: 0;
  }
  body.vv-demo .sidebar-nav { padding-top: 0; }
}

/* ------------------------------------------------------------------ */
/* TARGET RING                                                        */
/* ------------------------------------------------------------------ */

.sw-ring {
  position: absolute;
  border: 2.5px solid #f26419;
  border-radius: 14px;
  z-index: 601;
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(242,100,25,0.28), 0 0 22px 4px rgba(242,100,25,0.30);
  animation: sw-ring-pulse 1.5s ease-in-out infinite;
  display: none;
}

@keyframes sw-ring-pulse {
  0%, 100% { opacity: 0.95; box-shadow: 0 0 0 4px rgba(242,100,25,0.28), 0 0 22px 4px rgba(242,100,25,0.30); }
  50% { opacity: 0.4; box-shadow: 0 0 0 10px rgba(242,100,25,0.10), 0 0 30px 8px rgba(242,100,25,0.16); }
}

/* ------------------------------------------------------------------ */
/* CLICK-BLOCKER (hands-on mode)                                      */
/* ------------------------------------------------------------------ */

.sw-block-overlay {
  position: fixed;
  inset: 0;
  z-index: 599;
  background: transparent;
}

/* ------------------------------------------------------------------ */
/* END CARD                                                           */
/* ------------------------------------------------------------------ */

.sw-end-card {
  position: fixed;
  inset: 0;
  z-index: 610;
  background: var(--backdrop-scrim, rgba(251,248,241,0.75));
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sw-end-card.visible {
  display: flex;
}

.sw-end-card-inner {
  background: var(--bone-0, #fbf8f1);
  border-radius: 28px;
  padding: 32px 28px 24px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 14px 40px rgba(28,20,14,0.12);
  border: 1px solid rgba(31,24,19,0.12);
  max-height: 85vh;
  overflow-y: auto;
}

.sw-end-header {
  text-align: center;
  margin-bottom: 20px;
}

.sw-end-count {
  font-size: 28px;
  font-weight: 700;
  color: var(--coral, #f26419);
  line-height: 1.1;
}

/* C7-r3: sample name -- one step down from the coral count, ink color so the
   count still leads by color; clearly outranks the muted persona line below.
   Long labels wrap centered inside the centered header. */
.sw-end-sample {
  font-size: 24px;
  font-weight: 700;
  color: var(--text, #1E2A35);
  line-height: 1.15;
  margin-top: 2px;
}

.sw-end-on {
  font-size: 15px;
  color: rgba(30,42,53,0.6);
  margin-top: 4px;
}

.sw-findings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.sw-finding {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(31,24,19,0.08);
}

.sw-finding-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(242,100,25,0.1);
  color: #f26419;
  white-space: nowrap;
}

.sw-finding-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}

.sw-finding-text strong {
  font-weight: 600;
  color: var(--text, #1E2A35);
}

.sw-finding-text span {
  color: rgba(30,42,53,0.65);
}

.sw-silent-note {
  font-size: 12px;
  color: rgba(30,42,53,0.5);
  padding: 8px 0 4px;
  line-height: 1.4;
}

.sw-end-subline {
  font-size: 13px;
  color: rgba(30,42,53,0.6);
  text-align: center;
  padding: 4px 0 12px;
  line-height: 1.4;
}

.sw-end-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
}

.sw-end-primary {
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: #1D2430;
  color: #fbf8f1;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
  font-family: inherit;
  width: 100%;
  max-width: 320px;
}

.sw-end-primary:hover { filter: brightness(1.1); }

.sw-end-secondary {
  padding: 10px 20px;
  border: none;
  background: transparent;
  color: rgba(30,42,53,0.55);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.sw-end-secondary:hover { color: var(--text, #1E2A35); }

/* ------------------------------------------------------------------ */
/* MOBILE                                                             */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
  /* 24px visual circles, honest tap targets: extend the hit area
     without growing the 36px bar */
  .sw-ribbon-nav { position: relative; }
  .sw-ribbon-nav::after {
    content: ''; position: absolute; inset: -8px;
  }

  .sw-end-card-inner {
    padding: 24px 18px 18px;
    border-radius: 20px;
  }

  .sw-end-count { font-size: 24px; }
  .sw-end-sample { font-size: 20px; }
}

/* ------------------------------------------------------------------ */
/* REDUCED MOTION                                                     */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .sw-ring { animation: none; box-shadow: 0 0 0 5px rgba(242,100,25,0.25), 0 0 20px 4px rgba(242,100,25,0.25); }
}

/* ----------------------------------------------------------------------
   INSTRUCTION TOAST v2 (relay 13, mockup 5a). Anchored 10px below the
   ring by _positionToast; 3s, or gone on first ring click, once per run.
   ---------------------------------------------------------------------- */
.sw-toast {
  position: absolute; /* page coords set by _positionToast */
  top: 0;
  left: 0;
  background: rgba(29, 36, 48, 0.95);
  color: #fbf8f1;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.45);
  z-index: 605; /* above ribbon(600) + ring(601), below end card(610) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sw-toast.visible { opacity: 1; }
@media (max-width: 860px) {
  .sw-toast { font-size: 12px; padding: 9px 16px; white-space: normal; text-align: center; max-width: calc(100vw - 24px); border-radius: 18px; }
}

/* ------------------------------------------------------------------ */
/* DEMO GATE CARD (relay 15, gate style B)                            */
/* ------------------------------------------------------------------ */

.vv-gate {
  position: fixed; inset: 0; z-index: 610;
  background: var(--backdrop-scrim, rgba(251,248,241,0.75));
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.vv-gate.visible { display: flex; }
.vv-gate-card {
  background: var(--bone-0, #fbf8f1); border-radius: 28px;
  padding: 32px 30px 26px; width: 100%; max-width: 460px; text-align: center;
  box-shadow: 0 14px 40px rgba(28,20,14,0.12);
  border: 1px solid rgba(31,24,19,0.12);
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}
.vv-gate-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 10px;
}
.vv-gate-headline {
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--text, #1E2A35); line-height: 1.25; margin-bottom: 12px;
}
.vv-gate-body {
  font-size: 14px; line-height: 1.55; color: rgba(30,42,53,0.65);
  margin-bottom: 22px;
}
.vv-gate-primary {
  display: block; width: 100%; background: var(--coral); color: #fff;
  border: none; border-radius: 999px; padding: 13px; font-size: 15px;
  font-weight: 600; cursor: pointer; font-family: inherit; margin-bottom: 8px;
  transition: filter 0.15s;
}
.vv-gate-primary:hover { filter: brightness(1.08); }
.vv-gate-secondary {
  display: block; width: 100%; background: transparent;
  color: rgba(30,42,53,0.55); border: none; padding: 9px; font-size: 13px;
  font-weight: 500; cursor: pointer; font-family: inherit;
}
.vv-gate-secondary:hover { color: var(--text, #1E2A35); }