/* Kits primitives (Phase 11 B.2): one component per role. Values come from tokens only:
   v4.2 (--s-*, --r-*/--radius-*, --fluid-*, --opacity-*) and the semantic --kit-* tokens a child theme overrides.
   Rules for every interactive primitive: visible focus ring (--kit-focus-width), hover only where hover exists,
   disabled = --opacity-disabled + aria-disabled, targets at least --kit-size-target, reduced motion = opacity only. */

/* ---------- text for screen readers only ---------- */
.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { clip-path: none; height: auto; width: auto; margin: 0; padding: var(--s-2) var(--s-3); z-index: var(--kit-z-overlay); background: var(--kit-color-raised); color: var(--kit-color-ink); }

/* ---------- shared focus ---------- */
:is(.kit-chip, .wp-block-post-terms a, .kit-filter-pill, .kit-btn, .kit-segment button, .kit-filter-active button, .kit-field :is(input, select, textarea), .kit-checkbox input, .kit-filter-sheet > summary):focus-visible {
	outline: var(--kit-focus-width) solid var(--kit-color-focus);
	outline-offset: var(--kit-focus-offset);
}

/* ---------- 1. Tag: static metadata, not interactive ---------- */
.kit-tag {
	display: inline-flex; align-items: center; gap: var(--s-1);
	min-height: 1.75rem; padding: 0 var(--s-2);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--kit-color-ink) 6%, transparent); color: var(--kit-color-text);
	font-size: var(--fluid-label); font-weight: var(--kit-weight-regular); line-height: 1.2;
	cursor: default;
}
.kit-tag--accent { background: var(--kit-color-accent); color: var(--kit-color-on-accent); box-shadow: none; }
.kit-tag--ink { background: var(--kit-color-ink); color: var(--kit-color-on-ink); box-shadow: none; }
.kit-tag--success { background: var(--kit-color-success-soft); color: var(--kit-color-success); }
.kit-tag--warning { background: var(--kit-color-warning-soft); color: var(--kit-color-warning); }
.kit-tag--danger { background: var(--kit-color-danger-soft); color: var(--kit-color-danger); }
.kit-tag--info { background: var(--kit-color-info-soft); color: var(--kit-color-info); }
.kit-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }

/* ---------- 2. Link chip: a tag that navigates (also category links from the core post-terms block) ---------- */
.kit-chip, .wp-block-post-terms a {
	position: relative;
	display: inline-flex; align-items: center;
	min-height: 1.75rem; padding: 0 var(--s-2);
	border-radius: var(--radius-sm);
	background: color-mix(in srgb, var(--kit-color-ink) 6%, transparent); color: var(--kit-color-ink);
	border: 0;
	font-size: var(--fluid-label); font-weight: var(--kit-weight-regular);
	text-decoration: none;
	transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), border-color var(--kit-motion-fast) var(--kit-motion-ease);
}
.kit-chip::after, .wp-block-post-terms a::after { content: ""; position: absolute; inset: calc((var(--s-8) - var(--kit-size-target)) / 2) 0; } /* 44px hit area */
.kit-chip:visited, .wp-block-post-terms a:visited { color: var(--kit-color-ink); }
.kit-chip:active { background: color-mix(in srgb, var(--kit-color-ink) 16%, transparent); }
@media (hover: hover) { :is(.kit-chip, .wp-block-post-terms a):hover { background: color-mix(in srgb, var(--kit-color-ink) 12%, transparent); text-decoration: underline; text-underline-offset: 2px; } }
.kit-chip--on-ink { background: color-mix(in srgb, var(--kit-color-on-ink) 12%, transparent); color: var(--kit-color-on-ink); }
.kit-chip--on-ink:visited { color: var(--kit-color-on-ink); }
@media (hover: hover) { .kit-chip--on-ink:hover { background: color-mix(in srgb, var(--kit-color-on-ink) 12%, transparent); border-color: var(--kit-color-on-ink); } }

