/* User Provided Stylesheet */

.scroll-table {
  overflow-x: auto;
}

.scroll-table table td,
.scroll-table table th {
  vertical-align: top;
}

/* ==========================================================================
   Evidence Synthesis section
   ========================================================================== */

/* Suppress MyST's auto-generated bibliography; the hand-written ## References
   section is used instead. */
section.myst-bibliography {
  display: none;
}

/* Suppress MyST's auto-generated footnote list; hover tooltips on citations
   still work. Same global-by-necessity caveat as above. */
section.myst-footnotes {
  display: none;
}

/* For footnotes cited in multiple places, hide the extra ↩² ↩³ back-arrows. */
a.data-footnote-backref~a.data-footnote-backref {
  display: none;
}

/* Click-to-zoom lightbox built on a native <details>/<summary> (MyST `dropdown` directive),
   not a `#fragment` link + `:target`: the site's client-side router intercepts hash links via
   history.pushState, which doesn't re-trigger `:target` until a manual reload. <summary> toggles
   via plain browser behavior, so it isn't affected. The dropdown's image is both the small
   trigger (closed) and the full-screen preview (open); its body is unused and hidden below.
   Apply via `:class: evidence-synthesis-img-lightbox` on any `{dropdown}` directive wrapping an
   image. */
.evidence-synthesis-img-lightbox {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.evidence-synthesis-img-lightbox>summary {
  list-style: none;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: zoom-in;
}

.evidence-synthesis-img-lightbox>summary::-webkit-details-marker {
  display: none;
}

.evidence-synthesis-img-lightbox .myst-dropdown-header-icon {
  display: none;
}

.evidence-synthesis-img-lightbox>summary img {
  display: block;
  margin: 0 auto;
}

.evidence-synthesis-img-lightbox[open]>summary {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem !important;
  background: rgba(0, 0, 0, 0.85) !important;
  cursor: zoom-out;
}

.evidence-synthesis-img-lightbox[open]>summary img {
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.evidence-synthesis-img-lightbox>.myst-dropdown-body {
  display: none !important;
}

.evidence-synthesis-comparison-table td:nth-child(1),
.evidence-synthesis-comparison-table th:nth-child(1) {
  min-width: 180px;
  /* Analysis */
}

.evidence-synthesis-comparison-table td:nth-child(2),
.evidence-synthesis-comparison-table th:nth-child(2) {
  min-width: 260px;
  /* Summary */
}

.evidence-synthesis-comparison-table td:nth-child(3),
.evidence-synthesis-comparison-table th:nth-child(3) {
  min-width: 300px;
  /* Methods */
}

.evidence-synthesis-comparison-table td:nth-child(4),
.evidence-synthesis-comparison-table th:nth-child(4) {
  min-width: 320px;
  /* Key parameters */
}

.evidence-synthesis-comparison-table td:nth-child(5),
.evidence-synthesis-comparison-table th:nth-child(5) {
  min-width: 360px;
  /* Estimate */
}

.evidence-synthesis-comparison-table td:nth-child(6),
.evidence-synthesis-comparison-table th:nth-child(6) {
  min-width: 340px;
  /* Data sources */
}

.evidence-synthesis-comparison-table td:nth-child(7),
.evidence-synthesis-comparison-table th:nth-child(7) {
  min-width: 380px;
  /* Key assumptions */
}

.evidence-synthesis-comparison-table td:nth-child(8),
.evidence-synthesis-comparison-table th:nth-child(8) {
  min-width: 420px;
  /* Key limitations */
}

/* "Comparing analyses" tab navigation (outbreak-size.md). Scoped to
   `.evidence-synthesis-tabs`, applied via `:class:` on the `{div}` that
   wraps the `{tab-set}` — NOT on the tab-set directive itself. The
   tab-set's own renderer in book-theme doesn't read a node's `class`
   option (unlike `dropdown`, used for the lightbox above), so a class set
   directly on `{tab-set}` is parsed but silently dropped before it reaches
   the DOM; the wrapping `{div}`'s class does get applied, and it's still
   an ancestor of `.myst-tab-set-row` below. Do not loosen these selectors
   to bare `.myst-tab-set*` — that would restyle every tab-set on the site. */

.evidence-synthesis-tabs .myst-tab-set-row {
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  /* gray-50 */
  border-bottom: 1px solid #e5e7eb;
  /* gray-200 */
}

.evidence-synthesis-tabs .myst-tab-item-header {
  background: #ffffff;
  border: 1px solid #d1d5db;
  /* gray-300 */
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  margin-bottom: 0 !important;
}

.evidence-synthesis-tabs .myst-tab-item-header-inactive {
  color: #4b5563;
  /* gray-600 */
}

.evidence-synthesis-tabs .myst-tab-item-header-inactive:hover {
  border-color: #2563eb;
  /* blue-600 */
  color: #111827;
  /* gray-900 */
}

.evidence-synthesis-tabs .myst-tab-item-header-active {
  background: #2563eb;
  /* blue-600 */
  border-color: #2563eb;
  color: #ffffff;
}

.dark .evidence-synthesis-tabs .myst-tab-set-row {
  background: #1f2937;
  /* gray-800 */
  border-bottom-color: #374151;
  /* gray-700 */
}

.dark .evidence-synthesis-tabs .myst-tab-item-header {
  background: #111827;
  /* gray-900 */
  border-color: #4b5563;
  /* gray-600 */
}

.dark .evidence-synthesis-tabs .myst-tab-item-header-inactive {
  color: #d1d5db;
  /* gray-300 */
}

.dark .evidence-synthesis-tabs .myst-tab-item-header-inactive:hover {
  border-color: #60a5fa;
  /* blue-400 */
  color: #ffffff;
}

.dark .evidence-synthesis-tabs .myst-tab-item-header-active {
  background: #3b82f6;
  /* blue-500 */
  border-color: #3b82f6;
  color: #ffffff;
}