/**
 * Category Tabs — theme skin.
 *
 * Applied via block style: sparklestock/category-tabs (see f32_get_block_asset_list).
 *
 * This file sets custom properties and almost nothing else. The block ships its own
 * neutral layout; repainting it by setting the properties it documents keeps the two
 * files from competing, and means a plugin update that changes internal markup does
 * not silently drop theme styling on the floor.
 *
 * Not wrapped in a cascade layer, deliberately. WordPress serialises author layout
 * choices as unlayered `.wp-container-…-is-layout-…` rules, and an unlayered rule
 * beats a layered one at any specificity — so a layered file here would lose to
 * markup it cannot see. This is the same trap documented in docs/work-board.md.
 */

.wp-block-sparklestock-category-tabs {
	--ss-tabs-gap: 0;
	--ss-tabs-item-padding: 0.72rem 1.05rem;
	--ss-tabs-item-gap: 0.45rem;
	--ss-tabs-color: var(--wp--preset--color--muted, #6b7280);
	--ss-tabs-color-hover: var(--wp--preset--color--primary, #000);
	--ss-tabs-color-active: var(--wp--preset--color--primary, #000);
	--ss-tabs-font-weight: 500;
	--ss-tabs-font-weight-active: 600;
	--ss-tabs-indicator: var(--wp--preset--color--primary, #000);
	/*
	 * Hover draws the same 2px bar the active tab draws, in a lighter grey. The
	 * block reserves the space for it either way, so this costs no layout - and it
	 * replaces the link underline that theme.json used to put here, which competed
	 * with the indicator instead of previewing it.
	 */
	--ss-tabs-indicator-hover: var(--wp--preset--color--border-strong, #d1d5db);
	--ss-tabs-indicator-size: 2px;
	--ss-tabs-count-size: 0.72rem;
	--ss-tabs-count-bg: var(--wp--preset--color--subtle, #f5f5f5);
	--ss-tabs-count-color: #9ca3af;
	/*
	 * `sm`, not the 5px that used to be here. The count is a chip, the account
	 * nav's count is the same chip, and account.css:351 already argued this and
	 * asked for the change in this file rather than copying the literal into
	 * that one. 5px was a number no token names.
	 */
	--ss-tabs-count-radius: var(--wp--custom--border-radius--sm, 4px);
	--ss-tabs-arrow-bg: var(--wp--preset--color--contrast, #fff);
	--ss-tabs-focus: var(--wp--preset--color--accent, #1473e6);

	/*
	 * Browse panel - a `surface.popover`, and the token exists because of this.
	 *
	 * This panel and the header search's suggestion list are the same object:
	 * a floating box over the page. Both carried radius 12px and both carried
	 * the shadow `0 14px 38px rgba(0,0,0,.16)` - the search skin as a literal,
	 * this file by letting the block default stand. Two files agreed by
	 * coincidence, and nothing held them there. They now read one token, so the
	 * next edit moves both or neither.
	 *
	 * `md` and not `lg`, because the block derives the panel's children from
	 * this value: the filter input is `calc(radius - 4px)` and each link is
	 * `calc(radius - 5px)`. At `md` those land on 4px and 3px, the small end of
	 * the scale. At `lg` they land on 12px and 11px, and 11px is a number no
	 * token names and this file cannot correct. `lg` is also taken - it means
	 * card, and a dropdown is not a card.
	 *
	 * `surface.popover` carries no `line`. Its two consumers need a bare colour
	 * where `surface.object.line` is a `1px solid ...` shorthand, and they do
	 * not agree on the colour: this panel is border-subtle, the search is
	 * border-strong because that border belongs to a control. A token nothing
	 * could read would be shape for its own sake.
	 */
	--ss-tabs-panel-bg: var(--wp--custom--surface--popover--fill, #fff);
	--ss-tabs-panel-border: var(--wp--preset--color--border-subtle, #e0e0e0);
	--ss-tabs-panel-radius: var(--wp--custom--surface--popover--radius, 8px);
	--ss-tabs-panel-shadow: var(
		--wp--custom--surface--popover--shadow,
		0 14px 38px rgba(0, 0, 0, 0.16)
	);
	/*
	 * That shadow is `--wp--preset--shadow--popover`, one step above `lg`. The
	 * scale stopped at `lg` (0 8px 24px), which is a resting card - nothing on
	 * it described a surface that floats over the page. The preset was added for
	 * the same reason `surface.popover` was: the thing existed, and no token
	 * named it.
	 */
	--ss-tabs-link-hover-bg: var(--wp--preset--color--subtle, #f5f5f5);
	--ss-tabs-filter-bg: var(--wp--preset--color--contrast, #fff);
	--ss-tabs-mark-bg: var(--wp--preset--color--price, #d1fae5);

	font-size: 0.875rem;
}

/*
 * The active tab's count inverts to the price green, which is the one palette
 * colour already used on this site to mean "this is the number that matters".
 */
.wp-block-sparklestock-category-tabs__item.is-active
	.wp-block-sparklestock-category-tabs__count {
	background: var(--wp--preset--color--price, #d1fae5);
	color: #065f46;
}

/*
 * Focus has to be visible on a strip whose items carry no border and no background.
 * Offset inward: an outward ring on a horizontally scrolling row is clipped by the
 * scroller on the first and last item.
 */
.wp-block-sparklestock-category-tabs__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #1473e6);
	outline-offset: -3px;
	border-radius: 3px;
}

/*
 * The panel's counts sit against a white card rather than the strip's grey band, so
 * they carry the same pill the tabs use and inherit the same muted colour. Named
 * through the panel so the tabs' own active-count inversion above is untouched.
 */
.wp-block-sparklestock-category-tabs__panel
	.wp-block-sparklestock-category-tabs__count {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}