/*
 * Daily trade tables ([grain_contracts], [trades_table], [bids_offers_table]) in the Field edition
 * table style: ruled rows on paper, an ink rule above and below the head. Wide tables scroll inside
 * their figure; on phones each row stacks as label and value pairs.
 */

.jg-trades {
	margin-block: 16px 24px;
}

.jg-trades__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.jg-trades__scroll:focus-visible {
	outline: 2px solid var(--jg-navy, #084976);
	outline-offset: 2px;
}

.jg-trades table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	font-family: var(--jg-sans, system-ui, sans-serif);
	font-size: var(--jg-text-small, 0.9375rem);
	font-variant-numeric: lining-nums;
	line-height: 1.4;
}

.jg-trades th,
.jg-trades td {
	padding: 10px 16px 10px 0;
	border: 0;
	text-align: left;
	vertical-align: baseline;
}

.jg-trades thead th {
	border-top: 1px solid var(--jg-ink, #13202b);
	border-bottom: 1px solid var(--jg-ink, #13202b);
	font-weight: 600;
	white-space: nowrap;
}

.jg-trades tbody tr {
	border-bottom: 1px solid var(--jg-rule, #d5d1c8);
}

.jg-trades tbody th {
	font-weight: 600;
}

/* Dates, prices and amounts stay on one line; the table scrolls instead. */
.jg-trades :is(.jg-trades__date, .jg-trades__created, .jg-trades__begin, .jg-trades__end, .jg-trades__price, .jg-trades__volume, .jg-trades__quantity) {
	white-space: nowrap;
}

.jg-trades tbody td {
	color: var(--jg-ink-2, #3d4954);
}

/* In an edition the body is six of twelve columns: a table runs on to the right edge (nine). */
@media (min-width: 1200px) {
	.jg-edition__body > .jg-trades:not(.jg-trades--notice) {
		width: calc(150% + var(--jg-gutter, 32px) / 2);
		max-width: none;
	}
}

.jg-trades--notice {
	margin-block: 8px 16px;
}

.jg-trades__detail {
	color: #a33a1f;
}

@media (max-width: 599px) {
	.jg-trades table {
		min-width: 0;
	}

	.jg-trades thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.jg-trades table,
	.jg-trades tbody,
	.jg-trades tr,
	.jg-trades th,
	.jg-trades td {
		display: block;
	}

	.jg-trades tbody tr {
		padding: 12px 0;
	}

	.jg-trades tbody tr:first-child {
		border-top: 1px solid var(--jg-ink, #13202b);
	}

	.jg-trades tbody th {
		padding: 0 0 6px;
		font-size: 1rem;
	}

	.jg-trades tbody td {
		display: grid;
		white-space: normal;
		grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
		gap: 12px;
		padding: 2px 0;
	}

	.jg-trades tbody td::before {
		content: attr(data-label);
		color: var(--jg-ink, #13202b);
		font-weight: 600;
	}
}