/* ---------- 3. Filter pill: toggles a filter value ---------- */
.kit-filter-pill {
	display: inline-flex; align-items: center; gap: var(--s-2);
	min-height: var(--kit-size-target); padding: 0 var(--s-4);
	border-radius: var(--radius-full);
	border: 1px solid var(--kit-color-line); background: var(--kit-color-raised); color: var(--kit-color-ink);
	font: inherit; font-size: var(--fluid-body-sm); font-weight: var(--kit-weight-medium);
	text-decoration: none; cursor: pointer;
	transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), border-color var(--kit-motion-fast) var(--kit-motion-ease);
}
.kit-filter-pill::before { content: none; }
.kit-filter-pill:visited { color: var(--kit-color-ink); }
.kit-filter-pill[aria-pressed=true], .kit-filter-pill[aria-checked=true], .kit-filter-pill[aria-current], .kit-filter-pill[aria-current]:visited {
	background: var(--kit-color-ink); border-color: var(--kit-color-ink); color: var(--kit-color-on-ink); font-weight: var(--kit-weight-bold);
}
.kit-filter-pill:is([aria-pressed=true], [aria-checked=true], [aria-current])::before { /* selected is not colour only: a check mark */
	content: ""; width: 0.9em; height: 0.9em; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) {
	.kit-filter-pill:hover { border-color: var(--kit-color-ink); }
	.kit-filter-pill:is([aria-pressed=true], [aria-checked=true], [aria-current]):hover { background: var(--kit-color-text); }
}
.kit-filter-pill[aria-disabled=true] { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
.kit-filter-pill.is-loading { opacity: var(--opacity-60); cursor: progress; }
.kit-filter-pill .kit-count { color: inherit; opacity: var(--opacity-80); }

/* ---------- 4. Filter group + phone sheet ---------- */
.kit-filters { display: grid; gap: var(--s-4); margin: 0 0 var(--s-8); }
.kit-filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.kit-filter-group > legend, .kit-filter-group > .kit-filter-label {
	padding: 0; margin: 0 0 var(--s-2);
	font-size: var(--fluid-label); font-weight: var(--weight-label); color: var(--kit-color-muted);
}
.kit-filter-options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kit-filter-group:not(.is-expanded) .kit-filter-options > .kit-filter-pill:nth-child(n+9) { display: none; }
.kit-filter-more { background: none; border: 0; padding: 0 var(--s-2); min-height: var(--kit-size-target); font: inherit; font-size: var(--fluid-body-sm); color: var(--kit-color-link); text-decoration: underline; cursor: pointer; }
.kit-filter-sheet > summary { display: none; }
.kit-filter-sheet-actions { display: none; }
/* Phones (kit.js adds .is-sheet below 768px; without JavaScript the groups stay inline) */
.kit-filter-sheet.is-sheet { margin: 0 0 var(--s-6); }
.kit-filter-sheet.is-sheet > summary {
	display: inline-flex; align-items: center; gap: var(--s-2); list-style: none;
	min-height: var(--kit-size-target); padding: 0 var(--s-4);
	border: 1px solid var(--kit-color-ink); border-radius: var(--radius-full);
	background: var(--kit-color-raised); color: var(--kit-color-ink); font-weight: var(--kit-weight-medium); cursor: pointer;
}
.kit-filter-sheet.is-sheet > summary::-webkit-details-marker { display: none; }
.kit-filter-sheet.is-sheet[open] > .kit-filters {
	position: fixed; inset: auto 0 0 0; z-index: var(--kit-z-overlay);
	max-height: 85vh; overflow: auto; margin: 0;
	padding: var(--s-6) var(--s-4) var(--s-4);
	background: var(--kit-color-raised); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--kit-elevation-3);
}
.kit-filter-sheet.is-sheet[open]::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--kit-z-overlay) - 1); background: color-mix(in srgb, var(--kit-color-ink) 45%, transparent); }
.kit-filter-sheet.is-sheet[open] .kit-filter-sheet-actions { display: flex; gap: var(--s-2); position: sticky; bottom: calc(-1 * var(--s-4)); padding: var(--s-3) 0; background: var(--kit-color-raised); }
.kit-filter-sheet.is-sheet[open] .kit-filter-sheet-actions .kit-btn { flex: 1; }

/* 4b. Filter bar in one row: a dropdown per filter (checkbox list with counts), Sort on the right. Phones: a
   "Filters" button opening the sheet above, with Sort beside it. */
.kit-filterbar { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.kit-filterbar > .kit-filter-sheet { flex: 0 1 auto; min-width: 0; }
.kit-filterbar .kit-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.kit-dd { position: relative; }
.kit-dd-btn {
	display: inline-flex; align-items: center; gap: var(--s-2); list-style: none;
	min-height: var(--kit-size-target); padding: 0 var(--s-3) 0 var(--s-4);
	border: 1px solid var(--kit-color-ink); border-radius: var(--radius-full);
	background: var(--kit-color-raised); color: var(--kit-color-ink);
	font-size: var(--fluid-body-sm); font-weight: var(--kit-weight-medium); white-space: nowrap; cursor: pointer; user-select: none;
}
.kit-dd-btn::-webkit-details-marker { display: none; }
.kit-dd-btn .kit-ico { --kit-ico-size: 1rem; transition: transform var(--kit-motion-fast) var(--kit-motion-ease); }
.kit-dd.is-open > .kit-dd-btn .kit-ico { transform: rotate(180deg); }
.kit-dd-panel[hidden] { display: none !important; }
button.kit-dd-btn { font: inherit; font-size: var(--fluid-body-sm); }
.kit-dd-btn.is-chosen { background: var(--kit-color-ink); color: var(--kit-color-on-ink); }
.kit-dd-btn .kit-count { color: inherit; opacity: var(--opacity-80); }
.kit-dd-btn:focus-visible, .kit-dd-opt:focus-visible, .kit-dd-opt:has(input:focus-visible) { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); }
@media (hover: hover) { .kit-dd-btn:hover { box-shadow: inset 0 0 0 1px var(--kit-color-ink); } }
.kit-dd-panel {
	position: absolute; top: calc(100% + var(--s-1)); left: 0; z-index: var(--kit-z-overlay);
	min-width: 16rem; max-width: min(22rem, 90vw); max-height: 22rem; overflow: auto;
	margin: 0; padding: var(--s-2); border: 0; border-radius: var(--kit-radius-card);
	background: var(--kit-color-raised); box-shadow: var(--kit-elevation-2);
}
.kit-dd--sort { flex: none; } /* next to Filters, not pushed to the far edge */
.kit-dd--sort .kit-dd-panel { left: auto; right: 0; min-width: 12rem; }
.kit-dd-list { list-style: none; margin: 0; padding: 0; }
.kit-dd-list li { margin: 0; }
.kit-dd-opt {
	display: flex; align-items: center; gap: var(--s-2); min-height: var(--kit-size-target); padding: 0 var(--s-3);
	border-radius: var(--radius-sm); color: var(--kit-color-ink); text-decoration: none; font-size: var(--fluid-body-sm); cursor: pointer;
}
@media (hover: hover) { .kit-dd-opt:hover { background: var(--kit-color-surface-soft); } }
.kit-dd-opt .kit-count { margin-left: auto; padding-left: var(--s-3); }
.kit-dd-opt[aria-current] { font-weight: var(--kit-weight-bold); }
.kit-dd-opt[aria-current]::after { --kit-ico-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E"); content: ""; width: 1rem; height: 1rem; margin-left: auto; background: currentColor; -webkit-mask: var(--kit-ico-check) center / contain no-repeat; mask: var(--kit-ico-check) center / contain no-repeat; }
.kit-dd-check { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--kit-color-ink); }
.kit-dd-current { font-weight: var(--kit-weight-regular); }
.kit-filterbar .kit-filter-sheet.is-sheet { margin: 0; }
.kit-filter-sheet.is-sheet .kit-filters { display: grid; gap: var(--s-3); }
.kit-filter-sheet.is-sheet .kit-dd-btn { width: 100%; justify-content: space-between; }
.kit-filter-sheet.is-sheet .kit-dd-panel { position: static; box-shadow: none; max-height: none; min-width: 0; max-width: none; padding: var(--s-2) 0 0; }
@media (max-width: 767px) { .kit-dd--sort .kit-dd-current { display: none; } }
@media (prefers-reduced-motion: reduce) { .kit-dd-btn .kit-ico { transition: none; } }

