/**
 * WEPRO-CTA — Secondary Side CTA (v5.4.6)
 * ---------------------------------------------------------------------------
 * Loaded ONLY when a secondary Side CTA tab actually renders
 * (Cta_Renderer::ensure_side_cta_secondary_assets), and versioned by filemtime
 * so it always cache-busts independently of the plugin version.
 *
 * Two jobs:
 *   1. `.weprocta-side-cta-stack` — a single fixed, vertically-centred column
 *      that owns the positioning for BOTH tabs. The standalone tab positions
 *      itself with `position:fixed; top:50%; transform:translateY(-50%)`, which
 *      two siblings cannot both do without sitting on top of each other, so
 *      inside the stack the tabs are reset to static flow.
 *   2. `.weprocta-side-cta--accent` — a colour variant. It only re-points the
 *      six custom properties the brass nameplate already reads, so every
 *      gradient / glaze / shimmer / shadow rule in weprocta.css is reused
 *      verbatim and nothing is duplicated or overridden.
 *
 * weprocta.css is intentionally NOT modified: it is versioned by the plugin
 * version, so an edit there would ship stale-cached CSS to every browser/CDN.
 */

/* ── Stack container ─────────────────────────────────────────────────── */

.weprocta-side-cta-stack {
	position: fixed;
	top: 50%;

	/* `--wsc-offset-y` is the admin "vertical offset" (Cta_Renderer::
	 * ensure_side_cta_rail_assets), so a site can clear a fixed header, a
	 * consent banner or a bottom action bar without editing CSS. It is folded
	 * into the SAME transform as the centring translate on purpose: `transform`
	 * is a single property, so a second declaration would replace the centring
	 * rather than add to it and yank the rail to the top of the screen.
	 * Default 0 = the exact centring this rule has always shipped. */
	transform: translateY(-50%) translateY(var(--wsc-offset-y, 0px));
	z-index: var(--weprocta-zindex);
	display: flex;
	flex-direction: column;
	/* Tokenised v5.6.4; default is the literal this rule already shipped. The
	 * phone step has its own token (see the responsive section) so re-pointing
	 * one does not silently flatten the other. */
	gap: var(--weprocta-cta-stack-gap, 8px);
	pointer-events: none; /* only the tabs are interactive */
}

/* SAFE-AREA INSETS (v5.10.0).
 *
 * `right: 0` is the edge of the VIEWPORT, which on a notched or rounded device
 * is not the edge of the readable area. In landscape the sensor housing eats
 * the leading inset, and the rail — which is deliberately flush to the edge and
 * only 44px across — is exactly the width of control that ends up underneath
 * it. The tab is still hit-testable there, but it is not fully legible, and the
 * label is the whole payload of a text tab.
 *
 * `env()` resolves to 0px on every device without an inset and on every engine
 * that does not implement it (the fallback is stated explicitly for the latter,
 * since an unresolved `env()` with no fallback invalidates the declaration and
 * would drop `right` entirely). So this moves nothing on an ordinary screen and
 * is not a behaviour change anywhere it does not apply. */
.weprocta-side-cta-stack--right {
	right: 0;
	right: env(safe-area-inset-right, 0px);
	align-items: flex-end;
}

.weprocta-side-cta-stack--left {
	left: 0;
	left: env(safe-area-inset-left, 0px);
	align-items: flex-start;
}

