/**
 * Mobile "More filters" overflow group.
 *
 * Overflow filters (`.tvc-of`) are hidden when the WCPT wrapper does
 * NOT have `data-tvc-more="open"`. Tapping the toggle flips that attr
 * and reveals the rest in document order.
 *
 * The device state is propagated from `.wcpt-table-scroll-wrapper-outer`
 * (where WCPT applies `wcpt-device-phone`) up to the WCPT root via a
 * `data-tvc-device="phone"` attribute set by the JS. Selectors here
 * target that propagated attribute, not the WCPT class, so they don't
 * depend on WCPT marking the root. (Qodo PR #143 /review pass 1.)
 *
 * The toggle button styling matches WCPT's existing button language
 * (rounded pill, theme-color background) so it doesn't read as
 * out-of-place chrome.
 */

[data-wcpt-table-id][data-tvc-device="phone"] .wcpt-filter.tvc-of {
	display: none !important;
}

[data-wcpt-table-id][data-tvc-device="phone"][data-tvc-more="open"] .wcpt-filter.tvc-of {
	display: block !important;
}

[data-wcpt-table-id] .tvc-more-toggle {
	display: none;
}

[data-wcpt-table-id][data-tvc-device="phone"] .tvc-more-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	width: 100%;
	margin: 0.5em 0;
	padding: 0.6em 1em;
	background: var(--tvc-more-bg, #f4f5f7);
	color: var(--tvc-more-fg, #2c3338);
	border: 1px solid var(--tvc-more-border, #cdd1d8);
	border-radius: 999px;
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease;
}

[data-wcpt-table-id][data-tvc-device="phone"] .tvc-more-toggle:hover,
[data-wcpt-table-id][data-tvc-device="phone"] .tvc-more-toggle:focus-visible {
	background: var(--tvc-more-bg-hover, #e9ecf1);
	border-color: var(--tvc-more-border-hover, #aab0bb);
}

[data-wcpt-table-id][data-tvc-device="phone"] .tvc-more-toggle:focus-visible {
	outline: 2px solid var(--tvc-more-focus, #2271b1);
	outline-offset: 2px;
}

[data-wcpt-table-id][data-tvc-device="phone"][data-tvc-more="open"] .tvc-more-toggle::before {
	content: "−";
	font-size: 1.1em;
	line-height: 1;
}

[data-wcpt-table-id][data-tvc-device="phone"]:not([data-tvc-more="open"]) .tvc-more-toggle::before {
	content: "+";
	font-size: 1.1em;
	line-height: 1;
}