/**
 * Glass Performance Data (page 12126), [cardinal_performance_table].
 *
 * Module stylesheet for inc/cardinal-performance-table.php and
 * js/cardinal-performance-table.js, loaded by the performance-table feature
 * in inc/cardinal-assets.php.
 *
 * Most of the table's presentation still lives in Microthemer
 * (wp-content/micro-themes/active-styles.css), style.css and
 * css/cardinal-large-screen.css. Microthemer removes outlines with
 * !important on the tabs, Reset and Print, so the focus rules below are
 * scoped under .cardinal-perf and carry !important to win.
 *
 * Focus ring: a 3px white halo inside a 3px Cardinal Red Deep ring (the
 * DESIGN.md "Accessible Focus" pair). Red on the #E5E5E5 filter bar is about
 * 5:1. The tabs and the chip remove buttons use inset variants (below).
 *
 * Adapt + layout pass (2026-10-28), sections at the end of this file:
 *   - the module sits on the 1140px content shell (1120px inside the
 *     Elementor column padding), so it starts where the H1 and footnotes do;
 *   - 768px and wider: the filter bar is a six-column grid, the table has no
 *     inner scroller and its header sticks under the site header
 *     (--cardinal-perf-sticky-top, set by the script);
 *   - below 768px: the filter group collapses behind the disclosure, the
 *     rows become cards labelled from data-label / data-group, and the sort
 *     controls become one horizontally scrolling strip;
 *   - touch targets: 44px tabs, buttons and fields, 24px slider handles and
 *     32px chips with 44px hit areas.
 * Everything that changes the table itself is screen-only, so the page's
 * own print layout is unchanged (the Print button builds its own table).
 *
 * Library upgrade pass (2026-10-28): DataTables 2.3.8 / Buttons 3.2.6 use
 * dt-* class names. The Microthemer rules written for the 1.x names
 * (.dataTables_wrapper, .dataTables_info, .dataTables_paginate,
 * .paginate_button, .sorting*) no longer match anything, so the ones that
 * shaped this table are carried over in "DataTables 2 parity" below, along
 * with resets for the DataTables 2 defaults that would change the look
 * (layout-row margins, the flex header wrapper, numeric right-alignment, the
 * built-in sort arrows and hover outline, <button> pager styling).
 *
 * Polish pass (2026-10-28), last section: 44px slider wells, IP/SI spacing,
 * hover/active states and short transitions (none under reduced motion),
 * the empty-result row, card title step, group text on the phone sort
 * strip, and print fixes (Microthemer's dark table fill and white cell text).
 *
 * Owner-approved changes (2026-10-29): the phone filter disclosure shows
 * the word "Filters" beside its icon (.cardinal-perf__filter-label; the
 * button keeps its 44px height and look, and the visually hidden
 * "Filter" rule is gone). Microthemer's leftover print rule that filled the
 * table red was removed at the source by
 * deploy/wp-cli/cardinal-performance-table-data.php; the print section's
 * white table fill stays, because Microthemer's screen fill (#212121,
 * !important, not media-scoped) also reaches print.
 *
 * Owner-approved copy pass (2026-10-29), last section: the note, footnotes
 * and glossary link on the light page field above the tabs (DESIGN.md type
 * steps, 38-45rem measure); visible filter labels with the grid aligned on
 * the controls' bottom edge; unit text on the IP/SI switch; the quiet 14px
 * header info buttons (24px targets, above the cell-sized sort control,
 * phone-only group copies on the strip); the white definition popover and
 * code tooltip; the dotted Config code underline and its focus ring; one-line
 * unit group labels on the phone cards; print hides the buttons, popover and
 * tooltip.
 *
 * Owner-approved change (2026-10-29), last section: the note, footnotes and
 * glossary line are one <details> closed by default; the summary keeps the
 * Title-step text with a rotating chevron, a 44px hit area and the module's
 * focus ring; 24px (16px on a phone) to the tabs while closed, 48px / 32px
 * open as before; print shows the contents even when closed.
 */

#example_filter {
	display: none;
}

.cardinal-perf {
	--cardinal-perf-ring: #b91218;
	--cardinal-perf-halo: #fff;
	--cardinal-perf-slab: #212121;
	--cardinal-perf-rule: #5c5c5c;
}

.cardinal-perf__panel[hidden],
.cardinal-perf__chips[hidden] {
	display: none !important;
}

/* Visually hidden captions. Without scrollY DataTables leaves the caption on
   the table; js/cardinal-performance-table.js still guards that it stays the
   table's first child. */
.cardinal-perf .cardinal-perf__caption {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Selects stay one line: no Select2 tags in the field (the chip row below
   the bar lists the active filters); the script writes "N selected". */
.cardinal-perf .glass_size .select2-selection__choice {
	display: none !important;
}

.cardinal-perf .glass_size .select2-selection--multiple .select2-selection__rendered {
	overflow: hidden;
	white-space: nowrap;
}

/* IP/SI: the checkbox stays in the tab order (Microthemer set display:none). */
.cardinal-perf .custom_switch .switch input {
	display: block !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	opacity: 0 !important;
	border: 0 !important;
}

/* ---------- focus ---------- */

.cardinal-perf .tab .tablinks:focus-visible,
.cardinal-perf .table_range_wrap .resetFilter:focus-visible,
.cardinal-perf .table_range_wrap .Print-btn:focus-visible,
.cardinal-perf .custom_switch .switch input:focus-visible + .slider,
.cardinal-perf .table_range_wrap .ui-widget-content .ui-slider-handle:focus-visible,
.cardinal-perf .glass_size .select2-container--focus .select2-selection--multiple,
.cardinal-perf .cardinal-perf__chip-remove:focus-visible,
.cardinal-perf .cardinal-perf__filter-toggle:focus-visible,
.cardinal-perf .dt-paging .dt-paging-button:focus-visible {
	outline: 3px solid var(--cardinal-perf-ring) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--cardinal-perf-halo) !important;
}

