/** Greenfield canonical: Data Grid · v3.45.0
 *  Data table + optional dependency-free inline-SVG chart (bar/column/line).
 *  Palette-driven (--shell-*); SQUARED — no border-radius anywhere. US spelling.
 *  Auto-enqueued by slug via SSLA_Loader::enqueue_styles_for_slugs().
 */

.ssla-g-data-grid {
  --g-dg-bg: var(--shell-bg);
  --g-dg-fg: var(--shell-fg);
  --g-dg-heading: var(--shell-h);
  --g-dg-eyebrow: var(--shell-accent);
  --g-dg-body: var(--shell-fg);
  --g-dg-muted: var(--shell-muted);
  --g-dg-line: var(--shell-line);
  --g-dg-head-bg: color-mix(in srgb, var(--shell-h) 6%, transparent);
  --g-dg-zebra: color-mix(in srgb, var(--shell-h) 3.5%, transparent);
  --g-dg-chart-fill: var(--shell-accent);
  --g-dg-chart-track: color-mix(in srgb, var(--shell-h) 8%, transparent);
  --g-dg-heading-family: var(--brand-heading-family);
  --g-dg-body-family:    var(--brand-body-family);

  background: var(--g-dg-bg);
  color: var(--g-dg-fg);
  padding: var(--g-dg-section-padding, 64px 24px);
}

/* Tone modifiers — projected class = ssla-g-data-grid--tone-{value} */
.ssla-g-data-grid--tone-dark {
  --g-dg-bg: #12202f;
  --g-dg-fg: #cdd7e2;
  --g-dg-heading: #ffffff;
  --g-dg-eyebrow: #7fd1a8;
  --g-dg-body: #cdd7e2;
  --g-dg-muted: #8b9aac;
  --g-dg-line: #26384a;
  --g-dg-head-bg: rgba(255, 255, 255, .05);
  --g-dg-zebra: rgba(255, 255, 255, .03);
  --g-dg-chart-fill: #7fd1a8;
  --g-dg-chart-track: rgba(255, 255, 255, .07);
}
.ssla-g-data-grid--tone-accent {
  --g-dg-eyebrow: var(--shell-accent);
  --g-dg-chart-fill: var(--shell-accent);
}

