/*
	FurnStream dialog layer (session 104): the shared stylesheet of the toast (type 1), the message
	(type 2), the confirm (type 3) and the choice (type 4), plus the building blocks (tile, button, chip, timer, window) the later types reuse.
	Byte-identical in all five clients: every colour, radius, shadow and font is a --fs-dialog-* token
	that dialogs.tokens.css defines per client. Scoped to its own classes, so it does not depend on its
	position against the client's stylesheets. Tokens with a fallback here (-pad-x, -head-border,
	-foot-bg, -foot-border, -block-border, -radius-block, -ghost-*, -title-spacing) are the glass
	kits' overrides (§9); the UBold clients leave them out and get the defaults.
*/

/* === Toast host: one popover in the top layer, a fixed element where the Popover API is missing === */

.fs-dialog-toast-host {
	position: fixed;
	inset: auto;
	top: var(--fs-dialog-toast-top, 16px);
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--fs-dialog-z, 1090);
	display: none;
	gap: 8px;
	width: min(430px, calc(100% - 32px));
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fs-dialog-text);
	font-family: var(--fs-dialog-font-family);
	font-size: 14px;
	line-height: 1.5;
	overflow: visible;
}

.fs-dialog-toast-host.is-open {
	display: grid;
}

/* Separate rule on purpose: a browser without the Popover API drops any selector list that names :popover-open. */
.fs-dialog-toast-host:popover-open {
	display: grid;
}

/* === Type 1: toast === */

.fs-dialog-toast {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--fs-dialog-border);
	border-radius: var(--fs-dialog-radius-toast, 14px);
	background: var(--fs-dialog-bg-image, none), var(--fs-dialog-bg);
	-webkit-backdrop-filter: var(--fs-dialog-backdrop-filter, none);
	backdrop-filter: var(--fs-dialog-backdrop-filter, none);
	box-shadow: var(--fs-dialog-shadow);
	color: var(--fs-dialog-text);
	animation: fs-dialog-toast-in .3s cubic-bezier(.2, .8, .2, 1) both;
}

.fs-dialog-toast.is-bumping {
	animation: fs-dialog-bump .25s ease both;
}

.fs-dialog-toast.is-leaving {
	animation: fs-dialog-toast-out .25s ease forwards;
	pointer-events: none;
}

.fs-dialog-toast__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
}

.fs-dialog-toast__text {
	flex: 1;
	min-width: 0;
}

.fs-dialog-toast__title {
	display: block;
	color: var(--fs-dialog-heading);
	font-weight: 700;
}

.fs-dialog-toast__title .fs-dialog-chip {
	margin-left: 6px;
	vertical-align: 1px;
}

.fs-dialog-toast__hint {
	display: block;
	color: var(--fs-dialog-muted);
	font-size: 13px;
}

.fs-dialog-toast .fs-dialog-btn {
	flex: none;
}

/* === Draining bar: linear over the lifetime, paused while the pointer or the focus is inside === */

.fs-dialog-timer {
	height: 3px;
	overflow: hidden;
	background: var(--fs-dialog-bg-raised);
}

.fs-dialog-timer i {
	display: block;
	height: 100%;
	background: var(--fs-dialog-timer-color, var(--fs-dialog-success));
	transform-origin: left;
	transform: scaleX(var(--fs-dialog-drain-from, 1));
	animation: fs-dialog-drain var(--fs-dialog-drain-life, 3200ms) linear forwards;
}

.fs-dialog-timer--success i {
	--fs-dialog-timer-color: var(--fs-dialog-success);
}

.fs-dialog-timer--error i {
	--fs-dialog-timer-color: var(--fs-dialog-danger);
}

.fs-dialog-timer--warning i {
	--fs-dialog-timer-color: var(--fs-dialog-warning);
}

.fs-dialog-timer--info i {
	--fs-dialog-timer-color: var(--fs-dialog-info);
}

.fs-dialog-timer--neutral i {
	--fs-dialog-timer-color: var(--fs-dialog-muted);
}

.is-paused .fs-dialog-timer i {
	animation-play-state: paused;
}

/* === Icon tile: the icon is the thing, the colour is the intent === */

.fs-dialog-tile {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--fs-dialog-radius-tile);
	background: var(--fs-dialog-primary-subtle);
	color: var(--fs-dialog-primary-text);
}

.fs-dialog-tile svg {
	width: 21px;
	height: 21px;
}

.fs-dialog-tile--sm {
	width: 34px;
	height: 34px;
	border-radius: calc(var(--fs-dialog-radius-tile) - 3px);
}

.fs-dialog-tile--sm svg {
	width: 17px;
	height: 17px;
}

.fs-dialog-tile--danger {
	background: var(--fs-dialog-danger-subtle);
	color: var(--fs-dialog-danger-text);
}

.fs-dialog-tile--success {
	background: var(--fs-dialog-success-subtle);
	color: var(--fs-dialog-success-text);
}

.fs-dialog-tile--warning {
	background: var(--fs-dialog-warning-subtle);
	color: var(--fs-dialog-warning-text);
}

.fs-dialog-tile--info {
	background: var(--fs-dialog-info-subtle);
	color: var(--fs-dialog-info-text);
}

.fs-dialog-tile--neutral {
	background: var(--fs-dialog-neutral-subtle);
	color: var(--fs-dialog-muted);
}

.fs-dialog-draw path {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: fs-dialog-draw .45s .15s ease forwards;
}

/* === Buttons === */

.fs-dialog-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--fs-dialog-button-height);
	padding: 0 var(--fs-dialog-button-padding-x, 16px);
	border: 1px solid transparent;
	border-radius: var(--fs-dialog-button-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--fs-dialog-button-font-size, 14px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .08s ease, background-color .15s ease, opacity .15s ease;
}

.fs-dialog-btn:active {
	transform: translateY(1px);
}

.fs-dialog-btn:focus-visible {
	outline: 2px solid var(--fs-dialog-primary);
	outline-offset: 2px;
	box-shadow: none;
}

.fs-dialog-btn--primary:focus-visible {
	box-shadow: 0 6px 16px var(--fs-dialog-primary-glow, transparent);
}

.fs-dialog-btn:disabled {
	opacity: .55;
	pointer-events: none;
}

.fs-dialog-btn svg {
	width: 16px;
	height: 16px;
}

.fs-dialog-btn--primary {
	background: var(--fs-dialog-primary);
	color: var(--fs-dialog-on-primary);
	box-shadow: 0 6px 16px var(--fs-dialog-primary-glow, transparent);
}

.fs-dialog-btn--primary:hover {
	background: color-mix(in srgb, var(--fs-dialog-primary), var(--fs-dialog-heading) 10%);
}

.fs-dialog-btn--soft {
	background: var(--fs-dialog-primary-subtle);
	color: var(--fs-dialog-primary-text);
}

.fs-dialog-btn--soft:hover {
	background: color-mix(in srgb, var(--fs-dialog-primary-subtle), var(--fs-dialog-primary) 10%);
}

.fs-dialog-btn--ghost {
	border-color: var(--fs-dialog-ghost-border, transparent);
	background: var(--fs-dialog-ghost-bg, transparent);
	color: var(--fs-dialog-ghost-text, var(--fs-dialog-muted));
	box-shadow: var(--fs-dialog-ghost-shadow, none);
}

.fs-dialog-btn--ghost:hover {
	border-color: var(--fs-dialog-ghost-hover-border, var(--fs-dialog-ghost-border, transparent));
	background: var(--fs-dialog-ghost-hover-bg, var(--fs-dialog-bg-raised));
	color: var(--fs-dialog-ghost-hover-text, var(--fs-dialog-heading));
}

.fs-dialog-btn--sm {
	height: calc(var(--fs-dialog-button-height) - 4px);
	padding: 0 10px;
	border-radius: calc(var(--fs-dialog-button-radius) - 2px);
	font-size: calc(var(--fs-dialog-button-font-size, 14px) - 1px);
}

/* === Chip === */

.fs-dialog-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--fs-dialog-bg-raised);
	color: var(--fs-dialog-text);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.fs-dialog-chip--primary {
	background: var(--fs-dialog-primary-subtle);
	color: var(--fs-dialog-primary-text);
}

.fs-dialog-chip--success {
	background: var(--fs-dialog-success-subtle);
	color: var(--fs-dialog-success-text);
}

.fs-dialog-chip--warning {
	background: var(--fs-dialog-warning-subtle);
	color: var(--fs-dialog-warning-text);
}

