/* Scientific-history cards share the Zoo's paper, typography and four-quadrant structure. */
.experiment-dialog { --zoo-ink: #20343a; --zoo-muted: #52666a; --zoo-rule: #d4dedc; width: min(1160px, calc(100vw - 36px)); }
.experiment-dialog .zoo-heading { min-width: 0; }
.experiment-dialog .zoo-heading h2 { font-size: clamp(calc(20px * var(--app-text-scale, 1)), calc(2.2vw * var(--app-text-scale, 1)), calc(29px * var(--app-text-scale, 1))); overflow-wrap: anywhere; }
.experiment-dialog .zoo-header-actions { flex-shrink: 0; }
.experiment-filters { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin: 20px 0 8px; }
.experiment-filters label { display: flex; flex-direction: column; gap: 6px; font-size: calc(12px * var(--app-text-scale, 1)); font-weight: 650; }
.experiment-filters input, .experiment-filters select { width: 100%; min-width: 0; font: inherit; font-weight: 400; border: 1px solid #aabfb7; border-radius: 6px; background: #fffef9; color: #20343a; padding: 10px 12px; }
.experiment-count { font-size: calc(11px * var(--app-text-scale, 1)); color: #52666a; margin: 12px 0; }
.experiment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.experiment-dialog .experiment-tile { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 17px; border-top: 3px solid #4f8383; min-height: 154px; color: #20343a; }
.experiment-tile strong { font-size: calc(16px * var(--app-text-scale, 1)); line-height: 1.35; }
.experiment-tile span { font-size: calc(12px * var(--app-text-scale, 1)); color: #52666a; }
.experiment-tile .experiment-tile-meta, .experiment-meta { font-size: calc(10px * var(--app-text-scale, 1)); letter-spacing: .035em; color: #436f71; }
.experiment-meta { margin: 0 0 5px; }
.experiment-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed #aabfb7; }
.experiment-visual { margin: 16px 0 22px; border: 1px solid #c4d6cf; border-radius: 10px; overflow: hidden; background: #edf3f0; }
.experiment-canvas { display: block; width: 100%; height: 270px; cursor: default; }
.experiment-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 8px 16px 14px; border-bottom: 1px solid #cfddd6; }
.experiment-legend > span { display: flex; align-items: center; gap: 7px; font-size: calc(11px * var(--app-text-scale, 1)); color: #345e62; }
.experiment-legend b { display: inline-grid; place-items: center; border: 1px solid #90afab; border-radius: 50%; width: 21px; height: 21px; flex: none; font-size: calc(10px * var(--app-text-scale, 1)); }
.experiment-caption { padding: 14px 22px 17px; background: #f8faf3; }
.experiment-diagram-label { margin: 0 0 10px; font-size: calc(10px * var(--app-text-scale, 1)); color: #52666a; letter-spacing: .055em; }
.experiment-stages { display: flex; flex-wrap: wrap; gap: 7px; }
.experiment-stages button { font-size: calc(11px * var(--app-text-scale, 1)); padding: 5px 12px; }
.experiment-stages button[aria-pressed="true"] { background: #255e60; color: #fff; border-color: #255e60; }
.experiment-stage-text { margin: 10px 0 0; min-height: 2.8em; font-size: calc(13px * var(--app-text-scale, 1)); }
/* Trading card: stat strip and cast. Each contributor is a small card with an epithet band. */
.experiment-cast { margin: 0 0 30px; }
.experiment-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 14px; border: 1px solid var(--zoo-rule); border-radius: 10px; overflow: hidden; }
.experiment-stat { min-width: 0; margin: 0; padding: 11px 15px; font-size: calc(12px * var(--app-text-scale, 1)); line-height: 1.5; overflow-wrap: anywhere; }
.experiment-stat + .experiment-stat { border-left: 1px solid var(--zoo-rule); }
.experiment-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.experiment-person { min-width: 0; display: flex; flex-direction: column; padding: 0 0 13px; border: 1px solid var(--zoo-rule); border-radius: 10px; overflow: hidden; }
.experiment-person > * { margin-inline: 15px; }
.experiment-person .experiment-band { margin: 0 0 10px; padding: 7px 15px; border-bottom: 1px solid var(--zoo-rule); background: color-mix(in srgb, var(--ui-button-start, #d1deea) 55%, transparent); }
.experiment-person .experiment-epithet { font-size: calc(10px * var(--app-text-scale, 1)); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.experiment-person h4 { margin-top: 0; margin-bottom: 5px; font-size: calc(16px * var(--app-text-scale, 1)); line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
.experiment-person p { margin-top: 0; margin-bottom: 0; font-size: calc(12px * var(--app-text-scale, 1)); line-height: 1.55; }
.experiment-person .experiment-trait { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--zoo-rule); font-style: italic; }
/* The story reads as a book page: one comfortable column, serif text, chapter headings. */
.experiment-story { max-width: calc(720px * var(--app-text-scale, 1)); margin: 0 auto 30px; }
.experiment-hook { margin: 0 0 20px; font: italic 500 calc(21px * var(--app-text-scale, 1))/1.4 Georgia, "Times New Roman", serif; letter-spacing: -.005em; }
.experiment-chapter + .experiment-chapter { margin-top: 24px; }
.experiment-chapter h4 { margin: 0 0 8px; font-size: calc(17px * var(--app-text-scale, 1)); line-height: 1.35; font-weight: 650; letter-spacing: -.015em; }
.experiment-chapter p { margin: 0; font: calc(16px * var(--app-text-scale, 1))/1.75 Georgia, "Times New Roman", serif; }
.experiment-chapter p + p { margin-top: 12px; }
.experiment-coda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 22px; border-top: 1px solid var(--zoo-rule); }
.experiment-joke { min-width: 0; padding: 14px 16px; border: 1px solid var(--zoo-rule); border-radius: 10px; }
.experiment-joke p { margin: 0; font: italic calc(15px * var(--app-text-scale, 1))/1.55 Georgia, "Times New Roman", serif; }
.experiment-sources { min-width: 0; }
.experiment-dialog [data-experiment-tip]:not(button):not(a) { cursor: default; }
.experiment-sources .zoo-source { display: block; overflow-wrap: anywhere; margin-top: 9px; }
.experiment-sources .zoo-source:first-of-type { margin-top: 0; }
.experiment-dialog .zoo-source { overflow-wrap: anywhere; }
.experiment-dialog button:disabled { cursor: default; opacity: .45; }
.experiment-tip[hidden] { display: none; }
@media (max-width: 900px) { .experiment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .experiment-dialog { width: calc(100vw - 16px); }
  .experiment-dialog .zoo-header { flex-direction: column; gap: 12px; }
  .experiment-dialog .zoo-header-actions { flex-direction: row; justify-content: space-between; width: 100%; gap: 8px; }
  .experiment-dialog .zoo-eyebrow { font-size: calc(9px * var(--app-text-scale, 1)); }
  .experiment-filters, .experiment-grid { grid-template-columns: 1fr; }
  .experiment-dialog .experiment-tile { min-height: 0; }
  .experiment-canvas { height: 185px; }
  .experiment-legend { justify-content: flex-start; gap: 7px; flex-direction: column; }
  .experiment-caption { padding: 14px 16px; }
  .experiment-stats { grid-template-columns: 1fr; }
  .experiment-stat + .experiment-stat { border-left: 0; border-top: 1px solid var(--zoo-rule); }
  .experiment-hook { font-size: calc(19px * var(--app-text-scale, 1)); }
}