/* ========================================================================================
 * table.css - the kit's data table (L1 component).
 * First consumer: the speaker credentials list (single-anchor_speaker.php).
 *
 * .table            base: full width, small type, left-aligned, hairline rows.
 * .table--compact   tight padding, for long reference lists.
 * .table--striped   alternate tbody rows on the tint ground.
 * .table--stack     below 600px each row becomes a two-line block: the .table__main cell
 *                   on its own line, then .table__sub beside .table__meta. No sideways scroll.
 * .table--flow      a plain list flowed three items per row (equal columns); below 600px
 *                   one item per line.
 * Cell / text parts: .table__main (primary text), .table__sub (secondary text),
 * .table__meta (short trailing value such as a year: muted, no wrap, shrink to fit),
 * .table__caption (a small heading above the table), .table__empty (padding cell).
 * ======================================================================================== */

.table{
	width:100%;border-collapse:collapse;
	font-size:var(--cd-small);line-height:1.45;color:var(--cd-ink);
	border-top:1px solid var(--cd-line);border-bottom:1px solid var(--cd-line);
}
.table th,
.table td{padding:var(--cd-3) var(--cd-4);text-align:left;vertical-align:top;border:0;background:transparent}
.table tbody tr + tr{border-top:1px solid var(--cd-line)}
.table thead th{
	font-size:var(--cd-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--cd-ink-muted);border-bottom:1px solid var(--cd-line-strong);
}
.table__caption{
	caption-side:top;text-align:left;padding:0 0 var(--cd-2);
	font-size:var(--cd-h4);font-weight:800;color:var(--cd-ink-strong);
}
.table__main{color:var(--cd-ink-strong);font-weight:600}
.table__sub{color:var(--cd-ink)}
.table__meta{width:1%;white-space:nowrap;color:var(--cd-ink-muted);font-variant-numeric:tabular-nums}
.table a{color:inherit;text-decoration:underline;text-decoration-color:var(--cd-line-strong);text-underline-offset:3px}
.table a:hover{text-decoration-color:currentColor}
.table a[target="_blank"]::after{content:"\2197";margin-left:.25em;font-weight:400;color:var(--cd-ink-brand)}

.table--compact th,
.table--compact td{padding:calc(var(--cd-1) * 1.5) var(--cd-3)}

.table--striped tbody tr:nth-child(even){background:var(--cd-ground-tint)}

.table--flow{table-layout:fixed}
.table--flow td > span{display:block}
.table--flow .table__main{font-weight:600}
.table--flow .table__sub{color:var(--cd-ink-muted)}

@media (max-width:599px){
	.table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
	.table--stack tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--cd-3);padding:calc(var(--cd-1) * 1.5) var(--cd-3)}
	.table--stack td{display:block;padding:0}
	.table--stack .table__main{grid-column:1 / -1}
	.table--stack .table__meta{width:auto}

	.table--flow,
	.table--flow tbody,
	.table--flow tr,
	.table--flow td{display:block;width:auto}
	.table--flow td + td{border-top:1px solid var(--cd-line)}
	.table--flow .table__empty{display:none}
	.table--flow .table__caption{display:block}
}