/*
 * compatibility.css — styling for the [jtp_compatibility] matrix table.
 * Scoped under .jtp-compat, uses the canonical --jta-* design tokens, no !important.
 * Loaded only on the page that contains the shortcode (see jtp-compatibility mu-plugin).
 */

.jtp-compat {
	font-family: var(--jta-font);
	font-weight: var(--jta-font-weight-body);
	color: var(--jta-text);
	background: var(--jta-surface);
	border: 1px solid var(--jta-border-soft);
	border-radius: var(--jta-radius-lg);
	padding: clamp(18px, 3vw, 30px);
}

/* ---------------- controls ---------------- */

.jtp-compat-controls {
	display: flex;
	flex-direction: column;
	gap: var(--jta-space-4);
	margin-bottom: var(--jta-space-5);
}

.jtp-compat-search-wrap {
	display: inline-flex;
	align-items: center;
	gap: var(--jta-space-3);
	font-size: var(--jta-text-sm);
	font-weight: 500;
	color: var(--jta-muted);
}
.jtp-compat input.jtp-compat-search {
	font: inherit;
	font-weight: var(--jta-font-weight-body);
	color: var(--jta-ink);
	background: var(--jta-surface-soft);
	border: 1px solid var(--jta-border);
	border-radius: var(--jta-radius-pill);
	padding: 10px 18px;
	min-width: min(280px, 70vw);
	transition: box-shadow var(--jta-transition), border-color var(--jta-transition);
}
.jtp-compat input.jtp-compat-search:focus {
	outline: none;
	border-color: var(--jta-primary);
	box-shadow: var(--jta-focus-ring);
}

.jtp-compat-filter {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.jtp-compat-filter legend {
	padding: 0;
	margin-bottom: var(--jta-space-2);
	font-size: var(--jta-text-xs);
	font-weight: 500;
	color: var(--jta-muted);
}
.jtp-compat-filter > label,
.jtp-compat-discont-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 8px 8px 0;
	padding: 6px 14px;
	font-size: 12.5px;
	line-height: 1.2;
	color: var(--jta-text);
	background: var(--jta-surface);
	border: 1px solid var(--jta-border);
	border-radius: var(--jta-radius-pill);
	cursor: pointer;
	transition: border-color var(--jta-transition), background var(--jta-transition);
}
.jtp-compat-filter > label:hover,
.jtp-compat-discont-wrap:hover { border-color: var(--jta-soft); }

/* native checkbox visually hidden but focusable; the label is the chip */
.jtp-compat-filter > label input,
.jtp-compat-discont-wrap input {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}
.jtp-compat-filter > label:has(input:checked),
.jtp-compat-discont-wrap:has(input:checked) {
	background: var(--jta-primary);
	border-color: var(--jta-primary);
	color: var(--jta-ink);
	font-weight: 500;
}
.jtp-compat-filter > label:has(input:focus-visible),
.jtp-compat-discont-wrap:has(input:focus-visible) {
	outline: none;
	box-shadow: var(--jta-focus-ring);
}

.jtp-compat-discont-wrap { align-self: flex-start; }

.jtp-compat-count {
	margin: 0;
	font-size: 12.5px;
	color: var(--jta-muted);
}

/* ---------------- table ---------------- */

.jtp-compat-scroll {
	border: 1px solid var(--jta-border-soft);
	border-radius: var(--jta-radius-md);
	overflow: hidden;
}
@media (max-width: 820px) {
	.jtp-compat-scroll { overflow-x: auto; }
	.jtp-compat-table { min-width: 760px; }
}
.jtp-compat-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	table-layout: fixed;
	font-size: 13.5px;
}
.jtp-compat-table .jtp-compat-col-comm { width: 128px; white-space: normal; }
.jtp-compat-table .jtp-compat-col-central { white-space: normal; padding: 9px 5px; }
.jtp-compat-table thead th.jtp-compat-col-central { font-size: 11.5px; line-height: 1.2; }
.jtp-compat-table caption {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}
.jtp-compat-table th,
.jtp-compat-table td {
	padding: 11px 14px;
	box-sizing: border-box;
	text-align: center;
	white-space: nowrap;
	border-bottom: 1px solid var(--jta-border-soft);
}

/* header row — sticky to top of the scroll box */
.jtp-compat-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--jta-surface);
	color: var(--jta-muted);
	font-weight: 500;
	font-size: 12.5px;
	border-bottom: 1px solid var(--jta-border);
}
.jtp-compat-table thead th.jtp-compat-col-name { z-index: 4; }

/* product column — sticky to the left edge; inherits the row background so zebra/hover show */
.jtp-compat-table th.jtp-compat-col-name,
.jtp-compat-table td.jtp-compat-col-name {
	position: sticky;
	left: 0;
	z-index: 2;
	text-align: left;
	width: 220px;
	white-space: normal;
	font-weight: var(--jta-font-weight-body);
	background: inherit;
}

/* rows: two-tone zebra + brand hover; cells are transparent so the row colour shows through */
.jtp-compat-table tbody tr.jtp-compat-row { background: var(--jta-surface); }
.jtp-compat-table tbody tr.jtp-compat-row:nth-child(even) { background: var(--jta-surface-soft); }
.jtp-compat-table tbody tr.jtp-compat-row:hover { background: var(--jta-primary-soft); }

.jtp-compat-table td.jtp-compat-col-name a {
	color: var(--jta-ink);
	text-decoration: none;
	font-weight: 500;
}
.jtp-compat-table td.jtp-compat-col-name a:hover { text-decoration: underline; }

/* compatibility marks — green glyph only, on the row's own background (no fill) */
.jtp-compat-cell-yes { color: var(--jta-success); font-weight: 600; font-size: 15px; }
.jtp-compat-cell-no { color: var(--jta-soft); }

/* badges */
.jtp-compat-badge {
	display: inline-block;
	font-size: var(--jta-text-2xs);
	line-height: 1.4;
	border-radius: var(--jta-radius-pill);
	padding: 2px 9px;
	margin: 1px 2px;
}
.jtp-compat-badge-comm { background: var(--jta-surface-muted); color: var(--jta-text); }
.jtp-compat-badge-discont { background: var(--jta-danger-bg); color: var(--jta-danger); font-weight: 500; }

/* discontinued rows: muted */
.jtp-compat-table tr.is-discontinued td,
.jtp-compat-table tr.is-discontinued th.jtp-compat-col-name { color: var(--jta-soft); }
.jtp-compat-table tr.is-discontinued td.jtp-compat-col-name a { color: var(--jta-soft); font-weight: 400; }

/* sortable header button */
.jtp-compat-sort {
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--jta-ink);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.jtp-compat-sort::after {
	content: "↕";
	font-size: var(--jta-text-2xs);
	color: var(--jta-soft);
}
.jtp-compat-table th[aria-sort="ascending"] .jtp-compat-sort::after { content: "↑"; color: var(--jta-ink); }
.jtp-compat-table th[aria-sort="descending"] .jtp-compat-sort::after { content: "↓"; color: var(--jta-ink); }

.jtp-compat-error {
	padding: var(--jta-space-5);
	color: var(--jta-muted);
	background: var(--jta-surface-soft);
	border-radius: var(--jta-radius-md);
}

@media (prefers-reduced-motion: reduce) {
	.jtp-compat * { transition: none; }
}