/* Tabs inside the stack hand their positioning to the container.
 *
 * `relative`, not `static` (v5.6.2). The tab's `::before` glaze and `::after`
 * shimmer are `position:absolute; inset:1px`, so they resolve against the
 * nearest POSITIONED ancestor. A `static` tab is not one — so inside the stack
 * every tab painted its decoration across the WHOLE RAIL, and the tab's own
 * `overflow:hidden` did not crop it back, because an overflow box does not
 * clip a descendant whose containing block is one of its own ancestors.
 *
 * The visible consequence on the DEFAULT two-tab rail: 62.6% of the FIRST
 * tab's pixels changed depending only on whether a second tab existed below
 * it, and they changed in the LIGHTENING direction (worst pixel luminance
 * 0.24 -> 0.42) because the second tab's glaze and shimmer were painting over
 * the first tab's plate. That is a tab's appearance depending on its
 * neighbour, and on a plate carrying light ink it is also the single largest
 * contributor to the contrast loss this release fixes. Measured, both
 * directions, by tests/overlay-bleed.py.
 *
 * `relative` with every offset `auto` moves nothing; it only restores the
 * containing block the STANDALONE tab already provides via `position:fixed`,
 * so the stacked and standalone tabs finally decorate identically.
 *
 * STACKING IS DELIBERATELY LEFT ALONE. It is tempting to add `z-index: auto`
 * here on the theory that `position: relative` newly activates the base rule's
 * `z-index: var(--weprocta-zindex)` (99999) and would lift the tabs over the
 * dock's `.weprocta-sc-grab` wake layer. That reasoning is wrong twice, and
 * acting on it would be a real behaviour change dressed as a safety guard:
 *
 *   1. A stacked tab is a FLEX ITEM, and the Flexbox spec applies `z-index` to
 *      a flex item as if it were positioned — so the tabs ALREADY painted at
 *      99999 while `static`. `relative` changes their stacking by nothing.
 *   2. The grab layer does not sit at `z-index: 1`. side-cta-dock.css sets it
 *      to `var(--weprocta-zindex, 99999)` on purpose — MATCHING the tabs, not
 *      beating them, so the rail's stacking contract stays exactly 99999 for
 *      consuming sites — and wins the tie by document order, because the JS
 *      appends it as the stack's last child.
 *
 * Verified by hit-testing (`tests/hittest-dock.py`) rather than by reading:
 * with the rail docked on a touch device, `document.elementFromPoint` returns
 * the wake layer at 9/9 sampled points and the link at 0/9 — identically
 * before and after this change, and also with a `z-index: auto` variant, which
 * is how the guard was shown to be unnecessary. */
.weprocta-side-cta-stack .weprocta-side-cta {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	transform: none;
	pointer-events: auto;
}

/* The base hover rules re-apply `translateY(-50%)`, which would yank a stacked
 * tab half its own height out of the column. Inside the stack the vertical
 * centring belongs to the container, so keep only the horizontal nudge. */
.weprocta-side-cta-stack .weprocta-side-cta--right:hover {
	transform: translateX(-2px);
}

.weprocta-side-cta-stack .weprocta-side-cta--left:hover {
	transform: translateX(2px);
}

/* ── Accent variant (military / dark green) ──────────────────────────── */

/*
 * `--sc-accent` is supplied per site by the admin colour field
 * (Cta_Renderer::sanitize_css_color → hex or `var(--token)`), so a site can
 * point at an existing Avada / WEPRO design token instead of duplicating a
 * hex value. The fallback below is a neutral military green for sites that
 * enable the secondary tab without choosing a colour.
 */
