/* ===================================================================
	 POC — "From chaos to order" widget concepts
	 =================================================================== */

/* ---------- Shared ---------- */

#product-widget-desk {
}

.product-card__visual-stage {
	position: relative;
	aspect-ratio: 16/9;
	border-radius: var(--radius);
	background: var(--color-bg-raised);
	border: 1px solid var(--color-line);
	touch-action: pan-y;
}

@media (max-width: 720px) {
	.product-card__visual-stage {
		aspect-ratio: 12/9;
	}
}
@media (max-width: 500px) {
	.product-card__visual-stage {
		aspect-ratio: 1/1;
	}
}

.product-card__visual-control {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-md);

	&.--hidden {
		visibility: hidden;
		padding: 0;
	}
}
.product-card__visual-control input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: min(280px, 60cqi);
	height: 8px;
	border-radius: var(--radius-pill);
	background: linear-gradient(
		to right,
		var(--color-control) 0%,
		var(--color-control) calc(var(--p, 0) * 100%),
		var(--color-line-strong) calc(var(--p, 0) * 100%),
		var(--color-line-strong) 100%
	);
	outline: none;
	cursor: pointer;
}
.product-card__visual-control input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--color-control);
	cursor: grab;
	box-shadow:
		0 0 0 4px var(--color-control-soft),
		0 4px 12px rgba(0, 0, 0, 0.4);
	animation: thumb-pulse 2.2s ease-in-out infinite;
}
.product-card__visual-control input[type="range"]::-webkit-slider-thumb:active {
	cursor: grabbing;
}
.product-card__visual-control input[type="range"]::-moz-range-thumb {
	width: 26px; height: 26px; border: 0;
	border-radius: 50%; background: var(--color-control); cursor: grab;
	box-shadow:
		0 0 0 4px var(--color-control-soft),
		0 4px 12px rgba(0, 0, 0, 0.4);
	animation: thumb-pulse 2.2s ease-in-out infinite;
}
.product-card__visual-control input[type="range"]:active::-moz-range-thumb {
	cursor: grabbing;
}
.product-card__visual-control input[type="range"]::-moz-range-progress {
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--color-control);
}
@keyframes thumb-pulse {
	0%, 100% {
		box-shadow:
			0 0 0 0 color-mix(in srgb, var(--color-control) 55%, transparent),
			0 0 14px 3px color-mix(in srgb, var(--color-control) 55%, transparent),
			0 4px 12px rgba(0, 0, 0, 0.45);
	}
	50% {
		box-shadow:
			0 0 0 11px transparent,
			0 0 22px 7px color-mix(in srgb, var(--color-control) 85%, transparent),
			0 4px 12px rgba(0, 0, 0, 0.45);
	}
}
.product-card__visual-control .ticks {
	position: absolute;
	display: flex; justify-content: space-between;
	width: 100%;
	padding-inline: 0;
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	pointer-events: none;
}
.product-card__visual-control .tick {
	pointer-events: auto;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--color-fg-dim);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	transition: color var(--dur) var(--ease-out);
}
.product-card__visual-control .tick:hover { color: var(--color-fg); }
.product-card__visual-control .tick[data-end="0"]  { color: color-mix(in srgb, var(--color-control) calc((1 - var(--p, 0)) * 100%), var(--color-fg-dim)); }
.product-card__visual-control .tick[data-end="100"] { color: color-mix(in srgb, var(--color-control) calc(var(--p, 0) * 100%), var(--color-fg-dim)); }

/* ---------- Phase readout in control bar ---------- */
.product-card__visual-control .ticks .phase-readout {
	position: absolute;
	left: 50%;
	top: -4rem;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-fg-muted);
	pointer-events: none;
	transition: color var(--dur) var(--ease-out);
	white-space: nowrap;
	color: var(--color-accent);
}

