/**
 * Titula - tables.
 *
 * Loaded only when table enhancement is enabled.
 *
 * There is no bare `table { }` rule anywhere in this file. Styling applies to
 * `.acaart-pad-table`, a class the plugin adds during the DOM pass, so tables
 * outside the article - and tables inside an excluded module - keep the
 * theme's own appearance.
 *
 * Horizontal scrolling lives on `.acaart-pad-table-wrapper` only. Nothing is
 * applied to `html` or `body`, so a wide table can never make the page scroll.
 */

.acaart-pad-article .acaart-pad-table-wrapper {
	margin-block: 1.9em;
	max-inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--acaart-border);
	border-radius: var(--acaart-radius);
	box-shadow: var(--acaart-shadow);
	scrollbar-width: thin;
}

/* Only a wrapper that really scrolls gets the edge hint. */
.acaart-pad-article .acaart-pad-table-wrapper.is-scrollable {
	background:
		linear-gradient(to right, var(--acaart-background) 30%, rgba(255, 255, 255, 0)) left center,
		linear-gradient(to left, var(--acaart-background) 30%, rgba(255, 255, 255, 0)) right center;
	background-repeat: no-repeat;
	background-size: 28px 100%;
	background-attachment: local, local;
}

.acaart-pad-article .acaart-pad-table {
	inline-size: 100%;
	margin: 0;
	border-collapse: collapse;
	background: var(--acaart-background);
	font-size: 0.95rem;
}

.acaart-pad-article .acaart-pad-table th,
.acaart-pad-article .acaart-pad-table td {
	padding-inline: 1em;
	padding-block: 0.75em;
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid var(--acaart-border);
}

.acaart-pad-article .acaart-pad-table thead th {
	background: var(--acaart-surface);
	color: var(--acaart-primary);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	border-block-end: 2px solid var(--acaart-border);
}

.acaart-pad-article .acaart-pad-table tbody tr:last-child td {
	border-block-end: 0;
}

.acaart-pad-article .acaart-pad-table.is-zebra tbody tr:nth-child(even) {
	background: var(--acaart-surface);
}

.acaart-pad-article .acaart-pad-table.is-hoverable tbody tr {
	transition: background-color 0.15s ease;
}

.acaart-pad-article .acaart-pad-table.is-hoverable tbody tr:hover {
	background: var(--acaart-surface);
}

/* Sticky header, for long tables. */
.acaart-pad-article .acaart-pad-table.is-sticky-header thead th {
	position: sticky;
	inset-block-start: 0;
	z-index: 2;
}

/* Sticky first column: inset-inline-start follows the reading direction. */
.acaart-pad-article .acaart-pad-table.is-sticky-first th:first-child,
.acaart-pad-article .acaart-pad-table.is-sticky-first td:first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	background: var(--acaart-background);
	font-weight: 600;
	border-inline-end: 1px solid var(--acaart-border);
}

.acaart-pad-article .acaart-pad-table.is-sticky-first.is-zebra tbody tr:nth-child(even) td:first-child {
	background: var(--acaart-surface);
}

.acaart-pad-article .acaart-pad-table.is-sticky-first thead th:first-child {
	z-index: 3;
	background: var(--acaart-surface);
}

/* --------------------------------------------------------------------------
 * Type-specific behaviour
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-table--specs td + td,
.acaart-pad-article .acaart-pad-table--pricing td + td,
.acaart-pad-article .acaart-pad-table--comparison td + td {
	font-variant-numeric: tabular-nums;
}

.acaart-pad-article .acaart-pad-table--specs td:first-child,
.acaart-pad-article .acaart-pad-table--comparison td:first-child {
	inline-size: 34%;
	color: var(--acaart-muted);
	font-weight: 600;
}

.acaart-pad-article .acaart-pad-table--travel td:first-child,
.acaart-pad-article .acaart-pad-table--schedule td:first-child {
	color: var(--acaart-primary);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
 * Presets
 * ----------------------------------------------------------------------- */

.acaart-pad-article .acaart-pad-table--preset-minimal {
	font-size: 0.94rem;
}

.acaart-pad-article .acaart-pad-table--preset-minimal thead th {
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.9rem;
	border-block-end: 1px solid var(--acaart-border);
}

.acaart-pad-article .acaart-pad-table--preset-minimal th,
.acaart-pad-article .acaart-pad-table--preset-minimal td {
	padding-inline: 0.75em;
	padding-block: 0.6em;
}

.acaart-pad-article .acaart-pad-table--preset-elegant thead th {
	background: transparent;
	color: var(--acaart-accent);
	font-size: 0.74rem;
	letter-spacing: 0.14em;
	border-block-end: 1px solid var(--acaart-accent);
}

