/**
 * Workbench table — the shared data table.
 *
 * One table across the group's sites, for the job a table is actually for:
 * comparing things across columns. A list of records with an action each
 * belongs in `wb-list` instead, and the two share one set of values so a
 * page carrying both looks like one page.
 *
 * Those values come from the account console (Mibble's operational list),
 * which is the most-used table the group runs: a hairline between rows and
 * nothing else — no card, no zebra, no column shading — a quiet header, a
 * 15px row with a 13px muted second line, and a faint tint on hover.
 *
 * Enqueue the `wb-table` handle and put `wb-table` on the <table>. Every
 * colour and the row density come from custom properties, so a site can
 * retune it without forking the rules.
 *
 * Modifiers:
 *   .wb-table--compact   tighter rows, for a table inside a panel or modal
 *   .wb-table--stacked   rows become cards on phones, each cell labelled
 *   .wb-table--quiet     no hover tint, for a table that is not clickable
 *
 * Parts (optional, shared with wb-list so a row reads the same either way):
 *   .wb-table__identity  thumbnail + name + subtitle, for the first cell
 *   .wb-table__meta      the muted second line inside any cell
 *   .wb-table__tag       an outlined pill, for a badge on a row
 *   .wb-table__action    a quiet action link at the end of a row
 */

.wb-table {
	--wb-table-label: #1f1f1f;
	--wb-table-value: #5c5c5c;
	--wb-table-meta: #6b6b6b;
	--wb-table-rule: #e6e6e6;
	--wb-table-hover: color-mix(in srgb, #1f1f1f 4%, #fff);
	--wb-table-press: color-mix(in srgb, #1f1f1f 8%, transparent);
	--wb-table-motion: 110ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--wb-table-cell-y: 12px;
	--wb-table-cell-x: 16px;
	--wb-table-row: 72px;
	--wb-table-size: 15px;
	--wb-table-meta-size: 13px;
	--wb-table-thumb: 48px;
	--wb-table-radius: 8px;

	width: 100%;
	border-collapse: collapse;
	color: var(--wb-table-label);
	font-size: var(--wb-table-size);
	text-align: left;
}

.wb-table th,
.wb-table td {
	padding:
		var(--wb-table-cell-y) var(--wb-table-cell-x)
		var(--wb-table-cell-y) 0;
	border: 0;
	border-bottom: 1px solid var(--wb-table-rule);
	color: var(--wb-table-value);
	text-align: left;
	vertical-align: middle;
}

/*
 * A row is 64px: two lines of text, or a picture sized to sit inside that
 * rather than stretch it — the same row the shared list draws.
 *
 * The header is a label for the column, not a heading on the page: quiet,
 * small and the same weight as a row's own label.
 */
.wb-table thead th {
	padding-top: 10px;
	padding-bottom: 10px;
	color: var(--wb-table-meta);
	font-size: var(--wb-table-meta-size);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* A row's own label: the first cell, or any <th> inside the body. */
.wb-table tbody th {
	color: var(--wb-table-label);
	font-weight: 600;
	vertical-align: middle;
}

.wb-table tbody tr {
	height: var(--wb-table-row);
	transition: background-color var(--wb-table-motion);
}

.wb-table tbody tr:hover {
	background: var(--wb-table-hover);
}

.wb-table--quiet tbody tr:hover {
	background: transparent;
}

.wb-table tbody tr:last-child th,
.wb-table tbody tr:last-child td {
	border-bottom: 0;
}

.wb-table a {
	color: inherit;
}

.wb-table--compact {
	--wb-table-cell-y: 10px;
	--wb-table-cell-x: 16px;
	--wb-table-row: 52px;
}

/*
 * A record's identity: its picture, its name, and what it is called when
 * that differs — a plant's botanical name, a product's code. The same
 * three parts as a wb-list row, so a product looks the same in either.
 */
.wb-table__identity {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.wb-table__thumb {
	display: block;
	flex: none;
	overflow: hidden;
	width: var(--wb-table-thumb);
	height: var(--wb-table-thumb);
	border-radius: var(--wb-table-radius);
	object-fit: cover;
}

/* A thumbnail is often a span around an <img>: round them together. */
.wb-table__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}

.wb-table__thumb--empty {
	background: currentcolor;
	opacity: 0.12;
}

/* The text beside the picture: it takes the room the cell has. */
.wb-table__identity-text {
	flex: 1;
	min-width: 0;
}

.wb-table__name {
	display: block;
	color: var(--wb-table-label);
	font-weight: 600;
}

.wb-table__identity:hover .wb-table__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * The muted second line: what the record is called when that differs, what
 * it is made of, a badge about it. A row is two lines — a name and this —
 * so whatever goes in here sits on one line beside its neighbours.
 */
.wb-table__meta,
.wb-table__identity em {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	color: var(--wb-table-meta);
	font-size: var(--wb-table-meta-size);
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
}

.wb-table__identity em {
	font-style: italic;
}

.wb-table__tag {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border: 1px solid var(--wb-table-rule);
	border-radius: 999px;
	color: var(--wb-table-value);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.wb-table a.wb-table__action,
.wb-table button.wb-table__action {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wb-table-label);
	font-family: inherit;
	font-size: var(--wb-table-meta-size);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--wb-table-motion);
}

.wb-table a.wb-table__action:hover,
.wb-table button.wb-table__action:hover {
	background: var(--wb-table-press);
	color: var(--wb-table-label);
}

/*
 * A wide table on a narrow screen: scroll it, rather than crushing the
 * columns. Wrap the table in .wb-table-wrap.
 */
.wb-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Stacked: each row becomes a card, every cell labelled by its column.
 * Give each cell a data-label to carry the heading down with it.
 */
@media (max-width: 781px) {

	.wb-table--stacked,
	.wb-table--stacked tbody,
	.wb-table--stacked tr,
	.wb-table--stacked th,
	.wb-table--stacked td {
		display: block;
		width: 100%;
	}

	.wb-table--stacked thead {
		display: none;
	}

	.wb-table--stacked tbody tr {
		height: auto;
		padding: 12px 0;
		border-bottom: 1px solid var(--wb-table-rule);
	}

	.wb-table--stacked tbody tr:last-child {
		border-bottom: 0;
	}

	.wb-table--stacked th,
	.wb-table--stacked td {
		padding: 4px 0;
		border-bottom: 0;
	}

	.wb-table--stacked td[data-label]::before {
		content: attr(data-label) ": ";
		color: var(--wb-table-label);
		font-weight: 600;
	}
}