@container (max-width: 400px) {
	.product-card__visual-control {
		flex-direction: column;
		gap: var(--space-xs);
	}
	.product-card__visual-control input[type="range"] {
		width: min(280px, 80cqi);
	}
	.product-card__visual-control .ticks {
		position: relative;
		width: min(280px, 80cqi);
		padding-top: 1rem;
	}

	.product-card__visual-control .ticks .phase-readout {
		top: -6rem;
	}
}
@media (prefers-reduced-motion: reduce) {
	.product-card__visual-control input[type="range"]::-webkit-slider-thumb,
	.product-card__visual-control input[type="range"]::-moz-range-thumb { animation: none; }
}

/* ---------- Concept 1 — Magnetic desk ---------- */

.desk {
	position: absolute; inset: 0;
	--t: 0;
}
.desk__item {
	position: absolute;
	left: 0; top: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em 0.85em 0.4em 0.6em;
	border-radius: var(--radius-pill);
	border: 1px solid color-mix(in srgb, var(--type-color, var(--color-line-strong)) 35%, var(--color-line-strong));
	background: color-mix(in srgb, var(--color-bg-raised) 90%, transparent);
	font-family: var(--font-mono);
	font-size: clamp(0.7rem, 3.8cqi, 0.95rem);
	letter-spacing: 0.01em;
	white-space: nowrap;
	will-change: transform;
	cursor: default;
	user-select: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 4px 14px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.desk__item .ico {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--type-color, var(--color-fg-muted));
	line-height: 1;
}
.desk__item .ico svg { width: 100%; height: 100%; display: block; }
.desk__item .lbl { padding-right: 0.1em; }