.acaart-pad-article .acaart-pad-table--preset-elegant th,
.acaart-pad-article .acaart-pad-table--preset-elegant td {
	padding-block: 0.95em;
}

.acaart-pad-article .acaart-pad-table--preset-technology {
	font-size: 0.92rem;
}

.acaart-pad-article .acaart-pad-table--preset-technology th,
.acaart-pad-article .acaart-pad-table--preset-technology td {
	padding-inline: 0.9em;
	padding-block: 0.62em;
}

.acaart-pad-article .acaart-pad-table--preset-technology.acaart-pad-table--comparison th:not(:first-child),
.acaart-pad-article .acaart-pad-table--preset-technology.acaart-pad-table--comparison td:not(:first-child) {
	text-align: center;
}

.acaart-pad-article .acaart-pad-table--preset-travel thead th {
	letter-spacing: 0.08em;
}

@media (max-width: 640px) {
	.acaart-pad-article .acaart-pad-table {
		font-size: 0.9rem;
	}

	.acaart-pad-article .acaart-pad-table th,
	.acaart-pad-article .acaart-pad-table td {
		padding-inline: 0.8em;
		padding-block: 0.65em;
	}

	.acaart-pad-article .acaart-pad-table--specs td:first-child,
	.acaart-pad-article .acaart-pad-table--comparison td:first-child {
		inline-size: auto;
		min-inline-size: 8em;
	}
}

/* ==========================================================================
 * Colour
 *
 * Every colour here is derived from the tokens the plugin already resolved
 * from the site, using colour-mix so a table picks up the theme's own palette
 * instead of imposing a second one. A table in a warm editorial theme comes
 * out warm; the same markup in a cool one comes out cool.
 *
 * The alpha values are deliberately low. Table shading exists to help the eye
 * track a row across the page, and it does that best when it is barely
 * noticeable. Strong zebra striping fights the text for attention and makes a
 * table harder to read, not easier.
 * ========================================================================== */

.acaart-pad-article .acaart-pad-table {
	--acaart-table-head-bg: color-mix(in srgb, var(--acaart-primary) 7%, transparent);
	--acaart-table-head-text: var(--acaart-heading);
	--acaart-table-line: color-mix(in srgb, var(--acaart-border) 85%, transparent);
	--acaart-table-zebra: color-mix(in srgb, var(--acaart-primary) 3%, transparent);
	--acaart-table-hover: color-mix(in srgb, var(--acaart-accent) 6%, transparent);
	--acaart-table-accent: var(--acaart-accent);
}

/*
 * Browsers without colour-mix fall back to these first. The custom properties
 * above override them wherever colour-mix is supported, so no feature query is
 * needed and nothing renders colourless on an older browser.
 */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.acaart-pad-article .acaart-pad-table {
		--acaart-table-head-bg: rgba(0, 0, 0, 0.04);
		--acaart-table-line: var(--acaart-border);
		--acaart-table-zebra: rgba(0, 0, 0, 0.02);
		--acaart-table-hover: rgba(0, 0, 0, 0.03);
	}
}

.acaart-pad-article .acaart-pad-table thead th {
	background: var(--acaart-table-head-bg);
	color: var(--acaart-table-head-text);
	border-block-end: 2px solid var(--acaart-table-accent);
}

.acaart-pad-article .acaart-pad-table th,
.acaart-pad-article .acaart-pad-table td {
	border-block-end: 1px solid var(--acaart-table-line);
}

.acaart-pad-article .acaart-pad-table.is-zebra tbody tr:nth-child(even) {
	background: var(--acaart-table-zebra);
}

.acaart-pad-article .acaart-pad-table.is-hoverable tbody tr:hover {
	background: var(--acaart-table-hover);
}

/* The last row needs no rule; the wrapper edge already closes the table. */
.acaart-pad-article .acaart-pad-table tbody tr:last-child td {
	border-block-end: 0;
}

/* ==========================================================================
 * Stacked layout
 *
 * On a narrow screen each row becomes a card and each cell shows the heading
 * of its own column beside the value. A three-column table becomes three
 * readable blocks rather than three columns squeezed to nothing.
 *
 * The alternative approach - hiding columns below a breakpoint - is not used
 * here. It makes the table fit by giving the phone reader less information
 * than the desktop reader, which is a strange thing for a plugin to decide on
 * a publisher's behalf.
 *
 * The heading text comes from data-acaart-label, written onto each cell during
 * processing. Where a table has no header row, or a cell spans columns, no
 * label is written and the cell simply stacks without one.
 * ========================================================================== */

