/* Chart Builder — tool-specific styles (Brief §6.4).
   Base components come from site.css; this file only adds chart layout.
   Teal rule: teal TEXT uses var(--color-teal-text) (#0F766E, WCAG AA on
   light backgrounds). #14B8A6 is never used for text here. */

.cb-controls {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 768px) { .cb-controls { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cb-controls { grid-template-columns: 1fr 1fr 1fr; } }
.cb-controls .form-field { margin-bottom: 0; }

.cb-value-fieldset {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
.cb-value-fieldset legend {
  font-weight: var(--weight-medium);
  padding: 0 var(--space-1);
}
.cb-value-fieldset .checkbox-row { margin-bottom: var(--space-2); }
.cb-value-fieldset .checkbox-row:last-child { margin-bottom: 0; }

.cb-chart-wrap {
  position: relative;
  height: 420px;
  max-height: 70vh;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
}
.cb-chart-wrap canvas { max-width: 100%; }

/* Excluded non-numeric cells in the preview: tinted and weighted so the
   highlight survives greyscale printing as more than a colour change. */
.cb-cell-invalid {
  background: #FEF2F2;
  color: #991B1B;
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 0 0 1px #FECACA;
}

/* The handoff banner's strong line is informational text on a light
   tint: teal-text token, never the #14B8A6 fill colour. */
#cb-handoff strong { color: var(--color-teal-text, #0F766E); }