.desk__app {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1.1fr 2.4fr;
	grid-template-rows: auto 1fr;
	gap: 1px;
	background: var(--color-line);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius);
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
.desk__app-bar {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 0.9em;
	background: var(--color-bg-raised);
	font-family: var(--font-mono);
	font-size: clamp(0.6rem, 3cqi, 0.78rem);
	color: var(--color-fg-muted);
	letter-spacing: 0.08em;
}
.desk__app-bar .dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--color-accent); }
.desk__app-side {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	padding: 0.7em;
	background: var(--color-bg-sunken);
}
.desk__app-side span {
	font-family: var(--font-mono);
	font-size: clamp(0.55rem, 2.8cqi, 0.72rem);
	color: var(--color-fg-dim);
	padding: 0.35em 0.6em;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.desk__app-side span.is-on {
	color: var(--color-fg);
	background: var(--color-accent-soft);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.desk__app-main {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.7em;
	background: var(--color-bg-raised);
}
.desk__app-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 0.7fr;
	gap: 0.5em;
	align-items: center;
	padding: 0.45em 0.6em;
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
}
.desk__app-row span {
	font-family: var(--font-mono);
	font-size: clamp(0.5rem, 2.6cqi, 0.68rem);
	color: var(--color-fg-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.desk__app-row .ok {
	justify-self: end;
	width: 0.5em; height: 0.5em;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 8px var(--color-accent);
}

/* ===================================================================
   Concept 2 — "ERP grid → interface → finalisation" (Création)
   An empty grid fills the stage. As the slider advances, an ERP
   interface (sidebar, header, cards, table, chart, KPIs) draws itself
   flat on the grid. In the final steps the interface "materializes":
   it stays in place but transitions from the cyan-blueprint look to the
   solid app palette (matching the "From chaos to order" app), and the
   grid fades away. JS drives the per-frame color blend; the CSS below
   holds the blueprint defaults. Pure SVG/CSS.
   =================================================================== */

#product-widget-project {
}

.erp__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	display: block;
	--t: 0;
}

/* ---------- Grid (always visible, full stage) ---------- */
.erp__grid-line {
	stroke: color-mix(in srgb, #22d3ee 30%, transparent);
	stroke-width: 0.5;
	fill: none;
}

/* ---------- UI panels (the interface drawing itself) ---------- */
.erp__panel {
	fill: color-mix(in srgb, var(--color-bg-raised) 92%, transparent);
	stroke: color-mix(in srgb, #22d3ee 60%, var(--color-line-strong));
	stroke-width: 1;
	stroke-linejoin: round;
	opacity: 0;
	transition: stroke 0.5s var(--ease-out);
}
.erp__panel.is-on { opacity: 1; }

/* ---------- UI element strokes (lines/bars that draw via dashoffset) ---------- */
.erp__stroke {
	fill: none;
	stroke: color-mix(in srgb, #22d3ee 75%, var(--color-fg-muted));
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke 0.5s var(--ease-out);
}

/* ---------- UI fills (solid blocks: table rows, chart bars, KPI tiles) ---------- */
.erp__fill {
	stroke: none;
	opacity: 0;
	transition: opacity 0.4s var(--ease-out);
}
.erp__fill.is-on { opacity: 1; }

/* ---------- Sidebar nav items ---------- */
.erp__nav-item {
	fill: color-mix(in srgb, var(--color-fg-dim) 50%, transparent);
	opacity: 0;
	transition: opacity 0.4s var(--ease-out), fill 0.4s var(--ease-out);
}
.erp__nav-item.is-on { opacity: 1; }
.erp__nav-item.is-active {
	fill: var(--color-accent);
	opacity: 0.85;
}

/* ---------- UI labels (mono text) ---------- */
.erp__label {
	font-family: var(--font-mono);
	fill: color-mix(in srgb, var(--color-fg-muted) 90%, transparent);
	opacity: 0;
	transition: opacity 0.4s var(--ease-out);
	pointer-events: none;
}
.erp__label.is-on { opacity: 1; }
.erp__label--title {
	fill: var(--color-fg);
	font-weight: 500;
}
.erp__label--accent { fill: var(--color-accent); }

/* ---------- Status dots (pulse on the active nav + header) ---------- */
.erp__dot {
	fill: var(--color-accent);
	opacity: 0;
}
.erp__dot.is-on { opacity: 0.9; }
@keyframes erp-dot-pulse {
	0%, 100% { opacity: 0.9; }
	50%      { opacity: 0.35; }
}
.erp__svg[data-phase="live"] .erp__dot.is-on {
	animation: erp-dot-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.erp__svg[data-phase="live"] .erp__dot.is-on { animation: none; }
}

/* ===================================================================
	 Modernisation widget — messy legacy app wipes into clean modern app
	 =================================================================== */
#product-widget-modern {
}

.modern-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	font-family: var(--font-sans);
}

.compare-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	font-family: var(--font-sans);
	cursor: grab;
}
.compare-before {
	user-select: none;
	-webkit-user-select: none;
}

/* Legacy app */
.legacy-ui {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	border: 2px outset #c0c0c0;
	background: #c0c0c0;
	border-radius: 0;
	overflow: hidden;
}
.legacy-ui::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, transparent, rgba(34,211,238,0.45), transparent);
	pointer-events: none;
	top: 0;
	animation: legacy-scanline 6s linear infinite;
}
@keyframes legacy-scanline {
	0% { top: -4px; opacity: 0; }
	5% { opacity: 1; }
	95% { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}

/* Before/after comparison */
.compare-after {
	inset: 0;
	z-index: 1;
}
.compare-before {
	inset: 0;
	z-index: 2;
	clip-path: inset(0 var(--pct, 50%) 0 0);
	border-radius: 0;
}

.compare-handle {
	position: absolute;
	inset: 0;
	left: calc(100% - var(--pct, 50%) - 1px);
	width: 2px;
	z-index: 3;
	pointer-events: none;
}
.compare-line {
	position: absolute;
	inset: 0;
	width: 2px;
	background: var(--color-control);
	box-shadow: 0 0 12px color-mix(in srgb, var(--color-control) 60%, transparent);
}
.compare-thumb {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-line-strong);
	color: var(--color-control);
	box-shadow: 0 4px 16px rgba(0,0,0,0.45);
	pointer-events: none;
}

