/*
  Tables in the Text section (richText, MB-124; TextTables.Wrap). Loaded only when a Text section's text holds a table,
  so text without one never loads this file and looks exactly as before.
  - .text-table: the box around each table. It scrolls sideways when the table is wider than the column (phones); the
    page never does. Focusable (tabindex) so keyboard users can scroll it; the focus ring is the site's.
  - .text-table--lines (default "Lines"): a line round every cell, the header row in bold.
  - .text-table--header ("Coloured header row"): a coloured header row, then rows striped in two light colours, no lines.
  Site hooks (set in the site's tokens file): --text-table-font, --text-table-fs, --text-table-lh, --text-table-cell-pad,
  --text-table-border, --text-table-head-fw, --text-table-head-bg, --text-table-head-fg, --text-table-head-sep,
  --text-table-body-bg, --text-table-body-fg, --text-table-stripe-bg, --text-table-align.
  - .text-table--compact (FC-MFIX6, "Table size" Compact; with either look): the table is only as wide as its columns
    need, each column as wide as its content or the width the table's own markup gives it (col / cell width), and the rows
    sit closer. Site hooks: --text-table-compact-width (default auto; 100% fills the column again), --text-table-compact-pad,
    --text-table-compact-fs, --text-table-compact-lh.
  Spacing and colours from the design tokens only.
*/
.text-table {
  max-width: 100%;
  margin: var(--space-6) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.text-table:first-child { margin-top: 0; }
.text-table:last-child { margin-bottom: 0; }
.text-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--text-table-font, inherit);
  font-size: var(--text-table-fs, inherit);
  line-height: var(--text-table-lh, var(--lh-body));
}
.text-table th,
.text-table td {
  padding: var(--text-table-cell-pad, var(--space-2) var(--space-3));
  text-align: left;
  vertical-align: var(--text-table-align, middle);
  overflow-wrap: normal;
}
.text-table th { font-weight: var(--text-table-head-fw, var(--fw-bold)); }
/* The editor puts each cell's text in a paragraph. */
.text-table :is(th, td) > :is(p, ul, ol) { margin: 0; }
.text-table :is(th, td) > * + * { margin-top: var(--space-2); }

.text-table--lines :is(th, td) { border: var(--border-width) solid var(--text-table-border, currentColor); }

.text-table--header table {
  background: var(--text-table-body-bg, var(--color-page));
  /* The page's own text colour (fixed at :root, css/starter.css), so on a Section colour band the table keeps its
     light ground with dark text, as the original; outside a band this is --color-text. */
  color: var(--text-table-body-fg, var(--starter-text));
}
.text-table--header th {
  background: var(--text-table-head-bg, var(--c-brand));
  color: var(--text-table-head-fg, var(--c-white));
}
.text-table--header th + th { border-left: var(--border-width) solid var(--text-table-head-sep, transparent); }
/* Every second body row, counted from the first row without header cells (with or without a header row). */
.text-table--header tr:nth-child(even of :not(:has(> th))) > td { background: var(--text-table-stripe-bg, var(--color-surface-quiet)); }

/* FC-MFIX6 (M-FIX2-2): Table size Compact. Standard (no class) is unchanged. */
.text-table--compact table {
  width: var(--text-table-compact-width, auto);
  font-size: var(--text-table-compact-fs, var(--text-table-fs, inherit));
  line-height: var(--text-table-compact-lh, var(--lh-label, 1.3));
}
.text-table--compact th,
.text-table--compact td { padding: var(--text-table-compact-pad, var(--space-1) var(--space-2)); }