/* ---------- 5. Active filters bar ---------- */
.kit-filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: calc(-1 * var(--s-4)) 0 var(--s-6); }
.kit-filter-active .kit-removable {
	display: inline-flex; align-items: center; gap: var(--s-1);
	padding-left: var(--s-3); border-radius: var(--radius-full);
	background: var(--kit-color-surface-soft); box-shadow: inset 0 0 0 1px var(--kit-color-line);
	font-size: var(--fluid-body-sm);
}
.kit-filter-active .kit-removable a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--kit-size-target); min-height: var(--kit-size-target);
	border-radius: var(--radius-full); color: var(--kit-color-ink); text-decoration: none; font-size: var(--fluid-body-lg); line-height: 1;
}
@media (hover: hover) { .kit-filter-active .kit-removable a:hover { background: var(--kit-color-surface); } }
.kit-filter-active .kit-removable a:focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: calc(-1 * var(--kit-focus-width)); }
.kit-filter-clear { font-size: var(--fluid-body-sm); color: var(--kit-color-link); min-height: var(--kit-size-target); display: inline-flex; align-items: center; }

/* ---------- 6. Badge: state of the item ---------- */
.kit-badge {
	display: inline-flex; align-items: center; gap: var(--s-1);
	padding: var(--s-1) var(--s-2); border-radius: var(--radius-xs);
	font-size: var(--fluid-label); font-weight: var(--kit-weight-bold); line-height: 1.2;
	background: var(--kit-color-surface); color: var(--kit-color-ink);
}
.kit-badge--verified { background: var(--kit-color-success-soft); color: var(--kit-color-success); }
.kit-badge--unconfirmed { background: var(--kit-color-warning-soft); color: var(--kit-color-warning); }
.kit-badge--featured { background: var(--kit-color-accent); color: var(--kit-color-on-accent); }
.kit-badge--sponsored, .kit-badge--ad { background: var(--kit-color-ink); color: var(--kit-color-on-ink); }
.kit-badge--closed { background: var(--kit-color-danger-soft); color: var(--kit-color-danger); }
.kit-badge--new { background: var(--kit-color-info-soft); color: var(--kit-color-info); }
/* Beta: a very small tag at the top right of a menu label (block style kits-beta on a Navigation Link, or the same span
   in a footer list). Regular weight, small corner, info blue with white text (readable on dark and light surfaces).
   Raised with relative positioning, so the link keeps its height and target. */
.kit-badge--beta {
	position: relative; top: -0.8em; margin-inline-start: var(--s-1); padding: var(--s-0) var(--s-1); border-radius: var(--kit-radius-xs);
	font-size: var(--kit-type-2xs); font-weight: var(--kit-weight-regular); line-height: 1.4; letter-spacing: 0.02em; white-space: nowrap; vertical-align: baseline;
	background: var(--kit-color-info); color: var(--kit-color-on-ink);
}

/* ---------- 7. Eyebrow / 8. Count ---------- */
.kit-eyebrow { display: block; margin: 0 0 var(--s-2); font-size: var(--fluid-label); font-weight: var(--weight-label); color: var(--kit-color-muted); }
.kit-count { font-variant-numeric: tabular-nums; color: var(--kit-color-muted); font-weight: var(--kit-weight-regular); }