/* The tabs sit flush against each other and the top of the bar, so their
   ring goes inside: red on the white or #E5E5E5 tab is about 5:1. */
.cardinal-perf .tab .tablinks:focus-visible {
	outline-offset: -4px !important;
	box-shadow: none !important;
	z-index: 2 !important;
}

/* Chip remove buttons sit inside the dark chip: an inset white ring
   (about 16:1 on #212121). */
.cardinal-perf .cardinal-perf__chip-remove:focus-visible {
	outline: 2px solid var(--cardinal-perf-halo) !important;
	outline-offset: -5px !important;
	box-shadow: none !important;
}

.cardinal-perf .table_range_wrap .ui-widget-content .ui-slider-handle:focus-visible {
	z-index: 3 !important;
}

/* ---------- active-filter chips ---------- */

.cardinal-perf .cardinal-perf__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.cardinal-perf .cardinal-perf__chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	margin: 0;
	padding: 0 0 0 10px;
	background: var(--cardinal-perf-slab);
	border-radius: 3px;
	color: #fff;
	font-family: "muli", "Mulish", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.cardinal-perf .cardinal-perf__chip-label {
	overflow-wrap: anywhere;
}

.cardinal-perf .cardinal-perf__chip-remove,
.cardinal-perf .cardinal-perf__chip-remove:hover,
.cardinal-perf .cardinal-perf__chip-remove:focus {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0 0 0 4px;
	padding: 0;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--cardinal-perf-rule);
	border-radius: 0 3px 3px 0;
	color: #fff;
	cursor: pointer;
	transition: color .15s ease-out;
	position: relative;
}

/* 44px-tall hit area on the 32px chip; the 12px row gap keeps it from
   reaching the next row's chips. */
.cardinal-perf .cardinal-perf__chip-remove::before {
	content: "";
	position: absolute;
	inset: -6px 0;
}

.cardinal-perf .cardinal-perf__chip-remove:hover {
	color: #ffa724;
}

@media (forced-colors: active) {
	.cardinal-perf .cardinal-perf__chip {
		border: 1px solid CanvasText;
	}
}

/* ================================================================
 * Adapt + layout pass (2026-10-28)
 * ================================================================ */

/* ---------- shell: align with the H1 and footnotes ---------- */

.cardinal-perf {
	--cardinal-perf-orange: #ffa724;
	--cardinal-perf-bar: #e5e5e5;
	max-width: 1120px;
	margin-inline: auto;
}

/* Below the 1140px shell the H1 and the footnotes sit 20px in; the
   Elementor column already gives 10px. */
@media (max-width: 1139px) {
	.cardinal-perf {
		padding-inline: 10px;
	}
}

/* ---------- tabs: 44px targets ---------- */

.cardinal-perf .tab .tablinks {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 72px;
	min-height: 44px;
	padding: 0 16px !important;
}

/* ---------- filter controls shared by every width ---------- */

/* One-line labels: "U-Factor:" no longer breaks after the hyphen. */
.cardinal-perf .table_range_wrap .price-range-slider > span {
	flex: none;
	white-space: nowrap;
}

.cardinal-perf .table_range_wrap .price-range-slider .range-value {
	display: none;
}

.cardinal-perf .table_range_wrap .range-bar_wrap {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 64px !important;
}

.cardinal-perf .table_range_wrap .price-range-slider .range_value {
	left: 14px !important;
	font-variant-numeric: tabular-nums;
}

.cardinal-perf .table_range_wrap .price-range-slider .range_value.value_right {
	left: auto !important;
	right: 14px !important;
}

/* Slider handles: 24px marks with a 44px hit area. */
.cardinal-perf .table_range_wrap .ui-widget-content .ui-slider-handle {
	width: 24px !important;
	height: 24px !important;
	margin-left: -12px !important;
	cursor: grab;
	touch-action: none;
}

.cardinal-perf .table_range_wrap .ui-widget-content .ui-slider-handle::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
}

/* IP/SI switch: the 30px track gets a 44px hit area. */
.cardinal-perf .custom_switch .switch::after {
	content: "";
	position: absolute;
	inset: -7px -4px;
}

.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch {
	margin: 0 !important;
}

/* Selects: 44px fields; the "N selected" summary starts where the
   placeholders do (the collapsed search field no longer pushes it right). */
.cardinal-perf .glass_size .select2-container {
	width: 100% !important;
	min-width: 0 !important;
}

.cardinal-perf .table_range_wrap .glass_size .select2-selection--multiple {
	height: 44px !important;
	min-height: 44px;
	margin: 0 !important;
}

.cardinal-perf .glass_size .select2-selection--multiple .select2-selection__rendered {
	padding: 0 11px !important;
}

/* The search line spans the field, so the placeholder never depends on
   Select2 measuring it (it measures zero while the panel or the mobile
   filter group is hidden, and clipped "Airspace" to "Airs"). */
.cardinal-perf .glass_size .select2-search--inline {
	left: 11px;
	right: 11px;
	height: 100% !important;
	align-items: center !important;
}

.cardinal-perf .table_range_wrap .glass_size .select2-selection--multiple .select2-selection__rendered li .select2-search__field {
	width: 100% !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.5;
}

.cardinal-perf .table_range_wrap .glass_size .select2-selection--multiple .select2-selection__rendered li .select2-search__field:has(+ .counter3mm, + .counter6mm) {
	width: 0 !important;
	min-width: 0;
}

.cardinal-perf .select2-search--inline .counter3mm,
.cardinal-perf .select2-search--inline .counter6mm {
	padding: 0 !important;
	line-height: 1.5 !important;
	white-space: nowrap;
}

.cardinal-perf .table_range_wrap .resetFilter,
.cardinal-perf .table_range_wrap .Print-btn {
	min-height: 44px;
}

