/* ── Costings spreadsheet grid — cascade fixes ──────────────────────────────
   Loaded AFTER editorial-final.css (which forces the serif display font +
   ink colours on broad selectors with !important). These rules win by source
   order + specificity so the grid reads like a spreadsheet, not a magazine.
   Scoped to .cm-grid so nothing else is affected.
   ─────────────────────────────────────────────────────────────────────────── */

/* Stable column widths so opening a cell editor never reflows/stretches the table. */
html[data-design-mode="editorial"] body .cm-grid { table-layout: fixed; }
html[data-design-mode="editorial"] body .cm-grid th:first-child,
html[data-design-mode="editorial"] body .cm-grid td:first-child { width: 8.5%; }

/* Data numbers → monospace + tabular (NOT the serif title font). */
html[data-design-mode="editorial"] body .cm-grid td.num,
html[data-design-mode="editorial"] body .cm-grid th.num,
html[data-design-mode="editorial"] body .cm-grid .cm-gc,
html[data-design-mode="editorial"] body .cm-gc-input {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
}
html[data-design-mode="editorial"] body .cm-grid td.mth {
  font-family: var(--font-body) !important;
  font-variant-numeric: normal !important;
}

/* The editing input fills its (now fixed-width) cell without changing layout. */
html[data-design-mode="editorial"] body .cm-grid .cm-gc.editing { padding: 0 !important; }
html[data-design-mode="editorial"] body .cm-gc-input { width: 100% !important; box-sizing: border-box !important; }

/* ── Colour-graded profit / margin cells (text + subtle background tint) ──── */
html[data-design-mode="editorial"] body .cm-grid td.cm-good {
  color: var(--status-success) !important;
  background: var(--status-success-bg, #e6f4ea) !important;
}
html[data-design-mode="editorial"] body .cm-grid td.cm-warn {
  color: var(--status-warning, #b0740a) !important;
  background: var(--status-warning-bg, #fbf1de) !important;
}
html[data-design-mode="editorial"] body .cm-grid td.cm-bad {
  color: var(--status-danger) !important;
  background: var(--status-danger-bg, #fbe7e3) !important;
}
/* keep the grade on row-hover (generic hover bg would otherwise wash it out) */
html[data-design-mode="editorial"] body .cm-grid tbody tr:hover td.cm-good { background: var(--status-success-bg, #e6f4ea) !important; }
html[data-design-mode="editorial"] body .cm-grid tbody tr:hover td.cm-warn { background: var(--status-warning-bg, #fbf1de) !important; }
html[data-design-mode="editorial"] body .cm-grid tbody tr:hover td.cm-bad  { background: var(--status-danger-bg, #fbe7e3) !important; }
html[data-design-mode="editorial"] body .cm-grid td.cm-good,
html[data-design-mode="editorial"] body .cm-grid td.cm-warn,
html[data-design-mode="editorial"] body .cm-grid td.cm-bad { font-weight: 700 !important; }

/* Editable billing-summary facts: look clickable. */
html[data-design-mode="editorial"] body .cm-cost-fact__value--edit {
  cursor: pointer; border-bottom: 1px dashed var(--border-strong, var(--ink-faint));
  transition: border-color 0.12s, color 0.12s;
}
html[data-design-mode="editorial"] body .cm-cost-fact__value--edit:hover {
  border-bottom-color: var(--accent); color: var(--ink-strong) !important;
}