.weprocta-side-cta--accent {
	--sc-accent: #3a4a3c;

	--sc-gold-hi:   color-mix(in srgb, var(--sc-accent) 78%, #ffffff);
	--sc-gold:      var(--sc-accent);
	--sc-gold-mid:  color-mix(in srgb, var(--sc-accent) 84%, #000000);
	--sc-gold-deep: color-mix(in srgb, var(--sc-accent) 66%, #000000);
	--sc-ivory:     #f4f7f1;
	--sc-ink:       #10180f;
}

/* Shadows in the base rule are hard-coded warm brass; re-tint them so the
 * green tab does not sit in a gold halo.
 *
 * The two INSET bevel layers read `--sc-edge-*` rather than restating their
 * literals. Every variant tab also carries this class (the renderer emits
 * `--accent --v-<slot>` together on both tabs, class-cta-renderer.php:1276 and
 * :1432), so this rule — not the base one — is what actually paints a variant
 * plate's bevel; without the indirection a variant could not re-point it. The
 * default values are the previous literals, so an `--accent` tab with no
 * variant renders byte-identically. */
.weprocta-side-cta--accent {
	--sc-edge-hi:       rgba(255, 255, 255, 0.22);
	--sc-edge-hi-hover: rgba(255, 255, 255, 0.3);
	--sc-edge-lo:       rgba(0, 0, 0, 0.18);

	box-shadow:
		inset 0 1px 0 var(--sc-edge-hi),
		inset 0 -1px 0 var(--sc-edge-lo),
		2px 0 10px -3px rgba(16, 24, 15, 0.28),
		4px 0 20px -10px rgba(16, 24, 15, 0.32);
}

.weprocta-side-cta--accent:hover {
	box-shadow:
		inset 0 1px 0 var(--sc-edge-hi-hover),
		3px 0 16px -4px rgba(16, 24, 15, 0.38),
		9px 0 28px -12px rgba(16, 24, 15, 0.34);
}

.weprocta-side-cta--accent:focus-visible {
	outline: 2px solid var(--sc-ivory);
	outline-offset: -3px;
	box-shadow: 0 0 0 4px rgba(58, 74, 60, 0.5), 4px 0 24px rgba(16, 24, 15, 0.45);
}

/* Older engines without color-mix() still get a readable solid green rather
 * than an unresolved gradient. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.weprocta-side-cta--accent {
		background: var(--sc-accent);
	}
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/*
 * Desktop/tablet need no size change — the stack simply centres two tabs.
 * On phones the tabs get shorter (weprocta.css drops padding + font-size at
 * ≤768px), so pin a 44px minimum on the short axis to stay above the
 * WCAG 2.5.8 / iOS HIG tap-target floor, and tighten the gap so two tabs plus
 * the gap still clear the top and bottom of a 568px-tall viewport.
 */
@media (max-width: 768px) {
	.weprocta-side-cta-stack {
		gap: var(--weprocta-cta-stack-gap-sm, 6px);
	}
}

/*
 * TAP-TARGET FLOOR — UNCONDITIONAL as of v5.7.0.
 *
 * History, because the direction of travel is the point. Through 5.6.3 the
 * floor lived only inside `@media (max-width: 768px)`, i.e. it assumed "narrow
 * screen" and "finger" are the same thing. They are not: an iPad in LANDSCAPE
 * reports 1024px with a COARSE pointer, so it fell out of the query and kept
 * the mouse-sized ~37px tab. 5.6.4 added `(pointer: coarse)` to ask the
 * question the floor actually cares about.
 *
 * 5.7.0 drops the conditions entirely. Two reasons:
 *
 *   1. THE RAIL IS NOW THE ONLY PRESENTATION AND ITS RESTING STATE IS A
 *      REDUCTION OF ITSELF. There is no longer a launcher or a sliver that
 *      could carry a different target size, so the tab IS the target in every
 *      state, at every width, for every input device. A control that must stay
 *      hittable in all of them should not have its size decided by a media
 *      query that guesses which one is in use.
 *   2. `pointer: coarse` STILL GUESSES, and it guesses wrong for real users:
 *      a hybrid laptop reports `fine` while being used by touch, and any
 *      pointer query is blind to motor impairment, which is precisely who the
 *      44px floor in WCAG 2.5.5 exists for. A floor that only applies when the
 *      browser thinks you are using a finger is not a floor.
 *
 * Declared, scoped consequence: on a fine-pointer desktop the tab grows from
 * ~37px to 44px on its short axis. That is a visible change and it is the
 * fix — 37px clears the WCAG 2.5.8 AA minimum (24px) but not the 44px that
 * WCAG 2.5.5 AAA and the iOS HIG both ask for, on what is by definition this
 * plugin's primary conversion control. Sites that reserve rail clearance in a
 * layout should re-check that reserve; `--weprocta-cta-tab-min-size` re-points
 * the floor for a site that has measured a different one.
 */
.weprocta-side-cta-stack .weprocta-side-cta {
	min-width: var(--weprocta-cta-tab-min-size, 44px);
	box-sizing: border-box;
	justify-content: center;
}

/* ── Viewport containment ────────────────────────────────────────────────
 * A vertically-written tab is as tall as its label is long, and the label is
 * admin-supplied. Two long labels plus the gap — or one long label plus a
 * vertical offset — can exceed the viewport, at which point part of the rail
 * is off-screen and the "visible on load" contract is broken by CONTENT rather
 * than by a hiding mechanism. Measured, not assumed: in the gate matrix a rail
 * carrying deliberately overlong labels at a +200px offset had both tabs report
 * `inViewport: false` on a 900px-tall viewport.
 *
 * The cap applies at every viewport height, not only short ones. The previous
 * rule was scoped to `max-height: 520px`, which is the landscape-phone case; a
 * long label overflows a 900px desktop viewport just as effectively, and the
 * offset control added in 5.7.0 makes that easier to reach.
 *
 * 40vh per tab means two tabs plus the gap can never exceed ~80vh, leaving the
 * rail inside the viewport with room for the offset at either end. The label
 * ellipsises rather than the rail leaving the screen: a truncated label is a
 * legible, clickable, screen-reader-named control (the accessible name comes
 * from `aria-label`, which is NOT truncated), whereas an off-screen tab is not
 * a control at all.
 */
/*
 * The second term is what makes containment a CONSTRUCTION guarantee rather
 * than a bound that happens to hold for typical labels.
 *
 * The rail is centred, so a vertical offset spends its budget TWICE: it moves
 * the rail's centre by `offset`, which costs `offset` of headroom at one end
 * and gains it at the other, so the height still available to the whole rail is
 * `100vh - 2 * |offset|`. Two tabs share it, minus the gap and a small margin —
 * hence `(100vh - 2 * --wsc-offset-abs - 24px) / 2` per tab.
 *
 * Worked example from the gate matrix, on the 900px-tall viewport where this
 * failed: at the maximum +200px offset the cap resolves to (900 - 400 - 24)/2 =
 * 238px per tab, so the rail is 2 x 238 + 8 = 484px tall, centred at 650px, and
 * spans 408-892px — inside the viewport. Before the cap, two 360px tabs spanned
 * 286-1014px and the lower tab reported `inViewport: false`.
 *
 * `min()` keeps 40vh as the ordinary ceiling so a rail with no offset is capped
 * by the friendlier of the two, and `--wsc-offset-abs` defaults to 0 so a site
 * that never sets an offset gets exactly the 40vh rule.
 */
/*
 * v5.10.0 adds two terms that the 5.7.0 formula could not express, and both are
 * about surfaces the rail has to share a phone screen with.
 *
 * 1. `dvh` INSTEAD OF `vh` WHERE THE ENGINE HAS IT. On mobile Safari and
 *    Chrome, `100vh` is the LARGE viewport — the height the page would have if
 *    the browser chrome were fully retracted. It is therefore taller than what
 *    the visitor can actually see for most of a session, so a cap expressed in
 *    `vh` permits a rail taller than the visible area and the containment
 *    guarantee quietly stops being one. `dvh` is the height that is actually
 *    on screen right now. Declared as a second `max-height` so engines without
 *    `dvh` keep the `vh` line and lose nothing.
 *
 * 2. A BOTTOM CLEARANCE, so a fixed bottom bar can be reserved against. Both
 *    tenants measured for this release ship one — `nav.rbp-appnav` (65px) on
 *    one, `nav.we-bottomnav` (62px) on the other — and the rail is centred, so
 *    at the viewports measured it clears them with room to spare. What it did
 *    NOT have was any way to KNOW about them: the cap's only inputs were the
 *    viewport and the admin offset, so a longer label, a shorter screen or a
 *    taller bar could walk the rail into one with nothing to stop it, and the
 *    only remedy was a vertical offset that also moves the rail away from
 *    centre. `--weprocta-cta-bottom-clearance` (and its top counterpart)
 *    subtract from the budget instead, so the rail simply gets shorter and
 *    stays centred. Both default to 0px, so nothing changes for a site that
 *    does not set them, and the safe-area bottom inset is added on top because
 *    a home indicator is a bottom bar the site did not install.
 *
 * The formula is otherwise the 5.7.0 one, term for term: the offset is still
 * spent twice because the rail is centred, and the 24px margin and the two-tab
 * division are unchanged.
 */
.weprocta-side-cta-stack .weprocta-side-cta {
	max-height: 40vh;
	max-height: min(40vh, calc((100vh - 2 * var(--wsc-offset-abs, 0px) - 24px) / 2));
	max-height: min(
		40dvh,
		calc(
			(
				100dvh
				- 2 * var(--wsc-offset-abs, 0px)
				- 2 * max(
					var(--weprocta-cta-top-clearance, 0px),
					calc(var(--weprocta-cta-bottom-clearance, 0px) + env(safe-area-inset-bottom, 0px))
				)
				- 24px
			) / 2
		)
	);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Landscape phones are tighter still: two tabs plus the gap must clear a
 * ~568px-tall viewport with the browser chrome already taking a share. */
@media (max-height: 520px) {
	.weprocta-side-cta-stack .weprocta-side-cta {
		max-height: 36vh;
		max-height: min(36vh, calc((100vh - 2 * var(--wsc-offset-abs, 0px) - 24px) / 2));

		/* This block is declared after the general cap, so it WINS — which means
		 * it has to carry the `dvh` + clearance terms too, or a landscape phone
		 * would silently fall back to the `vh` budget the rule above exists to
		 * stop trusting. Same formula, tighter ceiling. */
		max-height: min(
			36dvh,
			calc(
				(
					100dvh
					- 2 * var(--wsc-offset-abs, 0px)
					- 2 * max(
						var(--weprocta-cta-top-clearance, 0px),
						calc(var(--weprocta-cta-bottom-clearance, 0px) + env(safe-area-inset-bottom, 0px))
					)
					- 24px
				) / 2
			)
		);
	}
}

/* ── Coexistence with the Picasso Menu mobile drawer ─────────────────── *
 * picasso-menu.css already hides the floating WhatsApp widget while the
 * full-screen mobile menu is open. A single side tab overlapping the drawer
 * was tolerable; two stacked tabs are not. Scoped to `.weprocta-side-cta-stack`,
 * so this only ever applies where a secondary tab is configured — a site
 * running the classic single tab is completely unaffected. */
body:has(.wsk-pm.is-mobile-open) .weprocta-side-cta-stack {
	display: none;
}

/* ── Motion + print ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.weprocta-side-cta-stack .weprocta-side-cta--right:hover,
	.weprocta-side-cta-stack .weprocta-side-cta--left:hover {
		transform: none;
	}
}

@media print {
	.weprocta-side-cta-stack {
		display: none !important;
	}
}

/* ── Semantic visual variants (v5.6.0) ───────────────────────────────── *
 *
 * A variant is a MEANING, not a colour. `info` is the slot a site points at
 * whatever its blue is; `warning` is the slot for its yellow. That indirection
 * is the whole point: master ships no client colour, and a heat-pump action is
 * `info` and a solar action is `warning` because of what those actions ARE.
 *
 * Resolution order per slot, first hit wins:
 *   1. --weprocta-cta-<slot>   — set by the site specifically for these CTAs
 *   2. --wdt-color-<token>     — the WEPRO Design Tokens value, when that
 *                                plugin is active (GOD-12: absent = skipped)
 *   3. a neutral built-in      — so an enabled variant is never unstyled
 *
 * Each rule only re-points `--sc-accent`, which the `--accent` block above
 * already derives the whole nameplate from, so no gradient, glaze, shimmer,
 * shadow or focus rule is duplicated. They are declared AFTER `--accent` so a
 * tab carrying both classes resolves to the variant.
 */

.weprocta-side-cta--v-brand    { --sc-accent: var(--weprocta-cta-brand,    var(--wdt-color-primary,   #1f4b73)); }
.weprocta-side-cta--v-accent   { --sc-accent: var(--weprocta-cta-accent,   var(--wdt-color-accent,    #b8860b)); }
.weprocta-side-cta--v-info     { --sc-accent: var(--weprocta-cta-info,     var(--wdt-color-info,      #1f4b73)); }
.weprocta-side-cta--v-success  { --sc-accent: var(--weprocta-cta-success,  var(--wdt-color-success,   #2f6b45)); }
.weprocta-side-cta--v-warning  { --sc-accent: var(--weprocta-cta-warning,  var(--wdt-color-warning,   #a8760a)); }
.weprocta-side-cta--v-neutral  { --sc-accent: var(--weprocta-cta-neutral,  var(--wdt-color-neutral,   #4a4f55)); }
.weprocta-side-cta--v-contrast { --sc-accent: var(--weprocta-cta-contrast, var(--wdt-color-contrast,  #16181a)); }

/* ── Variant plate contrast policy (v5.6.2) ──────────────────────────── *
 *
 * 5.6.0 tried to hold WCAG AA on a variant plate by TUNING how much white the
 * top gradient stop mixes in (78% → 90%). Measured on composited pixels that
 * was still a fail: the `info` slot rendered 3.46:1 at the tab's inner edge.
 * Tuning could not have worked, because four separate things lighten a plate
 * that carries light ink and only one of them was being tuned:
 *
 *   1. `--sc-gold-hi` mixed white into the top stop — exactly where the label
 *      starts;
 *   2. the plate is painted at 92% alpha, so a white page BEHIND the tab
 *      lightens it by 8% (contrast that depends on what is scrolled past);
 *   3. the `::before` glaze is a white wash, brightest at the inner edge;
 *   4. the `::after` shimmer sweeps a white band across the label, so the
 *      plate's worst contrast is a moving target that a static measurement
 *      never sees.
 *
 * The policy that replaces the tuning: ON A PLATE THAT CARRIES LIGHT INK, NO
 * DECORATION MAY LIGHTEN THE PLATE. Every lightening vector is either removed
 * or re-derived FROM THE PLATE so it is darker than the plate by construction:
 * `--sc-deco` is the accent at 55%, which is darker than all four gradient
 * stops (100 / 100 / 84 / 66), so compositing it at any alpha over any point
 * of the plate can only lower luminance.
 *
 * The consequence is a real guarantee rather than a tuned number: the plate's
 * lightest possible pixel, in every state, IS THE ACCENT COLOUR ITSELF. So AA
 * holds for any slot whose colour clears 4.5:1 against the ink — which is a
 * contract a site can be held to and can measure, instead of a number that
 * happened to work for one blue.
 *
 * The depth cue survives: the gradient still runs light→dark top→bottom
 * (accent → 84% → 66%) and the edge wash still reads as the tab tucking under
 * the viewport edge. What is gone is the highlight that was lifting the plate
 * INTO the label.
 */

/* Every variant plate is opaque. A variant is a site's brand colour; whether
 * it meets AA must not depend on the page behind it. Brass keeps its 92%. */
.weprocta-side-cta--v-brand,
.weprocta-side-cta--v-accent,
.weprocta-side-cta--v-info,
.weprocta-side-cta--v-success,
.weprocta-side-cta--v-warning,
.weprocta-side-cta--v-neutral,
.weprocta-side-cta--v-contrast {
	--sc-plate-alpha: 100%;
}

/*
 * Ink is a MEASURED pairing, never derived at render time, so each slot names
 * its own. The two light-plate slots (`accent`, `warning`) carry dark ink; the
 * mid-tone slots carry light ink. Both sides read the same two site-facing
 * tokens the collapsed presentation already uses, so a site names its inks
 * once and both presentations honour them.
 *
 * DARK-INK PLATES ARE THE MIRROR OF THE POLICY ABOVE, and the mirror half was
 * missing: on a plate carrying DARK ink, no stop may DARKEN the plate. The
 * inherited recipe ends its gradient at `color-mix(accent 66%, #000)`, and
 * that bottom stop measured 2.42:1 (`warning`, #a8760a) and 2.84:1 (`accent`,
 * #b8860b) against their own default ink — the slots' SHIPPED defaults failed
 * AA at the bottom of every plate, at every width, in every state. It read as
 * passing before only because the 92%-alpha plate was letting a white page
 * bleed through and lighten it; pinning the plate opaque removed that
 * accidental help and exposed it.
 *
 * So the stops are re-derived to run from lighter-than-accent down TO the
 * accent, never past it. The darkest pixel a dark-ink plate can produce is
 * therefore the accent itself — the same guarantee the light-ink plates get
 * from the other direction, and the same contract for a site: AA holds for any
 * slot colour that clears 4.5:1 against its ink. The plate still reads top-lit;
 * it settles into the brand colour instead of dropping below it.
 */
.weprocta-side-cta--v-accent,
.weprocta-side-cta--v-warning {
	--sc-ivory: var(--weprocta-cta-ink-on-light, #1a1408);

	--sc-gold-hi:   color-mix(in srgb, var(--sc-accent) 72%, #ffffff);
	--sc-gold:      color-mix(in srgb, var(--sc-accent) 86%, #ffffff);
	--sc-gold-mid:  color-mix(in srgb, var(--sc-accent) 96%, #ffffff);
	--sc-gold-deep: var(--sc-accent);

	/* The bottom shade is the one bevel layer that darkens; on dark ink it is
	 * the mirror of the light bevel dropped above. The top highlight stays —
	 * lightening a light plate can only help the ink it carries. */
	--sc-edge-lo: transparent;

	/* Docked veil, inverted (v5.6.3). The base veil darkens, which is right
	 * under light ink and exactly wrong here: these plates carry DARK ink, so
	 * the wash has to LIGHTEN to move the plate away from it. Same polarity
	 * rule as everything else in this block. */
	--sc-dock-veil: var(--weprocta-cta-dock-veil-on-light, rgba(255, 255, 255, 0.34));
}

/*
 * Light-ink plates. `--sc-ivory` was #f4f7f1, a soft off-white carried over
 * from the brass plate where it is correct. On a mid-tone plate it costs
 * ~0.3:1 for no visible benefit, so these slots take the same pure white the
 * collapsed presentation already uses — overridable by the same token.
 */
.weprocta-side-cta--v-brand,
.weprocta-side-cta--v-info,
.weprocta-side-cta--v-success,
.weprocta-side-cta--v-neutral,
.weprocta-side-cta--v-contrast {
	/* No white lift: the plate's lightest point is the accent itself. */
	--sc-gold-hi: var(--sc-accent);

	--sc-ivory: var(--weprocta-cta-ink-on-dark, #ffffff);

	/* Darker than every gradient stop by construction — see the policy note. */
	--sc-deco: color-mix(in srgb, var(--sc-accent) 55%, #000000);

	/* The warm-brass bevel highlight is the one decoration that can only hurt
	 * here: it is a light line on a plate carrying light ink, and it is warm on
	 * a plate that may be any hue. Dropped; the bottom shade is kept and
	 * neutralised, matching what the `--accent` plate already does. */
	--sc-edge-hi:       transparent;
	--sc-edge-hi-hover: transparent;
	--sc-edge-lo:       rgba(0, 0, 0, 0.18);
}

/* ── Optional per-action icon (v5.6.0) ───────────────────────────────── *
 *
 * The tab is `writing-mode: vertical-rl`, so its INLINE axis runs top→bottom.
 * `flex-direction: row` therefore stacks the icon ABOVE the label on screen —
 * counter-intuitive to read, correct to render. The icon itself is switched
 * back to horizontal writing so the glyph stays upright instead of rotating
 * with the label.
 *
 * Scoped to `--has-icon`, so a tab without an icon keeps the plain block
 * layout it has always had and is unaffected by every rule here.
 */
.weprocta-side-cta--has-icon {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.weprocta-side-cta__icon {
	position: relative;
	z-index: 3;               /* above the glaze + shimmer overlays */
	writing-mode: horizontal-tb;
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.weprocta-side-cta__icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Phones shrink the tab (weprocta.css drops padding + font-size at ≤768px);
 * shrink the glyph with it so the label keeps its room. */
@media (max-width: 768px) {
	.weprocta-side-cta--has-icon { gap: 6px; }
	.weprocta-side-cta__icon svg { width: 16px; height: 16px; }
}

/* A rotated glyph is disorienting; the icon never animates with the plate. */
@media (prefers-reduced-motion: reduce) {
	.weprocta-side-cta__icon { transition: none; }
}

/* ── Variant plates: re-derive the brass decoration from the plate ───── *
 *
 * The base plate carries two decorative overlays whose colours are hardcoded
 * WARM IVORY — a static glaze (`::before`, rgba(255,246,224,.22)) and the
 * shimmer band (`::after`, rgba(255,246,224,.28)). Those values were picked to
 * sit on brass, so on a variant plate they impose a cast the variant never
 * asked for. 5.6.0 corrected the CAST by swapping them to neutral white; that
 * left the LUMINANCE problem untouched, and white is the worst possible
 * overlay on a plate carrying light ink.
 *
 * Both overlays now paint `--sc-deco`, which each plate derives from its own
 * accent, at the same alphas and the same geometry. The glaze keeps its
 * inner-edge-to-transparent ramp and the shimmer keeps its 195° sweep, its
 * duration and its easing — only the polarity changes, so the depth cue reads
 * as the plate being recessed at the viewport edge rather than lit at it.
 *
 * The shimmer matters more than it looks: it is a 10s infinite animation, so a
 * white band was periodically sweeping the label and the plate's true worst
 * contrast was a MOVING target no static screenshot could catch. Painting it
 * from `--sc-deco` makes every frame of the sweep darker than the plate.
 *
 * Scoped to the variant classes, so the brass primary and the legacy `--accent`
 * green keep their existing decoration exactly.
 */
.weprocta-side-cta--v-brand::before,
.weprocta-side-cta--v-info::before,
.weprocta-side-cta--v-success::before,
.weprocta-side-cta--v-neutral::before,
.weprocta-side-cta--v-contrast::before {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--sc-deco) 14%, transparent) 0%,
		color-mix(in srgb, var(--sc-deco) 2%, transparent) 60%,
		transparent 100%
	);
}

.weprocta-side-cta--v-brand::after,
.weprocta-side-cta--v-info::after,
.weprocta-side-cta--v-success::after,
.weprocta-side-cta--v-neutral::after,
.weprocta-side-cta--v-contrast::after {
	background: linear-gradient(
		195deg,
		transparent 0%,
		transparent 30%,
		color-mix(in srgb, var(--sc-deco) 18%, transparent) 50%,
		transparent 70%,
		transparent 100%
	);
}

/* Light-plate variants carry dark ink, so a wash in EITHER direction narrows
 * the gap: white lifts the plate toward the ink, and a plate-derived dark wash
 * pulls the plate down toward it. Drop the decoration entirely there — a flat
 * plate is the readable choice, and it is the same reasoning the collapsed
 * presentation already applies. */
.weprocta-side-cta--v-accent::before,
.weprocta-side-cta--v-warning::before,
.weprocta-side-cta--v-accent::after,
.weprocta-side-cta--v-warning::after {
	display: none;
}

/* Engines without color-mix() resolve `--sc-gold-*` to nothing, which makes the
 * whole four-stop gradient invalid and leaves a transparent plate under light
 * ink — unreadable. The `--accent` variant has carried this fallback since
 * 5.4.6; the 5.6.0 slots shipped without one. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.weprocta-side-cta--v-brand,
	.weprocta-side-cta--v-accent,
	.weprocta-side-cta--v-info,
	.weprocta-side-cta--v-success,
	.weprocta-side-cta--v-warning,
	.weprocta-side-cta--v-neutral,
	.weprocta-side-cta--v-contrast {
		background: var(--sc-accent);
	}

	.weprocta-side-cta--v-brand::before,
	.weprocta-side-cta--v-accent::before,
	.weprocta-side-cta--v-info::before,
	.weprocta-side-cta--v-success::before,
	.weprocta-side-cta--v-warning::before,
	.weprocta-side-cta--v-neutral::before,
	.weprocta-side-cta--v-contrast::before,
	.weprocta-side-cta--v-brand::after,
	.weprocta-side-cta--v-accent::after,
	.weprocta-side-cta--v-info::after,
	.weprocta-side-cta--v-success::after,
	.weprocta-side-cta--v-warning::after,
	.weprocta-side-cta--v-neutral::after,
	.weprocta-side-cta--v-contrast::after {
		display: none;
	}
}