/* ============================================================================
   eux/bento-mockup — styles
   ----------------------------------------------------------------------------
   This block hosts an editable image-style placeholder OR one of four
   interactive, CSS-animated mockups. The preset is chosen from the block
   toolbar dropdown in the editor and rendered server-side by
   EUX_Mockups::preset_bento_<preset>() on the front-end.

   All styles are scoped under `.eux-block--bento-mockup` so they can't leak.
   Dark-theme variants key off the section ancestor `.eux-block--bento-box`
   in cream / light / dark mode (the bento-box block applies one of three
   `--cream` / `--light` / `--dark` modifier classes on its outer section).

   Mockup HTML is sized to fit inside the `.bv-card__media` slot defined by
   bento-card's CSS — that slot already establishes a fixed aspect ratio
   and bounded height per layout direction (top / left / right).
   ============================================================================ */

/* ---------------------------------------------------------------
   Outer wrapper — fills the .bv-card__media slot in the parent
   --------------------------------------------------------------- */
.eux-block--bento-mockup {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------
   PLACEHOLDER preset — existing behaviour, kept for backward compat
   (image-style cross-hatched panel with editable caption).
   --------------------------------------------------------------- */
.eux-bento-mockup__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px;
	background:
		repeating-linear-gradient(
			45deg,
			var(--eux-cream-50) 0,
			var(--eux-cream-50) 8px,
			var(--eux-cream-200) 8px,
			var(--eux-cream-200) 9px
		),
		var(--eux-cream-50);
	color: var(--eux-ink-500);
	text-align: center;
}
.eux-bento-mockup__label {
	font-family: var(--eux-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eux-ink-600);
	background: rgba(255, 255, 255, 0.85);
	padding: 2px 8px;
	border-radius: 99px;
}
.eux-bento-mockup__caption {
	font-family: var(--eux-font-body);
	font-size: 12px;
	color: var(--eux-ink-700);
	max-width: 80%;
	line-height: 1.4;
}

/* ============================================================================
   INTERACTIVE PRESETS — wrapper
   ----------------------------------------------------------------------------
   `.eux-mk` is the shared frame that fills the media slot and provides the
   subtle cream-50 / glass-tinted backdrop the four mockups sit on top of.
   ============================================================================ */
.eux-mk {
	position: absolute;
	inset: 0;
	background: var(--eux-cream-50);
	overflow: hidden;
	padding: 18px;
}
.eux-block--bento-box--dark .eux-mk {
	background: rgba(255, 255, 255, 0.03);
}

/* ============================================================================
   PRESET 01 — PLUGINS  (admin list with progress bars / toggles / checks)
   --------------------------------------------------------------------------
   Each row has a staggered `--d` delay (set inline) so they ripple through
   the install → activate → done cycle one after another.
   ============================================================================ */
.eux-mk-plg {
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	height: 100%;
}
.eux-mk-plg__row {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 8px;
	padding: 9px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.eux-block--bento-box--dark .eux-mk-plg__row {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow: none;
}
.eux-mk-plg__icon {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: var(--eux-woo-500);
	color: var(--eux-white);
	font-family: var(--eux-font-display);
	font-weight: 700;
	font-size: 11px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}
.eux-mk-plg__info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.eux-mk-plg__name {
	font-family: var(--eux-font-display);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--eux-ink-900);
	line-height: 1.1;
	display: flex;
	align-items: baseline;
	gap: 5px;
}
.eux-block--bento-box--dark .eux-mk-plg__name { color: var(--eux-cream); }
.eux-mk-plg__name .v {
	color: var(--eux-ink-500);
	font-weight: 400;
	font-size: 9.5px;
	font-family: var(--eux-font-mono);
}
.eux-block--bento-box--dark .eux-mk-plg__name .v { color: rgba(244, 240, 236, 0.45); }
.eux-mk-plg__desc {
	font-family: var(--eux-font-body);
	font-size: 10px;
	color: var(--eux-ink-600);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}