/* ---------- 9. Segmented control ---------- */
.kit-segment { display: inline-flex; padding: var(--s-1); gap: var(--s-1); border-radius: var(--radius-full); background: var(--kit-color-surface); }
.kit-segment button, .kit-segment a {
	min-height: calc(var(--kit-size-target) - 2 * var(--s-1)); padding: 0 var(--s-4);
	border: 0; border-radius: var(--radius-full); background: transparent; color: var(--kit-color-ink);
	font: inherit; font-size: var(--fluid-body-sm); font-weight: var(--kit-weight-medium); text-decoration: none; cursor: pointer;
	display: inline-flex; align-items: center;
}
.kit-segment :is(button, a):is([aria-pressed=true], [aria-current]) { background: var(--kit-color-raised); box-shadow: var(--kit-elevation-1); font-weight: var(--kit-weight-bold); }

/* ---------- 10. Button: one system for .kit-btn and the core Button block (spec: docs/buttons.md; registry "Button") ----------
   Variants   primary (default: ink fill) · secondary (soft grey fill, light outline) · ghost (dark outline) · brand (the primary shape
              in the brand colour). Each variant reads --kit-btn-<variant>-* tokens; a dark surface swaps those tokens, so
              every variant works on light and on dark surfaces.
   States     default · hover · focus-visible · active (pressed) · disabled · loading.
   Content    icon + label (the default) · label only (no icon) · icon only (square; needs an accessible name).
   Sizes      default (--kit-btn-height) · small (--kit-btn-height-sm).
   Markup     <a|button class="kit-btn [kit-btn--secondary|--ghost|--brand] [kit-btn--sm] [kit-btn--icon|--label] [kit-btn--ico-<name>]">
              Core Button block: block style Default (= primary), Secondary, Ghost or Brand; size and content as extra CSS
              classes on the block: kit-btn--sm, kit-btn--icon, kit-btn--label, kit-btn--ico-<name>.
   Old names  keep working: is-style-kits-primary = brand, is-style-outline = secondary, is-style-kits-small = primary small,
              kit-btn--primary and kit-btn--ink = primary, kit-btn--outline = secondary.
   Rules      variant rules only set the private --_* values, so a component may restyle a button with one plain class rule. */

/* Primary (default) values; :where() keeps them at zero specificity so any variant class wins */
:where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button) {
	--_bg: var(--kit-btn-primary-bg); --_fg: var(--kit-btn-primary-fg); --_line: var(--kit-btn-primary-bg);
	--_bg-h: var(--kit-btn-primary-bg-hover); --_fg-h: var(--kit-btn-primary-fg-hover); --_line-h: var(--kit-btn-primary-bg-hover);
	--_nudge: translateX(var(--kit-btn-nudge));
}
:where(.kit-btn--secondary, .kit-btn--outline, .is-style-kits-secondary > .wp-block-button__link, .is-style-outline > .wp-block-button__link) {
	--_bg: var(--kit-btn-secondary-bg); --_fg: var(--kit-btn-secondary-fg); --_line: var(--kit-btn-secondary-line);
	--_bg-h: var(--kit-btn-secondary-bg-hover); --_fg-h: var(--kit-btn-secondary-fg-hover); --_line-h: var(--kit-btn-secondary-bg-hover);
}
:where(.kit-btn--ghost, .is-style-kits-ghost > .wp-block-button__link) {
	--_bg: transparent; --_fg: var(--kit-btn-ghost-fg); --_line: var(--kit-btn-ghost-line);
	--_bg-h: var(--kit-btn-ghost-bg-hover); --_fg-h: var(--kit-btn-ghost-fg-hover); --_line-h: var(--kit-btn-ghost-bg-hover);
}
:where(.kit-btn--brand, .is-style-kits-brand > .wp-block-button__link, .is-style-kits-primary > .wp-block-button__link) {
	--_bg: var(--kit-btn-brand-bg); --_fg: var(--kit-btn-brand-fg); --_line: var(--kit-btn-brand-bg);
	--_bg-h: color-mix(in srgb, var(--kit-btn-brand-bg) var(--kit-btn-hover-mix), var(--kit-color-ink)); --_fg-h: var(--kit-btn-brand-fg); --_line-h: var(--_bg-h);
}
/* Brand is the site's brand colour, or a campaign's own colour inside a campaign palette (campaign.css sets
   --kit-btn-brand-bg/-fg); every state derives from that one pair. */
/* Dark surfaces: ink would vanish, so primary takes the brand fill (and its hover); outlines and text turn light. */
:is(.kit-dark, .has-secondary-background-color, .wp-block-cover.is-dark, .kit-site-header, .kit-site-footer, .kit-ed-hero, .kit-ed-help, .kit-ed-story, .kit-form--on-dark) {
	--kit-btn-primary-bg: var(--kit-btn-brand-bg); --kit-btn-primary-fg: var(--kit-btn-brand-fg);
	--kit-btn-primary-bg-hover: color-mix(in srgb, var(--kit-btn-brand-bg) var(--kit-btn-hover-mix), var(--kit-color-ink)); --kit-btn-primary-fg-hover: var(--kit-btn-brand-fg);
	--kit-btn-secondary-bg: color-mix(in srgb, var(--kit-color-on-ink) 12%, transparent);
	--kit-btn-secondary-fg: var(--kit-color-on-ink); --kit-btn-secondary-line: color-mix(in srgb, var(--kit-color-on-ink) 60%, transparent);
	--kit-btn-secondary-bg-hover: var(--kit-color-on-ink); --kit-btn-secondary-fg-hover: var(--kit-color-ink);
	--kit-btn-ghost-fg: var(--kit-color-on-ink); --kit-btn-ghost-line: var(--kit-color-on-ink);
	--kit-btn-ghost-bg-hover: var(--kit-color-on-ink); --kit-btn-ghost-fg-hover: var(--kit-color-ink);
}

