/**
 * Spec / price / history tables. Token consumers: Table Styles (Ch. 13,
 * Phase 7) inject per-style values via [data-style] custom-property blocks;
 * these are the neutral defaults. Mobile default = stacked mode (§13.4:
 * no horizontal scroll, ever).
 */

.cpms-spec-table,
.cpms-price-table,
.cpms-price-history {
	--cpms-header-bg: var(--cpms-c-surface-alt);
	--cpms-header-text: var(--cpms-c-text);
	--cpms-row-alt-bg: color-mix(in srgb, var(--cpms-c-surface-alt) 50%, transparent);
	--cpms-cell-pad-y: 10px;
	--cpms-cell-pad-x: 14px;

	margin-block-end: calc(var(--cpms-space, 8px) * 3);
}

.cpms-spec-table__section {
	border: 1px solid var(--cpms-c-border);
	border-radius: var(--cpms-radius);
	margin-block-end: var(--cpms-space, 8px);
	overflow: hidden;
	background: var(--cpms-c-surface);
}

.cpms-spec-table__section-head {
	padding: var(--cpms-cell-pad-y) var(--cpms-cell-pad-x);
	background: var(--cpms-header-bg);
	color: var(--cpms-header-text);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.cpms-spec-table__section-head::-webkit-details-marker {
	display: none;
}

.cpms-spec-table__table,
.cpms-price-table__table,
.cpms-price-history__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--cpms-c-surface);
}

.cpms-spec-table__table th,
.cpms-spec-table__table td,
.cpms-price-table__table th,
.cpms-price-table__table td,
.cpms-price-history__table th,
.cpms-price-history__table td {
	padding: var(--cpms-cell-pad-y) var(--cpms-cell-pad-x);
	border-block-end: 1px solid var(--cpms-c-border);
	text-align: start;
	vertical-align: top;
}

.cpms-spec-table__label {
	width: 38%;
	color: var(--cpms-c-muted);
	font-weight: 500;
}

.cpms-spec-table__table tr:nth-child(even),
.cpms-price-table__table tbody tr:nth-child(even) {
	background: var(--cpms-row-alt-bg);
}

.cpms-price-table__row--primary .cpms-price-table__amount {
	color: var(--cpms-c-accent);
	font-size: 1.1em;
	font-weight: 700;
}

.cpms-price-table__updated {
	color: var(--cpms-c-muted);
	font-size: 0.85em;
}

.cpms-price-history__chart canvas {
	width: 100%;
	max-width: 100%;
}

.cpms-price-history__data summary {
	cursor: pointer;
	color: var(--cpms-c-accent);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Stacked mobile transformation (§13.4 default) */

@media (max-width: 600px) {
	.cpms-spec-table__table tr {
		display: block;
		padding: var(--cpms-cell-pad-y) var(--cpms-cell-pad-x);
		border-block-end: 1px solid var(--cpms-c-border);
	}

	.cpms-spec-table__table th,
	.cpms-spec-table__table td {
		display: block;
		width: auto;
		border: 0;
		padding: 0;
	}

	.cpms-spec-table__label {
		font-size: 0.8em;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}
}