h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.4rem; }

/* ── Panel: white card widget ────────────────────────────────────────────── */

.panel { /* every panel should use this style for homogenization, adding additional styles as needed */
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

/* flex row: panel title + inline controls side by side */
.panel-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}

.panel-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 0.4rem;
}

/* prevent the title from wrapping when it sits inline with controls */
.panel-head .panel-title { white-space: nowrap; margin-bottom: 0; }

/* ── Layout helpers ──────────────────────────────────────────────────────── */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.75rem;
}

/* min-width: 0 overrides the default `auto`, which otherwise lets grid children
   (e.g. Plotly charts) expand past their 1fr column instead of shrinking. */
.two-col > *, .panel-row-3 > * { min-width: 0; }

/* Constrain a plot to roughly half the content width instead of full-width */
.plot-constrained { max-width: 640px; }

/* Three-column comparison row — for spectra demos (underfit · best · overfit, etc.) */
.panel-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin: 0.8rem 0;
}

/* ── Callouts: Use for full-width info/alert text ────────────────────────── */

.callout-label {
  background: #f4faf7;
  border-left: 3px solid #00662c;
  padding: 0.6rem 0.9rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.86rem;
  line-height: 1.55;
  margin-bottom: 1rem;
  color: #333;
}

/* ── Canvas ──────────────────────────────────────────────────────────────── */

canvas {
  display: block;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: crosshair;
  max-width: 100%;
}

/* ── Controls ────────────────────────────────────────────────────────────── */

button {
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

button:hover { background: #f0f0f0; }

button.active { background: #4a9eff; color: #fff; border-color: #3a8eef; }
button.active:hover { background: #3a8eef; }

/* Reveal button — one-way "show more" progression */
.btn-reveal {
  padding: 0.45rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1.5px solid #00662c;
  border-radius: 5px;
  background: #fff;
  color: #00662c;
  transition: background 0.15s;
}

.btn-reveal:hover { background: #f4faf7; }
.btn-reveal:disabled { opacity: 0.5; cursor: default; }
.btn-reveal.active { background: #00662c; color: #fff; border-color: #00662c; }
.btn-reveal.active:hover { background: #005025; }

/* ── Visibility utility ──────────────────────────────────────────────────── */

.hidden { display: none !important; }