/* Theming: accent colors, surfaces, and hero gradients live in themes.css,
   scoped to <html data-rm-theme="…" data-bs-theme="light|dark"> and configured
   from app/config.php ('theme' => ['name' => …, 'mode' => …]). */

.hero h1 {
  letter-spacing: -.03em;
}

/* Stat cards */
.stat-card {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  height: 100%;
}
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}
.stat-card .stat-label {
  color: var(--bs-secondary-color);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Catalog table */
.catalog-table {
  font-variant-numeric: tabular-nums;
}
.catalog-table th a {
  color: inherit;
  text-decoration: none;
}
.catalog-table th a:hover {
  text-decoration: underline;
}
.catalog-table td {
  vertical-align: middle;
}

/* Badges */
.badge {
  font-weight: 600;
  letter-spacing: .01em;
}

.model-title-code {
  font-size: .8em;
  color: var(--bs-secondary-color);
}

pre.api-code {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .5rem;
  padding: .75rem 1rem;
  font-size: .8rem;
  overflow-x: auto;
}

.chart-card {
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: .75rem;
  padding: 1rem;
}
/* Chart.js runs with maintainAspectRatio:false, so each canvas MUST live in a
   container with a definite height; otherwise the canvas sizes itself against
   its own parent and the charts grow far too tall. */
.chart-holder {
  position: relative;
  height: 280px;
}
.chart-holder--tall {
  height: 340px;
}
@media (max-width: 575.98px) {
  .chart-holder,
  .chart-holder--tall {
    height: 240px;
  }
}

.table-of-contents {
  font-size: .9rem;
}

footer {
  border-top: 1px solid var(--bs-border-color-translucent);
}