/* Main launch: an expandable results rail with its takeaway beside navigation. */
[data-volcano-story].sid-guided-study {
  border: 1px solid var(--rule);
  border-radius: 24px;
  box-shadow: 0 18px 46px -32px rgba(8, 8, 42, .22);
}
[data-volcano-story] .vs-stage-wrap { align-content: stretch; }
[data-volcano-story] .vs-stage { aspect-ratio: auto; height: 100%; min-height: 660px; }
[data-volcano-story] .vs-stage:has(.vs-reading-guide) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
[data-volcano-story] .vs-stage:not(.is-blank) {
  background:
    radial-gradient(720px 480px at 62% 30%, rgba(125, 104, 186, .018), transparent 68%),
    linear-gradient(155deg, #ffffff, #fafbfe 72%, #f7f9fc);
}
[data-volcano-story] .vs-reading-guide {
  margin: 0;
  padding: 20px 24px 10px;
  color: var(--fg-soft);
  font-family: var(--font-display), sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: pretty;
}
[data-volcano-story] .vs-reading-guides,
[data-volcano-story] .vs-copy { display: grid; }
[data-volcano-story] .vs-reading-guides > .vs-reading-guide,
[data-volcano-story] .vs-copy-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  pointer-events: none;
}
[data-volcano-story] .vs-copy-panel { margin: 0; }
[data-volcano-story] .vs-reading-guides > .is-active,
[data-volcano-story] .vs-copy-panel.is-active { visibility: visible; pointer-events: auto; }
[data-volcano-story] .vs-reading-guide[hidden] { display: none; }
[data-volcano-story] .vs-target-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; font-size: 13px; }
[data-volcano-story] .vs-target-legend > span { display: inline-flex; align-items: center; gap: 7px; color: var(--target-color); }
[data-volcano-story] .vs-target-legend > span::before { content: ''; width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--target-color); }
[data-volcano-story] .vs-plot { position: relative; min-height: 0; min-width: 0; }
[data-volcano-story] .vs-rail { gap: 12px; padding: 20px; }
[data-volcano-story] .vs-steps { gap: 6px; margin-top: auto; }
[data-volcano-story] .vs-steps button { min-height: 44px; padding: 8px 11px; }
[data-volcano-story] .vs-takeaway {
  margin-top: 0;
  padding: 16px;
  border: 1px solid #9da8ee;
  border-left: 4px solid var(--electric);
  border-radius: 12px;
  background: linear-gradient(135deg, #e6eaff, #f4f5ff);
  box-shadow: 0 12px 32px -24px #2233bb;
}
[data-volcano-story] .vs-takeaway h3 {
  margin: 0 0 10px;
  color: var(--electric);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .1em;
  text-transform: uppercase;
}
[data-volcano-story] .vs-takeaway .vs-copy {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--fg-soft);
  font-size: 14px;
  line-height: 1.5;
}
[data-volcano-story] .vs-copy strong { font-weight: 550; }
/* Reserve the takeaway space so switching tabs keeps the plot and controls fixed. */
[data-volcano-story] .vs-takeaway .vs-copy[aria-hidden="true"],
[data-volcano-story] .vs-takeaway .vs-copy[aria-hidden="true"] * { visibility: hidden; pointer-events: none; }
/* Back/Next share the takeaway's heading row instead of taking a row of their own.
   They follow the copy in reading order. */
[data-volcano-story] .vs-takeaway {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
}
[data-volcano-story] .vs-takeaway h3 { grid-area: 1 / 1; margin: 0; }
[data-volcano-story] .vs-takeaway .vs-copy { grid-area: 2 / 1 / 3 / 3; align-self: start; }
[data-volcano-story] .vs-takeaway .vs-nav { grid-area: 1 / 2; gap: 6px; margin: 0; }
[data-volcano-story] .vs-takeaway .vs-nav button {
  flex: none;
  min-height: 34px;
  padding: 6px 13px;
  gap: 7px;
}
[data-volcano-story] .vs-takeaway .vs-nav button[data-vs-prev] { background: rgba(255, 255, 255, .82); }
[data-volcano-story] .vs-takeaway .vs-next-arrow { font-size: 15px; }
[data-volcano-story] .vs-stage.is-blank { cursor: default; }
[data-volcano-story] .vs-stage.is-blank > * { visibility: hidden; }
[data-volcano-story] .vs-method-note[hidden] { display: none; }
[data-volcano-story] .vs-method-note { font-size: 16px; line-height: 1.55; }
/* Axis glyphs render in CSS pixels even when the plot changes proportions. */
[data-volcano-story] .vs-overlay .axis-copy,
[data-volcano-story] .vs-overlay .axis-label,
[data-volcano-story] .vs-overlay .vs-direction-copy,
[data-volcano-story] .vs-overlay .vs-fdr-label {
  font-family: var(--font-display), Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}