.fs-dialog-chip--danger {
	background: var(--fs-dialog-danger-subtle);
	color: var(--fs-dialog-danger-text);
}

/* === Layer window: a native <dialog> in the top layer; the veil is its ::backdrop === */

dialog.fs-dialog {
	position: fixed;
	inset: 0;
	width: min(var(--fs-dialog-width, 400px), calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fs-dialog-text);
	font-family: var(--fs-dialog-font-family);
	font-size: 14px;
	line-height: 1.5;
	overflow: visible;
}

/* A window without a focusable control focuses the dialog itself; that focus needs no ring. */
dialog.fs-dialog:focus,
dialog.fs-dialog:focus-visible {
	outline: none;
}

/* The rgba fallbacks only serve browsers whose ::backdrop cannot read custom properties yet. */
dialog.fs-dialog::backdrop {
	background: var(--fs-dialog-veil, rgba(0, 0, 0, .45));
	-webkit-backdrop-filter: blur(var(--fs-dialog-veil-blur, 5px));
	backdrop-filter: blur(var(--fs-dialog-veil-blur, 5px));
	animation: fs-dialog-veil-in .22s ease both;
}

dialog.fs-dialog.is-closing::backdrop {
	animation: fs-dialog-veil-out .2s ease forwards;
}

dialog.fs-dialog--message {
	--fs-dialog-width: 400px;
}

.fs-dialog__panel {
	overflow: hidden;
	border: 1px solid var(--fs-dialog-border);
	border-radius: var(--fs-dialog-radius);
	background: var(--fs-dialog-bg-image, none), var(--fs-dialog-bg);
	-webkit-backdrop-filter: var(--fs-dialog-backdrop-filter, none);
	backdrop-filter: var(--fs-dialog-backdrop-filter, none);
	box-shadow: var(--fs-dialog-shadow);
	animation: fs-dialog-in .28s cubic-bezier(.2, .8, .2, 1) both;
}

dialog.fs-dialog--shake .fs-dialog__panel {
	animation: fs-dialog-in .28s cubic-bezier(.2, .8, .2, 1) both, fs-dialog-shake .32s .28s ease both;
}

dialog.fs-dialog--from-origin .fs-dialog__panel {
	animation: fs-dialog-origin-in .34s cubic-bezier(.2, .8, .2, 1) both;
}

dialog.fs-dialog.is-closing .fs-dialog__panel {
	animation: fs-dialog-out .18s ease forwards;
}

dialog.fs-dialog--from-origin.is-closing .fs-dialog__panel {
	animation: fs-dialog-origin-out .22s ease forwards;
}

.fs-dialog__title {
	margin: 0;
	color: var(--fs-dialog-heading);
	font-size: var(--fs-dialog-title-size);
	font-weight: var(--fs-dialog-title-weight);
	letter-spacing: var(--fs-dialog-title-spacing, normal);
	line-height: 1.3;
}

.fs-dialog__text {
	margin: 2px 0 0;
	color: var(--fs-dialog-text);
}

/* === Type 2: message === */

.fs-dialog-message {
	display: grid;
	gap: 12px;
	padding: 22px var(--fs-dialog-pad-x, 22px) 18px;
}

.fs-dialog-message__top {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.fs-dialog-message__body {
	flex: 1;
	min-width: 0;
}

.fs-dialog-message__list {
	margin: 0;
	padding: 10px 12px 10px 28px;
	border-radius: calc(var(--fs-dialog-radius-control) + 2px);
	background: var(--fs-dialog-bg-raised);
	color: var(--fs-dialog-heading);
}

.fs-dialog-message__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* === Window anatomy shared by the confirm and the choice: head with tile and bar, body in blocks, footer band === */

dialog.fs-dialog--confirm {
	--fs-dialog-width: 400px;
}

dialog.fs-dialog--confirm.fs-dialog--wide,
dialog.fs-dialog--choice {
	--fs-dialog-width: 500px;
}

.fs-dialog__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px var(--fs-dialog-pad-x, 20px);
	border-bottom: 1px solid var(--fs-dialog-head-border, var(--fs-dialog-border));
}

.fs-dialog__titles {
	flex: 1;
	min-width: 0;
}

.fs-dialog__subtitle {
	color: var(--fs-dialog-muted);
	font-size: 13px;
}

.fs-dialog-close {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--fs-dialog-muted);
	cursor: pointer;
}

.fs-dialog-close:hover {
	background: var(--fs-dialog-bg-raised);
	color: var(--fs-dialog-heading);
}

.fs-dialog-close:focus-visible {
	outline: 2px solid var(--fs-dialog-primary);
	outline-offset: 2px;
}

.fs-dialog-close svg {
	width: 17px;
	height: 17px;
}

.fs-dialog-close:disabled {
	visibility: hidden;
}

.fs-dialog__body {
	display: grid;
	gap: 14px;
	padding: 18px var(--fs-dialog-pad-x, 20px);
}

.fs-dialog__body .fs-dialog__text {
	margin: 0;
}

.fs-dialog__hint {
	display: block;
	color: var(--fs-dialog-muted);
	font-size: 13px;
}

.fs-dialog__label {
	margin-bottom: -6px;
	color: var(--fs-dialog-muted);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* The footer band; the glass kits make it transparent, so their buttons sit in the body padding (mockup 14). */
.fs-dialog__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px var(--fs-dialog-pad-x, 20px) var(--fs-dialog-foot-pad-bottom, 14px);
	border-top: 1px solid var(--fs-dialog-foot-border, var(--fs-dialog-border));
	background: var(--fs-dialog-foot-bg, var(--fs-dialog-bg-raised));
}

.fs-dialog__grow {
	flex: 1;
	min-width: 0;
}

/* === Busy bar: 3 px on the head's lower edge, a 38 % gradient sweeping from left to right while a request runs === */

.fs-dialog-loader {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 3px;
	overflow: hidden;
	opacity: 0;
	transition: opacity .15s ease;
}

.fs-dialog-loader i {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 38%;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--fs-dialog-bar, var(--fs-dialog-primary)), transparent);
	animation: fs-dialog-loader-run 1.1s ease-in-out infinite;
}

.is-busy > .fs-dialog__panel .fs-dialog__head .fs-dialog-loader {
	opacity: 1;
	background: var(--fs-dialog-primary-subtle);
}

.fs-dialog-spinner {
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: fs-dialog-spin .7s linear infinite;
}

/* === Buttons of the confirm: red only for gone or definitive, green for restore === */

.fs-dialog-btn--danger {
	background: var(--fs-dialog-danger);
	color: var(--fs-dialog-on-primary);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--fs-dialog-danger) 30%, transparent);
}

.fs-dialog-btn--danger:hover {
	background: color-mix(in srgb, var(--fs-dialog-danger), var(--fs-dialog-heading) 10%);
}

.fs-dialog-btn--success {
	background: var(--fs-dialog-success);
	color: var(--fs-dialog-on-primary);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--fs-dialog-success) 30%, transparent);
}

.fs-dialog-btn--success:hover {
	background: color-mix(in srgb, var(--fs-dialog-success), var(--fs-dialog-heading) 10%);
}

.fs-dialog-btn--danger:focus-visible {
	outline-color: var(--fs-dialog-danger);
}

.fs-dialog-btn--success:focus-visible {
	outline-color: var(--fs-dialog-success);
}

.fs-dialog-btn__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fs-dialog-btn[data-meriad-custom-dialog-hold] {
	position: relative;
	overflow: hidden;
}

/* === Type 3: confirm — subject block, note, consequence list, fields === */

.fs-dialog-subject {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--fs-dialog-block-border, transparent);
	border-radius: var(--fs-dialog-radius-block, 12px);
	background: var(--fs-dialog-bg-raised);
}

.fs-dialog-subject__text {
	flex: 1;
	min-width: 0;
}

.fs-dialog-subject__text b {
	display: block;
	overflow: hidden;
	color: var(--fs-dialog-heading);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fs-dialog-subject__amount {
	flex: none;
	color: var(--fs-dialog-heading);
}

.fs-dialog-avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--fs-dialog-primary-subtle);
	color: var(--fs-dialog-primary-text);
	font-size: 11.5px;
	font-weight: 800;
}

.fs-dialog-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--fs-dialog-muted);
	font-size: 13px;
}

.fs-dialog-note svg {
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 2px;
}

