/* ThroughputBench D3 figures */

.tb-fig {
  margin: 1.5rem 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--geo-text, #2d2926);
}

.tb-fig svg {
  display: block;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.tb-fig text {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  fill: var(--geo-text, #2d2926);
}

.tb-fig .tb-axis text { font-size: 11px; fill: var(--geo-text-dim, #6b6560); }
.tb-fig .tb-axis line,
.tb-fig .tb-axis path { stroke: var(--geo-border, #d4cdc2); shape-rendering: crispedges; }
.tb-fig .tb-grid line { stroke: var(--geo-border, #d4cdc2); stroke-opacity: 0.55; shape-rendering: crispedges; }
.tb-fig .tb-grid path { display: none; }

.tb-fig .tb-axis-label {
  font-size: 11.5px;
  fill: var(--geo-text, #2d2926);
  font-weight: 500;
}

.tb-fig .tb-panel-title {
  font-size: 12px;
  font-weight: 600;
  fill: var(--geo-text, #2d2926);
}

.tb-fig .tb-pareto-line {
  stroke: var(--geo-text-dim, #6b6560);
  stroke-opacity: 0.5;
  fill: none;
  stroke-width: 1.4px;
  stroke-dasharray: 0;
}

.tb-fig .tb-ref-line {
  stroke: var(--geo-text-dim, #6b6560);
  stroke-opacity: 0.35;
  stroke-width: 0.9px;
  stroke-dasharray: 3 3;
  fill: none;
}

.tb-fig .tb-ref-label {
  font-size: 10px;
  fill: var(--geo-text-dim, #6b6560);
}

/* Controls */
.tb-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  align-items: center;
  font-size: 12px;
}

.tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--geo-border, #d4cdc2);
  background: var(--geo-bg-card, #ebe5db);
  color: var(--geo-text, #2d2926);
  cursor: pointer;
  user-select: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  transition: border-color 0.15s, opacity 0.15s, transform 0.05s;
}
.tb-chip:hover { border-color: var(--geo-text-dim, #6b6560); }
.tb-chip:active { transform: translateY(1px); }
.tb-chip.tb-off { opacity: 0.35; }
.tb-chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block;
}

.tb-toggle-group {
  display: inline-flex;
  border: 1px solid var(--geo-border, #d4cdc2);
  border-radius: 6px;
  overflow: hidden;
  margin-left: auto;
}
.tb-toggle {
  padding: 4px 10px;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--geo-text-dim, #6b6560);
}
.tb-toggle.tb-on {
  background: var(--geo-accent, #2563eb);
  color: white;
}
.tb-toggle + .tb-toggle { border-left: 1px solid var(--geo-border, #d4cdc2); }

/* Tooltip */
.tb-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--geo-bg-card, #ebe5db);
  border: 1px solid var(--geo-border, #d4cdc2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--geo-text, #2d2926);
  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 50;
  max-width: 260px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.tb-tooltip.tb-on { opacity: 1; }
.tb-tooltip-name {
  font-weight: 600;
  margin-bottom: 2px;
}
.tb-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.tb-tooltip-row span:first-child { color: var(--geo-text-dim, #6b6560); }

/* Dark mode tweaks (Quarto applies .quarto-dark to body) */
body.quarto-dark .tb-fig text,
body.quarto-dark .tb-fig .tb-axis-label,
body.quarto-dark .tb-fig .tb-panel-title { fill: #e8e8e8; }
body.quarto-dark .tb-fig .tb-axis text { fill: #b6b6b6; }
body.quarto-dark .tb-fig .tb-axis line,
body.quarto-dark .tb-fig .tb-axis path { stroke: #4a4a4a; }
body.quarto-dark .tb-fig .tb-grid line { stroke: #3a3a3a; }
body.quarto-dark .tb-fig .tb-pareto-line,
body.quarto-dark .tb-fig .tb-ref-line { stroke: #888; }
body.quarto-dark .tb-fig .tb-ref-label { fill: #b6b6b6; }
body.quarto-dark .tb-chip {
  background: #2a2a2a;
  border-color: #444;
  color: #e8e8e8;
}
body.quarto-dark .tb-toggle-group { border-color: #444; }
body.quarto-dark .tb-toggle + .tb-toggle { border-left-color: #444; }
body.quarto-dark .tb-tooltip {
  background: #2a2a2a;
  border-color: #555;
  color: #e8e8e8;
}

.tb-fig-caption {
  display: block;
  text-align: left;
  font-size: 0.85rem;
  color: var(--geo-text-dim, #6b6560);
  line-height: 1.45;
  margin: 0.6rem auto 0;
  max-width: 92%;
}

.tb-panels {
  display: grid;
  gap: 1rem;
}
.tb-panels-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-panels-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (width <= 760px) {
  .tb-panels-2, .tb-panels-3 { grid-template-columns: 1fr; }
}