/* Headings and lead text on a dark surface take its light text colour (theme.json gives headings the ink colour and
   large text the muted colour, which vanish on ink); a card inside keeps its own colour. */
:is(.kit-dark, .has-secondary-background-color, .wp-block-cover.is-dark) :is(h1, h2, h3, h4, h5, h6, .has-large-font-size, .kit-lead) { color: inherit; }

/* Shape, type and motion (the same for every variant) */
.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--kit-btn-gap);
	box-sizing: border-box; min-height: var(--kit-btn-height); padding: 0 var(--kit-btn-pad);
	border: var(--kit-border-control) solid var(--_line); border-radius: var(--kit-radius-pill);
	background: var(--_bg); color: var(--_fg);
	font: inherit; font-size: var(--fluid-body-md); font-weight: var(--kit-weight-medium); line-height: 1.2;
	text-align: center; text-decoration: none; cursor: pointer;
	transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), color var(--kit-motion-fast) var(--kit-motion-ease),
		border-color var(--kit-motion-fast) var(--kit-motion-ease), transform var(--kit-motion-fast) var(--kit-motion-ease);
}
a:is(.kit-btn, .wp-block-button__link, .wp-element-button) { color: var(--_fg); } /* outranks "links in this area are light" rules */
.kit-btn .kit-ico { --kit-ico-size: var(--kit-btn-ico-size); }

/* Hover: the fill changes colour (secondary and brand fill with ink, or with white on dark) */
@media (hover: hover) {
	:where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):hover:not([disabled], [aria-disabled=true], .is-loading, [aria-busy=true]),
	a:where(.kit-btn, .wp-block-button__link, .wp-element-button):hover:not([aria-disabled=true], .is-loading, [aria-busy=true]) {
		background: var(--_bg-h); border-color: var(--_line-h); color: var(--_fg-h);
	}
}
/* Focus: the site's focus ring, colours unchanged */
:where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):focus-visible {
	outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset);
}
/* Active: a 1px press */
:where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):active:not([disabled], [aria-disabled=true]) { transform: translateY(var(--kit-btn-press)); }
/* Disabled: faded, no hover, no press; a disabled link does not navigate */
:where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):is([disabled], [aria-disabled=true]) {
	opacity: var(--opacity-disabled); cursor: not-allowed; transform: none;
}
a:where(.kit-btn, .wp-block-button__link, .wp-element-button)[aria-disabled=true] { pointer-events: none; }
/* Loading (class is-loading or aria-busy="true"): a spinner in place of the icon, the label stays, no clicks */
:where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true]) { position: relative; pointer-events: none; }
:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true])::before {
	content: ""; flex: none; width: var(--kit-btn-ico-size); height: var(--kit-btn-ico-size); box-sizing: border-box;
	border-radius: var(--radius-full); border: var(--kit-btn-spinner-width) solid currentColor; border-right-color: transparent;
	background: none; -webkit-mask: none; mask: none; transform: none !important;
	animation: kit-spin 700ms linear infinite;
}
:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true])::after { display: none; }
:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true]) > .kit-ico { display: none; }

/* Sizes: small */
.kit-btn.kit-btn--sm, .wp-block-button.kit-btn--sm > .wp-block-button__link, .is-style-kits-small > .wp-block-button__link {
	min-height: var(--kit-btn-height-sm); padding-inline: var(--kit-btn-pad-sm); font-size: var(--fluid-body-sm);
}
/* Icon only: square, the icon in the middle. <button>: aria-label names the action. Core block: the button text is the
   name; it stays for screen readers and is hidden on screen. */
.kit-btn.kit-btn--icon, .wp-block-button.kit-btn--icon > .wp-block-button__link { width: var(--kit-btn-height); min-width: var(--kit-btn-height); padding: 0; gap: 0; }
.kit-btn.kit-btn--icon.kit-btn--sm, .wp-block-button.kit-btn--icon.kit-btn--sm > .wp-block-button__link { width: var(--kit-btn-height-sm); min-width: var(--kit-btn-height-sm); }
.kit-btn.kit-btn--icon .kit-ico { --kit-ico-size: var(--kit-btn-ico-size-only); }
.wp-block-button.kit-btn--icon > .wp-block-button__link { font-size: 0; --kit-btn-ico-size: var(--kit-btn-ico-size-only); }

/* Icons. Function icons sit before the label: automatic for tel:, mailto:, WhatsApp, submit and download, or chosen with
   kit-btn--ico-<name> (or data-ico plus --kit-btn-ico). A link with no function icon gets an arrow after its label: → inside
   the site, ↗ when it leaves it (functions.php marks the site's own host). Label only (kit-btn--label) is the explicit
   choice of no icon: no arrow, no function icon, on any button. */
