/* ═══════════════════════════════════════════════════════════════
   RomaFlow Force Field 951 — widget styles
   Mobile-first. RTL via logical properties. Theme-aware via
   :root[data-rf-theme]. Tokens from romaflow-blocks-801 with local
   fallbacks so the widget also renders correctly in the Elementor
   editor canvas, where the site sheet may not be present.
   ═══════════════════════════════════════════════════════════════ */

.rff-951,
.rff-951 *,
.rff-951 *::before,
.rff-951 *::after { box-sizing: border-box; }

.rff-951 {
	/* local token layer — dark is the site default */
	--rff-h: 90vh;
	--rff-align: flex-end;
	--rff-just: start;
	--rff-eyebrow: var(--accent-cyan-text, #00E5CC);
	--rff-title: var(--text-primary, #E6EBF2);
	--rff-body: var(--text-secondary, #B8C2D0);
	--rff-accent: var(--rf-cyan-200, #7FF5E6);
	/* Opaque enough to read as a surface: the panel sits over a live particle field
	   whose additive glow lifts whatever is behind it (§13 translucent-fill trap). */
	--rff-panel-bg: rgba(11, 15, 20, 0.86);
	--rff-panel-brd: rgba(255, 255, 255, 0.14);
	--rff-hud-bg: rgba(11, 15, 20, 0.82);
	--rff-hud-ink: rgba(255, 255, 255, 0.78);
	--rff-hud-val: var(--rf-cyan-200, #7FF5E6);
	/* AA-safe gradient stops — mandatory under a white label (tokens v2.1) */
	--rff-cta-bg: var(--rf-gradient-cta, linear-gradient(45deg, #00776B 0%, #0044C7 100%));
	--rff-cta-brd: rgba(255, 255, 255, 0.28);
	--rff-cta-lift: 0 10px 26px -10px rgba(0, 68, 199, 0.75);
	--rff-font: var(--rf-font, "Noto Sans Hebrew", system-ui, sans-serif);
	--rff-mono: var(--rf-font-mono, "JetBrains Mono", ui-monospace, monospace);

	position: relative;
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: var(--rff-h);
	min-block-size: 400px;
	overflow: hidden;
	isolation: isolate;
	border-radius: 22px;
	contain: paint;
	font-family: var(--rff-font);
}

/* ── canvas ───────────────────────────────────────────────── */
.rff-951-canvas {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	display: block;
	/* vertical scrolling still belongs to the page; horizontal drag is ours */
	touch-action: pan-y pinch-zoom;
	cursor: crosshair;
}

/* Pre-boot / no-JS: the stage is never an empty black box. */
.rff-951:not(.is-ready) .rff-951-canvas {
	background:
		radial-gradient(120% 90% at 82% 12%, rgba(0, 229, 204, 0.16), transparent 62%),
		radial-gradient(90% 80% at 12% 88%, rgba(0, 87, 255, 0.18), transparent 60%);
}

/* ── content overlay ──────────────────────────────────────── */
.rff-951-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: var(--rff-align);
	justify-content: var(--rff-just);
	padding: 20px;
	pointer-events: none;
}

/* The panel takes pointer events back so its copy stays selectable; only the empty
   area around it passes clicks through to the canvas. */
.rff-951-panel {
	pointer-events: auto;
	max-inline-size: 520px;
	padding: 20px 22px 22px;
	background: var(--rff-panel-bg);
	border: 1px solid var(--rff-panel-brd);
	border-start-start-radius: 4px;
	border-start-end-radius: 24px;
	border-end-end-radius: 24px;
	border-end-start-radius: 24px;
}

.rff-951-eyebrow {
	margin: 0 0 10px;
	font-family: var(--rff-mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	color: var(--rff-eyebrow);
	text-align: start;
}

.rff-951-title {
	margin: 0 0 10px;
	font-family: var(--rff-font);
	font-size: clamp(1.5rem, 4.2vw + 0.45rem, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--rff-title);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.rff-951-sub {
	margin: 0;
	font-family: var(--rff-font);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--rff-body);
	overflow-wrap: anywhere;
}

/* ── actions row ──────────────────────────────────────────── */
.rff-951-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-block-start: 18px;
}

.rff-951-cta {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	min-block-size: 46px;
	padding: 12px 26px;
	font-family: var(--rff-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
	background: var(--rff-cta-bg);
	border: 1px solid var(--rff-cta-brd);
	border-start-start-radius: 28px;
	border-start-end-radius: 6px;
	border-end-end-radius: 28px;
	border-end-start-radius: 6px;
	transition: box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1),
	            border-color 0.22s cubic-bezier(0.2, 0, 0, 1),
	            translate 0.22s cubic-bezier(0.2, 0, 0, 1);
}

.rff-951-cta:hover,
.rff-951-cta:focus-visible {
	border-color: var(--rff-accent);
	box-shadow: var(--rff-cta-lift);
	translate: 0 -2px;
}

.rff-951-cta:focus-visible {
	outline: 2px solid var(--rff-accent);
	outline-offset: 3px;
}

/* ── hint chip (the "click me" tell) ──────────────────────── */
.rff-951-hint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 14px;
	font-family: var(--rff-mono);
	font-size: 0.75rem;
	line-height: 1.3;
	color: var(--rff-body);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--rff-panel-brd);
	border-radius: 999px;
}

.rff-951-hint-dot {
	position: relative;
	inline-size: 7px;
	block-size: 7px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--rf-cyan, #00E5CC);
}

/* Compositor-only pulse: transform + opacity on a pseudo-element.
   Animating box-shadow spread repaints every frame, on top of a canvas that is
   already repainting every frame. */
.rff-951-hint-dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--rf-cyan, #00E5CC);
	animation: rff-951-ping 2.4s cubic-bezier(0.2, 0, 0, 1) infinite;
	will-change: transform, opacity;
}

@keyframes rff-951-ping {
	0%   { transform: scale(1);   opacity: 0.55; }
	70%  { transform: scale(3.4); opacity: 0; }
	100% { transform: scale(3.4); opacity: 0; }
}

/* ── live readout ─────────────────────────────────────────── */
.rff-951-hud {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 7px 13px;
	direction: ltr;
	background: var(--rff-hud-bg);
	border: 1px solid var(--rff-panel-brd);
	border-radius: 999px;
	pointer-events: none;
}

.rff-951-hud-cell {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--rff-mono);
	font-size: 0.6875rem;
	line-height: 1;
	color: var(--rff-hud-ink);
}

.rff-951-hud-cell b {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--rff-hud-val);
}

.rff-951-hud-cell i { font-style: normal; }

.rff-951-hud-sep {
	inline-size: 1px;
	block-size: 12px;
	background: var(--rff-panel-brd);
}

/* ═══════════ LIGHT THEME ═══════════
   Cream atmosphere: the panel flips to an opaque light surface and every
   ink token flips with it, so nothing falls through to a dark default. */
:root[data-rf-theme="light"] .rff-951 {
	--rff-eyebrow: #006E63;
	--rff-title: var(--text-primary, #0F172A);
	--rff-body: var(--text-secondary, #475569);
	--rff-accent: var(--rf-blue-600, #0044C7);
	--rff-panel-bg: rgba(255, 255, 255, 0.94);
	--rff-panel-brd: rgba(15, 23, 42, 0.14);
	--rff-hud-bg: rgba(255, 255, 255, 0.92);
	--rff-hud-ink: #475569;
	--rff-hud-val: #0044C7;
	--rff-cta-brd: rgba(15, 23, 42, 0.16);
	--rff-cta-lift: 0 10px 26px -12px rgba(15, 23, 42, 0.45);
}

:root[data-rf-theme="light"] .rff-951-hint {
	background: rgba(15, 23, 42, 0.05);
}

:root[data-rf-theme="light"] .rff-951-hint-dot,
:root[data-rf-theme="light"] .rff-951-hint-dot::after {
	background: var(--accent-cyan-text, #006E63);
}

:root[data-rf-theme="light"] .rff-951-cta:hover,
:root[data-rf-theme="light"] .rff-951-cta:focus-visible {
	border-color: var(--rf-blue-600, #0044C7);
}

:root[data-rf-theme="light"] .rff-951:not(.is-ready) .rff-951-canvas {
	background:
		radial-gradient(120% 90% at 82% 12%, rgba(0, 119, 107, 0.14), transparent 62%),
		radial-gradient(90% 80% at 12% 88%, rgba(0, 68, 199, 0.13), transparent 60%);
}

/* ═══════════ TABLET ═══════════ */
@media (min-width: 768px) {
	.rff-951 { border-radius: 28px; }
	.rff-951-overlay { padding: 34px; }
	.rff-951-panel { padding: 26px 30px 28px; }
	.rff-951-sub { font-size: 1.0625rem; line-height: 1.65; }
	.rff-951-hud { inset-block-start: 20px; inset-inline-end: 20px; }
}

/* ═══════════ DESKTOP ═══════════ */
@media (min-width: 1024px) {
	.rff-951-overlay { padding: 48px; }

	/* Desktop only: a paint-heavy backdrop blur is affordable here, and the panel
	   can relax to glass because the source is fitted beside it, not behind it.
	   MUST be theme-scoped — an unscoped dark glass value here lands on the cream
	   light atmosphere as mid-grey and drops every label below AA (§13). Dark is
	   written as :not([data-rf-theme="light"]) so it also covers the attribute
	   being absent before the toggle boots. */
	.rff-951-panel {
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}

	:root:not([data-rf-theme="light"]) .rff-951-panel {
		--rff-panel-bg: rgba(11, 15, 20, 0.7);
	}

	:root[data-rf-theme="light"] .rff-951-panel {
		--rff-panel-bg: rgba(255, 255, 255, 0.86);
	}
	.rff-951-eyebrow { font-size: 0.8125rem; }
	.rff-951-actions { margin-block-start: 26px; }
}

/* ═══════════ REDUCED MOTION ═══════════
   The engine also bails to a single static frame; this kills the CSS layer. */
@media (prefers-reduced-motion: reduce) {
	.rff-951-hint-dot::after { animation: none; opacity: 0; }
	.rff-951-cta { transition-duration: 0.01ms; }
	.rff-951-cta:hover,
	.rff-951-cta:focus-visible { translate: none; }
}

/* ═══════════ FORCED COLORS ═══════════ */
@media (forced-colors: active) {
	.rff-951-panel,
	.rff-951-hud,
	.rff-951-cta,
	.rff-951-pg,
	.rff-951-pg-btn,
	.rff-951-pg-notice,
	.rff-951-pg-textfield input { border-color: CanvasText; }

	/* Without this every palette swatch renders as the same blank circle, because
	   forced-colors drops background images. */
	.rff-951-pg-chip { forced-color-adjust: none; }
}

/* ═══════════════════════════════════════════════════════════════
   VISITOR PLAYGROUND (v1.1)
   Mobile-first: the bar owns the bottom of the stage, the content
   overlay is padded to clear it by its MEASURED height (--rff-pg-h),
   and the particle source is fitted into whatever is left.
   ═══════════════════════════════════════════════════════════════ */

.rff-951 {
	--rff-pg-bg: rgba(9, 13, 18, 0.93);
	--rff-pg-field: rgba(255, 255, 255, 0.07);
	--rff-pg-ring: rgba(255, 255, 255, 0.18);
}

:root[data-rf-theme="light"] .rff-951 {
	--rff-pg-bg: rgba(255, 255, 255, 0.96);
	--rff-pg-field: rgba(15, 23, 42, 0.05);
	--rff-pg-ring: rgba(15, 23, 42, 0.18);
}

.rff-951-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rff-951-pg {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--rff-pg-bg);
	border-block-start: 1px solid var(--rff-panel-brd);
	accent-color: var(--rff-accent);
}

.rff-951-pg[hidden] { display: none; }

/* Clearance for the bar lives on the PANEL's margin, not the overlay's padding:
   the Style-tab "stage padding" control emits a padding SHORTHAND at higher
   specificity and silently wiped the whole --rff-pg-h clearance. */
.rff-951--pg .rff-951-panel { margin-block-end: var(--rff-pg-h, 0px); }

.rff-951-pg-title {
	/* Reclaimed on phones — the bar has to stay under ~170px or it eats the stage. */
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
	font-family: var(--rff-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.3;
	color: var(--rff-eyebrow);
}

.rff-951-pg-row {
	display: grid;
	grid-template-areas:
		"text  reset"
		"tune  tune"
		"acts  acts";
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
}

.rff-951-pg-textfield { grid-area: text; }

.rff-951-pg-actions { grid-area: acts; }
.rff-951-pg-btn.is-ghost { grid-area: reset; }

/* colours + sliders share one horizontal strip on phones */
.rff-951-pg-tune {
	grid-area: tune;
	display: flex;
	align-items: center;
	gap: 6px;
	min-inline-size: 0;
	overflow-x: auto;
	contain: paint;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.rff-951-pg-tune::-webkit-scrollbar { display: none; }

.rff-951-pg-tune {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

/* The edge fade would render the first swatch's focus ring semi-transparent, and
   paint containment clips an outward outline. Drop both while focus is inside. */
.rff-951-pg-tune:focus-within {
	-webkit-mask-image: none;
	mask-image: none;
}

.rff-951-pg-tune :focus-visible { outline-offset: -2px; }

.rff-951-pg-field {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.rff-951-pg-lbl {
	display: block;
	padding: 0;
	margin: 0 0 2px;
	white-space: nowrap;
	font-family: var(--rff-mono);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--rff-body);
}

/* ── text ── */
.rff-951-pg-textfield { min-inline-size: 0; }

.rff-951-pg-textfield input {
	inline-size: 100%;
	min-block-size: 44px;
	padding: 10px 14px;
	font-family: var(--rff-font);
	/* 16px floor: anything smaller makes iOS Safari zoom the page on focus */
	font-size: 1rem;
	line-height: 1.3;
	color: var(--rff-title);
	background: var(--rff-pg-field);
	border: 1px solid var(--rff-pg-ring);
	border-radius: 12px;
	transition: border-color 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.rff-951-pg-textfield input::placeholder { color: var(--rff-body); opacity: 0.75; }
.rff-951-pg-textfield input:focus-visible { outline: none; border-color: var(--rff-accent); box-shadow: 0 0 0 3px var(--rff-pg-field); }

/* ── swatches ── */
.rff-951-pg-swatches {
	display: flex;
	align-items: center;
	gap: 2px;
}

.rff-951-pg-sw {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	cursor: pointer;
}

.rff-951-pg-sw input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.rff-951-pg-chip {
	inline-size: 24px;
	block-size: 24px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--rff-pg-ring);
	transition: box-shadow 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.rff-951-pg-sw[data-rff-pal="brand"] .rff-951-pg-chip { background: linear-gradient(45deg, #7FF5E6, #3D7DFF); }
.rff-951-pg-sw[data-rff-pal="tri"]   .rff-951-pg-chip { background: linear-gradient(45deg, #8FB5FF, #C7ABFF); }
.rff-951-pg-sw[data-rff-pal="pink"]  .rff-951-pg-chip { background: linear-gradient(45deg, #FF7FBF, #C7ABFF); }
.rff-951-pg-sw[data-rff-pal="mono"]  .rff-951-pg-chip { background: linear-gradient(45deg, #F1F5F9, #8B95A5); }

:root[data-rf-theme="light"] .rff-951-pg-sw[data-rff-pal="brand"] .rff-951-pg-chip { background: linear-gradient(45deg, #00776B, #0044C7); }
:root[data-rf-theme="light"] .rff-951-pg-sw[data-rff-pal="tri"]   .rff-951-pg-chip { background: linear-gradient(45deg, #0044C7, #6E35D9); }
:root[data-rf-theme="light"] .rff-951-pg-sw[data-rff-pal="pink"]  .rff-951-pg-chip { background: linear-gradient(45deg, #B8005C, #6E35D9); }
:root[data-rf-theme="light"] .rff-951-pg-sw[data-rff-pal="mono"]  .rff-951-pg-chip { background: linear-gradient(45deg, #0F172A, #64748B); }

.rff-951-pg-sw input:checked + .rff-951-pg-chip {
	box-shadow: 0 0 0 2px var(--rff-pg-bg), 0 0 0 4px var(--rff-accent);
}

.rff-951-pg-sw input:focus-visible + .rff-951-pg-chip {
	box-shadow: 0 0 0 2px var(--rff-pg-bg), 0 0 0 4px var(--rff-accent);
}

.rff-951-pg-pickers {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-inline-start: 4px;
	padding-inline-start: 6px;
	border-inline-start: 1px solid var(--rff-pg-ring);
}

.rff-951-pg-pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	cursor: pointer;
}

.rff-951-pg-pick input {
	inline-size: 26px;
	block-size: 26px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.rff-951-pg-pick input::-webkit-color-swatch-wrapper { padding: 0; }
.rff-951-pg-pick input::-webkit-color-swatch { border: 1px solid var(--rff-pg-ring); border-radius: 50%; }
.rff-951-pg-pick input::-moz-color-swatch { border: 1px solid var(--rff-pg-ring); border-radius: 50%; }

.rff-951-pg-pick input:focus-visible {
	outline: 2px solid var(--rff-accent);
	outline-offset: 2px;
	border-radius: 50%;
}

/* ── sliders ──
   A horizontal strip on phones so three sliders never wrap into three rows and
   eat the stage. contain:paint because an RTL overflow-x scroller otherwise
   leaks its inline-start overflow into the document width. */
.rff-951-pg-sliders {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-inline-start: 10px;
	margin-inline-start: 4px;
	border-inline-start: 1px solid var(--rff-pg-ring);
}

.rff-951-pg-slider { flex: 0 0 auto; }

.rff-951-pg-slider input {
	display: block;
	inline-size: 84px;
	/* the whole control is the target, not just the thumb (tap floor) */
	block-size: 44px;
	margin: 0;
	cursor: pointer;
}

.rff-951-pg-slider input:focus-visible { outline: 2px solid var(--rff-accent); outline-offset: 3px; }

/* ── actions ── */
.rff-951-pg-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	min-inline-size: 0;
}

.rff-951-pg-actions .rff-951-pg-btn { flex: 1 1 0; min-inline-size: 0; }

.rff-951-pg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	min-block-size: 44px;
	padding: 10px 16px;
	font-family: var(--rff-font);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--rff-title);
	background: var(--rff-pg-field);
	border: 1px solid var(--rff-pg-ring);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.18s cubic-bezier(0.2, 0, 0, 1),
	            background-color 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.rff-951-pg-btn:hover,
.rff-951-pg-btn:focus-visible { border-color: var(--rff-accent); }
.rff-951-pg-btn:focus-visible { outline: 2px solid var(--rff-accent); outline-offset: 2px; }
.rff-951-pg-btn.is-ghost { background: none; color: var(--rff-body); }

/* ── toast ── */
.rff-951-pg-notice {
	order: -1;
	margin: 0 0 2px;
	padding: 7px 12px;
	font-family: var(--rff-font);
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--rff-title);
	background: var(--rff-pg-field);
	border: 1px solid var(--rff-pg-ring);
	border-radius: 12px;
	overflow-wrap: anywhere;
}

.rff-951-pg-notice[hidden] { display: none; }

.rff-951-pg-toast {
	position: absolute;
	inset-inline: 14px;
	inset-block-end: calc(100% + 8px);
	margin: 0;
	padding: 6px 10px;
	background: var(--rff-pg-bg);
	border-radius: 999px;
	pointer-events: none;
	font-family: var(--rff-mono);
	font-size: 0.6875rem;
	line-height: 1;
	color: var(--rff-eyebrow);
	opacity: 0;
	transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
	overflow-wrap: anywhere;
}

.rff-951-pg-toast.is-on { opacity: 1; }

/* Phones: the panel moves to the TOP so the source gets the middle band —
   with a full-width bar at the bottom there is no other layout that leaves the
   logo any room. Desktop keeps the Elementor anchor control. */
@media (max-width: 767px) {
	.rff-951--pg .rff-951-overlay {
		align-items: flex-start;
		padding-block-end: 12px;
	}

	/* On a short stage the panel would otherwise extend behind the bar and hide its
	   own CTA. Cap it against the measured bar height and let it scroll. */
	.rff-951--pg .rff-951-panel {
		max-block-size: calc(100% - var(--rff-pg-h, 0px) - 150px);
		overflow-y: auto;
		overscroll-behavior: contain;
		margin-block-end: 0;
	}

	/* the panel now owns the top corner, so the readout moves above the bar */
	.rff-951--pg .rff-951-hud {
		inset-block-start: auto;
		inset-block-end: calc(var(--rff-pg-h, 0px) + 10px);
		inset-inline-end: 14px;
	}
}

@media (min-width: 768px) {
	.rff-951-pg { gap: 10px; padding: 14px 20px 16px; }

	.rff-951-pg-title {
		position: static;
		inline-size: auto;
		block-size: auto;
		clip-path: none;
	}

	.rff-951-pg-lbl { margin-block-end: 4px; font-size: 0.6875rem; }

	.rff-951-pg-row {
		grid-template-areas: "text tune acts reset";
		/* Priority order: the action buttons and reset always get their full width;
		   the tune strip absorbs what is left and scrolls. Giving `acts` the 1fr
		   instead squeezed it below its content width, and the buttons overflowed
		   their box and sat on top of the sliders. */
		grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) auto auto;
		align-items: end;
		gap: 14px;
	}

	.rff-951-pg-tune {
		gap: 14px;
		padding-inline-end: 4px;
		/* the strip can still scroll on a narrow desktop bar, so keep the fade as the
		   affordance rather than letting a label sit flush-cut at the edge */
	}
	.rff-951-pg-actions { justify-content: flex-end; }
	.rff-951-pg-actions .rff-951-pg-btn { flex: 0 0 auto; }
	.rff-951-pg-slider input { inline-size: 100px; }
	.rff-951-pg-toast { position: static; min-block-size: 1em; }
}

@media (min-width: 1024px) {
	.rff-951-pg { padding: 16px 28px 18px; }
	/* fine pointers only — the 44px floor is a coarse-pointer contract */
	.rff-951-pg-slider input { block-size: 28px; }
}

@media (pointer: coarse) {
	.rff-951-pg-slider input { block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.rff-951-pg-toast,
	.rff-951-pg-btn,
	.rff-951-pg-textfield input { transition-duration: 0.01ms; }
}