/*
 * Ruled tables: spec table, frequency table, document and software lists,
 * the GB market table.
 *
 * One head: uppercase labels on an ink rule. Rows on hairlines. The key
 * column is 15 in grey, values 16 / 500 in ink (D4). Row padding is the
 * variant's: 17 on the spec table, 24 on document lists, 28 on the frequency
 * table. Two spec tables sit side by side with the 64 gap.
 *
 *   <table class="vdt-table vdt-table--spec">
 *     <thead><tr><th>Specification</th><th>Details</th></tr></thead>
 *     <tbody><tr><th scope="row">Frequencies</th><td>134.2 kHz LF, 865–868 MHz UHF</td></tr></tbody>
 *   </table>
 *
 * Every table that can overflow sits in .vdt-table-wrap so the page never
 * scrolls sideways.
 */

@layer vdt.components {
	.vdt-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.vdt-table-pair {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vdt-space-40) var(--vdt-gap-tables);
		align-items: start;
	}

	.vdt-table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--vdt-size-body-sm);
		line-height: var(--vdt-leading-body-sm);
		color: var(--vdt-text);
	}

	.vdt-table caption {
		text-align: left;
	}

	/* ————————————————————————— Head ————————————————————————— */

	.vdt-table thead th {
		padding: 0 var(--vdt-space-16) var(--vdt-space-12) 0;
		border-bottom: var(--vdt-rule-width) solid var(--vdt-rule);
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-label);
		font-weight: var(--vdt-weight-semibold);
		letter-spacing: var(--vdt-tracking-label);
		line-height: 1.3;
		text-align: left;
		text-transform: uppercase;
		white-space: nowrap;
		vertical-align: bottom;
	}

	/* ————————————————————————— Rows ————————————————————————— */

	.vdt-table tbody th,
	.vdt-table tbody td {
		padding: var(--vdt-space-18) var(--vdt-space-16) var(--vdt-space-18) 0;
		border-bottom: var(--vdt-rule-width) solid var(--vdt-hairline);
		text-align: left;
		vertical-align: top;
	}

	.vdt-table thead th:last-child,
	.vdt-table tbody th:last-child,
	.vdt-table tbody td:last-child {
		padding-right: 0;
	}

	/* The key column: 15 in grey, 200 wide. */
	.vdt-table tbody th {
		width: 12.5rem;
		color: var(--vdt-text);
		font-size: var(--vdt-size-15);
		font-weight: var(--vdt-weight-regular);
	}

	.vdt-table tbody td {
		color: var(--vdt-text-heading);
		font-weight: var(--vdt-weight-medium);
	}

	.vdt-table td.vdt-table__muted,
	.vdt-table .vdt-table__muted {
		color: var(--vdt-text-muted);
		font-weight: var(--vdt-weight-regular);
	}

	.vdt-table td.vdt-table__right,
	.vdt-table th.vdt-table__right {
		text-align: right;
	}

	.vdt-table .vdt-link {
		vertical-align: baseline;
	}

	/* ————————————————————————— Frequency table ————————————————————————— */

	/*
	 * Three columns: group, frequency, characteristics. Rows padded 28; the
	 * group at 32 / 125% in ink, the frequency 16 / 500 in ink, the
	 * characteristics in body grey.
	 */
	.vdt-table--frequency tbody th,
	.vdt-table--frequency tbody td {
		padding-block: var(--vdt-space-28);
	}

	.vdt-table--frequency tbody td:last-child {
		color: var(--vdt-text);
		font-weight: var(--vdt-weight-regular);
	}

	.vdt-table--frequency tbody th {
		width: 12.5rem;
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-32);
		font-stretch: var(--vdt-width-display);
		font-weight: var(--vdt-weight-semibold);
		line-height: 1;
		letter-spacing: var(--vdt-tracking-h3);
	}

	/* ————————————————————————— Document and software lists ————————————————————————— */

	/*
	 * Rows padded 24. Name at 18 / 600 / 112% with a muted description under
	 * it, meta at 15, a Download or external link right. Editable rows (B17).
	 */
	.vdt-table--documents tbody th,
	.vdt-table--documents tbody td {
		padding-block: var(--vdt-space-24);
		vertical-align: middle;
	}

	/* The action column has no head, but the ink rule runs under it all the same. */
	.vdt-table--documents thead td {
		border-bottom: var(--vdt-rule-width) solid var(--vdt-rule);
	}

	.vdt-table--documents .vdt-link {
		white-space: nowrap;
	}

	.vdt-table--documents tbody th {
		width: auto;
	}

	.vdt-table__name {
		display: block;
		color: var(--vdt-text-heading);
		font-size: var(--vdt-size-18);
		font-stretch: var(--vdt-width-sub);
		font-weight: var(--vdt-weight-semibold);
		line-height: var(--vdt-leading-h3);
	}

	.vdt-table__description {
		display: block;
		margin-top: var(--vdt-space-6);
		color: var(--vdt-text-muted);
		font-size: var(--vdt-size-15);
		font-weight: var(--vdt-weight-regular);
	}

	.vdt-table__meta {
		color: var(--vdt-text);
		font-size: var(--vdt-size-15);
		font-weight: var(--vdt-weight-regular);
		white-space: nowrap;
	}

	/* The external glyph after a link row's meta ("Apple App Store"). */
	.vdt-table__meta svg {
		display: inline-block;
		width: var(--vdt-glyph-link);
		height: var(--vdt-glyph-link);
	}

	/* "Opens an external website" key under a software list. */
	.vdt-table__key {
		display: flex;
		align-items: center;
		gap: var(--vdt-space-8);
		margin-top: var(--vdt-space-16);
		color: var(--vdt-text-muted);
		font-size: var(--vdt-size-meta);
	}

	.vdt-table__key svg {
		width: var(--vdt-glyph-link);
		height: var(--vdt-glyph-link);
	}

	/* ————————————————————————— GB market table ————————————————————————— */

	/*
	 * Inside a grey panel padded 48. Two rows 76 tall with a check or cross
	 * glyph, then a highlight row 84 tall in the brand colour that bleeds to
	 * the panel edge. Editable (B5).
	 *
	 *   <div class="vdt-market-panel"><table class="vdt-table vdt-table--market">…<tr class="vdt-table__highlight">…</tr></table></div>
	 */
	.vdt-market-panel {
		padding: var(--vdt-pad-panel);
		background: var(--vdt-surface-alt);
		overflow: hidden;
	}

	.vdt-table--market tbody th,
	.vdt-table--market tbody td {
		height: 4.75rem;
		padding-block: var(--vdt-space-16);
		vertical-align: middle;
	}

	.vdt-table--market tbody th {
		color: var(--vdt-text-heading);
		font-weight: var(--vdt-weight-medium);
	}

	/* An empty first head is a cell, not a head, but the ink rule runs under it all the same. */
	.vdt-table--market thead td {
		border-bottom: var(--vdt-rule-width) solid var(--vdt-rule);
	}

	/* A note under a column head ("England and Wales"), not in capitals. */
	.vdt-table__head-note {
		display: block;
		margin-top: var(--vdt-space-4);
		color: var(--vdt-text-muted);
		font-size: var(--vdt-size-13);
		font-weight: var(--vdt-weight-regular);
		letter-spacing: normal;
		text-transform: none;
	}

	.vdt-table__yes,
	.vdt-table__no {
		display: inline-flex;
		align-items: center;
		gap: var(--vdt-space-8);
	}

	/* The glyph keeps its size when a narrow column wraps the words beside it. */
	.vdt-table__yes svg,
	.vdt-table__no svg {
		flex: none;
	}

	.vdt-table__yes svg { width: var(--vdt-glyph); height: var(--vdt-glyph); color: var(--vdt-purple); }
	.vdt-table__no svg  { width: var(--vdt-glyph); height: var(--vdt-glyph); color: var(--vdt-stroke-faint); }

	.vdt-table__no {
		color: var(--vdt-text-muted);
	}

	.vdt-table--market .vdt-table__highlight th,
	.vdt-table--market .vdt-table__highlight td {
		height: 5.25rem;
		border-bottom: 0;
		background: var(--vdt-purple);
		color: var(--vdt-white);
		box-shadow: calc(var(--vdt-pad-panel) * -1) 0 0 var(--vdt-purple), var(--vdt-pad-panel) 0 0 var(--vdt-purple);
	}

	.vdt-table--market .vdt-table__highlight th {
		padding-left: 0;
	}

	.vdt-table--market .vdt-table__highlight .vdt-table__yes svg {
		color: var(--vdt-white);
	}

	/* ————————————————————————— Mobile ————————————————————————— */

	@media (max-width: 60rem) {
		.vdt-table-pair {
			grid-template-columns: minmax(0, 1fr);
		}

		.vdt-table tbody th {
			width: 8.5rem;
		}

		.vdt-market-panel {
			padding: var(--vdt-pad-compact);
		}

		.vdt-table--market .vdt-table__highlight th,
		.vdt-table--market .vdt-table__highlight td {
			box-shadow: calc(var(--vdt-pad-compact) * -1) 0 0 var(--vdt-purple), var(--vdt-pad-compact) 0 0 var(--vdt-purple);
		}
	}
}