/* =========================================================================
   bzh-charts.css — titled, exportable chart panels. Pairs with bzh-charts.js.
   Part of the bzhmacro brand kit: load it after bzh.css on any page with charts.
   New classes only; .chart-box .cap is set in bzh.css itself.
   ========================================================================= */

.chart-box { position: relative; }

.chart-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 2px 2px 12px;
}
.chart-head .ct { flex: 1 1 auto; min-width: 0; }

.chart-title {
  font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--paper);
  letter-spacing: .005em;
}
.chart-sub {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12px;
  line-height: 1.45;
  color: var(--paper-dim);
  margin-top: 4px;
}

.chart-tools {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  opacity: .55;
  transition: opacity .15s ease;
}
.chart-box:hover .chart-tools,
.chart-tools:focus-within { opacity: 1; }

.ctool {
  cursor: pointer;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10.5px;
  letter-spacing: .06em;
  line-height: 1;
  padding: 5px 7px;
  color: var(--paper-dim);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 6px);
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.ctool:hover { color: var(--paper); border-color: var(--gold); }
.ctool:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ctool.ok { color: #4FBFAE; border-color: rgba(79, 191, 174, .55); }
.ctool.bad { color: #E07B5F; border-color: rgba(224, 123, 95, .55); }

@media (max-width: 560px) {
  .chart-head { flex-wrap: wrap; }
  .chart-tools { opacity: 1; }
  .chart-title { font-size: 14px; }
}

@media print {
  .chart-tools { display: none; }
}