@media (max-width: 640px) {
	.acaart-pad-article .acaart-pad-table.is-stackable {
		display: block;
		inline-size: 100%;
		border-collapse: separate;
		border-spacing: 0;
	}

	.acaart-pad-article .acaart-pad-table.is-stackable thead {
		/*
		 * Hidden visually, kept for assistive technology: the header row still
		 * describes the table even though its text now appears per cell.
		 */
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.acaart-pad-article .acaart-pad-table.is-stackable tbody,
	.acaart-pad-article .acaart-pad-table.is-stackable tr,
	.acaart-pad-article .acaart-pad-table.is-stackable td,
	.acaart-pad-article .acaart-pad-table.is-stackable th {
		display: block;
		inline-size: auto;
	}

	.acaart-pad-article .acaart-pad-table.is-stackable tbody tr {
		margin-block-end: 0.9rem;
		border: 1px solid var(--acaart-table-line);
		border-radius: var(--acaart-radius);
		background: var(--acaart-background);
		overflow: hidden;
	}

	.acaart-pad-article .acaart-pad-table.is-stackable.is-zebra tbody tr:nth-child(even) {
		background: var(--acaart-background);
	}

	.acaart-pad-article .acaart-pad-table.is-stackable tbody tr:last-child {
		margin-block-end: 0;
	}

	/*
	 * The first cell of each row acts as the card heading. In a specs or
	 * comparison table that is the row label, which is exactly the line a
	 * reader needs to identify the card.
	 */
	.acaart-pad-article .acaart-pad-table.is-stackable tbody td:first-child,
	.acaart-pad-article .acaart-pad-table.is-stackable tbody th[scope="row"] {
		padding-block: 0.7em;
		padding-inline: 0.9em;
		border-block-end: 1px solid var(--acaart-table-line);
		background: var(--acaart-table-head-bg);
		font-weight: 700;
		line-height: 1.4;
		color: var(--acaart-table-head-text);
		text-align: start;
		/* A row label can be a full sentence; it should wrap, not overflow. */
		overflow-wrap: break-word;
	}

	.acaart-pad-article .acaart-pad-table.is-stackable tbody td:first-child::before,
	.acaart-pad-article .acaart-pad-table.is-stackable tbody th[scope="row"]::before {
		content: none;
	}

	.acaart-pad-article .acaart-pad-table.is-stackable tbody td {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4em 1em;
		align-items: baseline;
		justify-content: space-between;
		padding-block: 0.6em;
		padding-inline: 0.9em;
		border-block-end: 1px solid var(--acaart-table-line);
		text-align: start;
	}

	.acaart-pad-article .acaart-pad-table.is-stackable tbody tr td:last-child {
		border-block-end: 0;
	}

	/*
	 * The column heading, printed from the attribute written during
	 * processing. It is set quieter and smaller than the value: the value is
	 * what the reader came for, and a label competing with it at the same
	 * weight makes every row read twice.
	 */
	.acaart-pad-article .acaart-pad-table.is-stackable tbody td[data-acaart-label]::before {
		content: attr(data-acaart-label);
		flex: 0 1 auto;
		max-inline-size: 45%;
		color: var(--acaart-muted);
		font-size: 0.82em;
		font-weight: 600;
		line-height: 1.5;
		text-align: start;
	}

	/*
	 * The value sits opposite the label and keeps the end edge, so a column of
	 * numbers still lines up down the card even though the labels beside them
	 * vary in length.
	 */
	.acaart-pad-article .acaart-pad-table.is-stackable tbody td[data-acaart-label] {
		text-align: end;
	}

	/*
	 * When either side is long, wrapping to two lines beats squeezing both.
	 * The label returns to the start edge and the value follows underneath.
	 */
	.acaart-pad-article .acaart-pad-table.is-stackable tbody td[data-acaart-label] > * {
		min-inline-size: 0;
	}

	/*
	 * A stacked table no longer scrolls sideways, so the scroll affordances
	 * and the sticky column would only get in the way.
	 *
	 * The wrapper carries its own class rather than using :has(), which is not
	 * yet safe to rely on in the browsers this plugin still supports.
	 */
	.acaart-pad-article .acaart-pad-table-wrapper.is-stackable {
		overflow: visible;
		border: 0;
		/*
		 * The scroll shadow is a cue that there is more table off-screen. In a
		 * stacked table there is not, so leaving it would promise something
		 * that is not there.
		 */
		background: none;
		box-shadow: none;
	}

	.acaart-pad-article .acaart-pad-table.is-stackable.is-sticky-first td:first-child,
	.acaart-pad-article .acaart-pad-table.is-stackable.is-sticky-header thead th {
		position: static;
	}
}