/*
	Spec Sheet.

	ZERO dark-context rules. Every color is mixed from --text-heading or --link,
	both of which css/layout.css re-declares per context, so the hairlines, the
	group bands and the sub-headings follow whatever band the sheet lands on with
	no .zebra-dark fork (the .outline button reasoning). A wash is never mixed
	from a SURFACE token — --surface-light on .zebra-light is invisible, which is
	the bug css/layout.css records twice.

	Real <table> markup, so mobile is a focusable scroll container rather than a
	display:block restack: a restack throws away the row/column association,
	which on a specification is the entire content.

	Nothing here dims a value. A specification is read, not skimmed, and the
	theme's own finding from transformation.module applies — recession is done
	with SURFACE, never by putting text under the contrast floor. The only muted
	thing on the sheet is the em dash standing in for a value the datasheet does
	not state, and it carries a screen-reader word so the meaning does not depend
	on seeing it.

	IT IS DELIBERATELY THE QUIETEST BLOCK ON ITS PAGE (owner, 2026-08-12: make
	the table "smaller and less prominent/colorful"). The sheet is REFERENCE
	sitting near the end of a page whose job is done by the bands above it — a
	reader arrives here having already decided to look something up. So the type
	runs a step down from body copy, the padding is tight, and the whole sheet
	spends NO brand color: the group bands, the group marks and the model notes
	all mix from --text-heading, where they used to fill from --link and made
	sixty rows of reference read as loudly as the argument.

	Its band is a .pd-split-band on all three call sites — heading left, sheet
	right — which is also what makes the table narrower than the page. Anything
	tuned here should be checked at that width, not at full container width.
*/

vpm-spec-sheet {
	display: block;
}

vpm-spec-sheet .ss-scroll {
	overflow-x: auto;
}

vpm-spec-sheet .ss-scroll:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 4px;
}

vpm-spec-sheet table {
	width: 100%;
	/* Scales with the column count for the same reason comparison-table's does:
		a flat floor tuned against two columns crushes three long before it
		scrolls. A one-model sheet is label + value and needs no floor worth
		speaking of. Tuned against the SPLIT BAND's narrower body column, not the
		full container. */
	min-width: calc(240px + var(--ss-cols, 1) * 170px);
	border-collapse: collapse;
	font-size: var(--fs-sm);
	text-align: left;
}

/* ---------------------------------------------------------------
	Model header.

	Deliberately NOT position: sticky. A sticky header has to be opaque
	or the rows scroll visibly through it, and there is no token meaning
	"the surface of the band I am on" — css/product.css, flow-steps and
	/platform/technology all record that same gap. Painting one would
	mean a .zebra-dark fork, and flow-steps' mark is the theme's one
	unavoidable context flip; a second is not worth a convenience.
	The group bands already re-orient a reader every few rows, and every
	value carries its own row label, so nothing is actually lost.
	--------------------------------------------------------------- */

vpm-spec-sheet thead th {
	padding: var(--space-xs) var(--space-sm);
	vertical-align: bottom;
	border-bottom: 1px solid color-mix(in srgb, var(--text-heading) 24%, transparent);
}

vpm-spec-sheet .ss-model-label {
	display: block;
	font-size: var(--fs-base);
	font-weight: var(--fw-heading);
	color: var(--text-heading);
	line-height: var(--lh-tight);
}

/* The model number sits under its name as a quiet caption, NOT in --link: a
	column header is not a destination, and blue here was the loudest thing on a
	sheet that should be the page's quietest block. */
vpm-spec-sheet .ss-model-note {
	display: block;
	margin-top: var(--space-xxs);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--text-heading) 62%, transparent);
}

/* ---------------------------------------------------------------
	Group bands. The sheet's navigation: eight of these are what turn
	sixty rows into something a reader can scan.
	--------------------------------------------------------------- */

/* NO FILL. It shipped for one afternoon as a filled gray band and the owner
	killed it on sight — "I hate these dark headings… this is very ugly and
	doesn't fit the rest of the page at all". He was right: this page separates
	every other section with type and a hairline, so eight stacked slabs down the
	quietest block on it read as a different design.

	What separates a group now is AIR ABOVE IT and a rule under its title — the
	same idiom css/news.css uses for its year groups and css/row-list.css for its
	rows. The rule is heavier than a row hairline (28% against 8%) because it
	closes a heading rather than divides two values. */
