/* =============================================================================
   Experiments: the few things page.css and engage.css do not already do.

   The four protocol groups are chapters on the shared segmented control
   (engage.css / engage.js). Inside each, every protocol is a closed
   .disclose toggle (page.css) whose summary line says what it is. Opening one shows the PDF first, then the BioRender figures
   with a short caption. experiments.js opens the right toggle when a link or
   the URL points inside one.
   ========================================================================== */

/* ------------------------------------------------------------- chapters --- */
.exp .xp-rail { margin-top: var(--sp-5); }
.exp .xp-rail .chap__hero { margin-bottom: var(--sp-5); }

/* ----------------------------------------------------- protocol toggle --- */
.exp .xp > summary { align-items: start; }
.exp .xp .disclose__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.exp .xp .disclose__hint { max-width: 68ch; }





/* figures: BioRender diagrams are label-dense, so never cropped */
.exp .xp__fig { margin: 0 0 var(--sp-5); max-width: 38rem; }
.exp .xp__fig img { background: var(--white); }
.exp .xp__figs { margin: 0 0 var(--sp-5); max-width: none; }
@media (min-width: 46rem) { .exp .xp__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .exp .xp__figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.exp .xp__figs .xp__fig { margin: 0; }
.exp .xp-overview { max-width: 44rem; }
.exp .xp-overview img { background: var(--white); }


/* the PDF link, drawn like the shared .dl download card */
.exp .xp__pdf { margin: 0 0 var(--sp-5); }
.exp .xp__pdf a {
  display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  background: var(--white); text-decoration: none; color: inherit;
}
.exp .xp__pdf a:hover { border-color: var(--leaf-500); background: var(--leaf-50); }
.exp .xp__pdf a:focus-visible { outline: 2px solid var(--leaf-500); outline-offset: 2px; }

.exp .xp__links { margin: 0 0 var(--sp-4); font-size: var(--text-sm); }


/* ------------------------------------------------------------- lightbox ---
   Same treatment as Engineering: a near-opaque backdrop so a pale diagram
   does not show the page through it. */
.exp .lightbox { background: rgb(8 20 15 / .97); }
.exp .lightbox img { background: var(--white); }

@media print {
  .exp .rail__panel[hidden] { display: block !important; }
  .exp .fig, .exp .xp { break-inside: avoid; }
}