.kit-btn--ico-phone { --kit-btn-ico: var(--kit-ico-phone); } .kit-btn--ico-mail { --kit-btn-ico: var(--kit-ico-mail); }
.kit-btn--ico-whatsapp { --kit-btn-ico: var(--kit-ico-wa); } .kit-btn--ico-search { --kit-btn-ico: var(--kit-ico-search); }
.kit-btn--ico-send { --kit-btn-ico: var(--kit-ico-send); } .kit-btn--ico-download { --kit-btn-ico: var(--kit-ico-download); }
.kit-btn--ico-check { --kit-btn-ico: var(--kit-ico-check); } .kit-btn--ico-alert { --kit-btn-ico: var(--kit-ico-alert); }
.kit-btn--ico-person { --kit-btn-ico: var(--kit-ico-person); } .kit-btn--ico-calendar { --kit-btn-ico: var(--kit-ico-calendar); }
.kit-btn--ico-file { --kit-btn-ico: var(--kit-ico-file); } .kit-btn--ico-link { --kit-btn-ico: var(--kit-ico-link); }
.kit-btn--ico-map-pin { --kit-btn-ico: var(--kit-ico-map-pin); } .kit-btn--ico-megaphone { --kit-btn-ico: var(--kit-ico-megaphone); }
.kit-btn--ico-arrow-right { --kit-btn-ico: var(--kit-ico-arrow-right); } .kit-btn--ico-next { --kit-btn-ico: var(--kit-ico-next); }
.kit-btn--ico-prev { --kit-btn-ico: var(--kit-ico-prev); }
[href^="tel:"]:is(.kit-btn, .wp-block-button__link) { --kit-btn-ico: var(--kit-ico-phone); }
[href^="mailto:"]:is(.kit-btn, .wp-block-button__link) { --kit-btn-ico: var(--kit-ico-mail); }
[href*="wa.me"]:is(.kit-btn, .wp-block-button__link) { --kit-btn-ico: var(--kit-ico-wa); }
:is(.kit-btn, .wp-block-button__link):is([download], [href$=".pdf"]) { --kit-btn-ico: var(--kit-ico-download); }
:is(.kit-btn, .wp-block-button__link, .kit-form button[type=submit], .kit-disclosure > summary):not(:has(.kit-ico), .kit-btn--label, .kit-btn--label > *):is([href^="tel:"], [href^="mailto:"], [href*="wa.me"], [download], [href$=".pdf"], [type=submit], [data-ico], [class*="kit-btn--ico-"])::before,
.wp-block-button:not(.kit-btn--label)[class*="kit-btn--ico-"] > .wp-block-button__link::before,
.kit-disclosure[data-ico] > summary::before {
	content: ""; flex: none; width: var(--kit-btn-ico-size); height: var(--kit-btn-ico-size); background: currentColor;
	-webkit-mask: var(--kit-btn-ico, var(--kit-ico-send)) center / contain no-repeat; mask: var(--kit-btn-ico, var(--kit-ico-send)) center / contain no-repeat;
}
:is(a.kit-btn, a.wp-block-button__link, a.wp-element-button):not(:where(:has(.kit-ico), [href^="tel:"], [href^="mailto:"], [href*="wa.me"], [download], [href$=".pdf"], [data-ico], [class*="kit-btn--ico-"], .kit-dd-btn, [aria-haspopup], .kit-btn--label, .wp-block-button[class*="kit-btn--ico-"] > *, .kit-btn--label > *))::after {
	content: ""; flex: none; width: var(--kit-btn-ico-size); height: var(--kit-btn-ico-size); background: currentColor;
	-webkit-mask: var(--kit-cta-arrow, var(--kit-ico-arrow-right)) center / contain no-repeat; mask: var(--kit-cta-arrow, var(--kit-ico-arrow-right)) center / contain no-repeat;
}
/* Leaving the site: every absolute link is treated as external until functions.php marks the site's own host */
:is(a.kit-btn, a.wp-block-button__link, a.wp-element-button)[href^="http"] { --kit-cta-arrow: var(--kit-ico-arrow-up-right); --_nudge: translate(calc(var(--kit-btn-nudge) - 1px), calc(1px - var(--kit-btn-nudge))); }
/* In the editor the button is editable text, not a link: show the arrow it will have, and show an icon-only button's
   text while it is being edited. */
.wp-block-button:not([class*="kit-btn--ico-"], .kit-btn--label) > .wp-block-button__link.block-editor-rich-text__editable::after {
	content: ""; flex: none; width: var(--kit-btn-ico-size); height: var(--kit-btn-ico-size); background: currentColor;
	-webkit-mask: var(--kit-ico-arrow-right) center / contain no-repeat; mask: var(--kit-ico-arrow-right) center / contain no-repeat;
}
.wp-block-button.kit-btn--icon > .wp-block-button__link.block-editor-rich-text__editable:focus { font-size: var(--fluid-body-sm); width: auto; padding-inline: var(--kit-btn-pad-sm); }
/* Label only: an icon written into the markup is hidden too */
.kit-btn--label > .kit-ico, .kit-btn--label > .wp-block-button__link > .kit-ico { display: none; }

/* Motion: on hover and focus the icon nudges (spring): the arrow 3px along its direction, a leading icon 2px and a touch
   larger. Colours fade in --kit-motion-fast. */
:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]) > .kit-ico,
:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-disclosure > summary)::before,
:is(.kit-btn, .wp-block-button__link, .wp-element-button)::after { transition: transform var(--kit-duration-spring) var(--kit-ease-spring); }
:is(.kit-btn, .wp-block-button__link, .wp-element-button):is(:hover, :focus-visible)::after { transform: var(--_nudge); }
:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-disclosure > summary):is(:hover, :focus-visible)::before,
:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(:hover, :focus-visible) > .kit-ico { transform: translateX(calc(var(--kit-btn-nudge) - 1px)) scale(1.06); }

