/* Round 1, rule 4: data first. Grey header row, 11px uppercase headers, 1px
   cell borders, right-aligned tabular numbers, calculated cells on faint grey,
   totals bold on grey. */

table { border-collapse: collapse; width: 100%; font-size: var(--fs-body);
        background: var(--panel); }

/* A table is a panel in its own right. Left on the canvas it was grey rows on
   a grey page, which is the hardest thing on the screen to read and matches
   nothing else on it (owner, 2026-09-23). */
table { border-radius: var(--radius); overflow: hidden; margin: .1rem 0 var(--gap); }
tbody td { background: var(--panel); }

thead th {
  background: #f1f3f5;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: left;
  padding: .3rem .5rem;
  border: 1px solid var(--border);
  border-left: 0;
  white-space: nowrap;
}
thead th:first-child { border-left: 1px solid var(--border); }

tbody td {
  padding: .28rem .5rem;
  border: 1px solid var(--border);
  border-left: 0;
  vertical-align: top;
}
tbody td:first-child { border-left: 1px solid var(--border); }
tbody tr:hover td { background: #fafbfc; }

/* Numbers line up and are read in columns, so they are tabular and right-aligned. */
td.num, th.num, .tnum, td .mono:only-child { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }

/* Calculated and total rows. */
td.calc { background: #f8f9fb; }
tr.total td { font-weight: 700; background: #f1f3f5; }

/* The dense logs the console already has get the same treatment. */
.dense-log, .signin-log { font-size: .78rem; }
.dense-log td, .signin-log td { padding: .22rem .45rem; }
.signin-agent { font-size: .72rem; }

.table-scroll table { border: 0; }
.table-scroll thead th { border-top: 0; }
.table-scroll tbody tr:last-child td { border-bottom: 0; }