:root {
  --bd-card-bg: var(--panel-bg);
  --bd-border: var(--panel-border);
  --bd-highlight: var(--accent);
  --bd-control-bg: var(--input-bg);
  --bd-control-border: var(--input-border);
  --bd-positive: #80ffdb;
  --bd-negative: #ff6b6b;
}

[data-theme="light"],
body.quarto-light {
  --bd-positive: #2a9d6f;
  --bd-negative: #d62839;
}

.bd-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bd-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  background: var(--bd-card-bg);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--bd-border);
}

.bd-controls__group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 160px;
}

.bd-controls label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.bd-controls select,
.bd-controls button {
  background: var(--bd-control-bg);
  border: 1px solid var(--bd-control-border);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
}

.bd-controls button {
  cursor: pointer;
  transition: background 0.2s ease;
}

.bd-controls button:hover {
  background: var(--overlay-strong);
}

.bd-summary-card {
  background: var(--bd-card-bg);
  border-radius: 18px;
  padding: 1.75rem;
  border: 1px solid var(--bd-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bd-summary-card__total {
  font-size: 2.2rem;
  font-weight: 700;
}

.bd-summary-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bd-chip {
  background: var(--overlay-highlight);
  color: var(--accent-soft);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bd-summary-card__delta {
  font-weight: 600;
}

.bd-summary-card__delta.is-positive {
  color: var(--bd-positive);
}

.bd-summary-card__delta.is-negative {
  color: var(--bd-negative);
}

.bd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
}

.bd-panel {
  background: var(--bd-card-bg);
  border-radius: 18px;
  padding: 1.5rem;
  border: 1px solid var(--bd-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bd-panel h2 {
  margin: 0;
}

.bd-panel h3 {
  margin: 0 0 0.5rem;
}

.bd-treemap {
  width: 100%;
  height: auto;
}

.bd-treemap__rect {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.bd-treemap__rect:hover {
  opacity: 0.85;
}

.bd-axis text {
  fill: var(--text-muted);
  font-size: 12px;
}

.bd-axis path,
.bd-axis line {
  stroke: var(--border-soft);
}

.bd-top-changes__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.bd-table thead {
  background: var(--overlay-soft);
}

.bd-table th,
.bd-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.bd-table--comparisons th:first-child,
.bd-table--comparisons td:first-child {
  font-weight: 600;
}

.bd-comparisons {
  display: flex;
  gap: 1rem;
}

.bd-path {
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .bd-controls {
    flex-direction: column;
    align-items: stretch;
  }
}