.fs-dialog-effects {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-dialog-effects li {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: start;
	gap: 10px;
	font-size: 13.5px;
	animation: fs-dialog-rise .3s ease both;
}

.fs-dialog-effects li:nth-child(1) { animation-delay: .12s; }
.fs-dialog-effects li:nth-child(2) { animation-delay: .2s; }
.fs-dialog-effects li:nth-child(3) { animation-delay: .28s; }
.fs-dialog-effects li:nth-child(4) { animation-delay: .36s; }
.fs-dialog-effects li:nth-child(5) { animation-delay: .44s; }

.fs-dialog-effects svg {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--fs-dialog-success);
}

.fs-dialog-effects li.is-attention svg {
	color: var(--fs-dialog-warning);
}

.fs-dialog-effects b {
	color: var(--fs-dialog-heading);
}

.fs-dialog-fields {
	display: grid;
	gap: 12px;
	text-align: left;
}

.fs-dialog-fields label {
	display: block;
	margin-bottom: 5px;
	color: var(--fs-dialog-heading);
	font-size: 12.5px;
	font-weight: 700;
}

.fs-dialog-fields .text-danger {
	color: var(--fs-dialog-danger);
}

.fs-dialog-fields input:not([type="checkbox"]):not([type="radio"]),
.fs-dialog-fields select,
.fs-dialog-fields textarea {
	display: block;
	width: 100%;
	min-height: 42px;
	padding: 8px 13px;
	border: 1px solid var(--fs-dialog-border);
	border-radius: var(--fs-dialog-radius-control);
	background: var(--fs-dialog-bg-sunken);
	color: var(--fs-dialog-heading);
	font: inherit;
	font-weight: 600;
}

.fs-dialog-fields input:focus,
.fs-dialog-fields select:focus,
.fs-dialog-fields textarea:focus {
	outline: none;
	border-color: var(--fs-dialog-primary);
	box-shadow: 0 0 0 3px var(--fs-dialog-primary-subtle);
}

/* === Error strip: the server's reason at the top of the body, everything typed stays === */

.fs-dialog-strip {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--fs-dialog-danger-subtle);
	color: var(--fs-dialog-danger-text);
	font-size: 13.5px;
	animation: fs-dialog-rise .22s ease both;
}

.fs-dialog-strip[hidden] {
	display: none;
}

.fs-dialog-strip__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--fs-dialog-danger) 18%, transparent);
}

.fs-dialog-strip__icon svg {
	width: 16px;
	height: 16px;
}

.fs-dialog-strip__text {
	flex: 1;
	min-width: 0;
}

.fs-dialog-strip__text b {
	display: block;
}

.fs-dialog-strip__text span {
	display: block;
	color: color-mix(in srgb, var(--fs-dialog-danger-text) 78%, var(--fs-dialog-text));
}

dialog.fs-dialog--nudge .fs-dialog__panel {
	animation: fs-dialog-shake .32s ease both;
}

/* === Type 4: choice — one card per outcome, the chosen card carries the bar, the others dim === */

.fs-dialog__body--choices {
	gap: 10px;
}

.fs-dialog-choice-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px;
	overflow: hidden;
	border: 1px solid var(--fs-dialog-border);
	border-radius: 14px;
	background: var(--fs-dialog-bg-sunken);
	color: var(--fs-dialog-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .2s ease;
	animation: fs-dialog-rise .32s cubic-bezier(.2, .8, .2, 1) both;
}

.fs-dialog-choice-card:hover,
.fs-dialog-choice-card:focus-visible {
	outline: none;
	border-color: var(--fs-dialog-primary);
	box-shadow: 0 0 0 3px var(--fs-dialog-primary-subtle);
	transform: translateX(2px);
}

.fs-dialog-choice-card__text {
	flex: 1;
	min-width: 0;
}

.fs-dialog-choice-card__text b {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: var(--fs-dialog-heading);
	font-size: 15px;
}

.fs-dialog-choice-card__go {
	flex: none;
	margin-left: auto;
	color: var(--fs-dialog-muted);
	transition: transform .15s ease, color .15s ease;
}

.fs-dialog-choice-card:hover .fs-dialog-choice-card__go {
	transform: translateX(3px);
	color: var(--fs-dialog-primary-text);
}

.fs-dialog-choice-card__go svg {
	width: 18px;
	height: 18px;
}

.fs-dialog-loader--card {
	bottom: 0;
}

.is-busy .fs-dialog-choice-card {
	pointer-events: none;
}

.is-busy .fs-dialog-choice-card:not(.is-chosen) {
	opacity: .5;
}

.is-busy .fs-dialog-choice-card.is-chosen {
	border-color: var(--fs-dialog-primary);
}

.is-busy .fs-dialog-choice-card.is-chosen .fs-dialog-loader--card {
	opacity: 1;
	background: var(--fs-dialog-primary-subtle);
}

.fs-dialog-choice__cancel {
	text-align: center;
}

/* === Undo: the row of a deleted record fades while the table reloads === */

tr.fs-dialog-row-leaving {
	opacity: 0;
	transition: opacity .3s ease;
}

tr.fs-dialog-row-leaving > td {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 0;
	transition: padding .3s ease, line-height .3s ease;
}

/* === Types 5–10: the framework modal dressed as the shell (the container template carries the hooks) === */

/* Width per type on the dialog; an explicit size class still wins because the layer sets no width next to one. */
[data-meriad-custom-dialog-shell] .modal-dialog[data-meriad-custom-dialog-width="500"] {
	--bs-modal-width: 500px;
	--theme-modal-width: 500px;
}

[data-meriad-custom-dialog-shell] .modal-dialog[data-meriad-custom-dialog-width="780"] {
	--bs-modal-width: 780px;
	--theme-modal-width: 780px;
}

[data-meriad-custom-dialog-shell] .modal-dialog[data-meriad-custom-dialog-width="1080"] {
	--bs-modal-width: 1080px;
	--theme-modal-width: 1080px;
}

[data-meriad-custom-dialog-shell] .modal-content {
	border: 1px solid var(--fs-dialog-border);
	border-radius: var(--fs-dialog-radius);
	background: var(--fs-dialog-bg-image, none), var(--fs-dialog-bg);
	-webkit-backdrop-filter: var(--fs-dialog-backdrop-filter, none);
	backdrop-filter: var(--fs-dialog-backdrop-filter, none);
	box-shadow: var(--fs-dialog-shadow);
	color: var(--fs-dialog-text);
	font-family: var(--fs-dialog-font-family);
}

[data-meriad-custom-dialog-shell] .modal-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px var(--fs-dialog-pad-x, 20px);
	border-bottom: 1px solid var(--fs-dialog-head-border, var(--fs-dialog-border));
	border-radius: 0;
	background: transparent;
}

[data-meriad-custom-dialog-shell] .modal-header .fs-dialog__titles {
	flex: 1;
	min-width: 0;
}

[data-meriad-custom-dialog-shell] .modal-title {
	margin: 0;
	color: var(--fs-dialog-heading);
	font-size: var(--fs-dialog-title-size);
	font-weight: var(--fs-dialog-title-weight);
	letter-spacing: var(--fs-dialog-title-spacing, normal);
	line-height: 1.3;
}

[data-meriad-custom-dialog-shell] .modal-header .fs-dialog-chip {
	flex: none;
}

.fs-dialog-shell__header-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fs-dialog-shell__header-actions:empty {
	display: none;
}

[data-meriad-custom-dialog-shell].is-loading .fs-dialog-loader,
[data-meriad-custom-dialog-shell].is-busy .fs-dialog-loader {
	opacity: 1;
	background: var(--fs-dialog-primary-subtle);
}

[data-meriad-custom-dialog-shell] .modal-body {
	padding: 18px var(--fs-dialog-pad-x, 20px);
}

[data-meriad-custom-dialog-shell] .fs-dialog-strip {
	flex: none;
	margin: 14px var(--fs-dialog-pad-x, 20px) 0;
}

[data-meriad-custom-dialog-shell] .modal-footer {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 14px var(--fs-dialog-pad-x, 20px) var(--fs-dialog-foot-pad-bottom, 14px);
	border-top: 1px solid var(--fs-dialog-foot-border, var(--fs-dialog-border));
	border-radius: 0;
	background: var(--fs-dialog-foot-bg, var(--fs-dialog-bg-raised));
}

[data-meriad-custom-dialog-shell] .modal-footer > * {
	margin: 0;
}

.fs-dialog-shell__footer-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}


.fs-dialog-shell__footer-left {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fs-dialog-shell__footer-left:empty {
	display: none;
}

.fs-dialog-shell__footer-info {
	display: inline-flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--fs-dialog-muted);
	font-size: 13px;
}