[data-volcano-story] .vs-overlay .axis-copy { font-size: 12px; }
[data-volcano-story] .vs-overlay .axis-label { font-size: 13px; }
[data-volcano-story] .vs-overlay .vs-direction-copy { font-size: 12px; }
[data-volcano-story] .vs-overlay .vs-highlight-label,
[data-volcano-story] .vs-overlay .vs-step-annotation {
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-size: .875rem;
  letter-spacing: 0;
}
[data-volcano-story] .vs-overlay .vs-highlight-label.is-focal { font-size: 1rem; }
/* Short phone plots tighten the drug-target callouts; see resolveLabelPositions. */
[data-volcano-story] .vs-overlay .vs-highlights.is-compact :is(.vs-highlight-label, .vs-highlight-label.is-focal, .vs-step-annotation) { font-size: 12px; }
[data-volcano-story] .vs-overlay .vs-fdr-label {
  fill: #777087;
  font-size: 11px;
  stroke: #f6f6fc;
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
}
@media (max-width: 1120px) {
  /* One column: the reading guide, plot, and key takeaway (with Back/Next) share
     one screen. volcano-story.js measures the nav, guide, and takeaway into
     --vs-reserved; the plot takes the rest of the small viewport, and every step,
     including the treatment and panel views, keeps this same stage height. */
  [data-volcano-story] {
    --vs-plot-height: clamp(220px, calc(100vh - var(--vs-reserved, 440px)), min(520px, 88vw));
  }
  [data-volcano-story] .vs-stage-wrap > .vs-stage {
    display: grid;
    grid-template-rows: auto var(--vs-plot-height);
    height: auto;
    min-height: 0;
  }
  [data-volcano-story] .vs-takeaway { margin-top: 0; }
  /* Wrap the steps whenever the plot and controls switch to a single column. */
  [data-volcano-story] .vs-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  [data-volcano-story] .vs-steps li { min-width: 0; }
  [data-volcano-story] .vs-steps button {
    width: 100%;
    min-width: 0;
    height: 100%;
    gap: 8px;
  }
  [data-volcano-story] .vs-steps button span { min-width: 0; overflow-wrap: anywhere; }
  [data-volcano-story] .vs-steps button .vs-step-cue-arrow { flex-shrink: 0; padding-right: 0; }
}
@supports (height: 100svh) {
  @media (max-width: 1120px) {
    [data-volcano-story] {
      --vs-plot-height: clamp(220px, calc(100svh - var(--vs-reserved, 440px)), min(520px, 88vw));
    }
  }
}
/* Retain live step announcements without a visible corner label. */
[data-volcano-story] .vs-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 760px) {
  [data-volcano-story].sid-guided-study { border-radius: 18px; }
  [data-volcano-story] .vs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  [data-volcano-story] .vs-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Treatment comparison uses native typography and separate scientific scales. */

[data-volcano-story] .vs-stage.is-blank > .vs-treatment-response { visibility: visible; }
.vs-treatment-response[hidden] { display: none; }
.vs-treatment-response {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 40px);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-display);
}
.vs-response-heading h3 { margin: 0; font-size: clamp(24px, 2.5vw, 34px); font-weight: 500; letter-spacing: -.035em; }
.vs-response-heading > p { margin: 8px 0 0; font-size: 14px; color: var(--fg-soft); }
.vs-response-charts { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.vs-response-chart { display: flex; flex-direction: column; min-height: 0; min-width: 0; margin: 0; padding: 16px 10px 8px; border: 1px solid #dedfeb; border-radius: 14px; background: #fff; }
.vs-response-chart figcaption { min-height: 69px; padding-inline: 4px; }
.vs-response-chart h4 { margin: 0; color: var(--fg); font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.vs-response-chart figcaption p { margin: 7px 0 0; color: var(--fg-soft); font-size: 11px; line-height: 1.4; }
.vs-response-chart svg { display: block; flex: 1; min-height: 0; width: 100%; height: 100%; overflow: visible; font-family: var(--font-display); }
.vs-response-gridline { stroke: #e5e6f0; stroke-width: 1; }
.vs-response-tick, .vs-response-period { fill: #626783; font-size: 13px; }
.vs-response-value { fill: #171739; font-size: 17px; font-weight: 600; }
.vs-response-bar { transform-box: fill-box; transform-origin: center bottom; }
.vs-response-bar.is-before { fill: #2935c5; }
.vs-response-bar.is-after { fill: #009e90; }
.vs-response-axis-title { fill: #3a4468; font-size: 13px; font-weight: 500; }
/* Keep the visualization frame stable while browsing results. */
@media (max-width: 600px) {
  [data-volcano-story] .vs-reading-guide { padding: 12px 14px 4px; font-size: 14px; }
  [data-volcano-story] .vs-rail { padding: 12px 14px 16px; }
  [data-volcano-story] .vs-takeaway { padding: 14px; row-gap: 8px; }
  [data-volcano-story] .vs-overlay .axis-copy { font-size: 10px; }
  [data-volcano-story] .vs-overlay .axis-label { font-size: 11px; }
  [data-volcano-story] .vs-overlay .vs-fdr-label { font-size: 10px; }
  [data-volcano-story] .vs-overlay .vs-direction-copy { font-size: 10px; }
  [data-volcano-story] .vs-overlay .vs-highlight-label { font-size: .875rem; }
  [data-volcano-story] .vs-overlay .vs-highlight-label.is-focal { font-size: .875rem; }
  [data-volcano-story] .vs-overlay .vs-step-annotation { font-size: .875rem; }
  /* The treatment view keeps both charts side by side inside the shared stage. */
  .vs-treatment-response { padding: 14px 14px 12px; }
  .vs-response-heading h3 { font-size: 20px; line-height: 1.2; }
  .vs-response-heading > p { margin-top: 6px; font-size: 12px; line-height: 1.45; }
  .vs-response-charts { gap: 8px; margin-top: 12px; }
  .vs-response-chart { padding: 10px 4px 4px; border-radius: 12px; }
  .vs-response-chart figcaption { min-height: 0; padding-inline: 6px; }
  .vs-response-chart h4 { font-size: 13px; }
  .vs-response-chart figcaption p { margin-top: 2px; font-size: 10.5px; line-height: 1.35; }
  .vs-panel-heading p { font-size: 14px; }
}
/* Smaller phones: one point smaller guide text keeps the whole step on screen. */
@media (max-width: 400px) {
  [data-volcano-story] .vs-reading-guide { font-size: 13px; line-height: 1.45; }
  [data-volcano-story] .vs-target-legend { margin-top: 6px; font-size: 12px; }
}
/* Narrow side-by-side charts are laid out in CSS pixels by volcano-story.js. */
.vs-response-chart svg.is-narrow .vs-response-tick,
.vs-response-chart svg.is-narrow .vs-response-period { font-size: 11px; }
.vs-response-charts:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }

.vs-treatment-response { width: 100%; min-width: 0; box-sizing: border-box; }
.vs-response-charts { width: 100%; min-width: 0; }
.vs-response-chart svg { flex-basis: 0; }
@media (max-width: 600px) {
  [data-volcano-story] .vs-stage { width: 100%; min-width: 0; max-width: 100%; }
}

/* Preserve the glowing prediction overlay and Paul's registered B-cell callout. */
[data-volcano-story] .vs-stage.is-blank > .vs-panel-extension { visibility: visible; }
.vs-panel-extension[hidden] { display: none; }
.vs-panel-extension {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  padding: clamp(20px, 2.5vw, 36px);
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  background: transparent;
  color: var(--fg);
}
.vs-panel-heading p { margin: 0; font-family: var(--font-display); font-size: 15px; line-height: 1.5; color: var(--fg-soft); }
.vs-panel-heading h3 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 34px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; }
.vs-panel-image { display: grid; place-items: center; container-type: size; min-width: 0; min-height: 0; }
.vs-panel-image .sid-slide-animation { width: min(100cqw, 100cqh); aspect-ratio: 1; max-width: 100%; }
.vs-panel-extension .sid-slide-prediction { animation-play-state: paused; }
[data-vs-panel-visible="true"] .vs-panel-extension .sid-slide-prediction { animation-play-state: running; }
.vs-panel-extension .sid-slide-animation:hover .sid-slide-prediction { animation-play-state: paused; }
.vs-panel-extension .sid-b-signal { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.vs-panel-extension .sid-b-signal svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #faf9fc; stroke-width: 4; filter: drop-shadow(0 1px 2px #28213a80); }
.vs-panel-extension .sid-b-signal span { position: absolute; top: 24%; right: 7%; padding: 7px 9px; border-radius: 5px; background: #faf9fcf2; color: #2233cc; font-family: var(--font-display); font-size: clamp(11px, 1.2vw, 13px); font-weight: 700; line-height: 1.35; }
.vs-panel-legend { justify-self: center; width: min(100%, 420px); gap: 5px 12px; }
.vs-panel-legend small { font-size: 12px; }
@media (max-width: 600px) {
  .vs-panel-extension { padding: 16px; gap: 14px; }
  .vs-panel-legend small { font-size: 11px; }
}
/* The looping start cue holds while the walkthrough is off screen. */
[data-volcano-story].vs-offscreen :is(.vs-nav [data-vs-next], .vs-next-arrow, .vs-step-cue-arrow) { animation-play-state: paused; }