web/src/viz/DashboardView.css

.cg-dash-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cg-ch-card {
  min-height: 240px;
  overflow: hidden;
}

.cg-ch-viz {
  flex: 1 1 150px;
  min-height: 120px;
  overflow: hidden;
}

.cg-ch-viz--kpi {
  min-height: 96px;
}

.cg-vega-frame,
.cg-vega-host,
.cg-vega-host > .vega-embed {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.cg-vega-host canvas,
.cg-vega-host svg {
  display: block;
  max-width: 100%;
}

.cg-ch-loading {
  display: grid;
  height: 100%;
  min-height: 120px;
  place-items: center;
  color: var(--lp-muted);
  font-size: var(--lp-fs-3xs);
}

/* ==========================================================================
   Wave-16 C-CHARTCAP (b) — the delta line under a KPI number.
   ==========================================================================
   Colour states direction, not judgment: green up / red down is the finance
   read `pages_sales` used, and `flat`/`off` stay muted. The refusal notes
   ("no orders yet") wear the muted tone too — they are honesty, not alarm. */
.cg-ch-kpidelta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px 6px;
  font-size: var(--lp-fs-2xs);
  font-weight: 600;
  color: var(--lp-muted);
}

.cg-ch-kpidelta.is-up {
  color: var(--lp-green-deep);
}

.cg-ch-kpidelta.is-down {
  color: var(--lp-red-deep);
}

/* ==========================================================================
   Wave-16 C-CHARTCAP (c) — the table kind.
   ==========================================================================
   A summary card, styled like the sheet: hairline rows, numbers right-aligned
   in tabular figures, the group column free to truncate. The card scrolls its
   own overflow so a tall table never stretches the board row. */
.cg-ch-table {
  height: 100%;
  overflow: auto;
}

.cg-ch-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--lp-fs-2xs);
}

.cg-ch-table th,
.cg-ch-table td {
  padding: 3px 8px;
  text-align: left;
  border-bottom: 1px solid var(--lp-line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.cg-ch-table th {
  position: sticky;
  top: 0;
  background: var(--lp-surface);
  color: var(--lp-muted);
  font-weight: 600;
  font-size: var(--lp-fs-3xs);
}

.cg-ch-table .cg-ch-td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Wave 14 items 18 + R7 — the chart editor's label column.
   ==========================================================================
   The base rule pins every editor label to `flex: 0 0 54px` (index.css:3917),
   which was sized for "Measure" / "Of" / "By". Item 18 replaces those with
   words a non-analyst can act on — "Which number", "Grouped by", "Break down
   by", "How far back", "Bottom axis label" — and every one of them WRAPS to two
   lines in 54px, which is exactly the failure R7 is a sweep for: a wrapped
   label breaks the row rhythm the whole pane is read by.

   Overridden from HERE rather than at the base rule because `index.css` is
   another session's fence this wave. `.cg-ch-cfgbody .cg-ch-row > span` is
   (0,2,1) against the base's (0,1,1), so this wins on SPECIFICITY and never on
   bundle order — a tie decided by import sequence is not a thing to bet a
   layout on ([[loopable-nav-logo-toggle]]).

   `nowrap` is the assertion, not the width: if a future label outgrows this
   column it will overflow visibly instead of quietly reflowing, which is the
   failure mode you can see. */
.cg-ch-cfgbody .cg-ch-row > span {
  flex: 0 0 104px;
  white-space: nowrap;
}

/* The checkbox row reads left-to-right — box, then sentence — so its label is
   not a column head and must not take the column width. */
.cg-ch-cfgbody .cg-ch-check > span {
  flex: 1 1 auto;
  white-space: normal;
}

@media (max-width: 820px) {
  .cg-ch-card {
    grid-column: span 12 !important;
  }

  /* Below the card's own breakpoint the pane is narrow enough that a 104px
     label column starves the control beside it. The labels stay unwrapped and
     the row scrolls its control instead. */
  .cg-ch-cfgbody .cg-ch-row > span {
    flex-basis: 88px;
  }
}