/* Light-theme styling for the interactive charts + stat cards, matching the
   academic site. Wide elements break out of the 36em text column. */

/* --- break wide charts/figures out of the narrow text column --- */
.chart-container,
figure.wide {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}

/* --- stat cards (highlighted results) --- */
.stat-grid {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(95vw, 760px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1rem;
  margin: 1.75rem auto;
}
.stat-card {
  background: #f9f8f8;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 1.1rem 0.9rem;
  text-align: center;
}
.stat-number { font-size: 1.8rem; font-weight: 700; color: #1a1a1a; line-height: 1.1; }
.stat-label { font-size: 0.8rem; color: #777; margin-top: 0.3rem; line-height: 1.35; }

/* --- chart containers --- */
.chart-container {
  width: min(95vw, 864px);
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 1.25rem 1.25rem 0.6rem;
  margin: 1.75rem auto;
  height: 460px;
}
.chart-container.short { height: 360px; }
.chart-container.tall { height: 900px; }

/* --- author footnote (asterisk marker under the byline) --- */
.author-note { display: inline-block; font-size: 0.8rem; font-weight: normal; opacity: 0.6; margin-top: 0.2rem; }
.chart-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* --- wide static figures (e.g. the moment-ladder panel) --- */
figure.wide { width: min(95vw, 864px); margin: 1.75rem auto; text-align: center; }
figure.wide img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; }
figure.wide figcaption { font-size: 0.85rem; color: #666; margin: 0 auto; line-height: 1.4; text-align: center; max-width: 820px; }

/* --- algorithm-family subheader (variant count / accuracy / best concept) --- */
h2.family-name { margin-bottom: 0; }
.family-meta { color: #888; font-size: 0.85rem; font-style: italic; margin: 0 0 0.85rem; }
.family-meta p { margin: 0; }

/* --- references: first line flush (author inline with text), hanging indent on wrapped lines --- */
#refs { margin-left: 0; text-indent: 0; }
#refs .csl-entry { margin-left: 1.5em; text-indent: -1.5em; margin-bottom: 0.5em; }