vpm-spec-sheet .ss-group-row th {
	/* Same inline padding as a row, so the heading's first letter sits on the
		same axis as every label beneath it. */
	padding: var(--space-xl) var(--space-sm) var(--space-xs);
	border-bottom: 1px solid color-mix(in srgb, var(--text-heading) 28%, transparent);
	vertical-align: bottom;
}

/* The first group sits directly under the model header, which has already put a
	rule and its own space there. */
vpm-spec-sheet .ss-group:first-child .ss-group-row th {
	padding-top: var(--space-md);
}

/* ---- the group toggle ----
	The control is a CHECKBOX because a table may not contain a <details> (see
	module.html), and it is labeled ONLY by the link under the rows: a heading
	that silently toggles, with a chevron a table-width away from its own words,
	read as decoration that did nothing. Visually hidden by the clip-path
	technique, NEVER display:none or visibility:hidden: either would take it out
	of the tab order and off the accessibility tree, which is the whole reason
	this is a real form control. */
vpm-spec-sheet .ss-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	vpm-spec-sheet .ss-more-caret {
		transition: transform var(--duration-base) var(--ease-standard);
	}
}

/* ---- the collapse itself ----
	The tail of every group is hidden until its own checkbox is checked. The
	quota is computed in HubL (the third VALUE row, sub-headings not counted
	against it) so the CSS only has to honor one class.

	display, not opacity or height: a table row cannot be tweened by height, and
	an opacity-hidden row would still occupy its space, which is the entire
	complaint being answered. Restoring `table-row` rather than `revert` because
	these rows have no other display to revert to. */
vpm-spec-sheet .ss-extra {
	display: none;
}

vpm-spec-sheet .ss-group:has(.ss-toggle:checked) .ss-extra {
	display: table-row;
}

/* NO :has(), NO COLLAPSE. Everywhere else in the theme a :has() interaction is
	decoration and an engine without it simply loses the interaction; here it
	would leave two thirds of a SPECIFICATION permanently unreachable, since the
	reveal rule is the only thing that can undo the hide. So the fallback is the
	fully expanded sheet — the state this module shipped in — with the affordance
	and the carets removed rather than left pointing at nothing. */
@supports not selector(:has(*)) {
	vpm-spec-sheet .ss-extra {
		display: table-row;
	}

	vpm-spec-sheet .ss-more-row {
		display: none;
	}
}

/* A printed or PDF'd sheet is COMPLETE — the one place the collapse would cost
	a reader something it cannot give back. */
@media print {
	vpm-spec-sheet .ss-extra {
		display: table-row;
	}

	vpm-spec-sheet .ss-more-row {
		display: none;
	}
}

/* ---- the expand affordance ----
	The second label for the same checkbox, so a reader who has scrolled past the
	heading does not have to go back up to it. It reads as a link (hard rule 6:
	--link color, visible hover) because it behaves like one. */
vpm-spec-sheet .ss-more-row td {
	padding: 0 var(--space-sm) var(--space-xs);
	border-top: 1px solid color-mix(in srgb, var(--text-heading) 8%, transparent);
}

vpm-spec-sheet .ss-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xxs);
	padding: var(--space-xs) 0;
	color: var(--link);
	cursor: pointer;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
}

vpm-spec-sheet .ss-more:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

vpm-spec-sheet .ss-more-caret {
	width: var(--caret-size);
	height: var(--caret-size);
	border-right: var(--caret-weight) solid currentColor;
	border-bottom: var(--caret-weight) solid currentColor;
	transform: var(--caret-down);
}

/* One rule swaps the wording, the way .pd-switch lights its active label with
	one rule: the closed word shows until the box is checked, then the open one. */
vpm-spec-sheet .ss-more-close,
vpm-spec-sheet .ss-group:has(.ss-toggle:checked) .ss-more-open {
	display: none;
}

vpm-spec-sheet .ss-group:has(.ss-toggle:checked) .ss-more-close {
	display: inline;
}

vpm-spec-sheet .ss-group:has(.ss-toggle:checked) .ss-more-caret {
	transform: var(--caret-up);
}

/* The glyph carries no chip and no fill of its own — at this size a filled tile
	per group was eight colored blocks running down the sheet. It is currentColor
	ink beside its title, set back so the WORD leads. */