/* ---------- DataTables 2 parity ---------- */

/* Wrapper: the 1.x .dataTables_wrapper fill (Microthemer). */
.cardinal-perf .temp-table_wrap .dt-container {
	background-color: #e5e5e5 !important;
}

/* Layout rows sit flush, as the 1.x floats did. */
.cardinal-perf .temp-table_wrap .dt-container .dt-layout-row {
	margin: 0 !important;
}

.cardinal-perf .temp-table_wrap .dt-container .dt-layout-row .dt-layout-cell > * {
	margin: 0 !important;
}

.cardinal-perf .temp-table_wrap .dt-container .dt-layout-row .dt-layout-cell.dt-layout-start {
	width: 50%;
}

/* Row rules as 1.x drew them: DataTables 2 drops the first row's top
   border and moves the no-footer rule from the table onto the last row. */
.cardinal-perf .temp-table_wrap .temp-table.dataTable {
	border-bottom: 1px solid rgba(0, 0, 0, .3);
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable > tbody > tr:first-child > td {
	border-top-width: 1px;
	border-top-style: solid;
}

/* "Showing X to Y of Z entries" (Microthemer's .dataTables_info). */
.cardinal-perf .temp-table_wrap .dt-info {
	flex: 1 1 auto;
	padding: 10px 0 10px 20px !important;
	font-weight: 600 !important;
	position: relative !important;
}

/* Header: the title sits in the cell as plain text again (no flex wrapper,
   no right-alignment for numeric columns). */
.cardinal-perf .temp-table_wrap .temp-table.dataTable thead div.dt-column-header {
	display: contents;
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child :is(.dt-orderable-asc, .dt-orderable-desc) {
	position: relative;
	padding: 10px !important;
	text-align: center !important;
}

@media (max-width: 1500px) {
	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child :is(.dt-orderable-asc, .dt-orderable-desc) {
		padding: 5px !important;
		font-size: 11px !important;
	}
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable thead :is(.dt-orderable-asc, .dt-orderable-desc):hover {
	outline: none;
}

/* Sort marks: the 1.x background images, not DataTables 2's arrows. */
.cardinal-perf .temp-table_wrap .dataTable thead :is(.dt-orderable-asc, .dt-orderable-desc) {
	background-image: url(/wp-content/uploads/2025/05/data-table-arrow.png) !important;
	background-repeat: no-repeat !important;
	background-position: center right !important;
}

.cardinal-perf .temp-table_wrap .dataTable thead .dt-ordering-asc {
	background-image: url(/wp-content/uploads/2025/05/sort_asc.png) !important;
}

.cardinal-perf .temp-table_wrap .dataTable thead .dt-ordering-desc {
	background-image: url(/wp-content/uploads/2025/05/sort_desc.png) !important;
}

.cardinal-perf .temp-table_wrap .dataTable thead .dt-column-order::before,
.cardinal-perf .temp-table_wrap .dataTable thead .dt-column-order::after {
	content: none !important;
}

/* Microthemer emptied the 1.x .sorting::before/::after arrows with
   !important. The phone sort strip puts the group text back on its
   Air/Argon controls (see "Polish pass" below). */
.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child :is(.dt-orderable-asc, .dt-orderable-desc)::before,
.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child :is(.dt-orderable-asc, .dt-orderable-desc)::after {
	content: none !important;
}

/* DataTables 2 puts the sort control (tabindex, role="button") on the
   .dt-column-order span instead of the th; it covers the whole cell, so a
   click anywhere sorts and the focus ring outlines the cell as before. */
.cardinal-perf .temp-table_wrap .dataTable thead :is(.dt-orderable-asc, .dt-orderable-desc) .dt-column-order {
	position: absolute !important;
	inset: 0;
	width: auto !important;
	height: auto !important;
}

/* No reset.css halo: it never painted on the 1.x th (collapsed borders),
   but it does on this span. */
.cardinal-perf .temp-table_wrap .dataTable thead .dt-column-order:focus-visible {
	outline: 2px solid var(--cardinal-perf-halo) !important;
	outline-offset: -4px !important;
	box-shadow: none !important;
}

/* Pager (Microthemer's .dataTables_paginate rules), now <button>s. */
.cardinal-perf .temp-table_wrap .dt-paging {
	padding: 8px 20px 0 !important;
	font-family: "muli", Sans-serif !important;
	font-weight: 600 !important;
}

.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button {
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	transition: none;
}

.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button:is(.previous, .next).disabled {
	opacity: .8 !important;
}

.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button:is(.previous, .next),
.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button:is(.previous, .next).disabled,
.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button:is(.previous, .next):hover {
	background: #212121 !important;
	color: #fff !important;
	border-color: transparent !important;
}

.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button.current,
.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button.current:hover {
	background: #fff !important;
	color: #000 !important;
	border: 1px solid #fff !important;
}

.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button:not(.current):hover {
	background: #212121 !important;
	color: #fff !important;
	border-color: transparent !important;
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td {
	font-variant-numeric: tabular-nums;
}

.cardinal-perf .temp-table_wrap .dt-container {
	scroll-margin-top: var(--cardinal-perf-sticky-top, 0px);
}

/* The wrapper takes focus only from script, after a page change on a
   phone; the pager it came from had the visible ring. */
.cardinal-perf .temp-table_wrap .dt-container[tabindex="-1"]:focus {
	outline: none;
}

.cardinal-perf .temp-table_wrap .cardinal-perf--single-page .dt-paging {
	display: none !important;
}

.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0 2px !important;
	padding: 0 10px !important;
	border-radius: 0 !important;
}

/* ---------- 768px and wider ---------- */

@media (min-width: 768px) {
	.cardinal-perf .cardinal-perf__filter-toggle {
		display: none !important;
	}

	.cardinal-perf .table_range_wrap {
		padding: 20px !important;
	}

	/* Six equal columns: three fields on the first row, the two sliders
	   on the second, the switch and Reset/Print on the third. */
	.cardinal-perf .table_range_wrap .options-box {
		display: grid !important;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 16px 24px;
		align-items: center !important;
	}

	.cardinal-perf .table_range_wrap .price-range_wrap {
		display: contents !important;
	}

	.cardinal-perf .table_range_wrap .glass_size {
		grid-column: span 2;
		width: auto !important;
		margin: 0 !important;
	}

	.cardinal-perf .table_range_wrap .price-range-slider {
		grid-column: span 3;
		flex-wrap: nowrap !important;
		width: auto !important;
		margin: 0 !important;
	}

	.cardinal-perf .table_range_wrap .range-bar_wrap {
		width: auto !important;
	}

	.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch {
		grid-column: 1 / span 3;
		grid-row: 3;
		justify-self: start;
	}

	.cardinal-perf .table_range_wrap .button_print {
		grid-column: 4 / span 3;
		grid-row: 3;
		justify-self: end;
		gap: 10px;
		margin: 0 !important;
	}

	.cardinal-perf .table_range_wrap .resetFilter {
		margin: 0 !important;
	}

	.cardinal-perf .table_range_wrap .cardinal-perf__chips {
		margin-top: 16px;
	}
}

/* Wide enough for Reset/Print beside the fields and the switch beside the
   sliders: two rows. */
@media (min-width: 1200px) {
	.cardinal-perf .table_range_wrap .options-box {
		grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
	}

	.cardinal-perf .table_range_wrap .button_print {
		grid-column: 7;
		grid-row: 1;
	}

	.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch {
		grid-column: 7;
		grid-row: 2;
		justify-self: end;
	}
}

/* The table grows with the page; its two header rows stick below the
   site header. One table now, so the group dividers in the first header
   row share the body's column edges. */
@media screen and (min-width: 768px) {
	/* Room for the sort mark, so it never sits on a wrapped label. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child :is(.dt-orderable-asc, .dt-orderable-desc) {
		padding-right: 16px !important;
		background-position: right 3px center !important;
	}

	/* The 14-column 6 MM table only just fits a 768px tablet: tighter
	   cell padding there (the sort mark keeps its own room). */
	@media (max-width: 1023px) {
		.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child :is(.dt-orderable-asc, .dt-orderable-desc) {
			padding: 5px 11px 5px 3px !important;
			background-position: right -3px center !important;
		}

		.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody tr td {
			padding: 5px 3px !important;
		}
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable thead {
		position: sticky;
		top: var(--cardinal-perf-sticky-top, 0px);
		z-index: 2;
		background-color: var(--cardinal-perf-slab) !important;
		/* Its own compositing layer: under the large-screen zoom Chromium
		   otherwise lets scrolled rows paint through the seam between the
		   two header rows. */
		will-change: transform;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr > th:nth-child(n) {
		background-color: var(--cardinal-perf-slab) !important;
	}

	/* A rule under the stuck header, over the rows scrolling beneath it. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child > th:nth-child(n) {
		box-shadow: inset 0 -1px 0 var(--cardinal-perf-rule);
	}
}

/* ---------- below 768px ---------- */

@media (max-width: 767px) {
	/* Bar: the disclosure and Reset/Print share the first row; the filter
	   group opens below them and Reset/Print then follow it, so the focus
	   order matches what is on screen in both states. */
	.cardinal-perf .table_range_wrap {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 12px;
		padding: 12px 16px !important;
	}

	.cardinal-perf .table_range_wrap .options-box {
		display: contents !important;
	}

	.cardinal-perf .cardinal-perf__filter-toggle,
	.cardinal-perf .cardinal-perf__filter-toggle:hover,
	.cardinal-perf .cardinal-perf__filter-toggle:focus {
		grid-column: 1;
		grid-row: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-width: 44px;
		min-height: 44px;
		margin: 0;
		padding: 0 12px;
		background: transparent !important;
		border: 1px solid #000 !important;
		border-radius: 5px;
		color: #000 !important;
		font-family: "muli", "Mulish", Arial, sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		font-variant-numeric: tabular-nums;
		cursor: pointer;
	}

	.cardinal-perf .cardinal-perf__filter-toggle[aria-expanded="true"],
	.cardinal-perf .cardinal-perf__filter-toggle[aria-expanded="true"]:hover,
	.cardinal-perf .cardinal-perf__filter-toggle[aria-expanded="true"]:focus {
		background: var(--cardinal-perf-slab) !important;
		border-color: var(--cardinal-perf-slab) !important;
		color: #fff !important;
	}

	.cardinal-perf .cardinal-perf__filter-count[hidden] {
		display: none;
	}

	.cardinal-perf .table_range_wrap .button_print {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		gap: 8px;
		margin: 0 !important;
	}

	.cardinal-perf .table_range_wrap .resetFilter,
	.cardinal-perf .table_range_wrap .Print-btn {
		width: 88px !important;
		margin: 0 !important;
	}

	.cardinal-perf .table_range_wrap .price-range_wrap {
		display: none !important;
	}

	.cardinal-perf .cardinal-perf--filters-open .price-range_wrap {
		grid-column: 1 / -1;
		grid-row: 2;
		display: flex !important;
		flex-direction: column;
		align-items: stretch !important;
		gap: 12px;
	}

	.cardinal-perf .cardinal-perf--filters-open .button_print {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.cardinal-perf .table_range_wrap .glass_size {
		width: 100% !important;
		margin: 0 !important;
	}

	.cardinal-perf .table_range_wrap .price-range-slider {
		margin: 0 !important;
		gap: 4px;
	}

	.cardinal-perf .table_range_wrap .price-range-slider > span {
		width: 100% !important;
	}

	.cardinal-perf .table_range_wrap .cardinal-perf__chips {
		grid-column: 1 / -1;
		margin: 0;
	}

	/* Microthemer's small-screen .dataTables_info / .dataTables_paginate. */
	.cardinal-perf .temp-table_wrap .dt-container .dt-layout-row .dt-layout-cell.dt-layout-start {
		width: 100%;
	}

	.cardinal-perf .temp-table_wrap .dt-info {
		width: 100% !important;
		text-align: left !important;
	}

	/* 1.x's small-screen pager margin (.5em), over the layout-cell reset. */
	.cardinal-perf .temp-table_wrap .dt-container .dt-layout-row .dt-layout-cell > .dt-paging {
		margin-top: .5em !important;
	}

	.cardinal-perf .temp-table_wrap .dt-paging {
		padding: 8px 20px 20px !important;
	}

	.cardinal-perf .temp-table_wrap .dt-paging nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 4px 0;
	}

	.cardinal-perf .temp-table_wrap .dt-paging {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		float: none !important;
		gap: 4px 0;
		text-align: center !important;
	}

	/* Previous / Next only: twenty page numbers would wrap at this width;
	   the info line above already says which rows are showing. */
	.cardinal-perf .temp-table_wrap .dt-paging {
		justify-content: space-between;
	}

	.cardinal-perf .temp-table_wrap .dt-paging nav {
		flex: 1 1 auto;
	}

	.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button:not(.previous):not(.next),
	.cardinal-perf .temp-table_wrap .dt-paging .ellipsis {
		display: none !important;
	}

	.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button.previous,
	.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button.next {
		min-width: 112px;
		margin: 0 !important;
	}
}

/* Cards. Screen only: a printed page keeps the table. */
@media screen and (max-width: 767px) {
	.cardinal-perf .temp-table_wrap .dt-container {
		overflow: visible !important;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
	}

	/* Sort controls: the header's second row as one strip that scrolls
	   sideways on its own; the group row stays for assistive tech only. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable thead {
		display: block;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--cardinal-perf-rule) transparent;
		border-bottom: 1px solid var(--cardinal-perf-rule);
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:first-child {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child {
		display: flex;
		width: max-content;
		padding: 0 8px;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child th,
	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child :is(.dt-orderable-asc, .dt-orderable-desc) {
		display: flex;
		flex: none;
		align-items: center;
		min-height: 44px;
		padding: 0 26px 0 8px !important;
		border: 0 !important;
		font-size: 13px !important;
		white-space: nowrap;
		background-position: right 8px center !important;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head th.cardinal-perf__group-first::before,
	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head th.cardinal-perf__group-next::before {
		content: attr(data-group) "\00a0";
		position: static;
		display: inline;
		color: #fff;
		font-size: inherit;
		line-height: inherit;
		opacity: 1;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody {
		display: block;
	}

	/* One card per row: Config as the title, then the values three to a
	   row, each under its column header text. Panes and Airspace, Visible
	   Light and each U-value group start their own row. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px 16px;
		padding: 16px;
		border-top: 1px solid var(--cardinal-perf-rule);
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody tr:first-child {
		border-top: 0;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody tr td {
		display: block;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		font-size: 16px;
		line-height: 1.3;
		text-align: left !important;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: var(--cardinal-perf-orange);
		font-size: 12px;
		font-weight: 600;
		line-height: 1.3;
		white-space: pre-line;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.cardinal-perf__config {
		grid-column: 1 / -1;
		order: -1;
		font-size: 18px;
		font-weight: 700;
		overflow-wrap: anywhere;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.cardinal-perf__config::before {
		content: none;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td:nth-child(4),
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.cardinal-perf__group-first {
		grid-column-start: 1;
	}

	/* The cells carry the group text in both units; the table's
	   cardinal-perf--si class picks one (the IP/SI switch). */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.cardinal-perf__group-first::before {
		content: attr(data-group-ip) "\A" attr(data-label);
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable.cardinal-perf--si tbody td.cardinal-perf__group-first::before {
		content: attr(data-group-si) "\A" attr(data-label);
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.cardinal-perf__group-next::before {
		content: "\A" attr(data-label);
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.dt-empty {
		grid-column: 1 / -1;
	}
}

/* ================================================================
 * Polish pass (2026-10-28)
 * ================================================================ */

/* ---------- one control height ---------- */

/* Fields, buttons and tabs are 44px; the slider wells were 33px (36px on a
   phone). They now share the 44px height and the fields' 1px #666 border
   and 4px corner, so each filter row reads as one line of controls. Chips
   stay a 32px tier with 44px hit areas. */
.cardinal-perf .table_range_wrap .range-bar_wrap {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 44px;
	padding-block: 0 !important;
	border: 1px solid #666;
	border-radius: 4px !important;
}

.cardinal-perf .table_range_wrap .range-bar_wrap .range-bar {
	flex: 1 1 auto;
}

.cardinal-perf .table_range_wrap .resetFilter,
.cardinal-perf .table_range_wrap .Print-btn {
	border-radius: 4px !important;
}

/* ---------- IP/SI switch: room between the labels and the track ---------- */

/* Microthemer gave the track 5px each side and the dark knob runs to the
   track's edge, so "IP" read as touching it (and "SI" once switched). */
.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch .switch {
	margin: 0 10px !important;
}

/* ---------- hover, active, transitions ---------- */

/* DESIGN.md: both button variants move to Cardinal Red Deep with white text
   on hover. Microthemer's rules carry !important, so these do too. Hover
   colours apply only where a pointer can hover (2026-10-29): on touch
   screens :hover sticks after a tap and left Reset red. :active still
   gives touch its press feedback. */
.cardinal-perf .table_range_wrap .resetFilter:active,
.cardinal-perf .table_range_wrap .Print-btn:active {
	background-color: var(--cardinal-perf-ring) !important;
	border-color: var(--cardinal-perf-ring) !important;
	color: #fff !important;
}

@media (hover: hover) {
	.cardinal-perf .table_range_wrap .resetFilter:hover,
	.cardinal-perf .table_range_wrap .Print-btn:hover {
		background-color: var(--cardinal-perf-ring) !important;
		border-color: var(--cardinal-perf-ring) !important;
		color: #fff !important;
	}

	/* The inactive tab had no hover state. */
	.cardinal-perf .tab .tablinks:not(.active):hover {
		background-color: #f4f4f4 !important;
	}

	/* Previous / Next: hover only while they can act. */
	.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button:is(.previous, .next):not(.disabled):hover {
		background: var(--cardinal-perf-ring) !important;
	}
}

.cardinal-perf .temp-table_wrap .dt-paging .dt-paging-button.disabled {
	cursor: default;
}

/* reset.css animates every property on every button for .3s and
   Microthemer gives the switch .4s; one short ease-out for colour changes
   and a quicker knob. */
.cardinal-perf .tab .tablinks,
.cardinal-perf .table_range_wrap .resetFilter,
.cardinal-perf .table_range_wrap .Print-btn,
.cardinal-perf .cardinal-perf__filter-toggle {
	transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out !important;
}

.cardinal-perf .custom_switch .switch .slider,
.cardinal-perf .custom_switch .switch .slider::before {
	transition: transform .2s cubic-bezier(.22, 1, .36, 1), background-color .15s ease-out !important;
}

/* The specific selectors repeat so they outrank the rules above. */
@media (prefers-reduced-motion: reduce) {
	.cardinal-perf *,
	.cardinal-perf *::before,
	.cardinal-perf *::after,
	.cardinal-perf .tab .tablinks,
	.cardinal-perf .table_range_wrap .resetFilter,
	.cardinal-perf .table_range_wrap .Print-btn,
	.cardinal-perf .cardinal-perf__filter-toggle,
	.cardinal-perf .custom_switch .switch .slider,
	.cardinal-perf .custom_switch .switch .slider::before {
		transition: none !important;
	}
}

/* ---------- empty result ---------- */

/* DataTables' own "No matching records found" now shows when the filters
   match nothing (it was blanked to ''), on the dark slab like a row. */
.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.dt-empty {
	padding: 16px !important;
	color: #fff;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.dt-empty {
		text-align: left !important;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.dt-empty::before {
		content: none;
	}
}

/* ---------- phone cards and sort strip ---------- */

@media screen and (max-width: 767px) {
	/* The title leads the card: a size step above the 16px values and
	   more room below it than between the label/value rows. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.cardinal-perf__config {
		margin-bottom: 4px;
		font-size: 20px;
		line-height: 1.25;
	}

	/* Show the group text ("U-Factor (IP)", "U-Summer (IP)") on the strip's
	   Air/Argon controls: it is the header's own text, and without it the
	   6 MM strip has two bare "Air" and two bare "Argon" buttons. The cards
	   already label those values the same way. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child th:is(.cardinal-perf__group-first, .cardinal-perf__group-next)::before {
		content: attr(data-group) "\00a0" !important;
	}
}

/* ---------- print (the browser's own print of the page) ---------- */

@media print {
	/* Microthemer's table fill (.temp-table_wrap .temp-table
	   { background-color: #212121 !important }) is not screen-only, so
	   without this the black cell text below would print on near-black
	   whenever background graphics are on. (Its separate print rule that
	   filled the table red was removed from Microthemer on 2026-10-29.) */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable {
		background-color: #fff !important;
	}

	/* Microthemer's white cell text (.temp-table_wrap .temp-table.dataTable
	   tr td, !important) outranks reset.css's print black, so the cells
	   printed white on white. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tr :is(td, th) {
		color: #000 !important;
	}

	/* Controls that do nothing on paper; the fields and chips stay so the
	   page records which filters were applied. */
	.cardinal-perf .table_range_wrap .button_print,
	.cardinal-perf .cardinal-perf__filter-toggle,
	.cardinal-perf .cardinal-perf__chip-remove {
		display: none !important;
	}
}

/* ================================================================
 * Owner-approved copy pass (2026-10-29)
 * ================================================================ */

.cardinal-perf {
	--cardinal-perf-ink: #191919;
	--cardinal-perf-mullion: #121010;
	--cardinal-perf-slate: #5f6161;
	--cardinal-perf-etched: #d8d8d5;
	--cardinal-perf-signal: #ed1c24;
	position: relative;
}

/* ---------- note, footnotes and glossary link above the tabs ---------- */

/* On the light page field, outside the dark slab. DESIGN.md: a Title-step
   label for the note (a styled <p>, so the table is not filed under it in
   the heading outline), Body for the text, Slate Gray for the footnotes,
   held to the 45rem reading measure. */
.cardinal-perf .cardinal-perf__intro {
	max-width: 45rem;
	margin: 0 0 48px;
	color: var(--cardinal-perf-ink);
	font-family: "Mulish", "muli", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

.cardinal-perf .cardinal-perf__intro p {
	margin: 0;
}

.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title {
	margin: 0 0 8px;
	color: var(--cardinal-perf-mullion);
	font-size: clamp(1.25rem, 1.7vw, 1.6rem);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-body {
	/* About 75 characters a line at 17px. */
	max-width: 38rem;
	font-size: 1.0625rem;
	text-wrap: pretty;
}

.cardinal-perf .cardinal-perf__notes {
	margin: 24px 0 0;
	color: var(--cardinal-perf-slate);
}

.cardinal-perf .cardinal-perf__notes ul {
	margin: 0;
	padding: 0 0 0 1.25em;
	list-style: disc;
}

.cardinal-perf .cardinal-perf__notes li {
	margin: 0 0 4px;
	padding-left: 2px;
	color: inherit;
	font-size: 1rem;
	line-height: 1.5;
}

.cardinal-perf .cardinal-perf__intro .cardinal-perf__glossary {
	margin: 16px 0 0;
	color: var(--cardinal-perf-slate);
}

.cardinal-perf .cardinal-perf__glossary a,
.cardinal-perf .cardinal-perf__popover-link {
	color: var(--cardinal-perf-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--cardinal-perf-signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: color .15s ease-out;
}

.cardinal-perf .cardinal-perf__glossary a:hover,
.cardinal-perf .cardinal-perf__popover-link:hover {
	color: var(--cardinal-perf-ring);
}

.cardinal-perf .cardinal-perf__glossary a:focus-visible,
.cardinal-perf .cardinal-perf__popover-link:focus-visible {
	outline: 3px solid var(--cardinal-perf-ring) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--cardinal-perf-halo) !important;
}

/* The footnotes section under the table is gone; keep its 64px before the
   footer. */
.cardinal-perf {
	margin-bottom: 64px;
}

@media (max-width: 767px) {
	.cardinal-perf .cardinal-perf__intro {
		margin-bottom: 32px;
	}
}

/* ---------- filter labels above the fields ---------- */

.cardinal-perf .table_range_wrap .cardinal-perf__label {
	display: block;
	width: auto !important;
	margin: 0 0 6px !important;
	color: var(--cardinal-perf-ink);
	font-family: "muli", "Mulish", Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	cursor: default;
}

.cardinal-perf .table_range_wrap label.cardinal-perf__label {
	cursor: pointer;
}

/* The slider groups stack their label over the 44px well (Microthemer made
   them one flex row with the label on the left). */
.cardinal-perf .table_range_wrap .price-range-slider {
	display: block !important;
}

@media (min-width: 768px) {
	/* Labels make the cells different heights; line the controls up on
	   their bottom edge instead. */
	.cardinal-perf .table_range_wrap .options-box {
		align-items: end !important;
	}

	.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch {
		align-self: center;
	}

	.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch {
		min-height: 44px;
	}
}

/* ---------- IP/SI switch labels with units ---------- */

.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch p {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (min-width: 1200px) {
	.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch {
		align-self: end;
	}
}

@media (max-width: 767px) {
	.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch {
		flex-wrap: wrap;
		row-gap: 8px;
		min-height: 44px;
	}

	.cardinal-perf .table_range_wrap .price-range_wrap .custom_switch p {
		font-size: 15px !important;
	}
}

/* ---------- header info buttons ---------- */

/* A quiet 14px mark after the header text, 24px hit area, above the sort
   control that covers the cell (so it never sorts). */
.cardinal-perf .temp-table_wrap .temp-table.dataTable thead .cardinal-perf__info {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: -4px -4px -4px 0;
	padding: 0;
	vertical-align: middle;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	color: rgba(255, 255, 255, .62) !important;
	line-height: 1;
	cursor: pointer;
	transition: color .15s ease-out !important;
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable thead .cardinal-perf__info svg {
	display: block;
	flex: none;
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable thead .cardinal-perf__info:is(:hover, [aria-expanded="true"]) {
	color: #fff !important;
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable thead .cardinal-perf__info:focus-visible {
	color: #fff !important;
	outline: 2px solid var(--cardinal-perf-halo) !important;
	outline-offset: -2px !important;
	box-shadow: none !important;
}

/* The phone strip's copy of a group button is for phones only. */
.cardinal-perf .temp-table_wrap .temp-table.dataTable thead .cardinal-perf__info--group {
	display: none;
}

@media screen and (max-width: 767px) {
	/* The group header row is visually hidden on a phone; its buttons
	   would be invisible tab stops. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:first-child .cardinal-perf__info {
		display: none;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child th .cardinal-perf__info {
		margin: 0 0 0 2px;
	}

	/* Strip order: group text, its button, the column text, its button. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable .table_head tr:last-child th::before {
		order: -2;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable thead .cardinal-perf__info--group {
		display: inline-flex;
		order: -1;
		margin: 0 6px 0 -2px !important;
	}
}

/* ---------- phone cards: unit text in the group label ---------- */

@media screen and (max-width: 767px) {
	/* "U-Factor (Btu/h·ft²·°F)" is wider than a third of the card. It stays
	   on one line and runs into the next cell's empty first label line
	   (group-next labels start with a blank line), so Air and Argon keep
	   their values level. */
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.cardinal-perf__group-first::before,
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody td.cardinal-perf__group-next::before {
		white-space: pre;
	}
}

/* ---------- IP/SI: both values in each U cell ---------- */

/* Each U-Factor / U-Summer cell holds its IP and SI value; the table's
   cardinal-perf--si class (the switch) shows one, so switching units
   rewrites no cells. The hidden one is display:none, so screen readers and
   the page's own print read only the current unit. */
.cardinal-perf .cardinal-perf__u-si,
.cardinal-perf .cardinal-perf--si .cardinal-perf__u-ip {
	display: none;
}

.cardinal-perf .cardinal-perf--si .cardinal-perf__u-si {
	display: inline;
}

/* ---------- definition popover and code tooltip ---------- */

.cardinal-perf .cardinal-perf__popover,
.cardinal-perf .cardinal-perf__tip {
	position: absolute;
	z-index: 20;
	box-sizing: border-box;
	background: var(--cardinal-perf-halo);
	border: 1px solid var(--cardinal-perf-etched);
	box-shadow: 0 6px 10px rgba(0, 0, 0, .15);
	color: var(--cardinal-perf-ink);
	font-family: "Mulish", "muli", Arial, sans-serif;
	text-align: left;
}

.cardinal-perf .cardinal-perf__popover {
	width: max-content;
	max-width: min(300px, 100%);
	padding: 12px 16px 14px;
	font-size: 14px;
	line-height: 1.45;
}

.cardinal-perf .cardinal-perf__popover-text {
	margin: 0 0 8px;
	text-wrap: pretty;
}

.cardinal-perf .cardinal-perf__popover-link {
	font-size: 14px;
}

.cardinal-perf .cardinal-perf__tip {
	padding: 6px 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
}

.cardinal-perf .cardinal-perf__popover[hidden],
.cardinal-perf .cardinal-perf__tip[hidden],
.cardinal-perf .cardinal-perf__popover-link[hidden],
.cardinal-perf .cardinal-perf__defs[hidden] {
	display: none !important;
}

@media (forced-colors: active) {
	.cardinal-perf .cardinal-perf__popover,
	.cardinal-perf .cardinal-perf__tip {
		border-color: CanvasText;
	}
}

/* ---------- Config codes ---------- */

/* The cell text is unchanged. The dotted underline that marks a code as
   having a name stays hidden at rest (2026-10-29: hundreds of underlined
   rows read as noise) and appears only on the hovered row's codes and on a
   focused code, which also gets the white inset ring the header controls
   use on the slab. */
.cardinal-perf .temp-table_wrap .temp-table.dataTable abbr.cardinal-perf__code {
	color: inherit;
	text-decoration: underline dotted transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: help;
	border: 0;
}

@media (hover: hover) {
	.cardinal-perf .temp-table_wrap .temp-table.dataTable tbody tr:hover abbr.cardinal-perf__code {
		text-decoration-color: rgba(255, 255, 255, .55);
	}
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable abbr.cardinal-perf__code:focus-visible {
	outline: 2px solid var(--cardinal-perf-halo);
	outline-offset: 2px;
	text-decoration-color: #fff;
}

.cardinal-perf .temp-table_wrap .temp-table.dataTable abbr.cardinal-perf__code:focus:not(:focus-visible) {
	outline: none;
}

/* ---------- print ---------- */

@media print {
	.cardinal-perf .cardinal-perf__info,
	.cardinal-perf .cardinal-perf__popover,
	.cardinal-perf .cardinal-perf__tip {
		display: none !important;
	}

	.cardinal-perf .temp-table_wrap .temp-table.dataTable abbr.cardinal-perf__code {
		text-decoration: none;
	}

	.cardinal-perf .cardinal-perf__intro {
		max-width: none;
	}
}

/* ---------- empty selects: no placeholder, a chevron (2026-10-29) ---------- */

/* The visible label names each field, so an empty field is blank. Select2's
   multiple selection has no arrow of its own; a chevron marks the field as
   a list you open (it is part of the selection box, so clicking it opens
   the list), and the summary text keeps clear of it. */
.cardinal-perf .table_range_wrap .glass_size .select2-selection--multiple {
	position: relative;
	cursor: pointer;
}

.cardinal-perf .table_range_wrap .glass_size .select2-selection--multiple::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--cardinal-perf-ink);
	border-bottom: 2px solid var(--cardinal-perf-ink);
	transform: rotate(45deg);
	pointer-events: none;
	transition: transform .15s ease-out;
}

.cardinal-perf .table_range_wrap .glass_size .select2-container--open .select2-selection--multiple::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}

.cardinal-perf .glass_size .select2-selection--multiple .select2-selection__rendered {
	padding-right: 36px !important;
}

.cardinal-perf .glass_size .select2-search--inline {
	right: 36px;
}

@media (forced-colors: active) {
	.cardinal-perf .table_range_wrap .glass_size .select2-selection--multiple::after {
		border-color: CanvasText;
	}
}

/* ================================================================
 * "How to read this table" disclosure (owner approved, 2026-10-29)
 * ================================================================ */

/* The note, footnotes and glossary line are one native <details>, closed
   on every load. The summary keeps the Title step and Mullion colour of the
   former <p>; a chevron (the select chevron's 8px / 2px mark) points down
   closed and up open. 44px tall, sized to its text so the hit area is the
   label and the chevron, not the whole measure. */
.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title {
	display: flex;
	align-items: center;
	gap: 16px;
	width: fit-content;
	min-height: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
	transition: color .15s ease-out;
}

.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title::-webkit-details-marker {
	display: none;
}

.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin: -4px 4px 0 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .15s ease-out, margin .15s ease-out;
}

.cardinal-perf .cardinal-perf__intro[open] > .cardinal-perf__intro-title::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title:hover {
	color: var(--cardinal-perf-ring);
}

.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title:focus-visible {
	outline: 3px solid var(--cardinal-perf-ring) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px var(--cardinal-perf-halo) !important;
}

/* The 44px summary already leaves room under the label; the note follows
   at the former 8px step. */
.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-body {
	margin-top: 2px;
}

/* Closed, the summary belongs to the tabs below it: 24px (the scale's
   step under the 48px the open block keeps). */
.cardinal-perf .cardinal-perf__intro:not([open]) {
	margin-bottom: 24px;
}

@media (max-width: 767px) {
	.cardinal-perf .cardinal-perf__intro:not([open]) {
		margin-bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title,
	.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title::after {
		transition: none !important;
	}
}

@media (forced-colors: active) {
	.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title::after {
		border-color: CanvasText;
	}
}

/* Print shows everything even when the block is closed on screen (the
   script also opens it on beforeprint). Chromium 131+ hides closed content
   through ::details-content, which other browsers do not parse, so it has a
   rule of its own; the child rule covers browsers that hide the children. */
@media print {
	.cardinal-perf .cardinal-perf__intro:not([open]) > * {
		display: block !important;
	}

	.cardinal-perf .cardinal-perf__intro:not([open]) > .cardinal-perf__intro-title {
		display: flex !important;
	}

	.cardinal-perf .cardinal-perf__intro,
	.cardinal-perf .cardinal-perf__intro:not([open]) {
		margin-bottom: 32px;
	}

	.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title {
		min-height: 0;
		margin-bottom: 8px;
	}

	.cardinal-perf .cardinal-perf__intro .cardinal-perf__intro-title::after {
		content: none;
	}
}

@media print {
	.cardinal-perf .cardinal-perf__intro::details-content {
		content-visibility: visible;
		display: block;
	}
}