@media (prefers-reduced-motion: reduce) {
	.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button { transition: none; }
	:where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):active { transform: none; }
	:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]) > .kit-ico,
	:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-disclosure > summary)::before,
	:is(.kit-btn, .wp-block-button__link, .wp-element-button)::after { transition: none; transform: none !important; }
	:is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true])::before { animation: none; opacity: var(--opacity-60); }
}

/* ---------- 11. Form field ---------- */
.kit-field { margin: 0 0 var(--s-4); }
/* Auto-paragraphs around shortcode output must not add space inside a field */
.kit-field > p:empty { display: none; }
.kit-field > p { margin: 0; }
.kit-field > label, .kit-field > .kit-field-label { display: block; margin: 0 0 var(--s-2); font-weight: var(--kit-weight-regular); color: var(--kit-color-ink); }
.kit-field .kit-optional { font-weight: var(--kit-weight-regular); color: var(--kit-color-muted); }
.kit-field-control { position: relative; }
.kit-field-control > .kit-field-icon { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--kit-color-muted); pointer-events: none; }
.kit-field .kit-field-control:has(> .kit-field-icon) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { padding-left: calc(var(--s-3) + 1.25rem + var(--s-2)); }
.kit-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
	width: 100%; box-sizing: border-box;
	min-height: var(--kit-size-target); padding: 0 var(--s-3);
	font: inherit; color: var(--kit-color-ink);
	background: var(--kit-color-raised);
	border: var(--kit-border-control) solid var(--kit-color-ink); border-radius: var(--kit-radius-control);
	transition: border-color var(--kit-motion-fast) var(--kit-motion-ease), box-shadow var(--kit-motion-fast) var(--kit-motion-ease);
}
.kit-field textarea { padding-block: var(--s-3); min-height: 7rem; }
/* Selects: same height and look as text fields in every browser (Safari draws native selects shorter) */
.kit-field select, :where(select:not([multiple]):not([size])) { /* every single select, in or out of a field */
	-webkit-appearance: none; appearance: none; height: var(--kit-field-height); padding-right: calc(var(--s-3) + 1.25rem);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 1rem;
}
.kit-field input:not([type=checkbox]):not([type=radio]):not([type=file]) { height: var(--kit-field-height); }
@media (hover: hover) { .kit-field :is(input, select, textarea):hover:not([disabled]):not([readonly]) { box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-color-surface); } }
.kit-field :is(input, select, textarea):focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); }
.kit-field :is(input, select, textarea)[aria-invalid=true] { border-color: var(--color-peach); }
.kit-field :is(input, select, textarea).is-valid { border-color: var(--color-green); }
.kit-field :is(input, select, textarea)[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.kit-field :is(input, textarea)[readonly] { background: var(--kit-color-surface-soft); border-style: dashed; }
.kit-field-message { display: block; min-height: 1.4em; margin-top: var(--s-1); font-size: var(--fluid-body-sm); color: var(--kit-color-danger); } /* reserved line: no jump */
.kit-field-message:not(:empty)::before { content: "⚠ "; }
.kit-field-hint { display: block; margin: 0 0 var(--s-2); font-size: var(--fluid-body-sm); color: var(--kit-color-muted); }

/* Forms: empty paragraphs and line breaks left by auto-formatting around shortcodes never take a place in the layout */
:is(.kit-form, .kit-form) > :is(p:empty, br, p:has(> input[type=hidden]):not(:has(> :not(input[type=hidden])))) { display: none; } /* hidden fields still submit */

/* ALTCHA in automatic mode: present (it must run) but not shown */
.kit-captcha--invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- 12. Checkbox ---------- */
.kit-checkbox { display: flex; gap: var(--s-3); align-items: flex-start; min-height: var(--kit-size-target); padding-block: var(--s-2); cursor: pointer; font-weight: var(--kit-weight-regular); }
.kit-checkbox input { width: var(--kit-size-check); height: var(--kit-size-check); margin: 0.1em 0 0; flex: none; accent-color: var(--kit-color-ink); }
.kit-checkbox input[aria-invalid=true] { outline: var(--kit-border-control) solid var(--color-peach); outline-offset: var(--kit-focus-offset); }

/* ---------- 13. Form status ---------- */
.kit-form-status:empty { display: none; }
.kit-form-status { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--kit-radius-control); border-left: var(--s-1) solid var(--kit-color-danger); background: var(--kit-color-danger-soft); color: var(--kit-color-ink); }
.kit-form-status.is-success { border-left-color: var(--kit-color-success); background: var(--kit-color-success-soft); }

/* ---------- 14. Banner (pattern kits-by-wugweb/banner): 16:5 wide, 4:3 on phones ---------- */
.wp-block-cover.kit-banner { min-height: 0 !important; aspect-ratio: 16 / 5; border-radius: var(--kit-radius-hero); overflow: hidden; margin-block: 0 var(--s-8); }
@media (max-width: 767px) { .wp-block-cover.kit-banner { aspect-ratio: 4 / 3; } }

/* ---------- 15. Breadcrumb (same as .kit-crumbs) ---------- */
.kit-breadcrumb { margin: 0 0 var(--s-2); font-size: var(--fluid-body-sm); color: var(--kit-color-muted); }