.fs-dialog-shell__footer-info > [hidden] {
	display: none;
}

.fs-dialog-shell__footer-info > .is-danger {
	color: var(--fs-dialog-danger-text);
	font-weight: 700;
}

.fs-dialog-shell__footer-info > .is-success {
	color: var(--fs-dialog-success-text);
	font-weight: 700;
}

.fs-dialog-shell__footer-right {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.fs-dialog-shell__footer-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.fs-dialog-shell__footer-primary:empty {
	display: none;
}

/* Footer buttons: one size and one type for every button in the footer (the framework's accept and cancel, the slotted
	primaries and the guard), so a body cannot bring its own; the accept is the theme's primary (red only with intent danger),
	the cancel the ghost of the token file. Height, font and padding come from the tokens. */
[data-meriad-custom-dialog-shell] .modal-footer .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--fs-dialog-button-height);
	padding: 0 var(--fs-dialog-button-padding-x, 16px);
	border-radius: var(--fs-dialog-button-radius);
	font-size: var(--fs-dialog-button-font-size, 14px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	transition: transform .08s ease, background-color .15s ease, opacity .15s ease;
}

[data-meriad-custom-dialog-shell] .modal-footer .btn:active {
	transform: translateY(1px);
}

[data-meriad-custom-dialog-shell] .modal-footer .btn:disabled {
	opacity: .55;
	pointer-events: none;
}

[data-meriad-custom-dialog-shell] .modal-footer .btn-primary {
	border-color: transparent;
	background: var(--fs-dialog-primary);
	color: var(--fs-dialog-on-primary);
	box-shadow: 0 6px 16px var(--fs-dialog-primary-glow, transparent);
}

[data-meriad-custom-dialog-shell] .modal-footer .btn-primary:hover {
	background: color-mix(in srgb, var(--fs-dialog-primary), var(--fs-dialog-heading) 10%);
}

[data-meriad-custom-dialog-shell] .modal-footer .btn-danger {
	border-color: transparent;
	background: var(--fs-dialog-danger);
	color: var(--fs-dialog-on-primary);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--fs-dialog-danger) 30%, transparent);
}

[data-meriad-custom-dialog-shell] .modal-footer .btn-danger:hover {
	background: color-mix(in srgb, var(--fs-dialog-danger), var(--fs-dialog-heading) 10%);
}

/* A body may slot a success-green primary for the last step of a task ("Afronden"); it shares the done colour. */
[data-meriad-custom-dialog-shell] .modal-footer .btn-success,
[data-meriad-custom-dialog-shell] .modal-footer .btn.is-done,
[data-meriad-custom-dialog-shell] .modal-footer .btn.is-done:disabled {
	border-color: transparent;
	background: var(--fs-dialog-success);
	color: var(--fs-dialog-on-primary);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--fs-dialog-success) 30%, transparent);
	opacity: 1;
}

[data-meriad-custom-dialog-shell] .modal-footer .btn svg {
	width: 16px;
	height: 16px;
}

[data-meriad-custom-dialog-shell] .btn-ghost {
	border-color: var(--fs-dialog-ghost-border, transparent);
	background: var(--fs-dialog-ghost-bg, transparent);
	color: var(--fs-dialog-ghost-text, var(--fs-dialog-muted));
	box-shadow: var(--fs-dialog-ghost-shadow, none);
}

[data-meriad-custom-dialog-shell] .btn-ghost:hover {
	border-color: var(--fs-dialog-ghost-hover-border, var(--fs-dialog-ghost-border, transparent));
	background: var(--fs-dialog-ghost-hover-bg, var(--fs-dialog-bg-sunken));
	color: var(--fs-dialog-ghost-hover-text, var(--fs-dialog-heading));
}

[data-meriad-custom-dialog-shell] .btn-ghost.btn-ghost-danger {
	color: var(--fs-dialog-danger-text);
}

[data-meriad-custom-dialog-shell] .btn-ghost.btn-ghost-danger:hover {
	background: var(--fs-dialog-danger-subtle);
}

[data-meriad-custom-dialog-shell] .btn-soft {
	border-color: transparent;
	background: var(--fs-dialog-primary-subtle);
	color: var(--fs-dialog-primary-text);
}

[data-meriad-custom-dialog-shell] .btn-soft:hover {
	background: color-mix(in srgb, var(--fs-dialog-primary-subtle), var(--fs-dialog-primary) 10%);
}

[data-meriad-custom-dialog-shell] .modal-footer .btn:focus-visible {
	outline: 2px solid var(--fs-dialog-primary);
	outline-offset: 2px;
	box-shadow: none;
}

/* === Skeleton: painted next to the body entity while the content is on its way (only after 150 ms) === */

.fs-dialog-skeleton {
	display: grid;
	align-content: start;
	gap: 12px;
}

.fs-dialog-sk {
	display: block;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--fs-dialog-bg-raised) 25%, var(--fs-dialog-bg-sunken) 50%, var(--fs-dialog-bg-raised) 75%);
	background-size: 200% 100%;
	animation: fs-dialog-shimmer 1.3s linear infinite;
}

.fs-dialog-sk--label {
	height: 14px;
}

.fs-dialog-sk--field {
	height: 42px;
}

.fs-dialog-sk--avatar {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 10px;
}

.fs-dialog-sk--check {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 5px;
}

.fs-dialog-sk--step {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.fs-dialog-sk--frame {
	height: 220px;
	border-radius: 14px;
}

.fs-dialog-skeleton__grid {
	display: grid;
	gap: 12px;
}

.fs-dialog-skeleton__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fs-dialog-skeleton__row > span {
	flex: 1;
	display: grid;
	gap: 8px;
}

/* === Motion of the shell: the content grows from the origin (or rises 14 px), the veil blurs, the leave shrinks back === */

[data-meriad-custom-dialog-shell].modal.fade {
	transition: opacity .2s linear;
}

/* The theme animates the dialog itself (UBold: scale .85 and opacity 0 until zoomInModal runs); the layer moves the content instead. */
[data-meriad-custom-dialog-shell].modal .modal-dialog,
[data-meriad-custom-dialog-shell].modal.fade .modal-dialog,
[data-meriad-custom-dialog-shell].modal.show .modal-dialog {
	opacity: 1;
	transform: none;
	transition: transform .28s cubic-bezier(.2, .8, .2, 1), filter .28s ease;
	animation: none;
}

/* Two windows (mockup 07): while the second window is open the shell moves back, dims and stays intact underneath. */
[data-meriad-custom-dialog-shell].modal.is-under .modal-dialog {
	transform: scale(.93) translateY(-22px);
	filter: brightness(.55);
}

[data-meriad-custom-dialog-shell].modal.show .modal-content {
	animation: fs-dialog-in .28s cubic-bezier(.2, .8, .2, 1) both;
}

[data-meriad-custom-dialog-shell].modal.show.is-from-origin .modal-content {
	animation: fs-dialog-origin-in .34s cubic-bezier(.2, .8, .2, 1) both;
}

[data-meriad-custom-dialog-shell].modal.is-closing .modal-content {
	animation: fs-dialog-out .18s ease forwards;
}

[data-meriad-custom-dialog-shell].modal.is-closing.is-from-origin .modal-content {
	animation: fs-dialog-origin-out .22s ease forwards;
}

[data-meriad-custom-dialog-shell].modal.is-nudged .modal-content {
	animation: fs-dialog-shake .32s ease both;
}

/* Keyed on body.modal-open, which Bootstrap sets before it creates the backdrop: keyed on the shell's own .show (set a
	transition later) the backdrop first painted Bootstrap's black and then jumped to the veil and the blur — a flicker. */
body.modal-open:has([data-meriad-custom-dialog-shell]) > .modal-backdrop,
body:has([data-meriad-custom-dialog-shell].is-closing) > .modal-backdrop {
	--bs-backdrop-opacity: 1;
	--theme-backdrop-opacity: 1;
	background: var(--fs-dialog-veil);
	-webkit-backdrop-filter: blur(var(--fs-dialog-veil-blur, 5px));
	backdrop-filter: blur(var(--fs-dialog-veil-blur, 5px));
	transition: opacity .22s linear;
}

/* === Bodies of types 5–10: the building blocks the converted bodies and the style guide share === */

/* Section title inside a long form; every section carries data-meriad-custom-dialog-section for the scroll menu. */
.fs-dialog-section-title {
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--fs-dialog-border);
	color: var(--fs-dialog-heading);
	font-size: 14px;
	font-weight: 800;
}