.ssla-g-dg-inner {
  max-width: var(--g-dg-content-max-width, 900px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ssla-g-dg-head { display: flex; flex-direction: column; gap: 8px; }
.ssla-g-dg-eyebrow {
  font: 600 12px/1.2 var(--g-dg-body-family, var(--shell-bf));
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--g-dg-eyebrow);
}
.ssla-g-dg-heading {
  font: 700 var(--g-dg-heading-size, clamp(24px, 3.2vw, 36px))/1.15 var(--g-dg-heading-family, var(--shell-hf));
  font-weight: var(--paint-heading-weight, 700); /* v3.52.04 — painted ProSet heading weight reaches g- heading; 700 no-paint default */
  color: var(--g-dg-heading);
  margin: 0;
}
.ssla-g-dg-intro {
  color: var(--g-dg-muted);
  font-size: var(--g-dg-body-size, 15px);
  max-width: 60ch;
  margin: 0;
}

/* ── Table ─────────────────────────────────────────────────────────── */
.ssla-g-dg-scroll { overflow-x: auto; }
.ssla-g-dg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--g-dg-body-size, 15px);
  border-radius: 0;               /* SQUARED */
}
.ssla-g-dg-caption {
  caption-side: bottom;
  text-align: left;
  color: var(--g-dg-muted);
  font-size: 12.5px;
  padding-top: 10px;
}
.ssla-g-dg-table th,
.ssla-g-dg-table td {
  padding: var(--g-dg-row-padding, 12px 16px);
  border-bottom: 1px solid var(--g-dg-line);
  text-align: left;
  white-space: nowrap;
}
.ssla-g-dg-thead th {
  background: var(--g-dg-head-bg);
  color: var(--g-dg-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  border-bottom: 2px solid var(--g-dg-line);
}
.ssla-g-dg-table th[scope="row"] {
  color: var(--g-dg-heading);
  font-weight: 600;
}

/* Numeric column alignment — driven by col{n}_type data-attrs on the section.
   number | currency | percent right-align + tabular figures. */
.ssla-g-data-grid[data-col1-type~="number"]   .ssla-g-dg-col-1,
.ssla-g-data-grid[data-col1-type~="currency"] .ssla-g-dg-col-1,
.ssla-g-data-grid[data-col1-type~="percent"]  .ssla-g-dg-col-1,
.ssla-g-data-grid[data-col2-type~="number"]   .ssla-g-dg-col-2,
.ssla-g-data-grid[data-col2-type~="currency"] .ssla-g-dg-col-2,
.ssla-g-data-grid[data-col2-type~="percent"]  .ssla-g-dg-col-2,
.ssla-g-data-grid[data-col3-type~="number"]   .ssla-g-dg-col-3,
.ssla-g-data-grid[data-col3-type~="currency"] .ssla-g-dg-col-3,
.ssla-g-data-grid[data-col3-type~="percent"]  .ssla-g-dg-col-3,
.ssla-g-data-grid[data-col4-type~="number"]   .ssla-g-dg-col-4,
.ssla-g-data-grid[data-col4-type~="currency"] .ssla-g-dg-col-4,
.ssla-g-data-grid[data-col4-type~="percent"]  .ssla-g-dg-col-4,
.ssla-g-data-grid[data-col5-type~="number"]   .ssla-g-dg-col-5,
.ssla-g-data-grid[data-col5-type~="currency"] .ssla-g-dg-col-5,
.ssla-g-data-grid[data-col5-type~="percent"]  .ssla-g-dg-col-5 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Striping (zebra default; None variant strips it) */
.ssla-g-data-grid--striping-zebra .ssla-g-dg-table tbody tr:nth-child(even) {
  background: var(--g-dg-zebra);
}

/* Density */
.ssla-g-data-grid--density-compact .ssla-g-dg-table th,
.ssla-g-data-grid--density-compact .ssla-g-dg-table td {
  padding: 7px 14px;
}

/* Header-row hide variant */
.ssla-g-data-grid--header-row-hide .ssla-g-dg-thead { display: none; }

/* Column-count hiding — hide columns beyond the active count. Default = three.
   Projected class = ssla-g-data-grid--col-count-{value}. */
.ssla-g-data-grid--col-count-two   .ssla-g-dg-col-3,
.ssla-g-data-grid--col-count-two   .ssla-g-dg-col-4,
.ssla-g-data-grid--col-count-two   .ssla-g-dg-col-5,
.ssla-g-data-grid--col-count-three .ssla-g-dg-col-4,
.ssla-g-data-grid--col-count-three .ssla-g-dg-col-5,
.ssla-g-data-grid--col-count-four  .ssla-g-dg-col-5 {
  display: none;
}

/* Column widths (opt-in, v3.66.61) — Projected class =
   ssla-g-data-grid--col-widths-{value}. 'auto' (default) emits no class
   suffix change here since no selector below matches it — every existing
   table on every site keeps today's content-based table-layout untouched.
   'label-narrow' is scoped to col-count-five ONLY: with fewer than 5 visible
   columns, table-layout:fixed + hidden (display:none) cells can leave the
   remaining columns' widths summing to less than 100%, which is untested and
   avoidable — five is the case this was built for (a short label column,
   e.g. "Year", alongside several similarly-wide value columns) and the only
   one it's scoped to. */
.ssla-g-data-grid--col-widths-label-narrow.ssla-g-data-grid--col-count-five .ssla-g-dg-table {
  table-layout: fixed;
}
.ssla-g-data-grid--col-widths-label-narrow.ssla-g-data-grid--col-count-five .ssla-g-dg-col-1 {
  width: 16%;
  white-space: normal;   /* label column may hold a longer one-off row (e.g. a summary row) */
}
.ssla-g-data-grid--col-widths-label-narrow.ssla-g-data-grid--col-count-five .ssla-g-dg-col-2,
.ssla-g-data-grid--col-widths-label-narrow.ssla-g-data-grid--col-count-five .ssla-g-dg-col-3,
.ssla-g-data-grid--col-widths-label-narrow.ssla-g-data-grid--col-count-five .ssla-g-dg-col-4,
.ssla-g-data-grid--col-widths-label-narrow.ssla-g-data-grid--col-count-five .ssla-g-dg-col-5 {
  width: 21%;
}

/* ── Chart (dependency-free inline SVG) ────────────────────────────── */
.ssla-g-dg-chart { width: 100%; }
.ssla-g-dg-chart svg { display: block; width: 100%; height: auto; }
.ssla-g-dg-chart text { font: 500 12px var(--g-dg-body-family, var(--shell-bf)); fill: var(--g-dg-muted); }
.ssla-g-dg-chart .val { font-weight: 600; fill: var(--g-dg-heading); }

/* ── Empty state ───────────────────────────────────────────────────── */
.ssla-g-dg-empty {
  border: 1px dashed var(--g-dg-line);
  padding: 40px;
  text-align: center;
  color: var(--g-dg-muted);
  font-size: 14px;
}

@media (max-width: 560px) {
  .ssla-g-data-grid { padding: 44px 16px; }
}