/* A shared reading rhythm: centered introduction, focused overview, optional detail. */
.story-section > .container > .section-head { margin-inline: auto; text-align: center; }
.story-section .section-head .section-sub { max-width: 650px; margin-inline: auto; text-wrap: balance; }
#synthetic { --rw: var(--accent); --rw-ink: var(--accent); --tone-1: #5f636f; --tone-2: #7b8291; --tone-3: #979fae; }
.story-action { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 44px; width: fit-content; padding: 10px 18px; border: 1px solid #454552; border-radius: 999px; background: transparent; color: #d0d0da; font: inherit; font-size: 12px; line-height: 20px; cursor: pointer; }
.story-action:hover { border-color: #8d95ab; background: #1c1e25; color: var(--text); }
.story-action[aria-expanded="true"] { border-color: #8d95ab; color: var(--accent); }
.story-section :is(button,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

#treatment .gen-reel-caption { text-align: center; }
.treatment-story-details { max-width: 1038px; margin: 20px auto 24px; }
.treatment-story-details > summary { display: flex; margin-inline: auto; list-style: none; }
.treatment-story-details > summary::-webkit-details-marker { display: none; }
.treatment-story-details > summary span { font-size: 18px; transition: transform .2s; }
.treatment-story-details[open] > summary span { transform: rotate(45deg); }
.treatment-story-details .simulation-conditions { margin: 24px auto 8px; }

#synthetic .story-outcomes { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 1038px; margin: 44px auto 0; gap: 20px; }
#synthetic .story-outcomes article { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 28px 20px 24px; border: 1px solid #303038; border-radius: 16px; background: #151518; text-align: center; }
#synthetic .story-outcomes .benchmark-label { margin: 0 0 14px; color: #e4e4ec; font-size: 18px; font-weight: 500; line-height: 1.5; }
#synthetic .story-outcomes article > p { max-width: 320px; min-height: 44px; margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.7; text-wrap: balance; }
#synthetic .story-outcomes .story-action { margin-top: auto; }
#synthetic .story-evidence { display: block; max-width: 1038px; margin: 0 auto; }
.story-results-panel { margin-top: 40px; padding-top: 26px; border-top: 1px solid #303038; scroll-margin-top: 90px; }
.story-results-panel[hidden] { display: none; }
.story-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.story-panel-heading > h3 { margin: 0; color: var(--text); font-size: 18px; font-weight: 500; }
.story-panel-heading > button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 0 8px 14px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.story-panel-heading > button span { font-size: 20px; }
.story-panel-heading > button:hover { color: var(--text); }
.story-experiment-note { margin: 4px 0 24px; color: var(--muted); font-size: 12px; }
.story-results-panel > .chart { margin: 0; }

@media (max-width: 640px) {
  #synthetic .story-outcomes { grid-template-columns: minmax(0,1fr); max-width: 420px; gap: 16px; }
  #synthetic .story-outcomes article { padding: 24px; }
  #synthetic .story-outcomes .benchmark-label { margin-bottom: 18px; }
  #synthetic .story-outcomes article > p { min-height: 0; }
  .treatment-story-details { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .treatment-story-details > summary span { transition: none; } }

/* Report metrics share one plot footprint instead of four stacked charts. */
#synthetic .report-metric-switcher { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; width: fit-content; margin: 20px auto 24px; padding: 4px; border: 1px solid #383842; border-radius: 999px; }
#synthetic .report-metric-switcher button { min-height: 40px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
#synthetic .report-metric-switcher button:hover { color: var(--text); }
#synthetic .report-metric-switcher button[aria-pressed="true"] { background: #30323c; color: var(--text); }
#synthetic [data-metric-switcher] :is(.v-panel,.report-metric-compact)[hidden] { display: none; }
#synthetic [data-metric-switcher] :is(.v-panel-title,.m-panel-title) { display: none; }
@media (max-width: 480px) {
  #synthetic .report-metric-switcher { gap: 0; width: 100%; }
  #synthetic .report-metric-switcher button { flex: 1; padding-inline: 8px; font-size: 11px; }
}

.survival-story-details { margin: 24px 0 0; }
.survival-story-details > summary { display: flex; margin-inline: auto; list-style: none; }
.survival-story-details > summary::-webkit-details-marker { display: none; }
.survival-story-details > summary span { font-size: 18px; transition: transform .2s; }
.survival-story-details[open] > summary span { transform: rotate(45deg); }
.survival-story-curves { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 24px; }
@media (max-width: 680px) { .survival-story-curves { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .survival-story-details > summary span { transition: none; } }