[data-meriad-custom-dialog-section] + [data-meriad-custom-dialog-section] {
	margin-top: 22px;
}

/* Scroll menu (mockup 07): the layer wraps the body in two columns, the menu sticks while the form scrolls. */
[data-meriad-custom-dialog-shell] .modal-body.fs-dialog-shell__body--sections {
	display: flex;
	align-items: stretch;
	padding: 0;
}

.fs-dialog-sections {
	flex: none;
	width: 170px;
	border-right: 1px solid var(--fs-dialog-border);
	background: var(--fs-dialog-bg-raised);
}

.fs-dialog-sections__list {
	position: sticky;
	top: 0;
	display: grid;
	gap: 2px;
	padding: 14px 10px;
}

.fs-dialog-sections__item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--fs-dialog-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.fs-dialog-sections__item:hover {
	color: var(--fs-dialog-heading);
}

.fs-dialog-sections__item:focus-visible {
	outline: 2px solid var(--fs-dialog-primary);
	outline-offset: -2px;
}

.fs-dialog-sections__item.is-active {
	background: var(--fs-dialog-primary-subtle);
	color: var(--fs-dialog-primary-text);
}

.fs-dialog-sections__item[hidden] {
	display: none;
}

.fs-dialog-sections__item svg {
	flex: none;
	width: 15px;
	height: 15px;
}

.fs-dialog-sections__item span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fs-dialog-sections__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fs-dialog-danger);
}

.fs-dialog-sections__item:not(.is-invalid) .fs-dialog-sections__dot {
	display: none;
}

.fs-dialog-shell__sections-content {
	flex: 1;
	min-width: 0;
	padding: 18px 20px;
}

/* Segmented switch (Persoon / Zakelijk in the header actions). */
.fs-dialog-seg {
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--fs-dialog-border);
	border-radius: 12px;
	background: var(--fs-dialog-bg-sunken);
}

.fs-dialog-seg--fill {
	display: flex;
}

.fs-dialog-seg__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 14px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--fs-dialog-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.fs-dialog-seg--fill .fs-dialog-seg__option {
	flex: 1;
}

.fs-dialog-seg__option:hover {
	color: var(--fs-dialog-heading);
}

.fs-dialog-seg__option:focus-visible {
	outline: 2px solid var(--fs-dialog-primary);
	outline-offset: 2px;
}

.fs-dialog-seg__option.is-on {
	background: var(--fs-dialog-primary);
	color: var(--fs-dialog-on-primary);
}

/* Header actions of a view: small controls next to the close button. */
.fs-dialog-shell__header-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 11px;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 700;
}

.fs-dialog-shell__header-actions .dropdown-menu {
	font-size: 13px;
}

/* Tile variants: an initials avatar in the header tile, icon fonts of the client inside a tile. */
.fs-dialog-tile--avatar {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
}

.fs-dialog-tile i {
	font-size: 21px;
	line-height: 1;
}

.fs-dialog-tile--sm i {
	font-size: 17px;
}

/* Amber note (the duplicate notice of the customer form). */
.fs-dialog-note--warning {
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--fs-dialog-warning-subtle);
	color: var(--fs-dialog-text);
}

.fs-dialog-note--warning svg,
.fs-dialog-note--warning i {
	color: var(--fs-dialog-warning);
}

.fs-dialog-note--warning b {
	color: var(--fs-dialog-heading);
}

.fs-dialog-note--warning a {
	color: var(--fs-dialog-heading);
	font-weight: 700;
	text-decoration: underline;
}

/* Key figures row of a view (mockup 08). */
.fs-dialog-kv {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.fs-dialog-kv > div {
	min-width: 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--fs-dialog-bg-raised);
}

.fs-dialog-kv b {
	display: block;
	overflow: hidden;
	color: var(--fs-dialog-heading);
	font-size: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Timeline of a view (mockup 08): one small tile per action kind, the rows rise in one after the other. */
.fs-dialog-timeline {
	display: grid;
}

.fs-dialog-timeline__item {
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 12px;
	animation: fs-dialog-rise .3s ease both;
}

.fs-dialog-timeline__item:nth-child(1) { animation-delay: .1s; }
.fs-dialog-timeline__item:nth-child(2) { animation-delay: .16s; }
.fs-dialog-timeline__item:nth-child(3) { animation-delay: .22s; }
.fs-dialog-timeline__item:nth-child(4) { animation-delay: .28s; }
.fs-dialog-timeline__item:nth-child(5) { animation-delay: .34s; }
.fs-dialog-timeline__item:nth-child(n+6) { animation-delay: .4s; }

.fs-dialog-timeline__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fs-dialog-timeline__line {
	flex: 1;
	width: 2px;
	margin: 3px 0;
	background: var(--fs-dialog-border);
}

.fs-dialog-timeline__item:last-child .fs-dialog-timeline__line {
	display: none;
}

.fs-dialog-timeline__body {
	min-width: 0;
	padding-bottom: 16px;
}

.fs-dialog-timeline__item:last-child .fs-dialog-timeline__body {
	padding-bottom: 0;
}

.fs-dialog-timeline__body > b {
	display: block;
	color: var(--fs-dialog-heading);
}

.fs-dialog-timeline__body p {
	margin: 2px 0 0;
}

/* Empty state of a view or a selection (mockup 08): the header's icon as a large neutral tile, one bold line, one sentence. */
.fs-dialog-empty {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 26px 10px;
	text-align: center;
}

.fs-dialog-empty .fs-dialog-tile {
	width: 56px;
	height: 56px;
	border-radius: 18px;
}

.fs-dialog-empty .fs-dialog-tile svg {
	width: 26px;
	height: 26px;
}

.fs-dialog-empty .fs-dialog-tile i {
	font-size: 26px;
}

.fs-dialog-empty b {
	color: var(--fs-dialog-heading);
	font-size: 15px;
}

.fs-dialog-empty .fs-dialog__hint {
	max-width: 300px;
}

/* Steps of a task (mockup 10): numbered dots on a rail; a finished step turns its dot green and fills the line below it. */
.fs-dialog-steps {
	display: grid;
}

.fs-dialog-step {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 14px;
}

.fs-dialog-step__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fs-dialog-step__dot {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--fs-dialog-neutral-subtle);
	color: var(--fs-dialog-muted);
	font-size: 13px;
	font-weight: 800;
}

.fs-dialog-step__dot svg {
	display: none;
	width: 14px;
	height: 14px;
}

.fs-dialog-step.is-done .fs-dialog-step__dot {
	background: var(--fs-dialog-success);
	color: var(--fs-dialog-on-primary);
}

.fs-dialog-step.is-done .fs-dialog-step__dot span {
	display: none;
}

.fs-dialog-step.is-done .fs-dialog-step__dot svg {
	display: block;
}

.fs-dialog-step.is-now .fs-dialog-step__dot {
	background: var(--fs-dialog-primary);
	color: var(--fs-dialog-on-primary);
	box-shadow: 0 0 0 4px var(--fs-dialog-primary-subtle);
}

.fs-dialog-step__line {
	position: relative;
	flex: 1;
	width: 2px;
	margin: 4px 0;
	overflow: hidden;
	background: var(--fs-dialog-border);
}

.fs-dialog-step:last-child .fs-dialog-step__line {
	display: none;
}

.fs-dialog-step.is-done .fs-dialog-step__line::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--fs-dialog-success);
	transform-origin: top;
	animation: fs-dialog-rail-fill .7s .3s ease both;
}

.fs-dialog-step__content {
	display: grid;
	gap: 10px;
	min-width: 0;
	padding-bottom: 22px;
}

.fs-dialog-step:last-child .fs-dialog-step__content {
	padding-bottom: 0;
}

.fs-dialog-step__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--fs-dialog-heading);
	font-size: 15px;
	font-weight: 800;
	line-height: 28px;
}

.fs-dialog-step.is-done .fs-dialog-step__title {
	color: var(--fs-dialog-muted);
}

.fs-dialog-step__title b {
	color: var(--fs-dialog-heading);
}

/* The order document inside a task step (mockup 10): toolbar on top, groups of lines, the address underneath. */
.fs-dialog-order {
	overflow: hidden;
	border: 1px solid var(--fs-dialog-border);
	border-radius: 12px;
	background: var(--fs-dialog-bg-sunken);
}

.fs-dialog-order__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--fs-dialog-border);
	background: var(--fs-dialog-bg-raised);
}

.fs-dialog-order__body {
	display: grid;
	gap: 12px;
	padding: 14px 16px;
}