.legacy-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8em;
	padding: 0.4em 0.6em;
	background: linear-gradient(to bottom, #000080, #1084d0);
	border-bottom: 2px groove #c0c0c0;
	border-radius: 0;
}
.legacy-title {
	font-weight: 700;
	font-size: clamp(0.55rem, 2.6cqi, 0.85rem);
	color: #fff;
	letter-spacing: 0.01em;
	font-family: "Tahoma", "Verdana", "MS Sans Serif", sans-serif;
}
.legacy-alert {
	padding: 0.15em 0.5em;
	border-radius: 0;
	background: #fdf6c2;
	color: #8a6d3b;
	font-size: clamp(0.5rem, 2.2cqi, 0.72rem);
	font-weight: 700;
	border: 1px outset #f0e68c;
	font-family: "Tahoma", "Verdana", "MS Sans Serif", sans-serif;
	animation: legacy-alert-pulse 3s ease-in-out infinite;

	position: absolute;
	bottom: 8px;
	left: 10px;
}
@keyframes legacy-alert-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
	50% { box-shadow: 0 0 0 5px rgba(185, 28, 28, 0.25); transform: scale(1.04); }
}

.legacy-menubar {
	display: flex;
	gap: 0.1em;
	padding: 0.2em 0.3em;
	background: #c0c0c0;
	border-bottom: 1px solid #808080;
	font-family: "Tahoma", "Verdana", "MS Sans Serif", sans-serif;
	font-size: clamp(0.45rem, 2cqi, 0.68rem);
	color: #000;
}
.legacy-menubar span { padding: 0.15em 0.4em; }
.legacy-menubar span:hover { background: #000080; color: #fff; }

.legacy-body {
	display: grid;
	grid-template-columns: 95fr 260fr;
	flex: 1;
	gap: 2px;
	background: #808080;
	overflow: hidden;
}
.legacy-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	padding: 0.4em;
	background: #c0c0c0;
	box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
}
.legacy-sidebar span {
	padding: 0.25em 0.5em;
	border-radius: 0;
	font-size: clamp(0.45rem, 2.1cqi, 0.68rem);
	color: #000;
	background: #c0c0c0;
	border: 1px solid;
	border-color: #fff #808080 #808080 #fff;
	font-family: "Tahoma", "Verdana", "MS Sans Serif", sans-serif;
}
.legacy-sidebar span:active {
	border-color: #808080 #fff #fff #808080;
}
.legacy-sidebar span.is-broken {
	background: #c0c0c0;
	color: #800000;
	border-color: #fff #808080 #808080 #fff;
	text-decoration: line-through;
	position: relative;
	animation: legacy-broken-flicker 4s steps(1, end) infinite;
}
.legacy-sidebar span.is-broken:nth-of-type(5) { animation-delay: 1.5s; }
.legacy-sidebar span.is-broken::after {
	content: "404";
	position: absolute;
	right: -1.6em;
	top: -0.8em;
	padding: 0.1em 0.3em;
	background: #800000;
	color: #fff;
	font-size: 0.7em;
	font-weight: 700;
	border-radius: 0;
	opacity: 0;
	transform: scale(0.5);
	pointer-events: none;
}
.legacy-sidebar span.is-broken::after { animation: legacy-tooltip 4s steps(1, end) infinite; }
.legacy-sidebar span.is-broken:nth-of-type(5)::after { animation-delay: 1.5s; content: "BUG"; }
@keyframes legacy-broken-flicker {
	0%, 72%, 100% { opacity: 1; }
	74%, 78% { opacity: 0.3; }
	80%, 88% { opacity: 1; }
	90% { opacity: 0.5; }
}
@keyframes legacy-tooltip {
	0%, 72%, 80%, 100% { opacity: 0; transform: scale(0.5); }
	74%, 78% { opacity: 1; transform: scale(1) rotate(-8deg); }
}

