/* ui/chartguard.css — owned by W16.
 *
 * The visible failure state for a chart that could not draw. It exists so that the product
 * can never again lose nineteen charts in front of a customer and say nothing about it.
 *
 * It is deliberately NOT alarming-red: this is a degraded render, not a data error, and the
 * copy says so ("the figures behind it are unaffected"). The one thing it must never do is
 * look like an empty result — "no chart" must not read as "no data", which would put us back
 * in the absence-is-zero hole by a different route.
 *
 * Every selector is prefixed cg-.
 */

.cg-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 20px;
  border: 1px dashed var(--line, #e5e5eb);
  border-radius: 10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--wash, #f6f7fb) 0px,
    var(--wash, #f6f7fb) 10px,
    #fff 10px,
    #fff 20px
  );
  text-align: center;
  box-sizing: border-box;
}

.cg-fb-title {
  font: 700 12.5px/1.3 var(--font-head, system-ui, sans-serif);
  color: var(--warn-ink, #8a5a00);
  letter-spacing: 0.02em;
}

.cg-fb-sub {
  font: 400 11.5px/1.5 var(--font-body, system-ui, sans-serif);
  color: var(--muted, #646464);
  max-width: 46ch;
}

@media (max-width: 480px) {
  .cg-fallback { padding: 14px 12px; }
  .cg-fb-sub { font-size: 11px; max-width: none; }
}