.fs-dialog-order__group {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fs-dialog-heading);
	font-weight: 700;
}

.fs-dialog-order__line {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border: 1px solid var(--fs-dialog-border);
	border-radius: 10px;
	background: var(--fs-dialog-bg);
}

.fs-dialog-order__line > b {
	color: var(--fs-dialog-heading);
}

.fs-dialog-order__line > span {
	min-width: 0;
	color: var(--fs-dialog-heading);
	font-weight: 600;
}

.fs-dialog-order__address {
	color: var(--fs-dialog-muted);
	font-size: 13px;
}

/* Selection table (mockup 09): a ticked row is tinted, an unticked one muted; the layer keeps the row class in step with its checkbox. */
.fs-dialog-pick {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.fs-dialog-pick th {
	padding: 0 10px 8px;
	border: 0;
	color: var(--fs-dialog-muted);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
}

.fs-dialog-pick td {
	padding: 10px;
	border: 0;
	border-top: 1px solid var(--fs-dialog-border);
	background: transparent;
	color: var(--fs-dialog-heading);
	font-weight: 600;
	vertical-align: middle;
}

.fs-dialog-pick tr.is-off td {
	color: var(--fs-dialog-muted);
	font-weight: 400;
}

.fs-dialog-pick tr.is-on td {
	background: var(--fs-dialog-primary-subtle);
}

.fs-dialog-pick tr.is-on td:first-child {
	border-radius: 10px 0 0 10px;
}

.fs-dialog-pick tr.is-on td:last-child {
	border-radius: 0 10px 10px 0;
}

.fs-dialog-pick__amount {
	text-align: right;
	white-space: nowrap;
}

/* Quantity stepper "− n +" of a selection row; the layer drives the buttons. */
.fs-dialog-stepper {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px;
	border: 1px solid var(--fs-dialog-border);
	border-radius: 9px;
	background: var(--fs-dialog-bg-sunken);
	vertical-align: middle;
}

.fs-dialog-stepper button {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--fs-dialog-bg-raised);
	color: var(--fs-dialog-muted);
	font: inherit;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.fs-dialog-stepper button:hover {
	color: var(--fs-dialog-heading);
}

.fs-dialog-stepper button:disabled {
	opacity: .45;
	cursor: default;
}

.fs-dialog-stepper input {
	width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fs-dialog-heading);
	font: inherit;
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
}

.fs-dialog-stepper input::-webkit-outer-spin-button,
.fs-dialog-stepper input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.fs-dialog-stepper input:focus {
	outline: none;
}

.fs-dialog-stepper:focus-within {
	border-color: var(--fs-dialog-primary);
	box-shadow: 0 0 0 3px var(--fs-dialog-primary-subtle);
}

/* Method tiles (mockup 06): a radio group as tiles, the checked one in the primary tint. */
.fs-dialog-methods {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.fs-dialog-methods--3 {
	grid-template-columns: repeat(3, 1fr);
}

.fs-dialog-method {
	display: grid;
	justify-items: center;
	gap: 6px;
	margin: 0;
	padding: 12px 6px;
	border: 1px solid var(--fs-dialog-border);
	border-radius: 12px;
	background: var(--fs-dialog-bg-sunken);
	color: var(--fs-dialog-text);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.fs-dialog-method i,
.fs-dialog-method svg {
	width: 20px;
	height: 20px;
	color: var(--fs-dialog-muted);
	font-size: 20px;
	line-height: 1;
}

.fs-dialog-method:hover {
	border-color: var(--fs-dialog-primary);
}

.btn-check:checked + .fs-dialog-method {
	border-color: var(--fs-dialog-primary);
	background: var(--fs-dialog-primary-subtle);
	color: var(--fs-dialog-primary-text);
}

.btn-check:checked + .fs-dialog-method i,
.btn-check:checked + .fs-dialog-method svg {
	color: var(--fs-dialog-primary-text);
}

.btn-check:focus-visible + .fs-dialog-method {
	outline: 2px solid var(--fs-dialog-primary);
	outline-offset: 2px;
}

/* The large amount field (mockup 06): the currency sign, the input and an optional chip on one line. */
.fs-dialog-amount {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--fs-dialog-border);
	border-radius: 12px;
	background: var(--fs-dialog-bg-sunken);
	color: var(--fs-dialog-heading);
	font-size: 26px;
	font-weight: 800;
}

.fs-dialog-amount:focus-within {
	border-color: var(--fs-dialog-primary);
	box-shadow: 0 0 0 3px var(--fs-dialog-primary-subtle);
}

.fs-dialog-amount small {
	color: var(--fs-dialog-muted);
	font-size: 15px;
}

.fs-dialog-amount input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	outline: none;
	-moz-appearance: textfield;
}

.fs-dialog-amount input::-webkit-outer-spin-button,
.fs-dialog-amount input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.fs-dialog-amount .fs-dialog-chip {
	align-self: center;
	font-size: 12px;
}

/* Segmented filling bar of a task in parts (mockup 13): one part per step, done parts full, the current one half. */
.fs-dialog-segbar {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 6px;
}

.fs-dialog-segbar__part {
	display: grid;
	gap: 5px;
	min-width: 0;
	overflow: hidden;
	color: var(--fs-dialog-muted);
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fs-dialog-segbar__part i {
	position: relative;
	display: block;
	height: 4px;
	overflow: hidden;
	border-radius: 4px;
	background: var(--fs-dialog-neutral-subtle);
}

.fs-dialog-segbar__part.is-done i::after,
.fs-dialog-segbar__part.is-now i::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--fs-dialog-bar, var(--fs-dialog-primary));
	transform-origin: left;
}

.fs-dialog-segbar__part.is-done i::after {
	animation: fs-dialog-seg-fill .45s .35s ease both;
}

.fs-dialog-segbar__part.is-now i::after {
	animation: fs-dialog-seg-half .6s .8s ease both;
}

.fs-dialog-segbar__part.is-done,
.fs-dialog-segbar__part.is-now {
	color: var(--fs-dialog-primary-text);
}

/* Filling progress bar of a workspace (mockup 11): on the header's lower edge, grows per answered question. */
.fs-dialog-shell__progress {
	flex: none;
	height: 4px;
	overflow: hidden;
	background: var(--fs-dialog-neutral-subtle);
}

.fs-dialog-shell__progress[hidden] {
	display: none;
}

.fs-dialog-shell__progress i {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0 4px 4px 0;
	background: var(--fs-dialog-bar, var(--fs-dialog-primary));
	transform-origin: left;
	transform: scaleX(var(--fs-dialog-progress, 0));
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

/* === Phase E: errors in the window, the unsaved guard, the second window, hold, bulk progress, row glow === */

[data-meriad-custom-dialog-shell] [hidden],
.fs-dialog-toast-host [hidden],
.fs-dialog [hidden] {
	display: none !important;
}

.fs-dialog-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* A changed field carries the success border while the window is dirty; the header counts the changes. */
[data-meriad-custom-dialog-shell] .fs-dialog-changed:not(.is-invalid),
[data-meriad-custom-dialog-shell] .fs-dialog-changed:not(.is-invalid) + .select2 .select2-selection {
	border-color: var(--fs-dialog-success);
}

.fs-dialog-dirty {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	color: var(--fs-dialog-warning-text);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

.fs-dialog-dirty::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fs-dialog-warning);
}

.fs-dialog-dirty[hidden] {
	display: none;
}


/* The second window: the shell's anatomy inside a layer <dialog>; its backdrop is transparent over a shell, the veil over a page. */
dialog.fs-dialog--over {
	--fs-dialog-width: 500px;
}

dialog.fs-dialog--over-shell::backdrop {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	animation: none;
}

dialog.fs-dialog--over .fs-dialog__panel {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 32px);
}

dialog.fs-dialog--over .modal-body {
	min-height: 0;
	overflow-y: auto;
}

dialog.fs-dialog--over .modal-body.fs-dialog-skeleton {
	overflow: hidden;
}

.fs-dialog-back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 2px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fs-dialog-primary-text);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

.fs-dialog-back svg {
	width: 14px;
	height: 14px;
}

.fs-dialog-back:hover {
	text-decoration: underline;
}