.legacy-main {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	padding: 0.4em;
	background: #c0c0c0;
	overflow: hidden;
}
.legacy-toolbar {
	display: flex;
	align-items: center;
	gap: 0.4em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid #808080;
}
.legacy-toolbar button,
.legacy-toolbar input {
	padding: 0.25em 0.5em;
	border: 1px solid;
	border-color: #fff #808080 #808080 #fff;
	border-radius: 0;
	background: #c0c0c0;
	color: #000;
	font-size: clamp(0.45rem, 1.9cqi, 0.65rem);
	font-family: "Tahoma", "Verdana", "MS Sans Serif", sans-serif;
}
.legacy-toolbar button:active {
	border-color: #808080 #fff #fff #808080;
}
.legacy-toolbar button.is-danger {
	background: #c0c0c0;
	color: #800000;
	font-weight: 700;
}
.legacy-toolbar button.is-stuck {
	position: relative;
	overflow: hidden;
}
.legacy-toolbar button.is-stuck::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, transparent 30%, rgba(34,211,238,0.5) 50%, transparent 70%);
	animation: legacy-stuck 1.8s linear infinite;
}
@keyframes legacy-stuck {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}
.legacy-toolbar input {
	margin-left: auto;
	width: 35%;
	color: #808080;
	border: 2px inset #c0c0c0;
	background: #fff;
}

.legacy-table {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid #808080;
}
.legacy-row {
	display: grid;
	grid-template-columns: 0.7fr 1.3fr 0.8fr 0.9fr;
	gap: 0.4em;
	align-items: center;
	padding: 0.3em 0.4em;
	background: #fff;
	border: none;
	border-bottom: 1px solid #c0c0c0;
	font-size: clamp(0.45rem, 2cqi, 0.68rem);
	color: #000;
	font-family: "Tahoma", "Verdana", "MS Sans Serif", sans-serif;
}
.legacy-row.--head {
	background: linear-gradient(to bottom, #f0f0f0, #d4d4d4);
	font-weight: 700;
	border-bottom: 2px groove #c0c0c0;
}
.legacy-row.--offset {
	transform: translateX(4px);
}
.legacy-row .status {
	justify-self: end;
	padding: 0.1em 0.35em;
	border-radius: 0;
	font-size: 0.85em;
	font-weight: 700;
	border: 1px solid;
}
.legacy-row .status.--warn {
	background: #fdf6c2; color: #8a6d3b; border-color: #d6b656;
}
.legacy-row .status.--ok {
	background: #c6efce; color: #006100; border-color: #6aa84f;
}
.legacy-row .status.--err  {
	background: #f8d7da; color: #800000; border-color: #c58a8a;
	animation: legacy-err-flash 2.5s ease-in-out infinite;
}
@keyframes legacy-err-flash {
	0%, 100% { opacity: 1; }
	45%, 55% { opacity: 0.35; }
	48% { opacity: 1; }
}
.legacy-row .status.--warn.is-loading { animation: legacy-warn-loading 3s steps(1, end) infinite; }
@keyframes legacy-warn-loading {
	0%, 60%, 100% { }
	62%, 78% { content: "?"; }
}
.legacy-row.is-jitter { animation: legacy-jitter 5s ease-in-out infinite; }
.legacy-row.is-jitter:nth-of-type(4) { animation-delay: 2.3s; }
@keyframes legacy-jitter {
	0%, 80%, 100% { transform: translateX(0); }
	82% { transform: translateX(-3px); }
	84% { transform: translateX(4px); }
	86% { transform: translateX(-2px); }
	88% { transform: translateX(3px); }
	90% { transform: translateX(0); }
}

.legacy-pagination {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
	padding-top: 0.4em;
	font-size: clamp(0.45rem, 1.9cqi, 0.65rem);
	color: #0000ee;
	font-family: "Tahoma", "Verdana", "MS Sans Serif", sans-serif;
}
.legacy-pagination span { text-decoration: underline; }
.legacy-pagination .is-current {
	font-weight: 700;
	color: #800080;
}

/* Modern app */
.modern-ui {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-line-strong);
	background: var(--color-bg);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow:
		inset 0 0 0 1px var(--color-line),
		0 0 0 1px var(--color-line);
}

