/*
 * SavvyVault Forms Studio — front-end placement chrome + presets (12B-4d).
 * CSS-variable driven; the inner form keeps RestSignup's own inline style.
 * Banner / Sidebar / Inline, 3 presets each. Dark-mode + reduced-motion aware.
 */

:root {
	--sv-form-default-accent: var(--savvy-color-accent, #2563eb);
	--sv-form-default-bg: var(--savvy-color-surface, #ffffff);
	--sv-form-default-ink: #1f2329;
	/* W14-2B: this token is DECORATIVE and stays where it is. Its consumers
	   are the banner bottom rule (:32), the sidebar card edge (:81) and the
	   inline divider band and boxed callout (:103, :104, :110) — every one a
	   border SC 1.4.11 exempts, because removing it does not make anything
	   unrecognisable as a control. Backlog §5.20 lists this line as a
	   form-control border; re-derived from the tree, five of its six
	   consumers are chrome and only the dark-mode input override below is a
	   control. Changing the token itself would have darkened every card edge
	   and divider on the placement surface — the blanket replacement §5.20
	   itself warns against. The control border is --af-color-border-control,
	   applied at the input, in both modes. */
	--sv-form-default-border: #d8dce0;
	--sv-form-default-radius: 10px;
}

.sv-pl { box-sizing: border-box; }
.sv-pl *, .sv-pl *::before, .sv-pl *::after { box-sizing: border-box; }
.sv-pl__inner { margin: 0 auto; }
.sv-pl__dismiss {
	position: absolute; top: 8px; right: 12px;
	background: transparent; border: 0; font-size: 22px; line-height: 1;
	cursor: pointer; color: inherit; opacity: .65; min-width: 44px; min-height: 44px;
}
.sv-pl__dismiss:hover { opacity: 1; }
/* W14-2B: 13px -> 16px. A <button>, rendered by PlacementEngine on a public
   placement surface. Brand & Design §4.5. It is invisible to every mechanical
   sweep this project runs, because the class name carries none of "input",
   "select" or "textarea" — which is why the design ratchet records this file
   as clean. Found by the pre-flight reviewer, not by a grep. */
.sv-pl__dismiss--text { width: auto; min-width: 0; font-size: max(1rem, 16px); padding: 4px 10px; }

/* ---------- Banner (top, sticky) ------------------------------------- */
.sv-pl--banner {
	position: relative;
	width: 100%;
	background: var(--sv-form-bg, var(--sv-form-design-bg, var(--sv-form-default-bg)));
	color: var(--sv-form-ink, var(--sv-form-design-ink, var(--sv-form-band-ink, var(--sv-form-default-ink))));
	border-bottom: 1px solid var(--sv-form-border, var(--sv-form-band-border, var(--sv-form-default-border)));
	padding: 14px 48px 14px 16px;
}
.sv-pl--banner .sv-pl__inner { max-width: 980px; }
/* Banners render the form in COMPACT mode: text-field labels move to
   placeholders while resolved topic/frequency legends remain visible. The
   controls wrap when those saved fields are enabled. THE CONSENT CHECKBOX IS
   SHOWN -- compact stopped
   touching consent at 2.139.0; before that it replaced the checkbox with a
   pre-set hidden field, and this comment said so for as long as it did. */
/* The form's inline base CSS caps .savvy-vault-signup at 420px; let the
   banner form fill the full inner width so it stays one inline row. */
.sv-pl--banner .savvy-vault-signup { max-width: none; width: 100%; }
.sv-pl--banner .savvy-vault-signup__form {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.sv-pl--banner .savvy-vault-signup__title { display: none; }
.sv-pl--banner .savvy-vault-signup__subtext { margin: 0; }
.sv-pl--banner .savvy-vault-signup__image { max-height: 40px; width: auto; margin: 0; flex: 0 0 auto; }
/* Hide text/email labels (kept for screen readers); placeholders show. */
.sv-pl--banner .savvy-vault-signup__field > .savvy-vault-signup__label {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
.sv-pl--banner .savvy-vault-signup__field > .savvy-vault-signup__label--select {
	position: static; width: auto; height: auto; overflow: visible;
	clip: auto; white-space: normal; margin: 0 0 4px; flex: 1 1 100%;
}
.sv-pl--banner .savvy-vault-signup__field > .savvy-vault-signup__label--compact-visible {
	position: static; width: auto; height: auto; overflow: visible;
	clip: auto; white-space: normal; margin: 0 0 4px; flex: 1 1 100%;
}
.sv-pl--banner .savvy-vault-signup__field { flex: 1 1 180px; min-width: 140px; }
.sv-pl--banner .savvy-vault-signup__section {
	flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px 12px; margin: 0;
}
.sv-pl--banner .savvy-vault-signup__section > .savvy-vault-signup__legend { flex: 1 1 100%; margin: 0; }
.sv-pl--banner .savvy-vault-signup__section > .savvy-vault-signup__field { flex: 1 1 180px; min-width: 140px; }
.sv-pl--banner .savvy-vault-signup__input { margin: 0; }

.savvy-vault-signup__phone { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.4fr); gap: 8px; align-items: end; }
.savvy-vault-signup__phone-region-label { grid-column: 1 / -1; display: block; font-size: max(1rem, 16px); line-height: 1.5; }
.savvy-vault-signup__phone-region,
.savvy-vault-signup__phone-number { min-height: 44px; font-size: max(1rem, 16px); }
.savvy-vault-signup__phone-number { direction: ltr; unicode-bidi: isolate; }
.savvy-vault-signup__phone-consent { border-inline-start: 3px solid var(--savvy-color-border, #dcdcde); padding-inline-start: 8px; }
.savvy-vault-signup__field-error {
	margin: var(--savvy-gap-xs, 4px) 0 0;
	color: var(--savvy-color-error, #b32d2e);
	font-size: max(1rem, 16px);
	font-weight: 600;
}

@media screen and (max-width: 600px) {
	.savvy-vault-signup__phone { grid-template-columns: 1fr; }
}
.sv-pl--banner .savvy-vault-signup--has-multiline .savvy-vault-signup__form {
	display: flex; flex-direction: column; align-items: stretch;
}
.sv-pl--banner .savvy-vault-signup--has-multiline .savvy-vault-signup__field,
.sv-pl--banner .savvy-vault-signup--has-multiline .savvy-vault-signup__input,
.sv-pl--banner .savvy-vault-signup--has-multiline .savvy-vault-signup__button,
.sv-pl--banner .savvy-vault-signup--has-multiline .savvy-vault-signup__consent {
	width: 100%; flex: 0 0 auto; align-self: stretch;
}
.sv-pl--banner .savvy-vault-signup--has-multiline .savvy-vault-signup__textarea {
	min-height: 8rem;
}
/* THE COMPACT GAP MUST NOT REACH A BANNER. 2.139.0 added, in the always-emitted
   inline stylesheet, `.savvy-vault-signup--compact .savvy-vault-signup__input
   {margin-bottom:...}` to restore the vertical rhythm that hiding the labels
   took away. On a block or shortcode form that is right. On a banner it is not:
   the form is a flex ROW, `align-items:center` centres MARGIN boxes, and the
   button is `align-self:stretch` -- so a bottom margin pushes the input off the
   line's centre and grows the button by the same amount, breaking the height
   match the rule above exists to hold.
   AND THE TWO SELECTORS TIE. Both are (0,2,0), and the inline block prints on
   wp_body_open while this file prints in wp_head, so the compact rule wins on
   ORDER -- on every banner, since PlacementEngine sets compact for all of them.
   This reset is (0,3,0) deliberately: it wins on SPECIFICITY, which a later
   change to enqueue order or print position cannot silently reverse. Same
   (0,2,0) trap as the button rule below, which this file already names.
   Found by code-qa and design-qa independently; the comment that shipped with
   the defect asserted banners were safe because of `gap`, which is wrong. */
.sv-pl--banner .savvy-vault-signup--compact .savvy-vault-signup__input { margin-bottom: 0; }
/* Match the button box to the input height with a transparent 1px border.
   Keep the 44px floor: once wrappers let a narrow banner wrap the button onto
   its own flex line, align-self:stretch has no input height to borrow. */
/* align-self: stretch makes the button take the flex line's height (= the
   taller input fields), so heights match exactly regardless of padding. */
.sv-pl--banner .savvy-vault-signup__button { flex: 0 0 auto; margin: 0; min-height: 44px; padding: 0 20px; border: 1px solid transparent; align-self: stretch; line-height: 1.2; }
.sv-pl--banner .savvy-vault-signup--has-multiline .savvy-vault-signup__button {
	min-height: 44px; padding: 11px 20px;
}
/* THE CONSENT ROW IS SHOWN ON BANNERS, AND SINCE 2.139.0 IT IS A REAL
   CHECKBOX. It was `display: none` until 2.137.0, which made the sentence
   visible and left the form submitting a hidden `sv_optin=1` beside it.
   That answered Privacy & Data Handling Baseline 4.2's INFORMED limb -- the
   data subject is shown what is collected, AT THE POINT OF SUBMISSION -- and
   left the EXPLICIT limb unanswered, because an affirmative act is exactly
   what a pre-set hidden field is not. The 2.137.0 comment here called that
   field "worse rather than better" and did not remove it.
   AND THE ARGUMENT THAT KEPT IT IS ANSWERED HERE RATHER THAN DROPPED, because
   dropping it would leave the next reader to rediscover it. The original
   reasoning was that the double opt-in confirmation click supplies the
   affirmative act. IT CANNOT: that click happens AFTER the address is stored
   and mailed, so it is evidence of a live address and of a SECOND act, and it
   cannot supply the first one retrospectively. 4.2 says consent is "not
   pre-checked or INFERRED" and makes no exception for a later confirmation.
   DoubleOptin still records the click -- it is a second control, not a
   substitute for the first, and since 2.139.0 the server refuses a signup that
   arrives without `sv_optin` at all.
   A BANNER IS A COMPACT FORM: PlacementEngine sets `compact` for every banner
   placement, so this was every banner in production, not an edge case.
   Removed at 2.139.0 on Ivy's ruling. The selector below moved from
   `__finecon` to `__consent` in the same change -- `__finecon` is now emitted
   nowhere, and a rule left behind for it would style an element that no longer
   exists while reading as though the disclosure were still handled.
   It takes its own row (`order` + full basis) so a slim banner still reads as
   one line of controls with the disclosure beneath, rather than growing a
   third column. Raised by the twinklecoincrew.net project's first placement;
   found by counting the set rather than by their report. */
/* THE MARGIN GOES THROUGH THE PROPERTY, NOT OVER IT. code-qa round 3, F2.
   `--sv-form-consent-margin` is one of the five properties W14-17 published and
   named to the twinklecoincrew tenant, and their use case IS a banner. Setting
   `margin` directly here at (0,2,0) beat the base rule's
   `margin:var(--sv-form-consent-margin,12px 0)` at (0,1,0) and made the
   property inert on the one surface it was asked for -- leaving the tenant to
   out-specify us, which is the "tolerated workaround" backlog 3.11 limb 2
   forbids. Assigning the property instead means the banner sets the DEFAULT and
   a tenant can still override it.
   This is the same specificity trap fixed for --sv-form-compact-gap thirty
   lines above, in the same release, not carried to the rule that release moved.
   The 6px is inherited from the `__finecon` rule this replaced and is NOT on
   the 4-base spacing scale (design-qa F3); left as-is because changing it moves
   a rendered value nobody has measured, and raised rather than silently fixed. */
.sv-pl--banner .savvy-vault-signup { --sv-form-consent-margin: 6px 0 0; }
.sv-pl--banner .savvy-vault-signup__consent {
	flex: 1 1 100%; order: 9;
}
.sv-pl--banner .savvy-vault-signup__status { flex: 1 1 100%; order: 10; margin: 6px 0 0; }

/* W14-24 -- AN ERROR THAT LOOKED EXACTLY LIKE A RECEIPT.
 *
 * `.savvy-vault-signup__status` had ONE rule in the whole tree and it was the
 * layout line above. So "Thanks -- please check your inbox" and "Your details
 * have not been saved" rendered identically: same element, same colour, same
 * weight, distinguished only by their words. W14-24 adds an eleventh error
 * return to this element -- the one that tells a paying visitor their
 * enrolment did not save -- and 5.29 asks for a refusal LOUD ENOUGH that the
 * visitor knows. A message styled as a confirmation is not loud.
 *
 * BORDER *AND* ICON *AND* TEXT, which is WP UI Specification 10's requirement
 * and not a preference: Brand & Design 4.6 forbids colour as the sole carrier
 * of meaning, so the glyph does the work for anyone who cannot use the hue.
 * The ink is the family error token with its shipped literal as the fallback;
 * no new custom property is declared, so the published surface gains a CLASS
 * and not a property -- and adding is not a 2.5.2 notice event, which is the
 * reading W14-23 established for adding a property.
 *
 * The ten error returns that predate this one all reach the same element and
 * are all improved by it. That is deliberate, and it is stated because a
 * change wider than the iteration's own hunk should never be silent. */
.savvy-vault-signup__status--error {
	display: flex;
	align-items: flex-start;
	gap: var(--savvy-gap-sm, 8px);
	padding: var(--savvy-gap-sm, 8px) var(--savvy-gap-md, 16px);
	/* AN OPAQUE GROUND, AND THAT IS THE WHOLE FIX. The first draft set the ink
	   and the border to --savvy-color-error and let whatever was behind them
	   show through. That token has no dark-mode value and no band remap, so on
	   the dark form surface it measured 2.6215:1 and on the Preset B banner
	   gradient 1.2196:1 -- the notice vanished on two of the three surfaces it
	   ships on, which is the defect it was written to fix. Caught by design QA.
	   WP UI Specification 10.2's Error row specifies border + #FEF2F2 ground +
	   text-primary ink, and a ground we paint ourselves cannot be defeated by
	   the fill behind it. Measured: ink 14.5218:1 on the panel; the panel's own
	   border 5.7622:1 on it; and the PANEL against what surrounds it is
	   4.7248:1 on the gradient start, 7.9736:1 on the gradient end and
	   15.1058:1 on the dark surface -- on a white page the fill is 1.0939:1 and
	   the 6.30:1 border is what carries it, so both grounds are covered by one
	   of the two. */
	background: var(--savvy-color-error-bg, #FEF2F2);
	border: 1px solid var(--savvy-color-error, #b32d2e);
	border-radius: var(--savvy-radius-sm, 4px);
	color: var(--savvy-color-text-primary, #1d2327);
	font-size: max(1rem, 16px);
	line-height: 1.6;
}
.savvy-vault-signup__status--error::before {
	/* A LITERAL CHARACTER, NOT A CSS ESCAPE, AND THE REASON IS A REAL DEFECT.
	   The first draft wrote the glyph as a CSS unicode escape. It was
	   authored through a script whose own string rules read that escape as
	   OCTAL, so what landed in this file was control byte 0x16 followed by
	   the visible letters A and 0 -- junk where the warning sign should be,
	   and the non-colour carrier Brand & Design 4.6 requires was therefore
	   absent while a changelog entry said it was present.
	   Found by design QA reading
	   the bytes. Writing the character itself cannot be re-broken that way.
	   `speak: never` was also removed: it is CSS Speech and no shipping browser
	   implements it. The glyph is announced, and "warning" ahead of an error
	   message is correct rather than noise. */
	content: "⚠";
	flex: 0 0 auto;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--savvy-color-error, #b32d2e);
}
/* Preset A / card: minimal bar */
.sv-pl--banner.sv-pl--a, .sv-pl--banner.sv-pl--card { background: var(--sv-form-bg, var(--sv-form-design-bg, var(--sv-form-default-bg))); }
/* Preset B / flat: gradient CTA.
 *
 * W14-13 — THREE LITERALS HERE WERE ASSERTING A DARK GROUND THAT ONLY THE
 * DEFAULT HAS. The first stop is --sv-form-accent, which an operator sets, so
 * the fill can be light; the ink below was white regardless. Measured on a
 * light accent (#FDE68A): #FFFFFF is 1.2454:1 against SC 1.4.3's 4.5:1.
 *
 * `--sv-form-accent-2` IS THE SECOND STOP, AND IT IS OURS RATHER THAN THE
 * OPERATOR'S. That matters, because with a light accent the gradient ran
 * light -> dark and NO single ink clears both ends: #FFFFFF is 1.2454:1 on
 * #FDE68A while #111827 is 2.0338:1 on #1e40af. Ivy ruled 2026-09-20 that our
 * stop gives way — PlacementEngine points this property at the operator's own
 * accent on a light ground, which makes the banner a FLAT fill of exactly the
 * colour they chose. Their value is never altered and no companion hue is
 * invented. Unset, it is #1e40af and the shipped gradient is byte-identical.
 *
 * The two ink rules now read --sv-form-ink, which the base-layer band rule in
 * savvyvault-tokens.css remaps per band — ONE rule in the base layer, as
 * WP UI Specification section 25.4 requires, rather than a sweep of literals
 * that each have to be remembered. On the shipped default the band is still
 * "dark" and --sv-form-ink still resolves to #FFFFFF, so nothing moves.
 */
.sv-pl--banner.sv-pl--b, .sv-pl--banner.sv-pl--flat {
	background: linear-gradient(90deg, var(--sv-form-accent, var(--sv-form-design-accent, var(--sv-form-default-accent))), var(--sv-form-accent-2, var(--sv-form-design-accent-2, #1e40af)));
	color: var(--sv-form-ink, var(--sv-form-design-ink, var(--sv-form-band-ink, #fff))); border-bottom: 0;
}
.sv-pl--banner.sv-pl--b .savvy-vault-signup__title,
.sv-pl--banner.sv-pl--flat .savvy-vault-signup__title { color: var(--sv-form-ink, var(--sv-form-design-ink, var(--sv-form-band-ink, #fff))); }
/* Preset C / underline: slim sticky */
.sv-pl--banner.sv-pl--c, .sv-pl--banner.sv-pl--underline {
	position: sticky; top: 0; z-index: 9990; padding-top: 10px; padding-bottom: 10px;
}

/* ---------- Sidebar (card) ------------------------------------------- */
.sv-pl--sidebar {
	background: var(--sv-form-bg, var(--sv-form-design-bg, var(--sv-form-default-bg)));
	color: var(--sv-form-ink, var(--sv-form-design-ink, var(--sv-form-band-ink, var(--sv-form-default-ink))));
	border: 1px solid var(--sv-form-border, var(--sv-form-band-border, var(--sv-form-default-border)));
	border-radius: var(--sv-form-radius, var(--sv-form-design-radius, var(--sv-form-default-radius)));
	padding: 18px;
	max-width: 420px;
}
.sv-pl--sidebar.sv-pl--a, .sv-pl--sidebar.sv-pl--card { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.sv-pl--sidebar.sv-pl--b, .sv-pl--sidebar.sv-pl--flat { box-shadow: none; }
.sv-pl--sidebar.sv-pl--c, .sv-pl--sidebar.sv-pl--underline {
	border: 0; border-top: 3px solid var(--sv-form-accent, var(--sv-form-design-accent, var(--sv-form-default-accent))); border-radius: var(--savvy-radius-none, 0); padding-left: 0; padding-right: 0;
}

/* ---------- Inline (in content) ------------------------------------- */
.sv-pl--inline {
	margin: 28px 0;
	background: var(--sv-form-bg, var(--sv-form-design-bg, var(--sv-form-default-bg)));
	color: var(--sv-form-ink, var(--sv-form-design-ink, var(--sv-form-band-ink, var(--sv-form-default-ink))));
	padding: 22px 20px;
	border-radius: var(--sv-form-radius, var(--sv-form-design-radius, var(--sv-form-default-radius)));
}
.sv-pl--inline .sv-pl__inner { max-width: 640px; }
/* Preset A / card: divider band */
.sv-pl--inline.sv-pl--a, .sv-pl--inline.sv-pl--card {
	border-top: 1px solid var(--sv-form-border, var(--sv-form-band-border, var(--sv-form-default-border)));
	border-bottom: 1px solid var(--sv-form-border, var(--sv-form-band-border, var(--sv-form-default-border)));
	border-radius: var(--savvy-radius-none, 0);
	background: color-mix(in srgb, var(--sv-form-accent, var(--sv-form-design-accent, var(--sv-form-default-accent))) 6%, transparent);
}
/* Preset B / flat: boxed callout */
.sv-pl--inline.sv-pl--b, .sv-pl--inline.sv-pl--flat {
	border: 1px solid var(--sv-form-border, var(--sv-form-band-border, var(--sv-form-default-border)));
}
/* Preset C / underline: minimal */
.sv-pl--inline.sv-pl--c, .sv-pl--inline.sv-pl--underline {
	border-left: 3px solid var(--sv-form-accent, var(--sv-form-design-accent, var(--sv-form-default-accent))); border-radius: var(--savvy-radius-none, 0); padding-left: 16px;
}

/* Accent the inner submit button to the placement accent. */
/* Reads the button knob FIRST, then the placement accent. This rule is
   (0,2,0) and the emitted rule it overrides is (0,1,0), so without the
   var() chain `--sv-form-btn-bg` would be inert on every placement -- the
   specificity war WP UI 22.1 exists to end, lost to our own stylesheet. */
.sv-pl .savvy-vault-signup__button { background: var(--sv-form-btn-bg, var(--sv-form-design-btn-bg, var(--sv-form-accent, var(--sv-form-design-accent, var(--sv-form-default-accent))))); }

/* ---------- Focus indicator (W14-2B) ---------------------------------
   The placement surface carried no :focus rule at all, so the dismiss button
   and the signup controls fell to the browser default. Two-tone fixed
   indicator per Public Website Specification §6.2.6 / WP UI Specification
   §25.3 — 2px inner outline at 2px offset inside a 6px halo. Neither half is
   optional: each carries grounds the other fails on. */
.sv-pl a:focus-visible,
.sv-pl button:focus-visible,
.sv-pl input:focus-visible,
.sv-pl select:focus-visible,
.sv-pl textarea:focus-visible {
	outline: 2px solid var(--af-color-focus-ring-fixed-inner, #0F172A);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--af-color-focus-ring-fixed-outer, #FFFFFF);
}

/* ---------- Dark mode ------------------------------------------------ */
@media (prefers-color-scheme: dark) {
	:root {
		--sv-form-default-bg: #1c1f24;
		--sv-form-default-ink: #e7e9ee;
		--sv-form-default-border: #353a42;
	}
	.sv-pl .savvy-vault-signup__input {
		/* border-control holds ONE value in both modes by design (Public
		   Website Specification §6.2.5), so this override re-points the fill
		   and the ink and leaves the border alone. */
		/* Knob first, dark default second -- same (0,2,0) trap as the button
		   rule above: without the var() chain, --sv-form-field-bg and
		   --sv-form-field-ink are inert on every placement in dark mode. */
		background: var(--sv-form-field-bg, #14171b);
		/* W14-13 — THIS FELL THROUGH TO --sv-form-ink, AND A BAND REMAPS THAT.
		   The input paints its OWN opaque ground (the line above), so it is not
		   on the band, but its ink was reading the band's. On a light band the
		   remap made it #111827 against this #14171b ground: 1.0134:1, against
		   SC 1.4.3's 4.5:1. The literal below is the value --sv-form-ink already
		   holds in dark mode at :240, so nothing moves on any unbanded surface;
		   it is written out rather than referenced precisely so the band cannot
		   reach it. --sv-form-field-ink, the operator knob, still wins. */
		color: var(--sv-form-field-ink, #e7e9ee);
		border-color: var(--sv-form-field-border, var(--af-color-border-control, #6B7280));
	}
	.sv-pl .savvy-vault-signup__input:focus,
	.sv-pl .savvy-vault-signup__input:focus-visible {
		/* W14-26: keep the dark placement's existing rest fill when the new
		   public focus-fill property is unset. The higher specificity is
		   deliberate: the shared inline renderer cannot know this dark default. */
		background: var(--sv-form-field-bg-focus, var(--sv-form-field-bg, #14171b));
	}
}

/* ---------- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.sv-pl, .sv-pl * { transition: none !important; animation: none !important; }
}

/* ---------- Small screens ------------------------------------------- */

/* ---------- Popup --------------------------------------------------- */
.sv-pl--popup { position: fixed; inset: 0; z-index: var(--savvy-z-wp-admin-bar, 99999); }
.sv-pl--popup[hidden] { display: none; }
.sv-pl__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); }
.sv-pl__dialog {
	position: relative; background: var(--sv-form-bg, var(--sv-form-design-bg, var(--sv-form-default-bg))); color: var(--sv-form-ink, var(--sv-form-design-ink, var(--sv-form-band-ink, var(--sv-form-default-ink))));
	border-radius: var(--sv-form-radius, var(--sv-form-design-radius, var(--sv-form-default-radius))); padding: 26px 24px; max-width: 460px;
	margin: 10vh auto; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
/* Preset A / card: centered modal (default). */
/* Preset B / flat: slide-in corner, no overlay. */
.sv-pl--popup.sv-pl--b .sv-pl__overlay, .sv-pl--popup.sv-pl--flat .sv-pl__overlay { display: none; }
.sv-pl--popup.sv-pl--b, .sv-pl--popup.sv-pl--flat { inset: auto; }
.sv-pl--popup.sv-pl--b .sv-pl__dialog, .sv-pl--popup.sv-pl--flat .sv-pl__dialog {
	position: fixed; right: 20px; bottom: 20px; margin: 0; max-width: 360px;
}
/* Preset C / underline: full-screen takeover. */
.sv-pl--popup.sv-pl--c .sv-pl__dialog, .sv-pl--popup.sv-pl--underline .sv-pl__dialog {
	max-width: none; margin: 0; min-height: 100vh; display: flex;
	flex-direction: column; justify-content: center; border-radius: var(--savvy-radius-none, 0);
}


/* ==========================================================================
 * Mobile-first responsive layout (Track C4, 2.123.18).
 *
 * The two former max-width:600 blocks (plugin-owned sign-up / opt-in form and
 * popup classes) were inverted to mobile-first: the phone values below are the
 * base, and one min-width:601 block restores the wider layout. Rendering is
 * unchanged at every width (601 is the exact complement of the old 600).
 *
 * 601px is kept as a form-tuned component breakpoint (complement of the
 * studio/form 600px value), deliberately NOT a --savvy-bp-* token; snapping to
 * --savvy-bp-sm (640) would shift the boundary (a reviewed change).
 * ========================================================================== */

/* Mobile base (<=600 phone). */
.sv-pl--banner { padding-right: 44px; }
.sv-pl--sidebar { max-width: 100%; }
.sv-pl__dialog { margin: 6vh 12px; }
.sv-pl--popup.sv-pl--b .sv-pl__dialog, .sv-pl--popup.sv-pl--flat .sv-pl__dialog { right: 10px; bottom: 10px; left: 10px; max-width: none; }

/* >= 601px: restore the wider desktop form/popup layout. */
@media screen and (min-width: 601px) {
	.sv-pl--banner { padding-right: 48px; }
	.sv-pl--sidebar { max-width: 420px; }
	.sv-pl__dialog { margin: 10vh auto; }
	.sv-pl--popup.sv-pl--b .sv-pl__dialog, .sv-pl--popup.sv-pl--flat .sv-pl__dialog { right: 20px; bottom: 20px; left: auto; max-width: 360px; }
}