.eux-block--bento-box--dark .eux-mk-plg__desc { color: rgba(244, 240, 236, 0.6); }
.eux-mk-plg__status {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}
.eux-mk-plg__bar {
	width: 46px;
	height: 4px;
	border-radius: 2px;
	background: var(--eux-ink-100);
	overflow: hidden;
	opacity: 0;
	animation: eux-mkPlgBar 11s ease-in-out infinite var(--d, 0s) both;
}
.eux-block--bento-box--dark .eux-mk-plg__bar { background: rgba(255, 255, 255, 0.12); }
.eux-mk-plg__bar i {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--eux-woo-500);
	animation: eux-mkPlgBarFill 11s ease-in-out infinite var(--d, 0s) both;
}
.eux-block--bento-box--dark .eux-mk-plg__bar i { background: var(--eux-woo-300); }
.eux-mk-plg__check {
	width: 14px;
	height: 14px;
	border-radius: 99px;
	background: #4DC287;
	color: var(--eux-white);
	display: grid;
	place-items: center;
	opacity: 0;
	transform: scale(0);
	flex-shrink: 0;
	animation: eux-mkPlgCheck 11s ease-in-out infinite var(--d, 0s) both;
}
.eux-mk-plg__check svg { width: 9px; height: 9px; }
.eux-mk-plg__toggle {
	width: 26px;
	height: 14px;
	border-radius: 7px;
	background: var(--eux-ink-300);
	position: relative;
	flex: 0 0 auto;
	animation: eux-mkPlgToggle 11s ease-in-out infinite var(--d, 0s) both;
}
.eux-block--bento-box--dark .eux-mk-plg__toggle {
	background: rgba(255, 255, 255, 0.18);
	animation-name: eux-mkPlgToggleDark;
}
.eux-mk-plg__toggle::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 1px;
	width: 12px;
	height: 12px;
	border-radius: 99px;
	background: var(--eux-white);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	animation: eux-mkPlgThumb 11s ease-in-out infinite var(--d, 0s) both;
}
@keyframes eux-mkPlgBar {
	0%, 9%, 23%, 100% { opacity: 0; }
	11%, 21%          { opacity: 1; }
}
@keyframes eux-mkPlgBarFill {
	0%, 9%    { width: 0%; }
	21%       { width: 100%; }
	23%, 100% { width: 100%; }
}
@keyframes eux-mkPlgCheck {
	0%, 21%   { opacity: 0; transform: scale(0); }
	24%       { opacity: 1; transform: scale(1.25); }
	27%, 92%  { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(0); }
}
@keyframes eux-mkPlgToggle {
	0%, 21%   { background: var(--eux-ink-300); }
	24%, 92%  { background: var(--eux-woo-500); }
	96%, 100% { background: var(--eux-ink-300); }
}
@keyframes eux-mkPlgToggleDark {
	0%, 21%   { background: rgba(255, 255, 255, 0.18); }
	24%, 92%  { background: var(--eux-woo-500); }
	96%, 100% { background: rgba(255, 255, 255, 0.18); }
}
@keyframes eux-mkPlgThumb {
	0%, 21%   { left: 1px; }
	24%, 92%  { left: 13px; }
	96%, 100% { left: 1px; }
}

/* ============================================================================
   PRESET 02 — LOGIC  (if/then rule grid + cycling cart total)
   --------------------------------------------------------------------------
   Three options per cell cycle on an 18s loop, offset per cell so it feels
   like the engine is constantly recomputing. The cart total is driven by
   CSS @property counters animated through breakpoints.
   ============================================================================ */