.fs-dialog-back:focus-visible {
	outline: 2px solid var(--fs-dialog-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.fs-dialog-back:disabled {
	opacity: .5;
	cursor: default;
}

/* Hold to confirm (mockup 04): the primary fills left to right over 1.2 s while held and releases back in 250 ms. */
.fs-dialog-btn--hold {
	position: relative;
	overflow: hidden;
	background: var(--fs-dialog-danger-subtle);
	color: var(--fs-dialog-danger-text);
	box-shadow: none;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.fs-dialog-btn--hold:hover {
	background: var(--fs-dialog-danger-subtle);
}

.fs-dialog-hold__fill {
	position: absolute;
	inset: 0;
	background: var(--fs-dialog-danger);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.fs-dialog-btn--hold .fs-dialog-btn__label {
	position: relative;
	z-index: 1;
	transition: color .25s ease;
}

.fs-dialog-btn--hold.is-holding .fs-dialog-hold__fill {
	transform: scaleX(1);
	transition: transform 1.2s linear;
}

.fs-dialog-btn--hold.is-holding .fs-dialog-btn__label {
	color: var(--fs-dialog-on-primary);
	transition: color .9s ease;
}

.fs-dialog-btn--hold.is-held {
	background: var(--fs-dialog-danger);
	color: var(--fs-dialog-on-primary);
}

.fs-dialog-btn--hold.is-held .fs-dialog-hold__fill {
	display: none;
}

/* Bulk with real progress (mockup 10): ask → run (the filling meter, "n van N") → the result with the skipped items. */
.fs-dialog-bulk .fs-dialog__body {
	gap: 12px;
}

.fs-dialog-bulk .fs-dialog__foot[hidden],
.fs-dialog-bulk [data-meriad-custom-dialog-bulk-panel][hidden] {
	display: none;
}

.fs-dialog-meter-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 13px;
}

.fs-dialog-meter-row b {
	color: var(--fs-dialog-heading);
	font-variant-numeric: tabular-nums;
}

.fs-dialog-meter {
	height: 8px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--fs-dialog-neutral-subtle);
}

.fs-dialog-meter i {
	display: block;
	height: 100%;
	border-radius: 8px;
	background: var(--fs-dialog-bar, var(--fs-dialog-primary));
	transform-origin: left;
	transform: scaleX(var(--fs-dialog-progress, 0));
	transition: transform .12s linear;
}

.fs-dialog-skipped {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fs-dialog-skipped li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--fs-dialog-bg-sunken);
	font-size: 13px;
}

.fs-dialog-skipped li > div {
	min-width: 0;
}

.fs-dialog-skipped b {
	display: block;
	color: var(--fs-dialog-heading);
}

.fs-dialog-skipped b .fs-dialog__hint {
	display: inline;
	font-weight: 400;
}

/* Row glow (§6.7): a row a closed window added or changed fades from the success tint. */
tr.fs-dialog-row-glow > td {
	animation: fs-dialog-row-glow 1.8s ease both;
}

/* === §8 Phone width (mockup 13): every window is a sheet from the bottom, a confirmation an action sheet, the toast under the topbar === */

/* The grab handle (the layer inserts it as the first child of every panel) exists only on a phone. */
.fs-dialog-grab {
	display: none;
	flex: none;
	padding: 10px 0 6px;
	cursor: grab;
	touch-action: none;
}

.fs-dialog-grab i {
	display: block;
	width: 38px;
	height: 4px;
	margin: 0 auto;
	border-radius: 4px;
	background: var(--fs-dialog-border);
}

/* While the finger holds the handle the sheet follows it (the layer switches the entrance animation off inline, it would override the transform); it settles back in 250 ms. */
.fs-dialog__panel.is-dragging,
[data-meriad-custom-dialog-shell] .modal-content.is-dragging {
	transition: none;
}

.fs-dialog__panel.is-settling,
[data-meriad-custom-dialog-shell] .modal-content.is-settling {
	transition: transform .25s ease;
}

/* The steps of a task mirrored as a segmented bar; the rail stays the desktop form. */
.fs-dialog-segbar--steps {
	display: none;
	margin-bottom: 18px;
}

@media (max-width: 575.98px) {
	.fs-dialog-grab {
		display: block;
	}

	/* Shell modal → sheet: bottom-aligned, full width, top radius 22 px, at most 92 dvh, the body scrolls, the footer stays. */
	[data-meriad-custom-dialog-shell].modal {
		--bs-modal-margin: 0;
		--theme-modal-margin: 0;
	}

	[data-meriad-custom-dialog-shell] .modal-dialog,
	[data-meriad-custom-dialog-shell] .modal-dialog.modal-dialog-centered,
	[data-meriad-custom-dialog-shell] .modal-dialog.modal-dialog-scrollable {
		--bs-modal-width: 100%;
		--theme-modal-width: 100%;
		display: flex;
		align-items: flex-end;
		width: 100%;
		max-width: none;
		height: 100%;
		min-height: 100%;
		margin: 0;
	}

	/* min-width 0: a flex item keeps its min-content width otherwise, and a wide body would push the sheet past the screen edge. */
	[data-meriad-custom-dialog-shell] .modal-content {
		width: 100%;
		min-width: 0;
		max-width: 100%;
		max-height: 92dvh;
		border-bottom: 0;
		border-radius: 22px 22px 0 0;
	}

	[data-meriad-custom-dialog-shell].modal.show .modal-content,
	[data-meriad-custom-dialog-shell].modal.show.is-from-origin .modal-content {
		animation: fs-dialog-sheet-up .38s cubic-bezier(.2, .8, .2, 1) both;
	}

	[data-meriad-custom-dialog-shell].modal.is-closing .modal-content,
	[data-meriad-custom-dialog-shell].modal.is-closing.is-from-origin .modal-content {
		animation: fs-dialog-sheet-down .2s ease forwards;
	}

	[data-meriad-custom-dialog-shell].modal.is-under .modal-dialog {
		transform: scale(.96) translateY(-10px);
	}

	[data-meriad-custom-dialog-shell] .modal-header {
		padding: 4px 16px 12px;
	}

	[data-meriad-custom-dialog-shell] .modal-body {
		padding: 14px 16px;
	}

	[data-meriad-custom-dialog-shell] .fs-dialog-strip {
		margin: 12px 16px 0;
	}

	/* The footer sits above the home indicator; the primary grows, the info line takes its own row above the buttons. */
	[data-meriad-custom-dialog-shell] .modal-footer {
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.fs-dialog-shell__footer-row {
		flex-wrap: wrap;
	}

	.fs-dialog-shell__footer-row .fs-dialog-shell__footer-info {
		flex-basis: 100%;
		order: -1;
	}

	.fs-dialog-shell__footer-row .fs-dialog-shell__footer-info:empty {
		display: none;
	}

	.fs-dialog-shell__footer-right {
		flex: 1;
		margin-left: 0;
	}

	.fs-dialog-shell__footer-right > .btn-primary,
	.fs-dialog-shell__footer-right > .btn-danger,
	.fs-dialog-shell__footer-primary,
	.fs-dialog-shell__footer-primary > .btn {
		flex: 1;
	}


	[data-meriad-custom-dialog-shell] .modal-footer .btn {
		height: var(--fs-dialog-button-height-touch, 46px);
	}

	/* The scroll menu of a long form is hidden; the sections keep their headings. */
	.fs-dialog-sections {
		display: none;
	}

	[data-meriad-custom-dialog-shell] .modal-body.fs-dialog-shell__body--sections {
		display: block;
	}

	.fs-dialog-shell__sections-content {
		padding: 14px 16px;
	}

	/* The task stepper becomes the segmented filling bar: the mirror shows, the rail and its dots go. */
	.fs-dialog-segbar--steps {
		display: grid;
	}

	.fs-dialog-step {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.fs-dialog-step__rail {
		display: none;
	}

	.fs-dialog-step__title {
		line-height: 1.3;
	}

	/* Layer windows → sheets too: the message, the confirm, the choice, the bulk run and the second window. */
	dialog.fs-dialog {
		inset: auto 0 0 0;
		width: 100%;
		max-width: none;
		max-height: 92dvh;
		margin: 0;
	}

	.fs-dialog__panel {
		display: flex;
		flex-direction: column;
		max-height: 92dvh;
		border-bottom: 0;
		border-radius: 22px 22px 0 0;
		animation: fs-dialog-sheet-up .38s cubic-bezier(.2, .8, .2, 1) both;
	}

	dialog.fs-dialog--shake .fs-dialog__panel {
		animation: fs-dialog-sheet-up .38s cubic-bezier(.2, .8, .2, 1) both, fs-dialog-shake .32s .38s ease both;
	}

	dialog.fs-dialog--from-origin .fs-dialog__panel {
		animation: fs-dialog-sheet-up .38s cubic-bezier(.2, .8, .2, 1) both;
	}

	dialog.fs-dialog.is-closing .fs-dialog__panel,
	dialog.fs-dialog--from-origin.is-closing .fs-dialog__panel {
		animation: fs-dialog-sheet-down .2s ease forwards;
	}

	dialog.fs-dialog--over .fs-dialog__panel {
		max-height: 92dvh;
	}

	.fs-dialog-confirm,
	.fs-dialog-choice,
	.fs-dialog-bulk,
	.fs-dialog-message {
		display: flex;
		flex-direction: column;
		min-height: 0;
	}

	.fs-dialog__head {
		padding: 4px 16px 12px;
	}

	.fs-dialog__body {
		display: grid;
		min-height: 0;
		padding: 14px 16px;
		overflow-y: auto;
	}

	.fs-dialog-message {
		gap: 12px;
		padding: 4px 16px 18px;
	}

	/* Action sheet (mockup 13): buttons stacked full width, 46 px, the primary on top and the cancel as a text button below it. */
	.fs-dialog__foot {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 8px;
		padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px));
		border-top: 0;
		background: transparent;
	}

	.fs-dialog__foot .fs-dialog__grow {
		display: none;
	}

	.fs-dialog__foot .fs-dialog-btn,
	.fs-dialog-message__actions .fs-dialog-btn {
		width: 100%;
		height: var(--fs-dialog-button-height-touch, 46px);
	}

	.fs-dialog-message__actions {
		flex-direction: column;
	}

	.fs-dialog__body--choices {
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}

	.fs-dialog-choice__cancel .fs-dialog-btn {
		width: 100%;
		height: var(--fs-dialog-button-height-touch, 46px);
	}

	/* The toast under the topbar, full width minus 10 px gutters. */
	.fs-dialog-toast-host {
		width: calc(100% - 20px);
	}

	/* Touch targets of at least 44 px. */
	.fs-dialog-toast .fs-dialog-btn--sm {
		height: 44px;
	}

	.fs-dialog-close {
		width: 44px;
		height: 44px;
	}

	.fs-dialog-back {
		min-height: 44px;
	}

	.fs-dialog-shell__header-actions .btn {
		min-height: 44px;
	}

	.fs-dialog-seg__option {
		min-height: 44px;
	}

	.fs-dialog-stepper button {
		width: 44px;
		height: 44px;
	}

	.fs-dialog-choice-card {
		min-height: 60px;
	}

	.fs-dialog-methods {
		grid-template-columns: repeat(3, 1fr);
	}

	.fs-dialog-kv {
		grid-template-columns: 1fr;
	}
}

/* === Motion === */

@keyframes fs-dialog-veil-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fs-dialog-veil-out {
	to { opacity: 0; }
}

@keyframes fs-dialog-in {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to { opacity: 1; transform: none; }
}

@keyframes fs-dialog-out {
	to { opacity: 0; transform: translateY(8px) scale(.98); }
}

@keyframes fs-dialog-origin-in {
	from { opacity: 0; transform: scale(.25); }
	to { opacity: 1; transform: none; }
}

@keyframes fs-dialog-origin-out {
	to { opacity: 0; transform: scale(.25); }
}

@keyframes fs-dialog-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	50% { transform: translateX(5px); }
	75% { transform: translateX(-3px); }
}