/* NO GROUP ICON. It rendered one glyph per group and they were eight marks of
	pure decoration on the block that is supposed to be the page's quietest —
	struck with the filled band (owner, 2026-08-12). The `icon` field is left in
	fields.json and the call sites still pass one; nothing reads it. Delete those
	parameters whenever those templates are next open.

	The title carries the group on its own, so it is a real heading size — a step
	ABOVE body copy rather than the step below that the rows take. */
vpm-spec-sheet .ss-group-title {
	color: var(--text-heading);
	font-size: var(--fs-h5);
	font-weight: var(--fw-heading);
	line-height: var(--lh-tight);
}

/* Sub-heading inside a group — the block labels a datasheet already uses.
	It recedes by WEIGHT and tracking against the group title above it, and by
	surface against the plain rows below it; it is not dimmed. */
vpm-spec-sheet .ss-sub-row th {
	padding: var(--space-sm) var(--space-sm) var(--space-xxs);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--text-heading) 75%, transparent);
}

/* ---------------------------------------------------------------
	Rows.
	--------------------------------------------------------------- */

vpm-spec-sheet .ss-row > * {
	padding: var(--space-xs) var(--space-sm);
	border-top: 1px solid color-mix(in srgb, var(--text-heading) 8%, transparent);
	line-height: 1.5;
	vertical-align: top;
}

vpm-spec-sheet .ss-row:hover > * {
	/* Mixed from --text-heading, never a surface token: a wash mixed from
		--surface-light is invisible on the band that paints it. */
	background-color: color-mix(in srgb, var(--text-heading) 4%, transparent);
}

vpm-spec-sheet .ss-label {
	width: 34%;
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
}

vpm-spec-sheet .ss-value {
	color: var(--text-body);
	font-variant-numeric: tabular-nums;
}

/* A value that is true of every model spans them, and gets NO other treatment.
	It was briefly set back a few percent to mark it as shared; that both
	contradicted the no-dimming rule above and made the majority of a family
	sheet — most rows are shared — quietly lower contrast than the minority. The
	span itself already says it. */

vpm-spec-sheet .ss-blank {
	color: var(--text-muted);
}

vpm-spec-sheet .ss-note-row td {
	padding: var(--space-xxs) var(--space-sm) var(--space-sm);
	font-size: var(--fs-xs);
	color: var(--text-body);
}

vpm-spec-sheet .ss-footnote {
	margin: var(--space-md) 0 0;
	font-size: var(--fs-xs);
	color: var(--text-body);
}

/* ---------------------------------------------------------------
	Motion. One fade per GROUP, not per row: a sixty-row stagger would
	still be arriving after the reader has started reading, and the
	groups are the unit the eye actually takes in. Everything runs off
	the shared observer via data-reveal — no per-module observer.
	--------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.js-reveal vpm-spec-sheet .ss-group-title {
		opacity: 0;
		transform: translateY(6px);
		transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
	}

	vpm-spec-sheet .ss-group.is-inview .ss-group-title {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------
	Small screens. The table scrolls rather than restacking, but the
	padding and the label column both come in so the scroll is short.
	--------------------------------------------------------------- */

@media (max-width: 767px) {
	vpm-spec-sheet .ss-row > *,
	vpm-spec-sheet .ss-group-row th,
	vpm-spec-sheet thead th {
		padding-left: var(--space-xs);
		padding-right: var(--space-xs);
	}

	vpm-spec-sheet .ss-label {
		width: 40%;
	}

	vpm-spec-sheet .ss-group-row th {
		padding-top: var(--space-lg);
	}
}

/* FLUSH EDGES. Cell padding is inside the table, so with it the first letter of
	every label sat a cell-padding in from the band's own axis while the accordion
	in the next band started flush — two blocks in the same column, on two
	different left edges. The outermost cells give up their outer padding and the
	table now shares an axis with its neighbor exactly. Applies to the spanning
	group and sub-heading cells too, since those are also :first-child.

	IT MUST BE THE LAST PADDING RULE IN THE FILE. Every selector that sets cell
	padding here — the rows, the group headings, the sub-headings, the model
	header, the affordance, and the phone overrides — computes to the same
	specificity as this one, so the only thing deciding the winner is source
	order. Placed above them it silently lost, and the labels sat a cell-padding
	off the axis they were supposed to share. */
vpm-spec-sheet tr > *:first-child {
	padding-left: 0;
}

vpm-spec-sheet tr > *:last-child {
	padding-right: 0;
}