.eux-mk-lgc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	justify-content: center;
}
.eux-mk-lgc__rules {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.eux-mk-lgc__rule {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--eux-font-mono);
	font-size: 10px;
	color: var(--eux-ink-700);
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 6px;
	padding: 5px 8px;
	white-space: nowrap;
	overflow: hidden;
}
.eux-block--bento-box--dark .eux-mk-lgc__rule {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.08);
	color: rgba(244, 240, 236, 0.85);
}
.eux-mk-lgc__rule > * { flex-shrink: 0; }
.eux-mk-lgc__rule .eux-mk-lgc__cell { min-width: 0; }
.eux-mk-lgc__tag {
	font-family: var(--eux-font-display);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 3px;
	flex-shrink: 0;
}
.eux-mk-lgc__tag.is-if   { background: rgba(166, 89, 248, 0.14); color: var(--eux-woo-500); }
.eux-mk-lgc__tag.is-then { background: rgba(0, 0, 0, 0.06);     color: var(--eux-ink-700); }
.eux-block--bento-box--dark .eux-mk-lgc__tag.is-if   { background: rgba(166, 89, 248, 0.22); color: var(--eux-woo-200); }
.eux-block--bento-box--dark .eux-mk-lgc__tag.is-then { background: rgba(255, 255, 255, 0.10); color: rgba(244, 240, 236, 0.7); }
.eux-mk-lgc__out {
	background: var(--eux-woo-500);
	color: var(--eux-white);
	border-radius: 10px;
	padding: 10px 14px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--eux-font-display);
}
.eux-mk-lgc__lbl {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.7;
}
.eux-mk-lgc__price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
.eux-mk-lgc__old {
	font-size: 11px;
	text-decoration: line-through;
	opacity: 0.55;
}
.eux-mk-lgc__new {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.eux-mk-lgc__cell {
	display: inline-grid;
	overflow: hidden;
}
.eux-mk-lgc__cell > .eux-mk-lgc__opt {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(6px);
	animation: eux-mkLgcSlide 18s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	animation-delay: calc(var(--offset, 0s) + (var(--i, 0) - 1) * 6s);
}
.eux-mk-lgc__cell > .is-opt-1 { --i: 1; }
.eux-mk-lgc__cell > .is-opt-2 { --i: 2; }
.eux-mk-lgc__cell > .is-opt-3 { --i: 3; }
@keyframes eux-mkLgcSlide {
	0%        { opacity: 0; transform: translateY(6px); }
	3%, 30%   { opacity: 1; transform: translateY(0); }
	33%, 100% { opacity: 0; transform: translateY(-6px); }
}
@property --eux-mk-lgc-old { syntax: '<integer>'; initial-value: 84; inherits: false; }
@property --eux-mk-lgc-new { syntax: '<integer>'; initial-value: 59; inherits: false; }
.eux-mk-lgc__old {
	counter-reset: o var(--eux-mk-lgc-old);
	animation: eux-mkLgcOldTick 18s linear infinite;
}
.eux-mk-lgc__old::before { content: "$" counter(o); }
.eux-mk-lgc__new {
	counter-reset: n var(--eux-mk-lgc-new);
	animation: eux-mkLgcNewTick 18s linear infinite;
}
.eux-mk-lgc__new::before { content: "$" counter(n); }
@keyframes eux-mkLgcOldTick {
	0%      { --eux-mk-lgc-old: 84; }
	8.33%   { --eux-mk-lgc-old: 124; }
	16.67%  { --eux-mk-lgc-old: 178; }
	25%     { --eux-mk-lgc-old: 240; }
	33.33%  { --eux-mk-lgc-old: 295; }
	41.67%  { --eux-mk-lgc-old: 340; }
	50%     { --eux-mk-lgc-old: 295; }
	58.33%  { --eux-mk-lgc-old: 240; }
	66.67%  { --eux-mk-lgc-old: 178; }
	75%     { --eux-mk-lgc-old: 124; }
	83.33%  { --eux-mk-lgc-old: 96; }
	91.67%  { --eux-mk-lgc-old: 84; }
	100%    { --eux-mk-lgc-old: 84; }
}
@keyframes eux-mkLgcNewTick {
	0%      { --eux-mk-lgc-new: 59; }
	8.33%   { --eux-mk-lgc-new: 88; }
	16.67%  { --eux-mk-lgc-new: 132; }
	25%     { --eux-mk-lgc-new: 188; }
	33.33%  { --eux-mk-lgc-new: 218; }
	41.67%  { --eux-mk-lgc-new: 262; }
	50%     { --eux-mk-lgc-new: 218; }
	58.33%  { --eux-mk-lgc-new: 188; }
	66.67%  { --eux-mk-lgc-new: 132; }
	75%     { --eux-mk-lgc-new: 88; }
	83.33%  { --eux-mk-lgc-new: 68; }
	91.67%  { --eux-mk-lgc-new: 59; }
	100%    { --eux-mk-lgc-new: 59; }
}

/* ============================================================================
   PRESET 03 — HUB  (ERP/POS/CRM/3PL → WOO with animated packet flow)
   ============================================================================ */
.eux-mk-bhub {
	position: absolute;
	inset: 0;
	padding: 8px;
}
.eux-mk-bhub svg {
	width: 100%;
	height: 100%;
	display: block;
}
.eux-mk-bhub__pipe {
	fill: none;
	stroke: var(--eux-ink-300);
	stroke-width: 1.4;
	stroke-dasharray: 4 3;
}
.eux-block--bento-box--dark .eux-mk-bhub__pipe { stroke: rgba(255, 255, 255, 0.22); }
.eux-mk-bhub__node {
	fill: var(--eux-white);
	stroke: var(--eux-ink-300);
	stroke-width: 1.2;
}
.eux-block--bento-box--dark .eux-mk-bhub__node {
	fill: rgba(255, 255, 255, 0.08);
	stroke: rgba(255, 255, 255, 0.22);
}
.eux-mk-bhub__node--hub { fill: var(--eux-woo-500); stroke: var(--eux-woo-500); }
.eux-block--bento-box--dark .eux-mk-bhub__node--hub { fill: var(--eux-woo-500); stroke: var(--eux-woo-500); }
.eux-mk-bhub__label {
	font-family: var(--eux-font-display);
	font-size: 9.5px;
	font-weight: 600;
	fill: var(--eux-ink-800);
	letter-spacing: 0.04em;
}
.eux-block--bento-box--dark .eux-mk-bhub__label { fill: var(--eux-cream); }
.eux-mk-bhub__label--inv { fill: var(--eux-white); }
.eux-block--bento-box--dark .eux-mk-bhub__label--inv { fill: var(--eux-white); }
.eux-mk-bhub__packet {
	fill: var(--eux-woo-500);
	animation: eux-mkHubPacket 2.6s linear infinite;
}
.eux-block--bento-box--dark .eux-mk-bhub__packet { fill: var(--eux-woo-200); }
.eux-mk-bhub__packet--rev { animation-direction: reverse; }
@keyframes eux-mkHubPacket {
	0%   { offset-distance: 0%; opacity: 0; }
	10%  { opacity: 1; }
	90%  { opacity: 1; }
	100% { offset-distance: 100%; opacity: 0; }
}

/* ============================================================================
   PRESET 04 — PERFORMANCE  (3 KPIs + scrolling area chart with live dot)
   ============================================================================ */
.eux-mk-prf {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 4px;
}
.eux-mk-prf__kpis {
	display: grid;
	/* Same `minmax(0, 1fr)` fix as the outer bento-row grid — see
	   the long comment in blocks/bento-box/style.css. The KPI text
	   ("99.99%" + label "UPTIME") has a small but non-zero
	   min-content; without `minmax(0, ...)` here, the 3 KPI columns
	   together would refuse to shrink below ~150px and contribute
	   to the cascading width problem the outer grid was already
	   hitting. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}
.eux-mk-prf__kpi {
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 8px;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.eux-block--bento-box--dark .eux-mk-prf__kpi {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.08);
}
.eux-mk-prf__kpi .num {
	font-family: var(--eux-font-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--eux-woo-500);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.eux-block--bento-box--dark .eux-mk-prf__kpi .num { color: var(--eux-woo-200); }
.eux-mk-prf__kpi .num .u {
	font-size: 11px;
	color: var(--eux-ink-500);
	margin-left: 2px;
}
.eux-block--bento-box--dark .eux-mk-prf__kpi .num .u { color: rgba(244, 240, 236, 0.5); }
.eux-mk-prf__kpi .lbl {
	font-family: var(--eux-font-mono);
	font-size: 8.5px;
	color: var(--eux-ink-500);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}
.eux-block--bento-box--dark .eux-mk-prf__kpi .lbl { color: rgba(244, 240, 236, 0.55); }
.eux-mk-prf__live {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 99px;
	background: #4DC287;
	box-shadow: 0 0 0 0 rgba(77, 194, 135, 0.5);
	animation: eux-mkPrfLive 1.8s ease-in-out infinite;
}
@keyframes eux-mkPrfLive {
	0%, 100% { box-shadow: 0 0 0 0 rgba(77, 194, 135, 0.5); }
	50%      { box-shadow: 0 0 0 5px rgba(77, 194, 135, 0); }
}
@property --eux-mk-prf-vis { syntax: '<integer>'; initial-value: 412; inherits: false; }
.eux-mk-prf__kpi--live .num {
	--eux-mk-prf-vis: 412;
	counter-reset: v var(--eux-mk-prf-vis);
	animation: eux-mkPrfVisitors 18s ease-in-out infinite;
}
.eux-mk-prf__kpi--live .num::after { content: counter(v); }
@keyframes eux-mkPrfVisitors {
	0%   { --eux-mk-prf-vis: 412; }
	14%  { --eux-mk-prf-vis: 478; }
	28%  { --eux-mk-prf-vis: 523; }
	42%  { --eux-mk-prf-vis: 491; }
	56%  { --eux-mk-prf-vis: 561; }
	70%  { --eux-mk-prf-vis: 530; }
	84%  { --eux-mk-prf-vis: 458; }
	100% { --eux-mk-prf-vis: 412; }
}
@property --eux-mk-prf-up-w { syntax: '<integer>'; initial-value: 99; inherits: false; }
@property --eux-mk-prf-up-d { syntax: '<integer>'; initial-value: 99; inherits: false; }
.eux-mk-prf__kpi--uptime .num {
	counter-reset: w var(--eux-mk-prf-up-w) d var(--eux-mk-prf-up-d);
	animation: eux-mkPrfUpW 14s linear infinite;
}
.eux-mk-prf__kpi--uptime .num::before {
	content: counter(w) "." counter(d, decimal-leading-zero);
}
.eux-mk-prf__kpi--uptime .num .u { animation: eux-mkPrfUpD 14s linear infinite; }
@keyframes eux-mkPrfUpW {
	0%, 100% { --eux-mk-prf-up-w: 99; }
}
@keyframes eux-mkPrfUpD {
	0%, 18%   { --eux-mk-prf-up-d: 99; }
	24%, 42%  { --eux-mk-prf-up-d: 98; }
	48%, 66%  { --eux-mk-prf-up-d: 100; }
	72%, 100% { --eux-mk-prf-up-d: 99; }
}
.eux-mk-prf__chart {
	flex: 1;
	min-height: 50px;
	background: var(--eux-white);
	border: 1px solid var(--eux-ink-100);
	border-radius: 8px;
	padding: 10px;
	position: relative;
	overflow: hidden;
}
.eux-block--bento-box--dark .eux-mk-prf__chart {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.08);
}
.eux-mk-prf__chart svg {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.eux-mk-prf__chart .grid { stroke: var(--eux-ink-100); stroke-width: 1; fill: none; }
.eux-block--bento-box--dark .eux-mk-prf__chart .grid { stroke: rgba(255, 255, 255, 0.08); }
.eux-mk-prf__chart .budget {
	stroke: var(--eux-woo-500);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	fill: none;
}
.eux-block--bento-box--dark .eux-mk-prf__chart .budget { stroke: var(--eux-woo-200); }
.eux-mk-prf__chart .area { fill: var(--eux-woo-500); opacity: 0.1; }
.eux-block--bento-box--dark .eux-mk-prf__chart .area { fill: var(--eux-woo-300); opacity: 0.18; }
.eux-mk-prf__chart .line {
	fill: none;
	stroke: var(--eux-woo-500);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.eux-block--bento-box--dark .eux-mk-prf__chart .line { stroke: var(--eux-woo-200); }
.eux-mk-prf__chart .scroll { animation: eux-mkPrfScroll 7s linear infinite; }
@keyframes eux-mkPrfScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-400px); }
}
.eux-mk-prf__chart .dot { fill: var(--eux-woo-500); }
.eux-block--bento-box--dark .eux-mk-prf__chart .dot { fill: var(--eux-woo-200); }
.eux-mk-prf__chart .ring {
	fill: none;
	stroke: var(--eux-woo-500);
	stroke-width: 1.4;
	transform-origin: center;
	animation: eux-mkPrfRing 1.6s ease-out infinite;
}
.eux-block--bento-box--dark .eux-mk-prf__chart .ring { stroke: var(--eux-woo-200); }
@keyframes eux-mkPrfRing {
	0%   { r: 4; opacity: 0.9; }
	100% { r: 14; opacity: 0; }
}

/* ============================================================================
   Mobile responsive — content tightening to match the reference mock
   ----------------------------------------------------------------------------
   Replaces the v0.36.5/0.36.6 attempt (which used 720px / 480px breakpoints
   and tried to scale every element down uniformly). The user-supplied
   bento-standalone.css reference uses two key insights instead:

   1. Two breakpoints — 560px and 400px — calibrated to where each preset
      actually starts to feel cramped (rather than a generic tablet/phone
      split).
   2. Per-preset chrome HIDING rather than uniform scaling. The install
      progress bar, version chips, the live-visitors KPI — those are the
      first things to remove when space runs out, because they're decorative
      additions to the core visual concept. Hiding them gives the remaining
      elements enough breathing room to stay legible.

   Class-name mapping from the standalone reference into this plugin's
   namespace:  `cap-plg` → `eux-mk-plg`, `cap-lgc` → `eux-mk-lgc`,
   `cap-prf` → `eux-mk-prf`, `cap-hub` → `eux-mk-bhub`,
   `cap-mock` → `eux-mk`.
   ============================================================================ */

/* ---- 560px: phones ---- */
@media (max-width: 560px) {
	.eux-block--bento-mockup .eux-mk {
		padding: 14px;
	}

	/* PRESET 01 — plugins: hide the install progress bar so the name +
	   version + toggle stay legible at this width. The bar's only purpose
	   is decorative install animation; keeping it would crowd the row. */
	.eux-block--bento-mockup .eux-mk-plg {
		gap: 6px;
	}
	.eux-block--bento-mockup .eux-mk-plg__row {
		padding: 8px 10px;
		gap: 8px;
	}
	.eux-block--bento-mockup .eux-mk-plg__icon {
		width: 22px;
		height: 22px;
		font-size: 10px;
	}
	.eux-block--bento-mockup .eux-mk-plg__name {
		font-size: 11px;
	}
	.eux-block--bento-mockup .eux-mk-plg__name .v {
		font-size: 9px;
	}
	.eux-block--bento-mockup .eux-mk-plg__desc {
		font-size: 9.5px;
	}
	.eux-block--bento-mockup .eux-mk-plg__bar {
		display: none;
	}
	.eux-block--bento-mockup .eux-mk-plg__toggle {
		width: 22px;
		height: 12px;
	}
	.eux-block--bento-mockup .eux-mk-plg__toggle::after {
		width: 10px;
		height: 10px;
	}
	/* Toggle thumb keyframes need to track the smaller toggle width.
	   Original keyframe moves to left:13px; with a 22x12 toggle and 10px
	   thumb, the right-most edge is left:11px (22 - 10 - 1 border). */
	@keyframes eux-mkPlgThumb {
		0%, 21%   { left: 1px; }
		24%, 92%  { left: 11px; }
		96%, 100% { left: 1px; }
	}

	/* PRESET 02 — logic: show only the first 3 rules + CART TOTAL.
	   At 560px the desktop's 6 cycling rules + cart total don't fit; 3
	   rules still tell the same "complex pricing logic resolves to a
	   single output" story with plenty of motion. */
	.eux-block--bento-mockup .eux-mk-lgc {
		gap: 8px;
	}
	.eux-block--bento-mockup .eux-mk-lgc__rules {
		gap: 5px;
	}
	.eux-block--bento-mockup .eux-mk-lgc__rule {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 5px 8px;
		font-size: 9.5px;
		white-space: nowrap;
		overflow: hidden;
		line-height: 1.2;
	}
	.eux-block--bento-mockup .eux-mk-lgc__rules .eux-mk-lgc__rule:nth-child(n+4) {
		display: none;
	}
	.eux-block--bento-mockup .eux-mk-lgc__tag {
		font-size: 8px;
		padding: 2px 5px;
		letter-spacing: 0.08em;
		flex-shrink: 0;
	}
	.eux-block--bento-mockup .eux-mk-lgc__out {
		padding: 8px 12px;
	}
	.eux-block--bento-mockup .eux-mk-lgc__lbl {
		font-size: 8.5px;
		letter-spacing: 0.1em;
	}
	.eux-block--bento-mockup .eux-mk-lgc__old {
		font-size: 10px;
	}
	.eux-block--bento-mockup .eux-mk-lgc__new {
		font-size: 18px;
	}

	/* PRESET 03 — hub: only trim the wrapper padding. The SVG inside
	   scales via viewBox + width:100% so we keep desktop font/stroke
	   sizes and let the diagram fill the smaller container. The
	   reference explicitly avoids scaling fonts/strokes here. */
	.eux-block--bento-mockup .eux-mk-bhub {
		padding: 4px;
	}

	/* PRESET 04 — performance: keep 3 KPIs side-by-side at this width,
	   just shrink the numbers and chart padding. */
	.eux-block--bento-mockup .eux-mk-prf {
		gap: 8px;
		padding: 2px;
	}
	.eux-block--bento-mockup .eux-mk-prf__kpis {
		gap: 4px;
	}
	.eux-block--bento-mockup .eux-mk-prf__kpi {
		padding: 6px 8px;
		gap: 1px;
	}
	.eux-block--bento-mockup .eux-mk-prf__kpi .num {
		font-size: 16px;
	}
	.eux-block--bento-mockup .eux-mk-prf__kpi .num .u {
		font-size: 10px;
	}
	.eux-block--bento-mockup .eux-mk-prf__kpi .lbl {
		font-size: 8px;
		letter-spacing: 0.04em;
	}
	.eux-block--bento-mockup .eux-mk-prf__chart {
		padding: 8px;
		min-height: 0;
	}
}

/* ---- 400px: tiny phones — last-resort fallbacks ---- */
@media (max-width: 400px) {
	/* PRESET 01 — plugins: at this width the version chip "v2.3.1"
	   crowds the row; drop it so the plugin name has room to breathe. */
	.eux-block--bento-mockup .eux-mk-plg__name .v {
		display: none;
	}

	/* PRESET 02 — logic: trim further to 2 rules so the CART TOTAL
	   bar isn't squeezed at the bottom. */
	.eux-block--bento-mockup .eux-mk-lgc__rules .eux-mk-lgc__rule:nth-child(n+3) {
		display: none;
	}

	/* PRESET 04 — performance: drop the live-visitors KPI and reflow
	   the remaining 2 KPIs to fit comfortably. The live KPI is the
	   most decorative of the three (it just animates a counter); LCP
	   and uptime are the load-bearing metrics. */
	.eux-block--bento-mockup .eux-mk-prf__kpis {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.eux-block--bento-mockup .eux-mk-prf__kpi--live {
		display: none;
	}
}

/* ============================================================================
   Reduced motion — stop the loops, keep the static frame visible.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	.eux-block--bento-mockup .eux-mk-plg__bar i,
	.eux-block--bento-mockup .eux-mk-plg__bar,
	.eux-block--bento-mockup .eux-mk-plg__check,
	.eux-block--bento-mockup .eux-mk-plg__toggle,
	.eux-block--bento-mockup .eux-mk-plg__toggle::after,
	.eux-block--bento-mockup .eux-mk-bhub__packet,
	.eux-block--bento-mockup .eux-mk-prf__chart .line,
	.eux-block--bento-mockup .eux-mk-prf__chart .ring,
	.eux-block--bento-mockup .eux-mk-prf__chart .scroll,
	.eux-block--bento-mockup .eux-mk-lgc__cell > .eux-mk-lgc__opt,
	.eux-block--bento-mockup .eux-mk-prf__live,
	.eux-block--bento-mockup .eux-mk-prf__kpi--live .num,
	.eux-block--bento-mockup .eux-mk-prf__kpi--uptime .num,
	.eux-block--bento-mockup .eux-mk-prf__kpi--uptime .num .u,
	.eux-block--bento-mockup .eux-mk-lgc__old,
	.eux-block--bento-mockup .eux-mk-lgc__new { animation: none !important; }
}

/* ============================================================================
   Editor preview — Gutenberg renders the placeholder block in the canvas
   instead of the live preset. The render.php emits the actual interactive
   mockup; the editor uses a static iconic preview defined in editor.js.
   ============================================================================ */
.eux-block--bento-mockup-editor {
	position: relative;
	min-height: 140px;
	background: var(--eux-cream-50);
	border: 1px dashed var(--eux-ink-300);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.eux-block--bento-mockup-editor__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px;
	text-align: center;
}
.eux-block--bento-mockup-editor__icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--eux-woo-500);
	color: var(--eux-white);
	display: grid;
	place-items: center;
}
.eux-block--bento-mockup-editor__label {
	font-family: var(--eux-font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--eux-ink-800);
}
.eux-block--bento-mockup-editor__preset {
	font-family: var(--eux-font-mono);
	font-size: 10.5px;
	color: var(--eux-ink-600);
	letter-spacing: 0.02em;
}

/* ==========================================================================
   8. WP variant presets — diagram primitives + per-preset chrome
   --------------------------------------------------------------------------
   v0.36.36 — Four new presets for WP-themed service pages:
     - wp-design-ux    · wireframe → designed-canvas progression
     - wp-platforms    · Gutenberg block-list editor (portrait)
     - wp-integrations · 4 systems piping into a WP hub
     - wp-performance  · 4 KPI tiles + scrolling response chart

   Each renders a curated SVG inside the bento-card media slot. The SVGs
   share a set of diagram primitives (.pipe, .node-box, .wp-text-tag, etc)
   that ALSO exist under .eux-block--problem-mockup in problem-trio/style.css.
   The two definitions are intentionally duplicated — block CSS loads
   conditionally per-page, so a page with only a bento and no problem-trio
   would have the bento mockups render unstyled if we relied on the
   problem-trio scope. Keyframe names are also distinct (`euxBentoPipeFlow`
   vs `euxProblemPipeFlow`) so the two CSS files can't accidentally compose.

   Scope: `.eux-block--bento-mockup.eux-bento-mockup--wp-*`. The compound
   selector keeps these styles from leaking into the non-WP presets.
   ========================================================================== */

.eux-block--bento-mockup.eux-bento-mockup--wp-design-ux,
.eux-block--bento-mockup.eux-bento-mockup--wp-platforms,
.eux-block--bento-mockup.eux-bento-mockup--wp-integrations,
.eux-block--bento-mockup.eux-bento-mockup--wp-performance {
	--diag-line:        var(--eux-ink-300);
	--diag-live:        var(--eux-woo-500);
	--diag-err:         #B0321A;
	--diag-node-bg:     #FFFFFF;
	--diag-node-stroke: var(--eux-ink-300);
	--diag-node-text:   var(--eux-ink-800);
	--diag-rule-text:   var(--eux-ink-700);

	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.eux-block--bento-mockup.eux-bento-mockup--wp-design-ux > .eux-mk > svg,
.eux-block--bento-mockup.eux-bento-mockup--wp-platforms > .eux-mk > svg,
.eux-block--bento-mockup.eux-bento-mockup--wp-integrations > .eux-mk > svg,
.eux-block--bento-mockup.eux-bento-mockup--wp-performance > .eux-mk > svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Pipe primitives — dashed connector lines, optional live flow animation */
.eux-block--bento-mockup[class*="--wp-"] .pipe {
	fill: none;
	stroke: var(--diag-line);
	stroke-width: 1.6;
	stroke-dasharray: 6 4;
}
.eux-block--bento-mockup[class*="--wp-"] .pipe--live {
	stroke: var(--diag-live);
	animation: euxBentoPipeFlow 1.4s linear infinite;
}
@keyframes euxBentoPipeFlow {
	to { stroke-dashoffset: -20; }
}

/* Node tiles — used for the systems around the hub */
.eux-block--bento-mockup[class*="--wp-"] .node-box {
	fill: var(--diag-node-bg);
	stroke: var(--diag-node-stroke);
	stroke-width: 1.2;
}
.eux-block--bento-mockup[class*="--wp-"] .node-box--hub {
	fill: var(--diag-live);
	stroke: var(--diag-live);
}
.eux-block--bento-mockup[class*="--wp-"] .node-lbl {
	font-family: var(--eux-font-display);
	font-size: 10px;
	font-weight: 600;
	fill: var(--diag-node-text);
	letter-spacing: 0.04em;
}
.eux-block--bento-mockup[class*="--wp-"] .node-lbl--inv {
	fill: #FFFFFF;
}

/* WP capability mockup primitives — small accent helpers used by the
   design-ux / platforms / performance SVGs. Mirror the definitions in
   problem-trio/style.css; see header comment for why they're duplicated. */
.eux-block--bento-mockup[class*="--wp-"] .wp-skeleton {
	fill: var(--eux-ink-100);
}
.eux-block--bento-mockup[class*="--wp-"] .wp-skeleton--alt {
	fill: var(--eux-ink-200);
}
.eux-block--bento-mockup[class*="--wp-"] .wp-row-fill {
	fill: var(--diag-line);
}
.eux-block--bento-mockup[class*="--wp-"] .wp-row-fill--accent {
	fill: var(--diag-live);
}
.eux-block--bento-mockup[class*="--wp-"] .wp-bar--accent {
	fill: var(--diag-live);
}
.eux-block--bento-mockup[class*="--wp-"] .wp-text-tag {
	font-family: var(--eux-font-mono);
	font-size: 8.5px;
	fill: var(--eux-woo-purple);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.eux-block--bento-mockup[class*="--wp-"] .wp-success-stamp {
	fill: rgba(31, 138, 91, 0.10);
	stroke: #1F8A5B;
	stroke-width: 1;
}
.eux-block--bento-mockup[class*="--wp-"] .wp-success-text {
	font-family: var(--eux-font-mono);
	font-size: 8.5px;
	fill: #1F8A5B;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}

/* Reduced motion — kill the pipe-flow animation. SMIL <animate> blocks
   inside the SVGs respect prefers-reduced-motion automatically in
   modern browsers. */
@media (prefers-reduced-motion: reduce) {
	.eux-block--bento-mockup[class*="--wp-"] .pipe--live {
		animation: none !important;
	}
}