.modern-bar {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 0.85em;
	background: var(--color-bg-raised);
	font-family: var(--font-mono);
	font-size: clamp(0.55rem, 2.4cqi, 0.78rem);
	color: var(--color-fg-muted);
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--color-line);
}
.modern-bar .dot {
	width: 0.55em; height: 0.55em;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 8px var(--color-accent);
}

.modern-body {
	display: grid;
	grid-template-columns: 95fr 260fr;
	flex: 1;
	gap: 1px;
	background: var(--color-line);
}
.modern-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 0.6em;
	background: var(--color-bg-sunken);
}
.modern-sidebar span {
	font-family: var(--font-mono);
	font-size: clamp(0.48rem, 2.1cqi, 0.68rem);
	color: var(--color-fg-dim);
	padding: 0.35em 0.5em;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.modern-sidebar span.is-on {
	color: var(--color-fg);
	background: var(--color-accent-soft);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.modern-main {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.6em;
	background: var(--color-bg-raised);
	overflow: hidden;
}
.modern-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.45em;
}
.kpi {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	padding: 0.45em;
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
}
.kpi span {
	font-family: var(--font-mono);
	font-size: clamp(0.4rem, 1.8cqi, 0.6rem);
	color: var(--color-fg-dim);
}
.kpi strong {
	font-size: clamp(0.55rem, 2.4cqi, 0.8rem);
	color: var(--color-fg);
	font-weight: 600;
}

.modern-table {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	flex: 0 0 auto;
	max-height: 42%;
	overflow: hidden;
}
.modern-row {
	display: grid;
	grid-template-columns: 0.7fr 1.3fr 0.8fr 0.55fr;
	gap: 0.45em;
	align-items: center;
	padding: 0.35em 0.5em;
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	font-family: var(--font-mono);
	font-size: clamp(0.4rem, 1.8cqi, 0.58rem);
	color: var(--color-fg-muted);
}
.modern-row.--head {
	background: transparent;
	border-color: transparent;
	color: var(--color-fg-dim);
	font-size: clamp(0.4rem, 1.8cqi, 0.6rem);
}
.modern-row .ok {
	justify-self: end;
	width: 0.5em; height: 0.5em;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 6px var(--color-accent);
}

/* Bar chart */
.modern-chart {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	padding: 0.5em 0.6em;
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	flex: 1;
	min-height: 0;
}
.modern-chart__title {
	font-family: var(--font-mono);
	font-size: clamp(0.4rem, 1.8cqi, 0.6rem);
	color: var(--color-fg-dim);
	letter-spacing: 0.06em;
}
.modern-chart__bars {
	display: flex;
	align-items: flex-end;
	gap: clamp(0.3em, 1.5cqi, 0.8em);
	flex: 1;
	min-height: 0;
}
.modern-chart__bars .bar {
	flex: 1;
	height: var(--h);
	min-height: 4px;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background: color-mix(in srgb, var(--color-control) 55%, transparent);
	position: relative;
	transition: background var(--dur) var(--ease-out);
}
.modern-chart__bars .bar.is-accent {
	background: color-mix(in srgb, var(--color-accent) 65%, transparent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.modern-chart__bars .bar span {
	position: absolute;
	bottom: -1.2em;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-mono);
	font-size: clamp(0.35rem, 1.6cqi, 0.52rem);
	color: var(--color-fg-dim);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.legacy-ui,
	.modern-ui,
	.compare-before,
	.compare-handle {
		transition: none;
		transform: none;
	}
	.legacy-alert,
	.legacy-sidebar span.is-broken,
	.legacy-sidebar span.is-broken::after,
	.legacy-row .status.--err,
	.legacy-row .status.--warn.is-loading,
	.legacy-row.is-jitter,
	.legacy-toolbar button.is-stuck::after,
	.legacy-ui::after {
		animation: none !important;
	}
}