/* Three table modules over one base, and the log. Each module tones its cells by column position
   rather than by a class per cell, so the markup has to put the columns in the order the module
   below expects or the tones land on the wrong ones. */

.c-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.c-table th, .c-table td { padding: var(--space-2xs) var(--space-sm); text-align: left; vertical-align: top; }
.c-table thead th {
  color: var(--text-dim); font-weight: var(--fw-regular);
  text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--text-xs);
  border-bottom: var(--bw) solid var(--line);
}
.c-table tbody tr + tr td { border-top: var(--bw) solid var(--surface-hi); }
.c-table tbody tr:hover td { background: var(--surface-raised); }

/* Columns: key, value, note. */
.c-fieldtable td:first-child { color: var(--accent); white-space: nowrap; font-weight: var(--fw-medium); }
.c-fieldtable td:nth-child(2) { color: var(--text-bright); white-space: nowrap; }
.c-fieldtable td:last-child  { color: var(--text-muted); }

/* Columns: command, arguments, description. */
.c-cmdtable td:first-child { color: var(--text-bright); white-space: nowrap; }
.c-cmdtable td:first-child::before { content: "▸ "; color: var(--accent); }
.c-cmdtable td:nth-child(2) { color: var(--text-dim); white-space: nowrap; }
.c-cmdtable td:last-child { color: var(--text); }

/* Columns: the row's label, then one cell per thing compared. */
.c-comparetable th:first-child, .c-comparetable td:first-child { color: var(--text-bright); border-right: var(--bw) solid var(--line); }
.c-comparetable td { color: var(--text-muted); }
.c-comparetable td.is-default { color: var(--accent); }

.c-log { font-size: var(--text-sm); line-height: var(--lh-code); display: flex; flex-direction: column; }
.c-log__line { display: grid; grid-template-columns: 22ch 2ch 1fr; gap: 1ch; padding: var(--space-3xs) 0; align-items: baseline; }
.c-log__ts { color: var(--text-dim); white-space: nowrap; }
.c-log__glyph { color: var(--accent); }
.c-log__glyph--good { color: var(--good); }
.c-log__glyph--bad  { color: var(--bad); }
.c-log__text { color: var(--text); }
.c-log__text b { color: var(--text-bright); font-weight: var(--fw-medium); }
@media (max-width: 40rem) { .c-log__line { grid-template-columns: 1fr; } .c-log__ts { font-size: var(--text-xs); } }