@media (prefers-reduced-motion: reduce) {
	:is(.kit-chip, .wp-block-post-terms a, .kit-filter-pill, .kit-field :is(input, select, textarea)) { transition: opacity var(--kit-motion-fast) linear; }
}

/* ---------- 16. Form standard (S5.2): one look for every form, from tokens ---------- */
.kit-field > label, .kit-field > .kit-field-label, .kit-check-group > legend { font-size: var(--fluid-body-sm); font-weight: var(--kit-weight-regular); color: var(--neutral-9); }
.kit-field .kit-optional { font-weight: 400; color: var(--kit-color-muted); } /* neutral-5 was 4.1:1 on white */
.kit-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
	min-height: var(--kit-field-height); padding: 0 var(--s-3); border-radius: var(--r-2);
	background-color: var(--neutral-0); border: 1px solid var(--neutral-3); color: var(--neutral-10);
}
.kit-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .kit-field select { height: var(--kit-field-height); }
.kit-field textarea { padding-block: var(--s-3); min-height: calc(5 * 1.5em + 2 * var(--s-3)); }
.kit-field :is(input, textarea)::placeholder { color: var(--neutral-4); opacity: 1; }
.kit-field-control > .kit-field-icon { --kit-ico-size: 18px; width: 18px; height: 18px; color: var(--neutral-5); }
@media (hover: hover) { .kit-field :is(input, select, textarea):hover:not([disabled]):not([readonly]) { border-color: var(--neutral-5); box-shadow: none; } }
.kit-field :is(input, select, textarea):focus, .kit-field :is(input, select, textarea):focus-visible { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 2px var(--color-blue); } /* the ring is never removed */
.kit-field :is(input, select, textarea)[aria-invalid=true] { border-color: var(--color-peach); padding-right: calc(var(--s-3) + 18px + var(--s-2));
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 18px; }
.kit-field select[aria-invalid=true] { background-position: right calc(var(--s-3) + 1.25rem) center, right var(--s-3) center; }
.kit-field :is(input, select, textarea).is-valid { border-color: var(--color-green); }
.kit-field :is(input, select, textarea)[disabled] { opacity: var(--opacity-disabled); }
.kit-field-hint { font-size: var(--fluid-caption); color: var(--neutral-5); }
.kit-field-message:not(:empty)::before { content: none; } /* the alert icon sits in the field */
.kit-check-group { border: 0; padding: 0; margin: 0 0 var(--s-4); min-width: 0; }
.kit-check-group > legend { padding: 0; margin: 0 0 var(--s-2); }
.kit-check-group.is-invalid .kit-checkbox input { outline: 2px solid var(--color-peach); outline-offset: 2px; }
/* One height for every form control: fields (--kit-field-height) and form buttons (--kit-btn-height) are both
   --kit-size-control, so a field and its button line up in any row. Colours and states: section 10. */
form, .kit-form, .fluentform { --kit-btn-height: var(--kit-size-control); --kit-btn-pad: var(--s-6); } /* buttons elsewhere step 44/48/52px by breakpoint; in a form they match the fields */
/* Layout: one column under 768px, at most two; the button bottom-left */
.kit-form-grid { display: grid; gap: 0 var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .kit-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kit-form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-start; margin-top: var(--s-2); }
/* On a dark band (newsletter) */
.kit-form--on-dark .kit-field > label, .kit-form--on-dark .kit-checkbox, .kit-form--on-dark .kit-check-group > legend { color: var(--neutral-0); }
.kit-form--on-dark .kit-field .kit-optional, .kit-form--on-dark .kit-field-hint { color: var(--neutral-3); }
.kit-form--on-dark .kit-field-message { color: var(--color-peach); }
/* Expandable form (S5.6) */
.kit-disclosure { margin: 0; }
.kit-disclosure > summary { list-style: none; display: inline-flex; width: auto; cursor: pointer; }
.kit-disclosure > summary::-webkit-details-marker { display: none; }
.kit-disclosure .kit-disclosure-close, .kit-disclosure[open] .kit-disclosure-open { display: none; }
.kit-disclosure[open] .kit-disclosure-close { display: inline; }
.kit-disclosure-body { margin-top: var(--s-4); }
/* Multi-step form (S5.7): with JavaScript one step shows at a time; without, all steps show */
.kit-step { border: 0; padding: 0; margin: 0 0 var(--s-4); min-width: 0; }
.kit-step > legend { padding: 0; margin: 0 0 var(--s-3); font-size: var(--fluid-body-md); font-weight: 600; color: var(--neutral-10); }
.kit-step-count { display: block; font-size: var(--fluid-caption); font-weight: 500; color: var(--neutral-5); }
.kit-step-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.kit-steps:not(.is-stepped) .kit-step-nav [data-step-next], .kit-steps:not(.is-stepped) .kit-step-nav [data-step-back] { display: none; }
.kit-counter { margin-top: var(--s-1); }

/* The dropdown arrow on every single select (fix 12 Oct 2026): the field rule above sets the whole `background` with a
 * stronger selector, which removed the arrow. */
.kit-field select:not([multiple]):not([size]), :where(select:not([multiple]):not([size])) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right var(--s-3) center !important; background-size: 1rem !important;
	padding-right: calc(var(--s-3) + 1.25rem) !important;
}