@keyframes fs-dialog-rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@keyframes fs-dialog-toast-in {
	from { opacity: 0; transform: translateY(-18px) scale(.97); }
	to { opacity: 1; transform: none; }
}

@keyframes fs-dialog-toast-out {
	to { opacity: 0; transform: translateY(-14px) scale(.97); }
}

@keyframes fs-dialog-bump {
	0%, 100% { transform: none; }
	40% { transform: scale(1.025); }
}

@keyframes fs-dialog-drain {
	from { transform: scaleX(var(--fs-dialog-drain-from, 1)); }
	to { transform: scaleX(0); }
}

@keyframes fs-dialog-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes fs-dialog-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fs-dialog-fade-out {
	to { opacity: 0; }
}

@keyframes fs-dialog-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

@keyframes fs-dialog-rail-fill {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes fs-dialog-seg-fill {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes fs-dialog-seg-half {
	from { transform: scaleX(0); }
	to { transform: scaleX(.5); }
}

@keyframes fs-dialog-row-glow {
	from { background-color: var(--fs-dialog-success-subtle); }
	to { background-color: transparent; }
}

@keyframes fs-dialog-sheet-up {
	from { transform: translateY(100%); }
	to { transform: none; }
}

@keyframes fs-dialog-sheet-down {
	to { transform: translateY(100%); }
}

@keyframes fs-dialog-spin {
	to { transform: rotate(360deg); }
}

@keyframes fs-dialog-loader-run {
	0% { left: -40%; }
	100% { left: 102%; }
}

/* Reduced motion: fades only; the bars keep running because they carry meaning. */
@media (prefers-reduced-motion: reduce) {
	.fs-dialog__panel,
	dialog.fs-dialog--shake .fs-dialog__panel,
	dialog.fs-dialog--from-origin .fs-dialog__panel,
	.fs-dialog-toast,
	.fs-dialog-toast.is-bumping {
		animation: fs-dialog-fade-in .2s ease both;
	}

	dialog.fs-dialog.is-closing .fs-dialog__panel,
	dialog.fs-dialog--from-origin.is-closing .fs-dialog__panel,
	.fs-dialog-toast.is-leaving {
		animation: fs-dialog-fade-out .16s ease forwards;
	}

	dialog.fs-dialog::backdrop,
	dialog.fs-dialog.is-closing::backdrop {
		animation: none;
	}

	.fs-dialog-draw path {
		animation: none;
		stroke-dashoffset: 0;
	}

	dialog.fs-dialog--nudge .fs-dialog__panel {
		animation: none;
	}

	[data-meriad-custom-dialog-shell].modal.show .modal-content,
	[data-meriad-custom-dialog-shell].modal.show.is-from-origin .modal-content {
		animation: fs-dialog-fade-in .2s ease both;
	}

	[data-meriad-custom-dialog-shell].modal.is-closing .modal-content,
	[data-meriad-custom-dialog-shell].modal.is-closing.is-from-origin .modal-content {
		animation: fs-dialog-fade-out .16s ease forwards;
	}

	[data-meriad-custom-dialog-shell].modal.is-nudged .modal-content,
	body.modal-open:has([data-meriad-custom-dialog-shell]) > .modal-backdrop {
		animation: none;
		transition: none;
	}

	.fs-dialog-choice-card,
	.fs-dialog-effects li,
	.fs-dialog-strip,
	.fs-dialog-timeline__item {
		animation: fs-dialog-fade-in .2s ease both;
	}

	.fs-dialog-step.is-done .fs-dialog-step__line::after,
	.fs-dialog-segbar__part.is-done i::after,
	.fs-dialog-segbar__part.is-now i::after {
		animation: none;
	}

	.fs-dialog-segbar__part.is-now i::after {
		transform: scaleX(.5);
	}

	.fs-dialog-shell__progress i {
		transition: none;
	}

	[data-meriad-custom-dialog-shell].modal .modal-dialog,
	[data-meriad-custom-dialog-shell].modal.is-under .modal-dialog {
		transition: none;
	}

	tr.fs-dialog-row-glow > td {
		animation: none;
		background-color: var(--fs-dialog-success-subtle);
		transition: background-color 1.8s ease;
	}

	/* A sheet fades too instead of sliding. */
	@media (max-width: 575.98px) {
		.fs-dialog__panel,
		dialog.fs-dialog--shake .fs-dialog__panel,
		dialog.fs-dialog--from-origin .fs-dialog__panel,
		[data-meriad-custom-dialog-shell].modal.show .modal-content,
		[data-meriad-custom-dialog-shell].modal.show.is-from-origin .modal-content {
			animation: fs-dialog-fade-in .2s ease both;
		}

		dialog.fs-dialog.is-closing .fs-dialog__panel,
		dialog.fs-dialog--from-origin.is-closing .fs-dialog__panel,
		[data-meriad-custom-dialog-shell].modal.is-closing .modal-content,
		[data-meriad-custom-dialog-shell].modal.is-closing.is-from-origin .modal-content {
			animation: fs-dialog-fade-out .16s ease forwards;
		}

		.fs-dialog__panel.is-settling,
		[data-meriad-custom-dialog-shell] .modal-content.is-settling {
			transition: none;
		}
	}
}