*, ::before, ::after {
		--tw-border-spacing-x: 0;
		--tw-border-spacing-y: 0;
		--tw-translate-x: 0;
		--tw-translate-y: 0;
		--tw-rotate: 0;
		--tw-skew-x: 0;
		--tw-skew-y: 0;
		--tw-scale-x: 1;
		--tw-scale-y: 1;
		--tw-pan-x:  ;
		--tw-pan-y:  ;
		--tw-pinch-zoom:  ;
		--tw-scroll-snap-strictness: proximity;
		--tw-gradient-from-position:  ;
		--tw-gradient-via-position:  ;
		--tw-gradient-to-position:  ;
		--tw-ordinal:  ;
		--tw-slashed-zero:  ;
		--tw-numeric-figure:  ;
		--tw-numeric-spacing:  ;
		--tw-numeric-fraction:  ;
		--tw-ring-inset:  ;
		--tw-ring-offset-width: 0px;
		--tw-ring-offset-color: #fff;
		--tw-ring-color: rgb(59 130 246 / 0.5);
		--tw-ring-offset-shadow: 0 0 #0000;
		--tw-ring-shadow: 0 0 #0000;
		--tw-shadow: 0 0 #0000;
		--tw-shadow-colored: 0 0 #0000;
		--tw-blur:  ;
		--tw-brightness:  ;
		--tw-contrast:  ;
		--tw-grayscale:  ;
		--tw-hue-rotate:  ;
		--tw-invert:  ;
		--tw-saturate:  ;
		--tw-sepia:  ;
		--tw-drop-shadow:  ;
		--tw-backdrop-blur:  ;
		--tw-backdrop-brightness:  ;
		--tw-backdrop-contrast:  ;
		--tw-backdrop-grayscale:  ;
		--tw-backdrop-hue-rotate:  ;
		--tw-backdrop-invert:  ;
		--tw-backdrop-opacity:  ;
		--tw-backdrop-saturate:  ;
		--tw-backdrop-sepia:  ;
		--tw-contain-size:  ;
		--tw-contain-layout:  ;
		--tw-contain-paint:  ;
		--tw-contain-style:  ;
}
::backdrop {
		--tw-border-spacing-x: 0;
		--tw-border-spacing-y: 0;
		--tw-translate-x: 0;
		--tw-translate-y: 0;
		--tw-rotate: 0;
		--tw-skew-x: 0;
		--tw-skew-y: 0;
		--tw-scale-x: 1;
		--tw-scale-y: 1;
		--tw-pan-x:  ;
		--tw-pan-y:  ;
		--tw-pinch-zoom:  ;
		--tw-scroll-snap-strictness: proximity;
		--tw-gradient-from-position:  ;
		--tw-gradient-via-position:  ;
		--tw-gradient-to-position:  ;
		--tw-ordinal:  ;
		--tw-slashed-zero:  ;
		--tw-numeric-figure:  ;
		--tw-numeric-spacing:  ;
		--tw-numeric-fraction:  ;
		--tw-ring-inset:  ;
		--tw-ring-offset-width: 0px;
		--tw-ring-offset-color: #fff;
		--tw-ring-color: rgb(59 130 246 / 0.5);
		--tw-ring-offset-shadow: 0 0 #0000;
		--tw-ring-shadow: 0 0 #0000;
		--tw-shadow: 0 0 #0000;
		--tw-shadow-colored: 0 0 #0000;
		--tw-blur:  ;
		--tw-brightness:  ;
		--tw-contrast:  ;
		--tw-grayscale:  ;
		--tw-hue-rotate:  ;
		--tw-invert:  ;
		--tw-saturate:  ;
		--tw-sepia:  ;
		--tw-drop-shadow:  ;
		--tw-backdrop-blur:  ;
		--tw-backdrop-brightness:  ;
		--tw-backdrop-contrast:  ;
		--tw-backdrop-grayscale:  ;
		--tw-backdrop-hue-rotate:  ;
		--tw-backdrop-invert:  ;
		--tw-backdrop-opacity:  ;
		--tw-backdrop-saturate:  ;
		--tw-backdrop-sepia:  ;
		--tw-contain-size:  ;
		--tw-contain-layout:  ;
		--tw-contain-paint:  ;
		--tw-contain-style:  ;
}
	:where(.sting-preflight) *,
	:where(.sting-preflight) ::before,
	:where(.sting-preflight) ::after {
		box-sizing: border-box;
		border-width: 0;
		border-style: solid;
		border-color: #e5e7eb;
	}

	:where(.sting-preflight) ::before,
	:where(.sting-preflight) ::after {
		--tw-content: '';
	}

	:where(.sting-preflight),
	:where(.sting-preflight) {
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
		-moz-tab-size: 4;
		tab-size: 4;
		font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-feature-settings: normal;
		font-variation-settings: normal;
		-webkit-tap-highlight-color: transparent;
	}

	:where(.sting-preflight) {
		margin: 0;
	}

	:where(.sting-preflight) hr {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}

	:where(.sting-preflight) abbr:where([title]) {
		text-decoration: underline dotted;
	}

	:where(.sting-preflight) h1,
	:where(.sting-preflight) h2,
	:where(.sting-preflight) h3,
	:where(.sting-preflight) h4,
	:where(.sting-preflight) h5,
	:where(.sting-preflight) h6 {
		font-size: inherit;
		font-weight: inherit;
	}

	:where(.sting-preflight) a {
		color: inherit;
		text-decoration: inherit;
	}

	:where(.sting-preflight) b,
	:where(.sting-preflight) strong {
		font-weight: bolder;
	}

	:where(.sting-preflight) code,
	:where(.sting-preflight) kbd,
	:where(.sting-preflight) samp,
	:where(.sting-preflight) pre {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		font-feature-settings: normal;
		font-variation-settings: normal;
		font-size: 1em;
	}

	:where(.sting-preflight) small {
		font-size: 80%;
	}

	:where(.sting-preflight) sub,
	:where(.sting-preflight) sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

	:where(.sting-preflight) sub {
		bottom: -0.25em;
	}

	:where(.sting-preflight) sup {
		top: -0.5em;
	}

	:where(.sting-preflight) table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}

	:where(.sting-preflight) button,
	:where(.sting-preflight) input,
	:where(.sting-preflight) optgroup,
	:where(.sting-preflight) select,
	:where(.sting-preflight) textarea {
		font-family: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		font-size: 100%;
		font-weight: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		color: inherit;
		margin: 0;
		padding: 0;
	}

	:where(.sting-preflight) button,
	:where(.sting-preflight) select {
		text-transform: none;
	}

	:where(.sting-preflight) button,
	:where(.sting-preflight) input:where([type='button']),
	:where(.sting-preflight) input:where([type='reset']),
	:where(.sting-preflight) input:where([type='submit']) {
		-webkit-appearance: button;
		background-color: transparent;
		background-image: none;
	}

	:where(.sting-preflight) :-moz-focusring {
		outline: auto;
	}

	:where(.sting-preflight) :-moz-ui-invalid {
		box-shadow: none;
	}

	:where(.sting-preflight) progress {
		vertical-align: baseline;
	}

	:where(.sting-preflight) ::-webkit-inner-spin-button,
	:where(.sting-preflight) ::-webkit-outer-spin-button {
		height: auto;
	}

	:where(.sting-preflight) [type='search'] {
		-webkit-appearance: textfield;
		outline-offset: -2px;
	}

	:where(.sting-preflight) ::-webkit-search-decoration {
		-webkit-appearance: none;
	}

	:where(.sting-preflight) ::-webkit-file-upload-button {
		-webkit-appearance: button;
		font: inherit;
	}

	:where(.sting-preflight) summary {
		display: list-item;
	}

	:where(.sting-preflight) blockquote,
	:where(.sting-preflight) dl,
	:where(.sting-preflight) dd,
	:where(.sting-preflight) h1,
	:where(.sting-preflight) h2,
	:where(.sting-preflight) h3,
	:where(.sting-preflight) h4,
	:where(.sting-preflight) h5,
	:where(.sting-preflight) h6,
	:where(.sting-preflight) hr,
	:where(.sting-preflight) figure,
	:where(.sting-preflight) p,
	:where(.sting-preflight) pre {
		margin: 0;
	}

	:where(.sting-preflight) fieldset {
		margin: 0;
		padding: 0;
	}

	:where(.sting-preflight) legend {
		padding: 0;
	}

	:where(.sting-preflight) ol,
	:where(.sting-preflight) ul,
	:where(.sting-preflight) menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	:where(.sting-preflight) dialog {
		padding: 0;
	}

	:where(.sting-preflight) textarea {
		resize: vertical;
	}

	:where(.sting-preflight) input::placeholder,
	:where(.sting-preflight) textarea::placeholder {
		opacity: 1;
		color: #9ca3af;
	}

	:where(.sting-preflight) button,
	:where(.sting-preflight) [role='button'] {
		cursor: pointer;
	}

	:where(.sting-preflight) :disabled {
		cursor: default;
	}

	:where(.sting-preflight) img,
	:where(.sting-preflight) svg,
	:where(.sting-preflight) video,
	:where(.sting-preflight) canvas,
	:where(.sting-preflight) audio,
	:where(.sting-preflight) iframe,
	:where(.sting-preflight) embed,
	:where(.sting-preflight) object {
		display: block;
		vertical-align: middle;
	}

	:where(.sting-preflight) img,
	:where(.sting-preflight) video {
		max-width: 100%;
		height: auto;
	}

	:where(.sting-preflight) [hidden]:where(:not([hidden='until-found'])) {
		display: none;
	}
.container {
		width: 100%;
}
@media (min-width: 640px) {
		.container {
				max-width: 640px;
		}
}
@media (min-width: 768px) {
		.container {
				max-width: 768px;
		}
}
@media (min-width: 1024px) {
		.container {
				max-width: 1024px;
		}
}
@media (min-width: 1280px) {
		.container {
				max-width: 1280px;
		}
}
@media (min-width: 1536px) {
		.container {
				max-width: 1536px;
		}
}
@media (min-width: 1640px) {
		.container {
				max-width: 1640px;
		}
}
.prose {
		color: var(--tw-prose-body);
		max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.25em;
		margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-lead);
		font-size: 1.25em;
		line-height: 1.6;
		margin-top: 1.2em;
		margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-links);
		text-decoration: underline;
		font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-bold);
		font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: decimal;
		margin-top: 1.25em;
		margin-bottom: 1.25em;
		padding-inline-start: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		list-style-type: disc;
		margin-top: 1.25em;
		margin-bottom: 1.25em;
		padding-inline-start: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
		font-weight: 400;
		color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
		color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-headings);
		font-weight: 600;
		margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		border-color: var(--tw-prose-hr);
		border-top-width: 1px;
		margin-top: 3em;
		margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-weight: 500;
		font-style: italic;
		color: var(--tw-prose-quotes);
		border-inline-start-width: 0.25rem;
		border-inline-start-color: var(--tw-prose-quote-borders);
		quotes: "\201C""\201D""\2018""\2019";
		margin-top: 1.6em;
		margin-bottom: 1.6em;
		padding-inline-start: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
		content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
		content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-headings);
		font-weight: 800;
		font-size: 2.25em;
		margin-top: 0;
		margin-bottom: 0.8888889em;
		line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-weight: 900;
		color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-headings);
		font-weight: 700;
		font-size: 1.5em;
		margin-top: 2em;
		margin-bottom: 1em;
		line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-weight: 800;
		color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-headings);
		font-weight: 600;
		font-size: 1.25em;
		margin-top: 1.6em;
		margin-bottom: 0.6em;
		line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-weight: 700;
		color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-headings);
		font-weight: 600;
		margin-top: 1.5em;
		margin-bottom: 0.5em;
		line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-weight: 700;
		color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 2em;
		margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		display: block;
		margin-top: 2em;
		margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 2em;
		margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-weight: 500;
		font-family: inherit;
		color: var(--tw-prose-kbd);
		box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
		font-size: 0.875em;
		border-radius: 0.3125rem;
		padding-top: 0.1875em;
		padding-inline-end: 0.375em;
		padding-bottom: 0.1875em;
		padding-inline-start: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-code);
		font-weight: 600;
		font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
		content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
		content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
		font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
		font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-pre-code);
		background-color: var(--tw-prose-pre-bg);
		overflow-x: auto;
		font-weight: 400;
		font-size: 0.875em;
		line-height: 1.7142857;
		margin-top: 1.7142857em;
		margin-bottom: 1.7142857em;
		border-radius: 0.375rem;
		padding-top: 0.8571429em;
		padding-inline-end: 1.1428571em;
		padding-bottom: 0.8571429em;
		padding-inline-start: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		background-color: transparent;
		border-width: 0;
		border-radius: 0;
		padding: 0;
		font-weight: inherit;
		color: inherit;
		font-size: inherit;
		font-family: inherit;
		line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
		content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
		content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		width: 100%;
		table-layout: auto;
		margin-top: 2em;
		margin-bottom: 2em;
		font-size: 0.875em;
		line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		border-bottom-width: 1px;
		border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-headings);
		font-weight: 600;
		vertical-align: bottom;
		padding-inline-end: 0.5714286em;
		padding-bottom: 0.5714286em;
		padding-inline-start: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		border-bottom-width: 1px;
		border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		border-top-width: 1px;
		border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		text-align: start;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
		margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		color: var(--tw-prose-captions);
		font-size: 0.875em;
		line-height: 1.4285714;
		margin-top: 0.8571429em;
}
.prose {
		--tw-prose-body: #374151;
		--tw-prose-headings: #111827;
		--tw-prose-lead: #4b5563;
		--tw-prose-links: #111827;
		--tw-prose-bold: #111827;
		--tw-prose-counters: #6b7280;
		--tw-prose-bullets: #d1d5db;
		--tw-prose-hr: #e5e7eb;
		--tw-prose-quotes: #111827;
		--tw-prose-quote-borders: #e5e7eb;
		--tw-prose-captions: #6b7280;
		--tw-prose-kbd: #111827;
		--tw-prose-kbd-shadows: 17 24 39;
		--tw-prose-code: #111827;
		--tw-prose-pre-code: #e5e7eb;
		--tw-prose-pre-bg: #1f2937;
		--tw-prose-th-borders: #d1d5db;
		--tw-prose-td-borders: #e5e7eb;
		--tw-prose-invert-body: #d1d5db;
		--tw-prose-invert-headings: #fff;
		--tw-prose-invert-lead: #9ca3af;
		--tw-prose-invert-links: #fff;
		--tw-prose-invert-bold: #fff;
		--tw-prose-invert-counters: #9ca3af;
		--tw-prose-invert-bullets: #4b5563;
		--tw-prose-invert-hr: #374151;
		--tw-prose-invert-quotes: #f3f4f6;
		--tw-prose-invert-quote-borders: #374151;
		--tw-prose-invert-captions: #9ca3af;
		--tw-prose-invert-kbd: #fff;
		--tw-prose-invert-kbd-shadows: 255 255 255;
		--tw-prose-invert-code: #fff;
		--tw-prose-invert-pre-code: #d1d5db;
		--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
		--tw-prose-invert-th-borders: #4b5563;
		--tw-prose-invert-td-borders: #374151;
		font-size: 1rem;
		line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
		margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-start: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-start: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0.75em;
		margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0.75em;
		margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.25em;
		margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0.5em;
		padding-inline-start: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-start: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-end: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-top: 0.5714286em;
		padding-inline-end: 0.5714286em;
		padding-bottom: 0.5714286em;
		padding-inline-start: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-start: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-end: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 2em;
		margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-bottom: 0;
}
.prose-sm {
		font-size: 0.875rem;
		line-height: 1.7142857;
}
.prose-sm :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.1428571em;
		margin-bottom: 1.1428571em;
}
.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 1.2857143em;
		line-height: 1.5555556;
		margin-top: 0.8888889em;
		margin-bottom: 0.8888889em;
}
.prose-sm :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.3333333em;
		margin-bottom: 1.3333333em;
		padding-inline-start: 1.1111111em;
}
.prose-sm :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 2.1428571em;
		margin-top: 0;
		margin-bottom: 0.8em;
		line-height: 1.2;
}
.prose-sm :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 1.4285714em;
		margin-top: 1.6em;
		margin-bottom: 0.8em;
		line-height: 1.4;
}
.prose-sm :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 1.2857143em;
		margin-top: 1.5555556em;
		margin-bottom: 0.4444444em;
		line-height: 1.5555556;
}
.prose-sm :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.4285714em;
		margin-bottom: 0.5714286em;
		line-height: 1.4285714;
}
.prose-sm :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.7142857em;
		margin-bottom: 1.7142857em;
}
.prose-sm :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.7142857em;
		margin-bottom: 1.7142857em;
}
.prose-sm :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
		margin-bottom: 0;
}
.prose-sm :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.7142857em;
		margin-bottom: 1.7142857em;
}
.prose-sm :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 0.8571429em;
		border-radius: 0.3125rem;
		padding-top: 0.1428571em;
		padding-inline-end: 0.3571429em;
		padding-bottom: 0.1428571em;
		padding-inline-start: 0.3571429em;
}
.prose-sm :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 0.8571429em;
}
.prose-sm :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 0.9em;
}
.prose-sm :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 0.8888889em;
}
.prose-sm :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 0.8571429em;
		line-height: 1.6666667;
		margin-top: 1.6666667em;
		margin-bottom: 1.6666667em;
		border-radius: 0.25rem;
		padding-top: 0.6666667em;
		padding-inline-end: 1em;
		padding-bottom: 0.6666667em;
		padding-inline-start: 1em;
}
.prose-sm :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.1428571em;
		margin-bottom: 1.1428571em;
		padding-inline-start: 1.5714286em;
}
.prose-sm :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.1428571em;
		margin-bottom: 1.1428571em;
		padding-inline-start: 1.5714286em;
}
.prose-sm :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0.2857143em;
		margin-bottom: 0.2857143em;
}
.prose-sm :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-start: 0.4285714em;
}
.prose-sm :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-start: 0.4285714em;
}
.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0.5714286em;
		margin-bottom: 0.5714286em;
}
.prose-sm :where(.prose-sm > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-bottom: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.1428571em;
}
.prose-sm :where(.prose-sm > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-bottom: 1.1428571em;
}
.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0.5714286em;
		margin-bottom: 0.5714286em;
}
.prose-sm :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.1428571em;
		margin-bottom: 1.1428571em;
}
.prose-sm :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.1428571em;
}
.prose-sm :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0.2857143em;
		padding-inline-start: 1.5714286em;
}
.prose-sm :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 2.8571429em;
		margin-bottom: 2.8571429em;
}
.prose-sm :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose-sm :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose-sm :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose-sm :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose-sm :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 0.8571429em;
		line-height: 1.5;
}
.prose-sm :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-end: 1em;
		padding-bottom: 0.6666667em;
		padding-inline-start: 1em;
}
.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-start: 0;
}
.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-end: 0;
}
.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-top: 0.6666667em;
		padding-inline-end: 1em;
		padding-bottom: 0.6666667em;
		padding-inline-start: 1em;
}
.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-start: 0;
}
.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		padding-inline-end: 0;
}
.prose-sm :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 1.7142857em;
		margin-bottom: 1.7142857em;
}
.prose-sm :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
		margin-bottom: 0;
}
.prose-sm :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		font-size: 0.8571429em;
		line-height: 1.3333333;
		margin-top: 0.6666667em;
}
.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-top: 0;
}
.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
		margin-bottom: 0;
}
.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
}
.pointer-events-none {
		pointer-events: none;
}
.visible {
		visibility: visible;
}
.invisible {
		visibility: hidden;
}
.collapse {
		visibility: collapse;
}
.static {
		position: static;
}
.fixed {
		position: fixed;
}
.absolute {
		position: absolute;
}
.relative {
		position: relative;
}
.sticky {
		position: sticky;
}
.inset-0 {
		inset: 0px;
}
.inset-y-0 {
		top: 0px;
		bottom: 0px;
}
.bottom-0 {
		bottom: 0px;
}
.left-0 {
		left: 0px;
}
.right-0 {
		right: 0px;
}
.right-1\.5 {
		right: 0.375rem;
}
.top-0 {
		top: 0px;
}
.top-1\.5 {
		top: 0.375rem;
}
.z-10 {
		z-index: 10;
}
.z-20 {
		z-index: 20;
}
.z-50 {
		z-index: 50;
}
.z-\[10000\] {
		z-index: 10000;
}
.z-\[150\] {
		z-index: 150;
}
.z-\[99999999\] {
		z-index: 99999999;
}
.z-\[9999\] {
		z-index: 9999;
}
.order-1 {
		order: 1;
}
.col-\[span_var\(--column-span\)\] {
		grid-column: span var(--column-span);
}
.col-span-10 {
		grid-column: span 10 / span 10;
}
.col-span-12 {
		grid-column: span 12 / span 12;
}
.col-span-3 {
		grid-column: span 3 / span 3;
}
.col-span-6 {
		grid-column: span 6 / span 6;
}
.col-span-7 {
		grid-column: span 7 / span 7;
}
.col-span-8 {
		grid-column: span 8 / span 8;
}
.col-start-1 {
		grid-column-start: 1;
}
.col-start-10 {
		grid-column-start: 10;
}
.col-start-2 {
		grid-column-start: 2;
}
.col-start-3 {
		grid-column-start: 3;
}
.col-start-4 {
		grid-column-start: 4;
}
.col-start-\[var\(--gridColumnStart\)\] {
		grid-column-start: var(--gridColumnStart);
}
.col-end-13 {
		grid-column-end: 13;
}
.col-end-9 {
		grid-column-end: 9;
}
.col-end-\[var\(--gridColumnEnd\)\] {
		grid-column-end: var(--gridColumnEnd);
}
.row-\[span_var\(--row-span\)\] {
		grid-row: span var(--row-span);
}
.row-start-\[var\(--gridRowStart\)\] {
		grid-row-start: var(--gridRowStart);
}
.row-end-\[var\(--gridRowEnd\)\] {
		grid-row-end: var(--gridRowEnd);
}
.m-0 {
		margin: 0px;
}
.-mx-1 {
		margin-left: -0.25rem;
		margin-right: -0.25rem;
}
.-mx-2 {
		margin-left: -0.5rem;
		margin-right: -0.5rem;
}
.-mx-4 {
		margin-left: -1rem;
		margin-right: -1rem;
}
.mx-auto {
		margin-left: auto;
		margin-right: auto;
}
.mx-mi {
		margin-left: 8px;
		margin-right: 8px;
}
.my-0 {
		margin-top: 0px;
		margin-bottom: 0px;
}
.my-1\.5 {
		margin-top: 0.375rem;
		margin-bottom: 0.375rem;
}
.my-2 {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
}
.-mt-ti {
		margin-top: -4px;
}
.mb-1\.5 {
		margin-bottom: 0.375rem;
}
.mb-\[3px\] {
		margin-bottom: 3px;
}
.mb-lg {
		margin-bottom: 32px;
}
.mb-md {
		margin-bottom: 24px;
}
.mb-sm {
		margin-bottom: 16px;
}
.mb-ti {
		margin-bottom: 4px;
}
.mb-xs {
		margin-bottom: 12px;
}
.ml-0\.5 {
		margin-left: 0.125rem;
}
.ml-1 {
		margin-left: 0.25rem;
}
.ml-2 {
		margin-left: 0.5rem;
}
.ml-auto {
		margin-left: auto;
}
.mr-1 {
		margin-right: 0.25rem;
}
.mr-mi {
		margin-right: 8px;
}
.mr-ti {
		margin-right: 4px;
}
.mt-1\.5 {
		margin-top: 0.375rem;
}
.mt-2 {
		margin-top: 0.5rem;
}
.mt-4 {
		margin-top: 1rem;
}
.mt-6 {
		margin-top: 1.5rem;
}
.mt-ni {
		margin-top: 6px;
}
.mt-sm {
		margin-top: 16px;
}
.mt-ti {
		margin-top: 4px;
}
.box-border {
		box-sizing: border-box;
}
.line-clamp-2 {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
}
.line-clamp-3 {
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
}
.block {
		display: block;
}
.inline-block {
		display: inline-block;
}
.inline {
		display: inline;
}
.flex {
		display: flex;
}
.inline-flex {
		display: inline-flex;
}
.table {
		display: table;
}
.grid {
		display: grid;
}
.hidden {
		display: none;
}
.size-10 {
		width: 2.5rem;
		height: 2.5rem;
}
.size-2\.5 {
		width: 0.625rem;
		height: 0.625rem;
}
.size-3 {
		width: 0.75rem;
		height: 0.75rem;
}
.size-3\.5 {
		width: 0.875rem;
		height: 0.875rem;
}
.size-4 {
		width: 1rem;
		height: 1rem;
}
.size-5 {
		width: 1.25rem;
		height: 1.25rem;
}
.size-5xl {
		width: 64px;
		height: 64px;
}
.size-6 {
		width: 1.5rem;
		height: 1.5rem;
}
.size-8 {
		width: 2rem;
		height: 2rem;
}
.size-full {
		width: 100%;
		height: 100%;
}
.size-lg {
		width: 32px;
		height: 32px;
}
.size-sm {
		width: 16px;
		height: 16px;
}
.size-xs {
		width: 12px;
		height: 12px;
}
.\!h-7 {
		height: 1.75rem !important;
}
.h-1 {
		height: 0.25rem;
}
.h-10 {
		height: 2.5rem;
}
.h-12 {
		height: 3rem;
}
.h-16 {
		height: 4rem;
}
.h-3 {
		height: 0.75rem;
}
.h-4 {
		height: 1rem;
}
.h-5 {
		height: 1.25rem;
}
.h-6 {
		height: 1.5rem;
}
.h-8 {
		height: 2rem;
}
.h-\[100dvh\] {
		height: 100dvh;
}
.h-\[120px\] {
		height: 120px;
}
.h-auto {
		height: auto;
}
.h-full {
		height: 100%;
}
.h-px {
		height: 1px;
}
.h-screen {
		height: 100vh;
}
.h-sm {
		height: 16px;
}
.h-st {
		height: 20px;
}
.h-xl {
		height: 36px;
}
.h-xs {
		height: 12px;
}
.max-h-\[20rem\] {
		max-height: 20rem;
}
.max-h-\[400px\] {
		max-height: 400px;
}
.max-h-\[50vh\] {
		max-height: 50vh;
}
.max-h-\[60vh\] {
		max-height: 60vh;
}
.max-h-\[70vh\] {
		max-height: 70vh;
}
.max-h-\[90vh\] {
		max-height: 90vh;
}
.\!min-h-7 {
		min-height: 1.75rem !important;
}
.min-h-\[auto\] {
		min-height: auto;
}
.min-h-screen {
		min-height: 100vh;
}
.\!w-auto {
		width: auto !important;
}
.w-11\/12 {
		width: 91.666667%;
}
.w-16 {
		width: 4rem;
}
.w-3 {
		width: 0.75rem;
}
.w-4 {
		width: 1rem;
}
.w-48 {
		width: 12rem;
}
.w-6 {
		width: 1.5rem;
}
.w-72 {
		width: 18rem;
}
.w-\[120px\] {
		width: 120px;
}
.w-\[300px\] {
		width: 300px;
}
.w-\[400px\] {
		width: 400px;
}
.w-\[480px\] {
		width: 480px;
}
.w-\[600px\] {
		width: 600px;
}
.w-\[80\%\] {
		width: 80%;
}
.w-auto {
		width: auto;
}
.w-fit {
		width: fit-content;
}
.w-full {
		width: 100%;
}
.w-lg {
		width: 32px;
}
.w-sm {
		width: 16px;
}
.w-st {
		width: 20px;
}
.w-xl {
		width: 36px;
}
.w-xs {
		width: 12px;
}
.min-w-0 {
		min-width: 0px;
}
.min-w-24 {
		min-width: 6rem;
}
.min-w-3xl {
		min-width: 48px;
}
.min-w-\[14rem\] {
		min-width: 14rem;
}
.min-w-\[150px\] {
		min-width: 150px;
}
.min-w-\[200px\] {
		min-width: 200px;
}
.max-w-2xl {
		max-width: 42rem;
}
.max-w-4xl {
		max-width: 56rem;
}
.max-w-\[11rem\] {
		max-width: 11rem;
}
.max-w-\[150px\] {
		max-width: 150px;
}
.max-w-\[90vw\] {
		max-width: 90vw;
}
.max-w-full {
		max-width: 100%;
}
.max-w-md {
		max-width: 28rem;
}
.max-w-none {
		max-width: none;
}
.max-w-sm {
		max-width: 24rem;
}
.flex-1 {
		flex: 1 1 0%;
}
.flex-\[2\] {
		flex: 2;
}
.flex-\[3\] {
		flex: 3;
}
.flex-shrink-0 {
		flex-shrink: 0;
}
.shrink-0 {
		flex-shrink: 0;
}
.flex-grow {
		flex-grow: 1;
}
.grow {
		flex-grow: 1;
}
.basis-24 {
		flex-basis: 6rem;
}
.table-auto {
		table-layout: auto;
}
.table-fixed {
		table-layout: fixed;
}
.border-collapse {
		border-collapse: collapse;
}
.origin-\[--radix-popover-content-transform-origin\] {
		transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-tooltip-content-transform-origin\] {
		transform-origin: var(--radix-tooltip-content-transform-origin);
}
.origin-center {
		transform-origin: center;
}
.-rotate-90 {
		--tw-rotate: -90deg;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\!transform {
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.transform {
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
		50% {
				opacity: .5;
		}
}
.animate-pulse {
		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
		to {
				transform: rotate(360deg);
		}
}
.animate-spin {
		animation: spin 1s linear infinite;
}
.cursor-default {
		cursor: default;
}
.cursor-grab {
		cursor: grab;
}
.cursor-grabbing {
		cursor: grabbing;
}
.cursor-not-allowed {
		cursor: not-allowed;
}
.cursor-pointer {
		cursor: pointer;
}
.resize {
		resize: both;
}
.columns-2 {
		columns: 2;
}
.grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)\] {
		grid-template-columns: auto minmax(0,1fr);
}
.grid-cols-\[auto_minmax\(0\2c 1fr\)_auto\] {
		grid-template-columns: auto minmax(0,1fr) auto;
}
.grid-cols-\[minmax\(0\2c 1fr\)_auto\] {
		grid-template-columns: minmax(0,1fr) auto;
}
.grid-cols-\[repeat\(auto-fill\2c _minmax\(min\(13\.75rem\2c 100\%\)\2c 1fr\)\)\] {
		grid-template-columns: repeat(auto-fill, minmax(min(13.75rem, 100%),1fr));
}
.grid-cols-\[repeat\(var\(--columns\2c _12\)\2c _minmax\(0\2c _1fr\)\)\] {
		grid-template-columns: repeat(var(--columns, 12), minmax(0, 1fr));
}
.grid-rows-\[repeat\(var\(--rows\2c _1\)\2c _minmax\(0\2c _1fr\)\)\] {
		grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));
}
.flex-row {
		flex-direction: row;
}
.flex-col {
		flex-direction: column;
}
.flex-col-reverse {
		flex-direction: column-reverse;
}
.flex-wrap {
		flex-wrap: wrap;
}
.items-start {
		align-items: flex-start;
}
.items-center {
		align-items: center;
}
.items-baseline {
		align-items: baseline;
}
.justify-end {
		justify-content: flex-end;
}
.justify-center {
		justify-content: center;
}
.justify-between {
		justify-content: space-between;
}
.\!gap-ti {
		gap: 4px !important;
}
.gap-0 {
		gap: 0px;
}
.gap-0\.5 {
		gap: 0.125rem;
}
.gap-1 {
		gap: 0.25rem;
}
.gap-1\.5 {
		gap: 0.375rem;
}
.gap-2 {
		gap: 0.5rem;
}
.gap-2\.5 {
		gap: 0.625rem;
}
.gap-lg {
		gap: 32px;
}
.gap-md {
		gap: 24px;
}
.gap-mi {
		gap: 8px;
}
.gap-ni {
		gap: 6px;
}
.gap-none {
		gap: 0;
}
.gap-sm {
		gap: 16px;
}
.gap-st {
		gap: 20px;
}
.gap-ti {
		gap: 4px;
}
.gap-xs {
		gap: 12px;
}
.\!gap-x-lg {
		column-gap: 32px !important;
}
.\!gap-y-md {
		row-gap: 24px !important;
}
.gap-x-lg {
		column-gap: 32px;
}
.gap-x-sm {
		column-gap: 16px;
}
.gap-y-lg {
		row-gap: 32px;
}
.gap-y-md {
		row-gap: 24px;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
		margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-lg > :not([hidden]) ~ :not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-top: calc(32px * calc(1 - var(--tw-space-y-reverse)));
		margin-bottom: calc(32px * var(--tw-space-y-reverse));
}
.space-y-md > :not([hidden]) ~ :not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
		margin-bottom: calc(24px * var(--tw-space-y-reverse));
}
.space-y-mi > :not([hidden]) ~ :not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-top: calc(8px * calc(1 - var(--tw-space-y-reverse)));
		margin-bottom: calc(8px * var(--tw-space-y-reverse));
}
.space-y-sm > :not([hidden]) ~ :not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
		margin-bottom: calc(16px * var(--tw-space-y-reverse));
}
.space-y-ti > :not([hidden]) ~ :not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
		margin-bottom: calc(4px * var(--tw-space-y-reverse));
}
.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
		--tw-divide-x-reverse: 0;
		border-right-width: calc(0px * var(--tw-divide-x-reverse));
		border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
		--tw-divide-y-reverse: 0;
		border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
		border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-solid > :not([hidden]) ~ :not([hidden]) {
		border-style: solid;
}
.divide-neutral-100 > :not([hidden]) ~ :not([hidden]) {
		--tw-divide-opacity: 1;
		border-color: rgb(225 226 230 / var(--tw-divide-opacity, 1));
}
.self-start {
		align-self: flex-start;
}
.overflow-auto {
		overflow: auto;
}
.overflow-hidden {
		overflow: hidden;
}
.overflow-clip {
		overflow: clip;
}
.overflow-y-auto {
		overflow-y: auto;
}
.overflow-x-hidden {
		overflow-x: hidden;
}
.scroll-smooth {
		scroll-behavior: smooth;
}
.truncate {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
}
.whitespace-normal {
		white-space: normal;
}
.whitespace-pre-wrap {
		white-space: pre-wrap;
}
.whitespace-break-spaces {
		white-space: break-spaces;
}
.text-pretty {
		text-wrap: pretty;
}
.break-words {
		overflow-wrap: break-word;
}
.\!rounded-full {
		border-radius: 9999px !important;
}
.rounded {
		border-radius: 0.25rem;
}
.rounded-full {
		border-radius: 9999px;
}
.rounded-lg {
		border-radius: 8px;
}
.rounded-md {
		border-radius: 6px;
}
.rounded-none {
		border-radius: 0;
}
.rounded-sm {
		border-radius: 2px;
}
.\!border {
		border-width: 1px !important;
}
.border {
		border-width: 1px;
}
.border-0 {
		border-width: 0px;
}
.border-2 {
		border-width: 2px;
}
.border-x-0 {
		border-left-width: 0px;
		border-right-width: 0px;
}
.border-b {
		border-bottom-width: 1px;
}
.border-b-0 {
		border-bottom-width: 0px;
}
.border-r {
		border-right-width: 1px;
}
.border-t {
		border-top-width: 1px;
}
.border-t-0 {
		border-top-width: 0px;
}
.border-solid {
		border-style: solid;
}
.border-danger-500 {
		--tw-border-opacity: 1;
		border-color: rgb(222 24 39 / var(--tw-border-opacity, 1));
}
.border-neutral-100 {
		--tw-border-opacity: 1;
		border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}
.border-neutral-200 {
		--tw-border-opacity: 1;
		border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}
.border-neutral-300 {
		--tw-border-opacity: 1;
		border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
}
.border-neutral-50 {
		--tw-border-opacity: 1;
		border-color: rgb(240 241 243 / var(--tw-border-opacity, 1));
}
.border-b-neutral-100 {
		--tw-border-opacity: 1;
		border-bottom-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}
.bg-black\/20 {
		background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/60 {
		background-color: rgb(0 0 0 / 0.6);
}
.bg-danger-600 {
		--tw-bg-opacity: 1;
		background-color: rgb(165 24 28 / var(--tw-bg-opacity, 1));
}
.bg-gray-100 {
		--tw-bg-opacity: 1;
		background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
		--tw-bg-opacity: 1;
		background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-500\/50 {
		background-color: rgb(107 114 128 / 0.5);
}
.bg-neutral-0 {
		--tw-bg-opacity: 1;
		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-neutral-0\/95 {
		background-color: rgb(255 255 255 / 0.95);
}
.bg-neutral-100 {
		--tw-bg-opacity: 1;
		background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}
.bg-neutral-200 {
		--tw-bg-opacity: 1;
		background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}
.bg-neutral-25 {
		--tw-bg-opacity: 1;
		background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}
.bg-neutral-50 {
		--tw-bg-opacity: 1;
		background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}
.bg-neutral-900 {
		--tw-bg-opacity: 1;
		background-color: rgb(26 29 33 / var(--tw-bg-opacity, 1));
}
.bg-success-500 {
		--tw-bg-opacity: 1;
		background-color: rgb(27 126 57 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
		background-color: transparent;
}
.bg-warn-800 {
		--tw-bg-opacity: 1;
		background-color: rgb(136 96 26 / var(--tw-bg-opacity, 1));
}
.bg-white {
		--tw-bg-opacity: 1;
		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-\[length\:280\%\] {
		background-size: 280%;
}
.bg-bottom {
		background-position: bottom;
}
.fill-danger-500 {
		fill: #de1827;
}
.fill-neutral-0 {
		fill: #FFFFFF;
}
.fill-neutral-500 {
		fill: #62676D;
}
.fill-primary-500 {
		fill: #0472e1;
}
.fill-primary-500\/75 {
		fill: rgb(4 114 225 / 0.75);
}
.fill-success-500 {
		fill: #1b7e39;
}
.stroke-danger-500 {
		stroke: #de1827;
}
.stroke-neutral-200 {
		stroke: #C4C6CC;
}
.stroke-neutral-400 {
		stroke: #8A8D93;
}
.stroke-neutral-700 {
		stroke: #3E4247;
}
.stroke-primary-500 {
		stroke: #0472e1;
}
.stroke-primary-500\/25 {
		stroke: rgb(4 114 225 / 0.25);
}
.stroke-success-500 {
		stroke: #1b7e39;
}
.stroke-warn-700 {
		stroke: #a57c1f;
}
.object-cover {
		object-fit: cover;
}
.\!p-0 {
		padding: 0px !important;
}
.\!p-lg {
		padding: 32px !important;
}
.\!p-md {
		padding: 24px !important;
}
.\!p-mi {
		padding: 8px !important;
}
.\!p-si {
		padding: 2px !important;
}
.\!p-sm {
		padding: 16px !important;
}
.\!p-ti {
		padding: 4px !important;
}
.p-0 {
		padding: 0px;
}
.p-0\.5 {
		padding: 0.125rem;
}
.p-1 {
		padding: 0.25rem;
}
.p-2 {
		padding: 0.5rem;
}
.p-2\.5 {
		padding: 0.625rem;
}
.p-4 {
		padding: 1rem;
}
.p-8 {
		padding: 2rem;
}
.p-lg {
		padding: 32px;
}
.p-md {
		padding: 24px;
}
.p-mi {
		padding: 8px;
}
.p-none {
		padding: 0;
}
.p-sm {
		padding: 16px;
}
.p-st {
		padding: 20px;
}
.p-ti {
		padding: 4px;
}
.p-xl {
		padding: 36px;
}
.p-xs {
		padding: 12px;
}
.\!px-mi {
		padding-left: 8px !important;
		padding-right: 8px !important;
}
.px-lg {
		padding-left: 32px;
		padding-right: 32px;
}
.px-sm {
		padding-left: 16px;
		padding-right: 16px;
}
.px-xs {
		padding-left: 12px;
		padding-right: 12px;
}
.py-3xl {
		padding-top: 48px;
		padding-bottom: 48px;
}
.py-sm {
		padding-top: 16px;
		padding-bottom: 16px;
}
.py-ti {
		padding-top: 4px;
		padding-bottom: 4px;
}
.pb-2 {
		padding-bottom: 0.5rem;
}
.pb-mi {
		padding-bottom: 8px;
}
.pl-0\.5 {
		padding-left: 0.125rem;
}
.pl-1 {
		padding-left: 0.25rem;
}
.pl-lg {
		padding-left: 32px;
}
.pl-xs {
		padding-left: 12px;
}
.pr-0\.5 {
		padding-right: 0.125rem;
}
.pr-12 {
		padding-right: 3rem;
}
.pr-3xl {
		padding-right: 48px;
}
.pr-lg {
		padding-right: 32px;
}
.pt-sm {
		padding-top: 16px;
}
.text-left {
		text-align: left;
}
.text-center {
		text-align: center;
}
.text-right {
		text-align: right;
}
.text-start {
		text-align: start;
}
.font-sans {
		font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl {
		font-size: 1.5rem;
		line-height: 2rem;
}
.text-\[10px\] {
		font-size: 10px;
}
.text-\[112px\] {
		font-size: 112px;
}
.text-\[12px\] {
		font-size: 12px;
}
.text-\[14px\] {
		font-size: 14px;
}
.text-\[16px\] {
		font-size: 16px;
}
.text-\[20px\] {
		font-size: 20px;
}
.text-\[24px\] {
		font-size: 24px;
}
.text-\[32px\] {
		font-size: 32px;
}
.text-\[48px\] {
		font-size: 48px;
}
.text-\[80px\] {
		font-size: 80px;
}
.text-caption-medium {
		font-size: 12px;
		line-height: 16px;
		font-weight: 500;
}
.text-caption-regular {
		font-size: 12px;
		line-height: 16px;
}
.text-caption-semibold {
		font-size: 12px;
		line-height: 16px;
		font-weight: 600;
}
.text-heading-lg {
		font-size: 20px;
		line-height: 28px;
		letter-spacing: -0.08px;
		font-weight: 600;
}
.text-lead-bold {
		font-size: 20px;
		line-height: 26px;
		font-weight: 700;
}
.text-lead-semibold {
		font-size: 16px;
		line-height: 24px;
		font-weight: 600;
}
.text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
}
.text-para-medium {
		font-size: 14px;
		line-height: 20px;
		font-weight: 500;
}
.text-para-regular {
		font-size: 14px;
		line-height: 20px;
}
.text-para-semibold {
		font-size: 14px;
		line-height: 20px;
		font-weight: 600;
}
.text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
}
.text-xl {
		font-size: 1.25rem;
		line-height: 1.75rem;
}
.text-xs {
		font-size: 0.75rem;
		line-height: 1rem;
}
.font-bold {
		font-weight: 700;
}
.font-medium {
		font-weight: 500;
}
.font-semibold {
		font-weight: 600;
}
.uppercase {
		text-transform: uppercase;
}
.capitalize {
		text-transform: capitalize;
}
.italic {
		font-style: italic;
}
.tabular-nums {
		--tw-numeric-spacing: tabular-nums;
		font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[0\] {
		line-height: 0;
}
.leading-\[1\.2\] {
		line-height: 1.2;
}
.leading-\[1\.4\] {
		line-height: 1.4;
}
.leading-\[1\.5\] {
		line-height: 1.5;
}
.leading-\[20px\] {
		line-height: 20px;
}
.leading-none {
		line-height: 1;
}
.tracking-wider {
		letter-spacing: 0.05em;
}
.text-current {
		color: currentColor;
}
.text-danger-500 {
		--tw-text-opacity: 1;
		color: rgb(222 24 39 / var(--tw-text-opacity, 1));
}
.text-danger-600 {
		--tw-text-opacity: 1;
		color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}
.text-danger-900 {
		--tw-text-opacity: 1;
		color: rgb(41 6 14 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
		--tw-text-opacity: 1;
		color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-green-500 {
		--tw-text-opacity: 1;
		color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-neutral-200 {
		--tw-text-opacity: 1;
		color: rgb(196 198 204 / var(--tw-text-opacity, 1));
}
.text-neutral-300 {
		--tw-text-opacity: 1;
		color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}
.text-neutral-400 {
		--tw-text-opacity: 1;
		color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}
.text-neutral-500 {
		--tw-text-opacity: 1;
		color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}
.text-neutral-600 {
		--tw-text-opacity: 1;
		color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}
.text-neutral-700 {
		--tw-text-opacity: 1;
		color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}
.text-neutral-900 {
		--tw-text-opacity: 1;
		color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}
.text-primary-500 {
		--tw-text-opacity: 1;
		color: rgb(4 114 225 / var(--tw-text-opacity, 1));
}
.text-primary-600 {
		--tw-text-opacity: 1;
		color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}
.text-success-600 {
		--tw-text-opacity: 1;
		color: rgb(13 98 37 / var(--tw-text-opacity, 1));
}
.text-warn-800 {
		--tw-text-opacity: 1;
		color: rgb(136 96 26 / var(--tw-text-opacity, 1));
}
.text-white {
		--tw-text-opacity: 1;
		color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
		text-decoration-line: underline;
}
.antialiased {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
}
.opacity-25 {
		opacity: 0.25;
}
.opacity-50 {
		opacity: 0.5;
}
.opacity-60 {
		opacity: 0.6;
}
.opacity-70 {
		opacity: 0.7;
}
.opacity-75 {
		opacity: 0.75;
}
.shadow-dp1 {
		--tw-shadow: 0px 0px 1px 0px rgba(0, 0, 30, 0.10), 0px 1px 2px 0px rgba(0, 0, 30, 0.10), 0px 2px 4px 0px rgba(0, 0, 30, 0.10);
		--tw-shadow-colored: 0px 0px 1px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 2px 4px 0px var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-dp3 {
		--tw-shadow: 0px 0px 2px 0px rgba(0, 0, 30, 0.10), 0px 4px 8px 0px rgba(0, 0, 30, 0.10), 0px 8px 16px 0px rgba(0, 0, 30, 0.10);
		--tw-shadow-colored: 0px 0px 2px 0px var(--tw-shadow-color), 0px 4px 8px 0px var(--tw-shadow-color), 0px 8px 16px 0px var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
		outline: 2px solid transparent;
		outline-offset: 2px;
}
.outline {
		outline-style: solid;
}
.outline-offset-1 {
		outline-offset: 1px;
}
.ring {
		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-offset-white {
		--tw-ring-offset-color: #fff;
}
.blur {
		--tw-blur: blur(8px);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-md {
		--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-sm {
		--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
		--tw-backdrop-blur: blur(8px);
		-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
		backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
		-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
		backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.transition-\[stroke-dashoffset\] {
		transition-property: stroke-dashoffset;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.transition-all {
		transition-property: all;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.transition-colors {
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.transition-opacity {
		transition-property: opacity;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.transition-transform {
		transition-property: transform;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.duration-500 {
		transition-duration: 500ms;
}
.ease-in-out {
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
		transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {
		from {
				opacity: var(--tw-enter-opacity, 1);
				transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
		}
}
@keyframes exit {
		to {
				opacity: var(--tw-exit-opacity, 1);
				transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
		}
}
.zoom-in {
		--tw-enter-scale: 0;
}
.duration-500 {
		animation-duration: 500ms;
}
.ease-in-out {
		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
		animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
		animation-play-state: running;
}
.placeholder\:font-medium::placeholder {
		font-weight: 500;
}
.placeholder\:text-neutral-400::placeholder {
		--tw-text-opacity: 1;
		color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}
.before\:absolute::before {
		content: var(--tw-content);
		position: absolute;
}
.before\:inset-0::before {
		content: var(--tw-content);
		inset: 0px;
}
.before\:left-0::before {
		content: var(--tw-content);
		left: 0px;
}
.before\:top-0::before {
		content: var(--tw-content);
		top: 0px;
}
.before\:block::before {
		content: var(--tw-content);
		display: block;
}
.before\:h-mi::before {
		content: var(--tw-content);
		height: 8px;
}
.before\:w-mi::before {
		content: var(--tw-content);
		width: 8px;
}
.before\:-translate-x-full::before {
		content: var(--tw-content);
		--tw-translate-x: -100%;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes shimmer {
		0% {
				content: var(--tw-content);
				transform: translateX(-100%);
		}
		100% {
				content: var(--tw-content);
				transform: translateX(100%);
		}
}
.before\:animate-\[shimmer_2s_infinite\]::before {
		content: var(--tw-content);
		animation: shimmer 2s infinite;
}
.before\:bg-gradient-to-r::before {
		content: var(--tw-content);
		background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.before\:from-transparent::before {
		content: var(--tw-content);
		--tw-gradient-from: transparent var(--tw-gradient-from-position);
		--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
		--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.before\:via-white\/60::before {
		content: var(--tw-content);
		--tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
		--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.before\:to-transparent::before {
		content: var(--tw-content);
		--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.before\:content-\[\"\"\]::before {
		--tw-content: "";
		content: var(--tw-content);
}
.before\:content-\[\'\'\]::before {
		--tw-content: '';
		content: var(--tw-content);
}
.last\:border-b-0:last-child {
		border-bottom-width: 0px;
}
.hover\:\!bg-transparent:hover {
		background-color: transparent !important;
}
.hover\:bg-danger-50:hover {
		--tw-bg-opacity: 1;
		background-color: rgb(250 241 244 / var(--tw-bg-opacity, 1));
}
.hover\:bg-neutral-25:hover {
		--tw-bg-opacity: 1;
		background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}
.hover\:bg-neutral-50:hover {
		--tw-bg-opacity: 1;
		background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}
.hover\:bg-transparent:hover {
		background-color: transparent;
}
.hover\:text-gray-600:hover {
		--tw-text-opacity: 1;
		color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.hover\:text-neutral-800:hover {
		--tw-text-opacity: 1;
		color: rgb(44 48 53 / var(--tw-text-opacity, 1));
}
.hover\:text-primary-700:hover {
		--tw-text-opacity: 1;
		color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}
.hover\:opacity-100:hover {
		opacity: 1;
}
.focus\:outline-none:focus {
		outline: 2px solid transparent;
		outline-offset: 2px;
}
.focus\:ring-2:focus {
		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-slate-950:focus {
		--tw-ring-opacity: 1;
		--tw-ring-color: rgb(2 6 23 / var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus {
		--tw-ring-offset-width: 2px;
}
.active\:cursor-grabbing:active {
		cursor: grabbing;
}
.active\:bg-neutral-50:active {
		--tw-bg-opacity: 1;
		background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}
.disabled\:pointer-events-none:disabled {
		pointer-events: none;
}
.group:hover .group-hover\:bg-black\/30 {
		background-color: rgb(0 0 0 / 0.3);
}
.group:hover .group-hover\:bg-black\/80 {
		background-color: rgb(0 0 0 / 0.8);
}
.data-\[state\=delayed-open\]\:animate-in[data-state="delayed-open"] {
		animation-name: enter;
		animation-duration: 150ms;
		--tw-enter-opacity: initial;
		--tw-enter-scale: initial;
		--tw-enter-rotate: initial;
		--tw-enter-translate-x: initial;
		--tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
		animation-name: enter;
		animation-duration: 150ms;
		--tw-enter-opacity: initial;
		--tw-enter-scale: initial;
		--tw-enter-rotate: initial;
		--tw-enter-translate-x: initial;
		--tw-enter-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
		animation-name: exit;
		animation-duration: 150ms;
		--tw-exit-opacity: initial;
		--tw-exit-scale: initial;
		--tw-exit-rotate: initial;
		--tw-exit-translate-x: initial;
		--tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
		--tw-exit-opacity: 0;
}
.data-\[state\=delayed-open\]\:fade-in-0[data-state="delayed-open"] {
		--tw-enter-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
		--tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
		--tw-exit-scale: .95;
}
.data-\[state\=delayed-open\]\:zoom-in-95[data-state="delayed-open"] {
		--tw-enter-scale: .95;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
		--tw-enter-scale: .95;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
		--tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
		--tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
		--tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
		--tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
		--tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
		--tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
		--tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
		--tw-enter-translate-y: -48%;
}
.prose-headings\:mb-ti :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-bottom: 4px;
}
.prose-headings\:mt-0 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-top: 0px;
}
.prose-headings\:text-neutral-900 :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-text-opacity: 1;
		color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}
.prose-p\:mb-ti :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-bottom: 4px;
}
.prose-p\:mt-0 :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-top: 0px;
}
.prose-p\:text-para-regular :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		font-size: 14px;
		line-height: 20px;
}
.prose-p\:text-neutral-700 :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-text-opacity: 1;
		color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}
.prose-a\:text-primary-600 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-text-opacity: 1;
		color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}
.prose-a\:no-underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		text-decoration-line: none;
}
.hover\:prose-a\:underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
		text-decoration-line: underline;
}
.prose-strong\:font-medium :is(:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		font-weight: 500;
}
.prose-strong\:text-neutral-900 :is(:where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-text-opacity: 1;
		color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}
.prose-code\:rounded :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		border-radius: 0.25rem;
}
.prose-code\:bg-neutral-50 :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-bg-opacity: 1;
		background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}
.prose-code\:px-ti :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		padding-left: 4px;
		padding-right: 4px;
}
.prose-code\:py-0 :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		padding-top: 0px;
		padding-bottom: 0px;
}
.prose-code\:text-para-regular :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		font-size: 14px;
		line-height: 20px;
}
.prose-code\:text-neutral-800 :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-text-opacity: 1;
		color: rgb(44 48 53 / var(--tw-text-opacity, 1));
}
.prose-ol\:mb-ti :is(:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-bottom: 4px;
}
.prose-ol\:mt-0 :is(:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-top: 0px;
}
.prose-ol\:pl-md :is(:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		padding-left: 24px;
}
.prose-ul\:mb-ti :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-bottom: 4px;
}
.prose-ul\:mt-0 :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-top: 0px;
}
.prose-ul\:pl-md :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		padding-left: 24px;
}
.prose-li\:my-0 :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-top: 0px;
		margin-bottom: 0px;
}
.prose-li\:text-para-regular :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		font-size: 14px;
		line-height: 20px;
}
.prose-li\:text-neutral-700 :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-text-opacity: 1;
		color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}
.prose-table\:my-ti :is(:where(table):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		margin-top: 4px;
		margin-bottom: 4px;
}
.prose-table\:w-full :is(:where(table):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		width: 100%;
}
.prose-table\:border-collapse :is(:where(table):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		border-collapse: collapse;
}
.prose-thead\:border-b :is(:where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		border-bottom-width: 1px;
}
.prose-thead\:border-neutral-200 :is(:where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-border-opacity: 1;
		border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}
.prose-th\:bg-neutral-50 :is(:where(th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-bg-opacity: 1;
		background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}
.prose-th\:p-mi :is(:where(th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		padding: 8px;
}
.prose-th\:text-left :is(:where(th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		text-align: left;
}
.prose-th\:text-para-semibold :is(:where(th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		font-size: 14px;
		line-height: 20px;
		font-weight: 600;
}
.prose-th\:text-neutral-900 :is(:where(th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-text-opacity: 1;
		color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}
.prose-td\:p-mi :is(:where(td):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		padding: 8px;
}
.prose-td\:text-para-regular :is(:where(td):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		font-size: 14px;
		line-height: 20px;
}
.prose-td\:text-neutral-700 :is(:where(td):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
		--tw-text-opacity: 1;
		color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}
@supports (backdrop-filter: var(--tw)) {
		.supports-\[backdrop-filter\]\:bg-neutral-0\/90 {
				background-color: rgb(255 255 255 / 0.9);
		}
}
@media (prefers-reduced-motion: reduce) {
		.motion-reduce\:transition-none {
				transition-property: none;
		}
}
@media not all and (min-width: 768px) {
		.max-md\:static {
				position: static;
		}
		.max-md\:col-span-12 {
				grid-column: span 12 / span 12;
		}
		.max-md\:col-start-1 {
				grid-column-start: 1;
		}
		.max-md\:col-end-13 {
				grid-column-end: 13;
		}
		.max-md\:hidden {
				display: none;
		}
		.max-md\:self-auto {
				align-self: auto;
		}
		.max-md\:px-sm {
				padding-left: 16px;
				padding-right: 16px;
		}
		.max-md\:pl-0 {
				padding-left: 0px;
		}
		.max-md\:pr-sm {
				padding-right: 16px;
		}
}
@media (min-width: 640px) {
		.sm\:\!flex-row {
				flex-direction: row !important;
		}
		.sm\:flex-row {
				flex-direction: row;
		}
		.sm\:\!justify-end {
				justify-content: flex-end !important;
		}
		.sm\:justify-end {
				justify-content: flex-end;
		}
		.sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
				--tw-space-x-reverse: 0;
				margin-right: calc(0.5rem * var(--tw-space-x-reverse));
				margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
		}
}
@media (min-width: 768px) {
		.md\:w-1\/2 {
				width: 50%;
		}
		.md\:w-1\/3 {
				width: 33.333333%;
		}
		.md\:w-1\/4 {
				width: 25%;
		}
		.md\:w-3\/4 {
				width: 75%;
		}
		.md\:w-\[90\%\] {
				width: 90%;
		}
		.md\:w-auto {
				width: auto;
		}
		.md\:flex-\[2\] {
				flex: 2;
		}
		.md\:flex-\[3\] {
				flex: 3;
		}
		.md\:grid-cols-2 {
				grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.md\:grid-cols-3 {
				grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.md\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
				--tw-divide-y-reverse: 0;
				border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
				border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
		}
}
@media (min-width: 1536px) {
		.\32xl\:mx-auto {
				margin-left: auto;
				margin-right: auto;
		}
		.\32xl\:max-w-screen-2xl {
				max-width: 1536px;
		}
}
.\[\&\:not\(\:last-child\)\]\:border-b:not(:last-child) {
		border-bottom-width: 1px;
}
.\[\&\>\*\]\:scroll-mt-\[var\(--scroll-offset\)\]>* {
		scroll-margin-top: var(--scroll-offset);
}
.\[\&_input\]\:text-para-regular input {
		font-size: 14px;
		line-height: 20px;
}
.\[\&_table_tbody_tr\:not\(\:last-child\)_td\]\:border-b table tbody tr:not(:last-child) td {
		border-bottom-width: 1px;
}
.\[\&_table_tbody_tr\:not\(\:last-child\)_td\]\:border-neutral-200 table tbody tr:not(:last-child) td {
		--tw-border-opacity: 1;
		border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}
.hover\:\[\&_tr\]\:bg-neutral-25 tr:hover {
		--tw-bg-opacity: 1;
		background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}
.s-accordion-root {
	width: 100%;
	overflow: clip;
}

.s-accordion-root--contained {
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}

.s-accordion-item {
	/* ensure there is no space between colors and box-shadow, otherwise it will break the build */
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	transition-property: colors, box-shadow;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-accordion-root--contained .s-accordion-item:first-child .s-accordion-trigger {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.s-accordion-root--contained .s-accordion-item:last-child {
	border-bottom-width: 0px;
}

.s-accordion-root--contained .s-accordion-item:last-child .s-accordion-trigger:not([aria-expanded='true']) {
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}

.s-accordion-item-disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.s-accordion-trigger {
	display: flex;
	width: 100%;
	cursor: pointer;
	align-items: center;
	padding: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	--tw-ring-inset: inset;
}

.s-accordion-trigger:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
}

.s-accordion-trigger[data-disabled] {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Contained variant: bordered container with background on triggers */
.s-accordion-root--contained .s-accordion-trigger {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}
.s-accordion-root--contained .s-accordion-trigger:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-accordion-root--contained .s-accordion-trigger[aria-expanded='true'] {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-accordion-icon-wrapper {
	line-height: 1;
}

.s-accordion-icon {
	width: 16px;
	height: 16px;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	animation-duration: 200ms;
}

.s-accordion-trigger[aria-expanded='true'] .s-accordion-icon {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.s-accordion-trigger.s-accordion-icon-right {
	justify-content: space-between;
}

.s-accordion-trigger.s-accordion-icon-left {
	flex-direction: row;
	gap: 0.5rem;
}

.s-accordion-trigger-content {
	text-align: left;
}

.s-accordion-icon-right .s-accordion-trigger-content {
	flex: 1 1 0%;
}

.s-accordion-icon-left .s-accordion-trigger-content {
	flex: 1 1 0%;
}

.s-accordion-content {
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-accordion-content[data-state='open'] {
	animation: accordion-down 0.2s ease-out;
}

.s-accordion-content[data-state='closed'] {
	animation: accordion-up 0.2s ease-out;
}

.s-accordion-content-inner {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Define accordion animations */
@keyframes accordion-down {
	from {
		height: 0;
	}

	to {
		height: var(--radix-accordion-content-height);
	}
}

@keyframes accordion-up {
	from {
		height: var(--radix-accordion-content-height);
	}

	to {
		height: 0;
	}
}/* SLink Base Styles */
.s-link {
	display: inline-flex;
	align-items: center;
	font-size: 0.875rem;
	line-height: 1.25rem;
	line-height: 1;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	animation-duration: 200ms;
	cursor: pointer
}

/* Default Variant - inherits current text color */
.s-link-default {
	color: currentColor;
	text-decoration-line: none
}
.s-link-default:hover {
	opacity: 0.8
}

/* Muted Variant - neutral/subdued appearance (accessible contrast) */
.s-link-muted {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	text-decoration-line: none
}
.s-link-muted:hover {
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

/* Stroke Variant - underlined link */
.s-link-stroke {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px
}

/* Muted Stroke Variant - underlined with muted color (accessible contrast) */
.s-link-muted-stroke {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px
}
.s-link-muted-stroke:hover {
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

/* Primary Variant - brand colored link */
.s-link-primary {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	text-decoration-line: none
}
.s-link-primary:hover {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1))
}

/* Neutral Variant - neutral colored link */
.s-link-neutral {
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
	text-decoration-line: none
}
.s-link-neutral:hover {
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1))
}

/* Disabled State */
.s-link-disabled {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
	text-decoration-line: none
}
.s-link-disabled:hover {
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
	text-decoration-thickness: 0px
}
.s-link-disabled {
	pointer-events: none
}

/* Focus Styles */
.s-link:focus-visible {
	border-radius: 2px;
	outline-width: 2px;
	outline-offset: 2px;
	outline-color: #0472e1
}

/* Screen Reader Only - Visually hidden but accessible to assistive technology */
.sr-only {
	position: absolute;
	margin: -1px;
	height: 1px;
	width: 1px;
	overflow: hidden;
	padding: 0px;
	white-space: nowrap;
	border-width: 0px;
	clip: rect(0, 0, 0, 0)
}
 .s-breadcrumb {
	display: flex;
	align-items: center;
}

 .s-breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

 .s-breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
}

 .s-breadcrumb-item-link {
	display: flex;
	align-items: center;
}

 .s-breadcrumb-item-link-current {
	cursor: default;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

 .s-breadcrumb-item-link-normal {
	cursor: pointer;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

 .s-breadcrumb-item-link-normal:hover {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

 .s-breadcrumb-item-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

 .s-breadcrumb-separator {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

 .s-breadcrumb-ellipsis {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

 .s-breadcrumb-ellipsis-button {
	flex-shrink: 0;
	cursor: pointer;
	border-width: 0px;
	background-color: transparent;
	padding: 0px;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

 .s-breadcrumb-ellipsis-button:hover {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

 .s-breadcrumb-ellipsis-button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

 .s-breadcrumb-icon {
	margin-right: 0.375rem;
	display: flex;
	align-items: center;
	color: inherit;
}
.s-btn {
	display: inline-flex;
	height: 2rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 4px;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 14px;
	line-height: 20px;
	line-height: 1;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 100ms;
	animation-duration: 100ms;
	background-color: var(--btn-bg);
	color: var(--btn-text,var(--btn-text-hover));
	border: var(--btn-border);

	&:focus-visible {
		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	}

	&:focus-visible {
		--tw-ring-opacity: 1;
		--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	}

	&:focus-visible {
		--tw-ring-offset-width: 1px;
	}

	&:hover {
		background-color: var(--btn-bg-hover);
		border: var(--btn-border-hover, var(--btn-border));
		color: var(--btn-text-hover, var(--btn-text));
	}

	/* Variants */
	&.s-btn-primary {
		--btn-bg: #0472e1;
		--btn-text: #FFFFFF;
		--btn-border: none;
		--btn-bg-hover: #0359af;
	}

	&.s-btn-primary-outline {
		--btn-bg: transparent;
		--btn-text: #0359af;
		--btn-border: 1px solid #50a5fc;
		--btn-bg-hover: #e6f2ff;
	}

	&.s-btn-primary-ghost {
		--btn-bg: transparent;
		--btn-text: #0359af;
		--btn-border: none;
		--btn-bg-hover: #e6f2ff;
	}
	&.s-btn-neutral {
		--btn-bg: #F0F1F3;
		--btn-text: #2C3035;
		--btn-bg-hover: #E1E2E6;
	}
	&.s-btn-neutral-outline {
		--btn-bg: #FFFFFF;
		--btn-text: #2C3035;
		--btn-border: 1px solid #C4C6CC;
		--btn-border-hover: 1px solid #A7AAAF;
		--btn-bg-hover: #F0F1F3;
	}
	&.s-btn-neutral-ghost {
		--btn-bg: transparent;
		--btn-text: #505458;
		--btn-text-hover: #2C3035;
		--btn-border: none;
		--btn-bg-hover: #F0F1F3;
	}

	&.s-btn-danger {
		--btn-bg: #de1827;
		--btn-text: #FFFFFF;
		--btn-border: none;
		--btn-bg-hover: #a5181c;
	}

	&.s-btn-danger-outline {
		--btn-bg: transparent;
		--btn-text: #de1827;
		--btn-text-hover: #a5181c;
		--btn-border: 1px solid #de1827;
		--btn-bg-hover: #faf1f4;
	}

	&.s-btn-danger-ghost {
		--btn-bg: transparent;
		--btn-text: #de1827;
		--btn-text-hover: #a5181c;
		--btn-border: none;
		--btn-bg-hover: #faf1f4;
	}
	&.s-btn-warning {
		--btn-bg: #88601a;
		--btn-text: #FFFFFF;
		--btn-border: none;
		--btn-bg-hover: #6b4612;
	}

	&.s-btn-warning-outline {
		--btn-bg: transparent;
		--btn-text: #88601a;
		--btn-text-hover: #6b4612;
		--btn-border: 1px solid #c39a26;
		--btn-bg-hover: #fff5dc;
	}

	&.s-btn-warning-ghost {
		--btn-bg: transparent;
		--btn-text: #88601a;
		--btn-border: none;
		--btn-bg-hover: #fff5dc;
	}
	&.s-btn-info {
		--btn-bg: #456a6d;
		--btn-text: #FFFFFF;
		--btn-border: none;
		--btn-bg-hover: #314b4e;
	}
	&.s-btn-info-outline {
		--btn-bg: transparent;
		--btn-text: #314b4e;
		--btn-text-hover: #1e2d2f;
		--btn-border: 1px solid #456a6d;
		--btn-bg-hover: #eff5f5;
	}
	&.s-btn-info-ghost {
		--btn-bg: transparent;
		--btn-text: #314b4e;
		--btn-text-hover: #1e2d2f;
		--btn-border: none;
		--btn-bg-hover: #eff5f5;
	}
	&.s-btn-success {
		--btn-bg: #1b7e39;
		--btn-text: #FFFFFF;
		--btn-border: none;
		--btn-bg-hover: #0d6225;
	}
	&.s-btn-success-outline {
		--btn-bg: transparent;
		--btn-text: #0d6225;
		--btn-text-hover: #014114;
		--btn-border: 1px solid #0d6225;
		--btn-bg-hover: #ddffe7;
	}
	&.s-btn-success-ghost {
		--btn-bg: transparent;
		--btn-text: #0d6225;
		--btn-border: none;
		--btn-bg-hover: #ddffe7;
	}

	&.s-btn-disabled {
		cursor: not-allowed;
	}

	&.s-btn-disabled {
		opacity: 0.5;
	}

	/* Size and state variants */
	&.s-btn-full-width {
		width: 100%;
	}

	&.s-btn-small {
		height: 1.75rem;
	}

	&.s-btn-small {
		padding-left: 8px;
		padding-right: 8px;
	}

	&.s-btn-small {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	&.s-btn-small {
		font-size: 14px;
		line-height: 20px;
	}

	&.s-btn-small {
		line-height: 1;
	}

	&.s-btn-large {
		height: 2.25rem;
	}

	&.s-btn-large {
		padding-left: 16px;
		padding-right: 16px;
	}

	&.s-btn-large {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	&.s-btn-large {
		font-size: 14px;
		line-height: 20px;
	}

	&.s-btn-large {
		line-height: 1;
	}

	&:is(.s-btn-loading, .s-btn-disabled) {
		cursor: not-allowed;
	}

	&.s-btn-loading {
		opacity: 0.5;
	}
}

/*
 * Guard against external/global `.s-btn svg { margin: auto }` rules (e.g. the
 * Vue `s-btn` styles bundled in some consumer apps) leaking onto our spinner
 * and icons. The extra class selector raises specificity above `.s-btn svg`
 * so the reset wins regardless of stylesheet load order.
 */
.s-btn svg.s-button-spinner,
.s-btn .s-button-icon svg {
	margin: 0;
}.s-badge {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	font-size: 12px;
	line-height: 16px;
	line-height: 1;
	background-color: var(--badge-bg);
	color: var(--badge-text);
	border-color: var(--badge-border);

	/* Size variants */
	&.s-badge-regular {
		height: 20px;
	}
	&.s-badge-regular {
		padding-left: 8px;
		padding-right: 8px;
	}
	&.s-badge-regular {
		padding-top: 4px;
		padding-bottom: 4px;
	}
	&.s-badge-medium {
		height: 24px;
	}
	&.s-badge-medium {
		padding-left: 8px;
		padding-right: 8px;
	}
	&.s-badge-medium {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	&.s-badge-large {
		height: 1.75rem;
	}

	&.s-badge-large {
		padding-left: 12px;
		padding-right: 12px;
	}

	&.s-badge-large {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	&.s-badge-rounded-full {
		border-radius: 9999px;
	}

	/* Color variants */
	&.s-badge-primary {
		--badge-bg: #e6f2ff;
		--badge-text: #0359af;
		--badge-border: #b4d9fe;

		&.s-badge-dark {
			--badge-bg: #0472e1;
			--badge-text: #FFFFFF;
			--badge-border: transparent;
		}
	}

	&.s-badge-neutral {
		--badge-bg: #F0F1F3;
		--badge-text: #505458;
		--badge-border: #E1E2E6;

		&.s-badge-dark {
			--badge-bg: #62676D;
			--badge-text: #FFFFFF;
			--badge-border: transparent;
		}
	}

	&.s-badge-danger {
		--badge-bg: #faf1f4;
		--badge-text: #a5181c;
		--badge-border: #ffd6d9;

		&.s-badge-dark {
			--badge-bg: #de1827;
			--badge-text: #FFFFFF;
			--badge-border: transparent;
		}
	}

	&.s-badge-warning {
		--badge-bg: #fff5dc;
		--badge-text: #6b4612;
		--badge-border: #ffedb8;

		&.s-badge-dark {
			--badge-bg: #ffd847;
			--badge-text: #6b4612;
			--badge-border: transparent;
		}
	}

	&.s-badge-success {
		--badge-bg: #ddffe7;
		--badge-text: #0d6225;
		--badge-border: #a8f3be;

		&.s-badge-dark {
			--badge-bg: #1b7e39;
			--badge-text: #FFFFFF;
			--badge-border: transparent;
		}
	}

	&.s-badge-info {
		--badge-bg: #eff5f5;
		--badge-text: #456a6d;
		--badge-border: #d0e0e1;

		&.s-badge-dark {
			--badge-bg: #59888c;
			--badge-text: #FFFFFF;
			--badge-border: transparent;
		}
	}

	&.s-badge-brand {
		--badge-bg: #bff90b;
		--badge-text: #012a38;
		--badge-border: #e6eaeb;

		&.s-badge-dark {
			--badge-bg: #012a38;
			--badge-text: #bff90b;
			--badge-border: transparent;
		}
	}

	/* Style variants */
	&.s-badge-outline {
		--badge-bg: transparent;
	}
}.s-checkbox-container {
	display: flex;
	flex-direction: column;
}

.s-checkbox-container > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(2px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(2px * var(--tw-space-y-reverse));
}

.s-checkbox-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

/* Checkbox input wrapper */
.s-checkbox-input-wrapper {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	line-height: 0;
}

/* Label and description content wrapper */
.s-checkbox-content-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.s-checkbox-root {
	--checkbox-bg: #FFFFFF;
	--checkbox-border: #8A8D93;
	--checkbox-text: #1A1D21;
	--checkbox-bg-hover: #F0F1F3;
	--checkbox-bg-disabled: #C4C6CC;
	--checkbox-border-disabled: #C4C6CC;
	--checkbox-text-disabled: #FFFFFF;
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	border-radius: 2px;
	line-height: 1;
	--tw-ring-offset-width: 1px;
	transition-property: box-shadow;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	background-color: var(--checkbox-bg);
	border: 1px solid var(--checkbox-border);
	color: var(--checkbox-text);


	&:focus-visible {
		outline: 2px solid transparent;
		outline-offset: 2px;
	}


	&:focus-visible {
		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	}


	&:focus-visible {
		--tw-ring-opacity: 1;
		--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	}

	&:disabled {
		cursor: not-allowed;
	}

	&:disabled {
		background-color: var(--checkbox-bg-disabled);
		border-color: var(--checkbox-border-disabled);
		color: var(--checkbox-text-disabled);
	}

	/* Checked state */
	&:is([data-state='checked'], [data-indeterminate='true']) {
		--checkbox-bg: #0472e1;
		--checkbox-border: #0472e1;
		--checkbox-text: #FFFFFF;
		--checkbox-border-disabled: #E1E2E6;
	}

	/* Error validation state */
	&[data-validation-status='error'] {

		/* Error unchecked state */
		&[data-state='unchecked'] {
			--checkbox-bg: #FFFFFF;
			--checkbox-border: #de1827;
			--checkbox-text: #de1827;
			--checkbox-bg-hover: #faf1f4;
		}

		/* Error checked state */
		&:is([data-state='checked'], [data-indeterminate='true']) {
			--checkbox-bg: #de1827;
			--checkbox-border: #de1827;
			--checkbox-text: #FFFFFF;
			--checkbox-bg-hover: #a5181c;
			--checkbox-border-disabled: #E1E2E6;
		}
	}
}

.s-checkbox-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
}

.s-checkbox-label {
	cursor: pointer;
	font-size: 14px;
	line-height: 20px;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));

	&.disabled {
		cursor: not-allowed;
	}
}

/* If the checkbox has a description, use para-medium for the label */
.s-checkbox-content-wrapper:has(.s-checkbox-description) .s-checkbox-label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	line-height: 1;
}

.s-checkbox-description {
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

/* Checkbox Group Styles */
.s-checkbox-group-container {
	display: flex;
	flex-direction: column;
}
.s-checkbox-group-container > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(24px * var(--tw-space-y-reverse));
}

.s-checkbox-group-title {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));

	&.s-checkbox-group-title-disabled {
		--tw-text-opacity: 1;
		color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	}
}

.s-checkbox-group-description {
	margin-top: 2px !important;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-checkbox-group {
	display: flex;
	gap: 12px;
}

.s-checkbox-group-vertical {
	flex-direction: column;
}

.s-checkbox-group-horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
}

.s-checkbox-group-disabled {
	cursor: not-allowed;
	opacity: 0.6;
}.s-tooltip {
	position: relative;
	display: inline-block;
	cursor: help;
	font-size: 0.875rem;
	line-height: 1.25rem;
	text-decoration-style: dotted;
	text-underline-offset: 4px
}

/* Base s-tooltip content styles */
.s-tooltip-content {
	visibility: visible;
	position: relative;
	margin: 0px;
	display: flex;
	width: 16rem;
	cursor: default;
	flex-direction: column
}
.s-tooltip-content > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}
.s-tooltip-content {
	border-radius: 0.25rem;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
	opacity: 1;
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

/* Color variants */
.s-tooltip-dark .s-tooltip-content {
	--tw-bg-opacity: 1;
	background-color: rgb(1 42 56 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(230 234 235 / var(--tw-text-opacity, 1))
}

.s-tooltip-light .s-tooltip-content {
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(1 42 56 / var(--tw-text-opacity, 1))
}

/* Width variants */
.s-tooltip-width-tight .s-tooltip-content {
	width: auto;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	font-size: 0.75rem;
	line-height: 1rem
}

.s-tooltip-width-small .s-tooltip-content {
	max-width: 12rem
}

.s-tooltip-width-regular .s-tooltip-content {
	max-width: 16rem
}

.s-tooltip-width-large .s-tooltip-content {
	max-width: 24rem
}

/* Tooltip arrow */
.s-tooltip-arrow {
	height: 0.375rem;
	width: 0.75rem;
	fill: #F0F1F3;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1))
}

.s-tooltip-arrow-dark {
	fill: #012a38
}

.s-tooltip-arrow-light {
	fill: #fff
}

/* Link styling */
.s-tooltip-link a {
	--tw-text-opacity: 1;
	color: rgb(30 140 251 / var(--tw-text-opacity, 1));
	text-decoration-line: underline
}
.s-tooltip-link a:hover {
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1))
}.s-combobox-container {

    display: flex;

    flex-direction: column
}

.s-combobox-container > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(4px * var(--tw-space-y-reverse))
}

.s-combobox-trigger {

    box-sizing: border-box;

    display: flex;

    width: 100%;

    align-items: center;

    justify-content: space-between;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    border-radius: 4px;

    border-width: 1px;

    border-style: solid;

    --tw-border-opacity: 1;

    border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

    font-size: 14px;

    line-height: 20px;

    --tw-ring-offset-color: #FFFFFF;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}

.s-combobox-trigger:focus-within {

    outline: 2px solid transparent;

    outline-offset: 2px;

    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);

    --tw-ring-opacity: 1;

    --tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));

    --tw-ring-offset-width: 1px
}

.s-combobox-trigger[data-disabled='true'] {

    cursor: not-allowed;

    --tw-border-opacity: 1;

    border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));

    --tw-bg-opacity: 1;

    background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));

    --tw-text-opacity: 1;

    color: rgb(138 141 147 / var(--tw-text-opacity, 1))
}

.s-combobox-trigger[data-invalid='true'] {

    --tw-border-opacity: 1;

    border-color: rgb(222 24 39 / var(--tw-border-opacity, 1))
}

.s-combobox-trigger[data-invalid='true']:focus-within {

    --tw-border-opacity: 1;

    border-color: rgb(222 24 39 / var(--tw-border-opacity, 1));

    --tw-ring-opacity: 1;

    --tw-ring-color: rgb(222 24 39 / var(--tw-ring-opacity, 1))
}

.s-combobox-small .s-combobox-trigger {

    height: 1.75rem;

    gap: 4px;

    padding: 4px
}

.s-combobox-regular .s-combobox-trigger {

    height: 32px;

    gap: 2px;

    padding: 8px
}

.s-combobox-large .s-combobox-trigger {

    height: 40px;

    gap: 2px;

    padding: 16px
}

.s-combobox-prefix,
.s-combobox-suffix {

    display: flex;

    flex-shrink: 0;

    align-items: center;

    --tw-text-opacity: 1;

    color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

.s-combobox-trigger[data-disabled='true'] .s-combobox-prefix,
.s-combobox-trigger[data-disabled='true'] .s-combobox-suffix {

    --tw-text-opacity: 1;

    color: rgb(167 170 175 / var(--tw-text-opacity, 1))
}

.s-combobox-value-area {

    display: flex;

    min-width: 0px;

    flex: 1 1 0%;

    align-items: center;

    gap: 4px;

    overflow: hidden;

    line-height: 1
}

.s-combobox-input {

    min-width: 72px;

    flex: 1 1 0%;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    border-style: none;

    background-color: transparent;

    padding: 0;

    font-size: 14px;

    line-height: 20px;

    line-height: 1;

    --tw-text-opacity: 1;

    color: rgb(26 29 33 / var(--tw-text-opacity, 1));

    outline: 2px solid transparent;

    outline-offset: 2px
}

.s-combobox-input::placeholder {

    --tw-text-opacity: 1;

    color: rgb(138 141 147 / var(--tw-text-opacity, 1))
}

.s-combobox-input:focus {

    border-style: none;

    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);

    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.s-combobox-input:disabled {

    cursor: not-allowed;

    --tw-text-opacity: 1;

    color: rgb(138 141 147 / var(--tw-text-opacity, 1))
}

.s-combobox-trigger[data-disabled='true'] .s-combobox-input::placeholder {

    --tw-text-opacity: 1;

    color: rgb(138 141 147 / var(--tw-text-opacity, 1))
}

.s-combobox-chip {

    display: inline-flex;

    flex-shrink: 0;

    align-items: center;

    gap: 2px;

    border-radius: 6px;

    --tw-bg-opacity: 1;

    background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));

    padding-left: 4px;

    padding-right: 4px;

    padding-top: 2px;

    padding-bottom: 2px;

    font-size: 12px;

    line-height: 16px;

    --tw-text-opacity: 1;

    color: rgb(44 48 53 / var(--tw-text-opacity, 1))
}

.s-combobox-chip-remove {

    display: flex;

    width: 12px;

    height: 12px;

    align-items: center;

    justify-content: center;

    border-radius: 2px
}

.s-combobox-chip-remove:hover {

    --tw-bg-opacity: 1;

    background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1))
}

.s-combobox-chip-remove:focus {

    outline: 2px solid transparent;

    outline-offset: 2px
}

.s-combobox-chip-remove:focus-visible {

    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);

    --tw-ring-opacity: 1;

    --tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1))
}

.s-combobox-actions {

    display: flex;

    flex-shrink: 0;

    align-items: center;

    gap: 4px
}

.s-combobox-clear-button {

    display: flex;

    width: 16px;

    height: 16px;

    align-items: center;

    justify-content: center;

    border-radius: 2px;

    --tw-text-opacity: 1;

    color: rgb(98 103 109 / var(--tw-text-opacity, 1));

    opacity: 0.5
}

.s-combobox-clear-button:hover {

    opacity: 1
}

.s-combobox-clear-button:focus {

    outline: 2px solid transparent;

    outline-offset: 2px
}

.s-combobox-clear-button:focus-visible {

    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);

    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);

    --tw-ring-opacity: 1;

    --tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1))
}

.s-combobox-chevron {

    width: 16px;

    height: 16px;

    --tw-text-opacity: 1;

    color: rgb(98 103 109 / var(--tw-text-opacity, 1));

    opacity: 0.5;

    transition-property: transform;

    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    transition-duration: 150ms
}

.s-combobox-trigger[data-disabled='true'] .s-combobox-clear-button,
.s-combobox-trigger[data-disabled='true'] .s-combobox-chevron {

    --tw-text-opacity: 1;

    color: rgb(138 141 147 / var(--tw-text-opacity, 1))
}

.s-combobox-trigger[data-open='true'] .s-combobox-chevron {

    --tw-rotate: 180deg;

    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.s-combobox-content {

    position: relative;

    z-index: 50;

    max-height: 24rem;

    overflow: hidden;

    border-radius: 4px;

    border-width: 1px;

    border-style: solid;

    --tw-border-opacity: 1;

    border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

    --tw-text-opacity: 1;

    color: rgb(26 29 33 / var(--tw-text-opacity, 1));

    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);

    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.s-combobox-content[data-state="open"] {

    animation-name: enter;

    animation-duration: 150ms;

    --tw-enter-opacity: initial;

    --tw-enter-scale: initial;

    --tw-enter-rotate: initial;

    --tw-enter-translate-x: initial;

    --tw-enter-translate-y: initial
}

.s-combobox-content[data-state="closed"] {

    animation-name: exit;

    animation-duration: 150ms;

    --tw-exit-opacity: initial;

    --tw-exit-scale: initial;

    --tw-exit-rotate: initial;

    --tw-exit-translate-x: initial;

    --tw-exit-translate-y: initial;

    --tw-exit-opacity: 0
}

.s-combobox-content[data-state="open"] {

    --tw-enter-opacity: 0
}

.s-combobox-content[data-state="closed"] {

    --tw-exit-scale: .95
}

.s-combobox-content[data-state="open"] {

    --tw-enter-scale: .95
}

.s-combobox-content[data-side="bottom"] {

    --tw-enter-translate-y: -0.5rem
}

.s-combobox-content[data-side="left"] {

    --tw-enter-translate-x: 0.5rem
}

.s-combobox-content[data-side="right"] {

    --tw-enter-translate-x: -0.5rem
}

.s-combobox-content[data-side="top"] {

    --tw-enter-translate-y: 0.5rem
}

.s-combobox-list {

    max-height: 300px;

    overflow-y: auto;

    overflow-x: hidden;

    padding-top: 4px;

    padding-bottom: 4px
}

.s-combobox-empty {

    padding-left: 16px;

    padding-right: 16px;

    padding-top: 36px;

    padding-bottom: 36px;

    text-align: center;

    font-size: 14px;

    line-height: 20px;

    --tw-text-opacity: 1;

    color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

.s-combobox-loading > :not([hidden]) ~ :not([hidden]) {

    --tw-space-y-reverse: 0;

    margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));

    margin-bottom: calc(4px * var(--tw-space-y-reverse))
}

.s-combobox-loading {

    padding-left: 12px;

    padding-right: 12px;

    padding-top: 4px;

    padding-bottom: 4px
}

.s-combobox-loading-option {

    display: flex;

    align-items: center;

    gap: 8px;

    border-radius: 2px;

    padding-left: 12px;

    padding-right: 12px;

    padding-top: 0.375rem;

    padding-bottom: 0.375rem
}

.s-combobox-loading-icon {

    width: 0.875rem;

    height: 0.875rem;

    flex-shrink: 0
}

@keyframes pulse {

    50% {

        opacity: .5
    }
}

.s-combobox-loading-icon {

    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    border-radius: 9999px;

    --tw-bg-opacity: 1;

    background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1))
}

.s-combobox-loading-text {

    display: flex;

    min-width: 0px;

    flex: 1 1 0%;

    flex-direction: column;

    gap: 4px
}

.s-combobox-loading-line {

    height: 0.5rem
}

@keyframes pulse {

    50% {

        opacity: .5
    }
}

.s-combobox-loading-line {

    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

    border-radius: 0.25rem;

    --tw-bg-opacity: 1;

    background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1))
}

.s-combobox-loading-line-primary {

    width: 60%
}

.s-combobox-loading-line-secondary {

    width: 40%
}

.s-combobox-group + .s-combobox-group {

    border-top-width: 1px;

    border-style: solid;

    --tw-border-opacity: 1;

    border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-combobox-group-label {

    position: sticky;

    top: 0px;

    z-index: 10;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));

    padding-left: 12px;

    padding-right: 12px;

    padding-top: 8px;

    padding-bottom: 8px;

    font-size: 12px;

    line-height: 16px;

    font-weight: 600;

    --tw-text-opacity: 1;

    color: rgb(80 84 88 / var(--tw-text-opacity, 1))
}

.s-combobox-option {

    position: relative;

    display: flex;

    width: 100%;

    cursor: pointer;

    user-select: none;

    align-items: center;

    border-radius: 2px;

    border-bottom-width: 1px;

    border-color: transparent;

    padding-left: 12px;

    padding-right: 12px;

    padding-top: 0.375rem;

    padding-bottom: 0.375rem;

    text-align: left;

    font-size: 14px;

    line-height: 20px;

    outline: 2px solid transparent;

    outline-offset: 2px
}

.s-combobox-option:not(.s-combobox-option-selected):hover,
.s-combobox-option:not(.s-combobox-option-selected)[data-active='true'] {

    --tw-bg-opacity: 1;

    background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1))
}

.s-combobox-option-selected {

    border-radius: 0;

    border-bottom-width: 1px;

    --tw-border-opacity: 1;

    border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));

    --tw-bg-opacity: 1;

    background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1))
}

.s-combobox-option-selected:hover,
.s-combobox-option-selected[data-active='true'] {

    --tw-bg-opacity: 1;

    background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1))
}

.s-combobox-option-disabled {

    pointer-events: none;

    opacity: 0.5
}

.s-combobox-option-content {

    display: flex;

    min-width: 0px;

    flex: 1 1 0%;

    align-items: center;

    gap: 8px
}

.s-combobox-option-icon {

    width: 0.875rem;

    height: 0.875rem;

    flex-shrink: 0;

    --tw-text-opacity: 1;

    color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

.s-combobox-option-text {

    display: flex;

    min-width: 0px;

    flex-direction: column
}

.s-combobox-option-label {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap
}

.s-combobox-option-description {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    line-height: 16px;

    --tw-text-opacity: 1;

    color: rgb(80 84 88 / var(--tw-text-opacity, 1))
}

.s-combobox-option-check {

    margin-left: auto;

    width: 16px;

    height: 16px;

    flex-shrink: 0;

    --tw-text-opacity: 1;

    color: rgb(27 126 57 / var(--tw-text-opacity, 1))
}

.s-combobox-description {

    font-size: 12px;

    line-height: 16px;

    --tw-text-opacity: 1;

    color: rgb(80 84 88 / var(--tw-text-opacity, 1))
}

.s-combobox-validation {

    font-size: 12px;

    line-height: 16px
}

.s-combobox-validation-success {

    --tw-text-opacity: 1;

    color: rgb(13 98 37 / var(--tw-text-opacity, 1))
}
.card-component {
	width: 100%;
}

.card-component > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.card {
	border-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.card.flat {
	border-color: transparent !important;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card.regular {
	border-width: 1px;
	border-style: solid;
	border-color: rgb(240 241 243 / var(--tw-border-opacity, 1));
	--tw-border-opacity: 1;
	border-bottom-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card.raised {
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card.padding-small {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.card.padding-large {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.card.padding-regular {
	padding: 1rem;
}

.card.background-transparent {
	background-color: transparent;
}

.card.background-neutral {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

.card.background-danger {
	--tw-bg-opacity: 1;
	background-color: rgb(250 241 244 / var(--tw-bg-opacity, 1));
}

.card.background-warning {
	--tw-bg-opacity: 1;
	background-color: rgb(255 250 237 / var(--tw-bg-opacity, 1));
}

.card.background-primary {
	--tw-bg-opacity: 1;
	background-color: rgb(242 246 247 / var(--tw-bg-opacity, 1));
}

.card.background-success {
	--tw-bg-opacity: 1;
	background-color: rgb(238 255 243 / var(--tw-bg-opacity, 1));
}

.card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.card-header.outside {
	padding-left: 1rem;
	font-size: 1rem;
	line-height: 1.5rem;
}

.card-header.inside {
	padding-bottom: 0.5rem;
	padding-top: 0.125rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	line-height: 1.25;
}

.card-header div:last-of-type {
	margin-top: -0.25rem;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

.card-header.outside div:last-of-type {
	padding-bottom: 0.25rem;
}

.card-body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.card-body > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.card-body {
	height: inherit;
}

.card.focused {
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.main-card-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
}

@media (min-width: 640px) {

	.main-card-header.start {
		align-items: flex-start;
	}

	.main-card-header.center {
		align-items: center;
	}

	.main-card-header.end {
		align-items: flex-end;
	}
}

.main-card-header .left > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(4px * var(--tw-space-y-reverse));
}

.main-card-header .title {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.main-card-header .description {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.main-card-header .element {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.main-card-header .right {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}

@media (min-width: 640px) {

	.main-card-header .right {
		flex-wrap: nowrap;
	}

	.main-card-header-align.start {
		align-items: flex-start;
	}

	.main-card-header-align.center {
		align-items: center;
	}

	.main-card-header-align.end {
		align-items: flex-end;
	}
}

.card-divider > :not([hidden]) ~ :not([hidden]) {
	--tw-divide-x-reverse: 0;
	border-right-width: calc(0px * var(--tw-divide-x-reverse));
	border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
	--tw-divide-y-reverse: 0;
	border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
	border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
	border-style: solid;
	--tw-divide-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-divide-opacity, 1));
}

.card-no-divider>* {
	padding-top: 8px;
	padding-bottom: 8px;
}

.card-divider>* {
	padding-top: 16px;
	padding-bottom: 16px;
}

.card.dotted-border {
	border-width: 1px;
	border-style: dashed;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}

.card.bordered {
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}.s-main-card-header {

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	gap: 16px;

	border-radius: 6px;

	--tw-bg-opacity: 1;

	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));

	padding: 16px;

	&.s-main-card-header-align.s-start {

		align-items: flex-start
	}

	&.s-main-card-header-align.s-center {

		align-items: center
	}

	&.s-main-card-header-align.s-end {

		align-items: flex-end
	}

	.s-left {

		display: flex
	}

	.s-left {

		flex-direction: column
	}

	.s-left {

		gap: 4px
	}

	.s-title {

		font-size: 16px;

		line-height: 24px;

		font-weight: 600
	}

	.s-title {

		line-height: 1 !important
	}

	.s-title {

		--tw-text-opacity: 1;

		color: rgb(26 29 33 / var(--tw-text-opacity, 1))
	}

	.s-description {

		font-size: 0.875rem;

		line-height: 1.25rem
	}

	.s-description {

		--tw-text-opacity: 1;

		color: rgb(80 84 88 / var(--tw-text-opacity, 1))
	}

	.s-right {

		display: flex
	}

	.s-right {

		align-items: center
	}
}/* Confetti animations */

@keyframes confettiDrop {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.2;
  }

  5% {
    opacity: 0.5;
  }

  15% {
    opacity: 0.8;
  }

  25% {
    opacity: 0.6;
  }

  35% {
    opacity: 0.3;
  }

  45% {
    opacity: 0.1;
  }

  50% {
    opacity: 0;
  }

  100% {
    transform: translateY(var(--confetti-drop-height, 200px)) rotate(360deg);
    opacity: 0;
  }
}

@keyframes rotateClockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateCounterclockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

.s-animate-confetti-rotate-clockwise {
  animation: rotateClockwise 3s linear infinite;
}

.s-animate-confetti-rotate-counterclockwise {
  animation: rotateCounterclockwise 3s linear infinite;
}



/* Draggable List Styles */

.s-draggable-list {
	container-type: inline-size;
	max-width: 100%;
	min-width: 0;
}

.s-draggable-list > * {
	min-width: 0;
}

.s-draggable-list-edge-drop-container {
	position: relative;
}

.s-draggable-item {
	touch-action: manipulation;
}

.s-draggable-item::before {
	background: linear-gradient(
		135deg,
		hsl(0, 0%, 92%) 0%,
		hsl(0, 0%, 92%) 50%,
		hsl(0, 0%, 83%) 50%,
		hsl(0, 0%, 83%) 100%
	);
}

.s-draggable-group::before {
	background: linear-gradient(
		135deg,
		hsl(0, 0%, 92%) 0%,
		hsl(0, 0%, 92%) 50%,
		hsl(0, 0%, 83%) 50%,
		hsl(0, 0%, 83%) 100%
	);
}

.s-draggable-content {
	min-width: 0px;
	flex: 1 1 0%;
	overflow-wrap: anywhere;
}

.s-draggable-action {
	display: flex;
	min-width: 0px;
	flex-shrink: 0;
	align-items: center;
	gap: 16px;
}

.s-draggable-action :where(button, a, [role='button']) {
	min-height: 32px;
	min-width: 32px;
}

.s-draggable-handle {
	display: flex;
	min-height: 32px;
	min-width: 32px;
	align-items: center;
	justify-content: center;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}

.s-draggable-handle:focus {
	outline: none;
}

.s-draggable-handle:focus-visible {
	border-radius: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(80 165 252 / var(--tw-ring-opacity, 1));
}

.s-draggable-group-header {
	position: relative;
	isolation: isolate;
	display: flex;
	min-width: 0px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding: 8px;
	--tw-shadow: 0px 0px 2px 0px rgba(0, 0, 30, 0.10), 0px 2px 4px 0px rgba(0, 0, 30, 0.10), 0px 4px 8px 0px rgba(0, 0, 30, 0.10);
	--tw-shadow-colored: 0px 0px 2px 0px var(--tw-shadow-color), 0px 2px 4px 0px var(--tw-shadow-color), 0px 4px 8px 0px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-draggable-group-header::before {
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	width: 8px;
	height: 8px;
	--tw-content: '';
	content: var(--tw-content);
}

.s-draggable-group-header-content {
	min-width: 0px;
	flex: 1 1 0%;
}

.s-draggable-group-stack {
	position: absolute;
	inset: 0px;
	left: 0px;
	z-index: -1;
	width: 100%;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0px 0px 1px 0px rgba(0, 0, 30, 0.10), 0px 1px 2px 0px rgba(0, 0, 30, 0.10), 0px 2px 4px 0px rgba(0, 0, 30, 0.10);
	--tw-shadow-colored: 0px 0px 1px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 2px 4px 0px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-draggable-group-stack-mid {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: -0.375rem;
	z-index: -2;
	width: 100%;
	--tw-scale-x: 0.96;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0px 0px 1px 0px rgba(0, 0, 30, 0.10), 0px 1px 2px 0px rgba(0, 0, 30, 0.10), 0px 2px 4px 0px rgba(0, 0, 30, 0.10);
	--tw-shadow-colored: 0px 0px 1px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 2px 4px 0px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-draggable-group-stack-back {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: -10px;
	z-index: -3;
	width: 100%;
	--tw-scale-x: 0.92;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0px 0px 1px 0px rgba(0, 0, 30, 0.10), 0px 1px 2px 0px rgba(0, 0, 30, 0.10), 0px 2px 4px 0px rgba(0, 0, 30, 0.10);
	--tw-shadow-colored: 0px 0px 1px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 2px 4px 0px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-draggable-group-items {
	margin-left: 16px;
}

/* Dragging state */
.s-dragging {
	z-index: 1000;
	cursor: grabbing !important;
	user-select: none;
}

/* Drag overlay styles */
.s-drag-overlay {
	cursor: grabbing;
	opacity: 0.9;
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Floating clone rendered inside `<DragOverlay>` while a row is being
   dragged. Sized by dnd-kit to match the source item's bounding box, so
   the clone keeps its original dimensions regardless of which item it's
   hovering over — preventing the visual stretch/compress that occurs
   when items have different heights. */
.s-drag-overlay-item {
	cursor: grabbing;
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

/* Drop indicator */
.s-drop-indicator {
	position: absolute;
	left: 0px;
	right: 0px;
	height: 0.125rem;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
}
.s-drop-indicator::before {
	position: absolute;
	left: -0.25rem;
	top: -0.25rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	--tw-content: '';
	content: var(--tw-content);
}
.s-drop-indicator::after {
	position: absolute;
	right: -0.25rem;
	top: -0.25rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	--tw-content: '';
	content: var(--tw-content);
}
.s-drop-indicator {
	z-index: 10;
}

.s-drop-indicator-top {
	top: -0.25rem;
}

.s-drop-indicator-bottom {
	bottom: -0.25rem;
}

.s-draggable-edge-drop-zone {
	pointer-events: none;
	position: absolute;
	left: 0px;
	right: 0px;
	z-index: 20;
	height: 16px;
}

.s-draggable-edge-drop-zone-top {
	top: -8px;
}

.s-draggable-edge-drop-zone-bottom {
	bottom: -8px;
}

.s-draggable-edge-drop-zone .s-drop-indicator {
	top: 50%;
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Overlay styles for dnd-kit */
.sortable-overlay {
	opacity: 0.8;
}

@container (max-width: 520px) {
	.s-draggable-item-has-action {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.s-draggable-action {
		grid-column: 2;
		justify-content: flex-start;
	}

	.s-draggable-group-header {
		align-items: flex-start;
	}

	.s-draggable-group-items {
		margin-left: 0;
	}
}
.s-input-container {
	display: flex;
	flex-direction: column;
}

.s-input-container > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(4px * var(--tw-space-y-reverse));
}

.s-input-wrapper {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: 4px;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.s-input-wrapper:focus-within {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}

.s-input-wrapper:has(.s-input-field:disabled) {
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-input-field-wrapper {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1;
}

.s-input-field {
	width: 100%;
	border-style: none;
	font-size: 0.875rem;
	line-height: 1.25rem;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-input-field::placeholder {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-input-field:focus {
	border-style: none;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.s-input-field:disabled {
	cursor: not-allowed;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Hide number input stepper/spinner */
.s-input-no-stepper::-webkit-outer-spin-button,
.s-input-no-stepper::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.s-input-no-stepper[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Size variants */
.s-input-small .s-input-wrapper {
	height: 1.75rem;
	padding: 4px;
}

.s-input-regular .s-input-wrapper {
	height: 32px;
	padding: 8px;
}

.s-input-large .s-input-wrapper {
	height: 40px;
	padding: 16px;
}

/* Input validation states */
.s-input-error .s-input-wrapper {
	--tw-border-opacity: 1;
	border-color: rgb(222 24 39 / var(--tw-border-opacity, 1));
}
.s-input-error .s-input-wrapper:focus-within {
	--tw-border-opacity: 1;
	border-color: rgb(222 24 39 / var(--tw-border-opacity, 1));
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(222 24 39 / var(--tw-ring-opacity, 1));
}

/* Clear button */
.s-input-clear-button {
	margin-left: 8px;
	margin-right: 8px;
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 0.25rem;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.s-input-clear-button:hover {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}
.s-input-clear-button:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
}
.s-input-clear-button:disabled {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-input-clear-button:has(+.s-input-append) {
	margin-right: 4px;
}

/* Prepend and append */
.s-input-prepend {
	margin-left: 8px;
	margin-right: 8px;
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Use :has() pseudo-class to detect disabled input and style prepend accordingly */
.s-input-wrapper:has(.s-input-field:disabled) .s-input-prepend {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-input-append {
	margin-left: 8px;
	margin-right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-input-append:disabled {
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-input-wrapper:has(.s-input-field:disabled) .s-input-append:has(.s-select-trigger) {
	margin-left: 0;
}

.s-input-append:not(:last-child) {
	margin-right: 4px;
}

/* Remove focus styles from SSelect when inside input append */
.s-input-append .s-select {
	margin-right: -0.5rem;
}

.s-input-append .s-select-trigger {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-right-width: 0px;
}

.s-input-append .s-select-trigger:focus-within {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-offset-width: 0px;
}

.s-input-append .s-select-trigger:focus {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-offset-width: 0px;
}

/* Description and validation message */
.s-input-description {
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-input-validation {
	font-size: 12px;
	line-height: 16px;
}

.s-input-validation-error {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

/* Color Indicator */
.s-input-color-indicator {
	margin-left: 8px;
	margin-right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.s-input-color-indicator-swatch {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.25rem;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

/* Input Suffix - CSS-only approach using inline flow */
.s-input-suffix-overlay {
	pointer-events: none;
	position: absolute;
	inset: 0px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Invisible text mirror that takes up space - suffix flows after it */
.s-input-value-mirror {
	visibility: hidden;
	white-space: pre;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

/* The actual suffix that appears after the text */
.s-input-suffix {
	margin-left: 4px;
	white-space: nowrap;
	font-size: 0.875rem;
	line-height: 1.25rem;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Match input padding for overlay */
.s-input-small .s-input-suffix-overlay {
	padding-left: 4px;
}

.s-input-regular .s-input-suffix-overlay {
	padding-left: 8px;
}

.s-input-large .s-input-suffix-overlay {
	padding-left: 16px;
}
.s-switch-root {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	cursor: pointer;
	align-items: center;
	border-radius: 9999px;
	border-width: 2px;
	border-color: transparent;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}.s-switch-root:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 2px;
	--tw-ring-offset-color: #fff;
}.s-switch-root {
	background-color: var(--switch-bg);
	
	&[data-state="checked"] {
		background-color: var(--switch-bg-checked);
	}

	&.s-switch-disabled {
		cursor: not-allowed;
	}

	&.s-switch-disabled {
		opacity: 0.5;
	}

	/* Size variants */
	&.s-switch-small {
		height: 16px;
	}
	&.s-switch-small {
		width: 1.75rem;
	}

	&.s-switch-medium {
		height: 20px;
	}

	&.s-switch-medium {
		width: 36px;
	}

	&.s-switch-large {
		height: 24px;
	}

	&.s-switch-large {
		width: 2.75rem;
	}

	/* Default colors (neutral when unchecked, primary when checked) */
	--switch-bg: #8A8D93;
	--switch-bg-checked: #0472e1;

	&:hover:not(.s-switch-disabled) {
		--switch-bg: #A7AAAF;
		
		&[data-state="checked"] {
			--switch-bg-checked: #0472e1;
		}
	}
}

.s-switch-thumb {
	pointer-events: none;
	display: block;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	
	&.s-switch-thumb-small {
		width: 12px;
		height: 12px;
	}
	
	&.s-switch-thumb-small {
		transform: translateX(0px);
		
		&[data-state="checked"] {
			transform: translateX(12px);
		}
	}

	&.s-switch-thumb-medium {
		width: 16px;
		height: 16px;
	}

	&.s-switch-thumb-medium {
		transform: translateX(0px);
		
		&[data-state="checked"] {
			transform: translateX(16px);
		}
	}

	&.s-switch-thumb-large {
		width: 20px;
		height: 20px;
	}

	&.s-switch-thumb-large {
		transform: translateX(0px);
		
		&[data-state="checked"] {
			transform: translateX(20px);
		}
	}
}

.s-switch-disabled .s-switch-thumb {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Wrapper styles for label and description */
.s-switch-wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;

	&.s-switch-wrapper-disabled {
		opacity: 0.5;
	}
}

.s-switch-content {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	gap: 4px;
}

/* Disabled state for SLabel when inside disabled switch wrapper */
.s-switch-wrapper-disabled .text-para-medium {
	cursor: not-allowed;
}

.s-switch-description {
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-switch-validation-message {
	margin-top: 4px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
} /* File Upload Component */
.s-file-upload {
	width: 100%;
}

.s-file-upload-label {
	margin-bottom: 0.5rem;
	display: block;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.s-file-upload-required {
	margin-left: 0.25rem;
	color: var(--file-upload-required-color);
}

/* Status Icon Colors */
.s-file-upload-status-error {
	color: var(--file-upload-status-error-color);
}

.s-file-upload-status-success {
	color: var(--file-upload-status-success-color);
}

.s-file-upload-status-warning {
	color: var(--file-upload-status-warning-color);
}

.s-file-upload-status-processing {
	color: var(--file-upload-status-processing-color);
}

/* Dropzone Styles */
.s-file-upload-dropzone {
	position: relative;
	display: block;
	cursor: pointer;
	border-radius: 8px;
	border-width: 1px;
	border-style: dashed;
	padding: 1.5rem;
	text-align: center;
	transition-property: all;
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	animation-duration: 200ms;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	border-color: var(--file-upload-dropzone-border);
	background-color: var(--file-upload-dropzone-bg);

	&:hover {
		border-color: var(--file-upload-dropzone-border-hover);
		background-color: var(--file-upload-dropzone-bg-hover);
	}

	&.s-file-upload-dropzone-active {
		border-color: var(--file-upload-dropzone-border-active);
		background-color: var(--file-upload-dropzone-bg-active);
	}
}

/* Hidden Input */
.s-file-upload-input {
	position: absolute;
	inset: 0px;
	height: 100%;
	width: 100%;
	cursor: pointer;
	opacity: 0;
}

/* Content Area */
.s-file-upload-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.s-file-upload-content > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.s-file-upload-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--file-upload-icon-color);
}

.s-file-upload-icon-svg {
	height: 1.5rem;
	width: 1.5rem;
}

.s-file-upload-text > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.s-file-upload-text {
	text-align: center;
}

.s-file-upload-placeholder {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.s-file-upload-helper {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Error Message */
.s-file-upload-error-message {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: var(--file-upload-error-message-color);
}

/* File List */
.s-file-upload-files {
	margin-top: 1rem;
}

.s-file-upload-files-title {
	margin-bottom: 0.5rem;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.s-file-upload-files-list > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.s-file-upload-file-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 0.25rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	/* Remove background - using transparent instead of themed background */
	background-color: transparent;
	/* color: var(--file-upload-file-item-color); */
}

.s-file-upload-file-name {
	flex: 1 1 0%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.s-file-upload-file-size {
	margin-left: 0.5rem;
	color: var(--file-upload-file-size-color);
}

/* Status Icons - increased size and spacing */
.s-file-upload-status-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

/* Component Variants */
.s-file-upload {
	/* Default theme variables */
	--file-upload-label-color: #3E4247;
	--file-upload-required-color: #a5181c;
	--file-upload-status-error-color: #a5181c;
	--file-upload-status-success-color: #0d6225;
	--file-upload-status-warning-color: #6b4612;
	--file-upload-status-processing-color: #0472e1;
	--file-upload-spinner-border: #82bffd;
	--file-upload-spinner-border-top: #0472e1;
	--file-upload-dropzone-border: #8A8D93;
	--file-upload-dropzone-bg: #F7F7F8;
	--file-upload-dropzone-border-hover: #8A8D93;
	--file-upload-dropzone-bg-hover: #F0F1F3;
	--file-upload-dropzone-border-active: #0472e1;
	--file-upload-dropzone-bg-active: #e6f2ff;
	--file-upload-icon-color: #8A8D93;
	--file-upload-placeholder-color: #3E4247;
	--file-upload-helper-color: #62676D;
	--file-upload-error-message-color: #a5181c;
	--file-upload-files-title-color: #3E4247;
	--file-upload-file-item-bg: #F0F1F3;
	--file-upload-file-item-color: #505458;
	--file-upload-file-size-color: #8A8D93;

	/* Variant Styles */
	&.s-file-upload-primary .s-file-upload-dropzone {
		--file-upload-dropzone-border: #50a5fc;
		--file-upload-dropzone-border-hover: #1e8cfb;
		--file-upload-dropzone-bg-hover: #e6f2ff;
	}

	&.s-file-upload-neutral .s-file-upload-dropzone {
		--file-upload-dropzone-border: #C4C6CC;
		--file-upload-dropzone-border-hover: #8A8D93;
		--file-upload-dropzone-bg-hover: #F0F1F3;
	}

	&.s-file-upload-outline .s-file-upload-dropzone {
		border-width: 2px;
	}

	&.s-file-upload-outline .s-file-upload-dropzone {
		border-style: solid;
	}

	&.s-file-upload-outline .s-file-upload-dropzone {
		background-color: transparent;
	}

	&.s-file-upload-outline .s-file-upload-dropzone {
		--file-upload-dropzone-border: #8A8D93;
		--file-upload-dropzone-bg: transparent;
		--file-upload-dropzone-bg-hover: #F0F1F3;
	}

	/* Size Variants */
	&.s-file-upload-large .s-file-upload-dropzone {
		padding: 2rem;
	}

	&.s-file-upload-large .s-file-upload-icon-svg {
		height: 4rem;
	}

	&.s-file-upload-large .s-file-upload-icon-svg {
		width: 4rem;
	}

	&.s-file-upload-large .s-file-upload-placeholder {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	/* State Variants */
	&.s-file-upload-disabled .s-file-upload-dropzone {
		cursor: not-allowed;
	}
	&.s-file-upload-disabled .s-file-upload-dropzone {
		opacity: 0.5;
	}
	&.s-file-upload-disabled .s-file-upload-dropzone {

		&:hover {
			--file-upload-dropzone-border-hover: #A7AAAF;
			--file-upload-dropzone-bg-hover: transparent;
		}
	}

	&.s-file-upload-disabled .s-file-upload-input {
		cursor: not-allowed;
	}

	&.s-file-upload-error .s-file-upload-dropzone {
		--file-upload-dropzone-border: #a5181c;
		--file-upload-dropzone-bg: #faf1f4;
	}

	&.s-file-upload-success .s-file-upload-dropzone {
		--file-upload-dropzone-border: #0d6225;
		--file-upload-dropzone-bg: #ddffe7;
	}

	/* Full Width */
	&.s-file-upload-full-width {
		width: 100%;
	}
}

/* Focus Styles - Separate rule to avoid nesting issues */
.s-file-upload-dropzone:has(.s-file-upload-input:focus-visible) {
	outline: none;
	border-style: solid;
	border-color: #0472e1;
}
@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(100%);
	}
}

/* Stop animation when not loading */
[data-loading="false"]::before {
	display: none !important;
	animation: none !important;
}/* Select Trigger */
.s-select-trigger {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	font-size: 14px;
	line-height: 20px;
	--tw-ring-offset-color: #FFFFFF;
}
.s-select-trigger::placeholder {
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}
.s-select-trigger:focus-within {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}
.s-select-trigger:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}
.s-select-trigger:disabled {
	cursor: not-allowed;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Size variants */
.s-select-regular .s-select-trigger {
	height: 32px;
	gap: 2px;
	padding: 8px;
}

.s-select-large .s-select-trigger {
	height: 40px;
	gap: 2px;
	padding: 16px;
}

.s-select-trigger-content {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1;
}

.s-select-trigger-icons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.s-select-chevron {
	width: 16px;
	height: 16px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	opacity: 0.5;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-select-trigger[aria-expanded='true'] .s-select-chevron {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.s-select-clear-button {
	display: flex;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	opacity: 0.5;
}

.s-select-clear-button:hover {
	opacity: 1;
}

.s-select-clear-button:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-select-clear-button:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
}

.s-select-trigger:disabled .s-select-clear-button,
.s-select-trigger:disabled .s-select-chevron {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* New: Prefix/Suffix containers */
.s-select-prefix {
	display: flex;
	align-items: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-select-suffix {
	display: flex;
	align-items: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Select Values */
.s-select-placeholder {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-select-single-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
}

.s-select-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.s-select-multiple-values-wrapper {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	gap: 4px;
	overflow: hidden;
}

.s-select-multiple-values {
	display: flex;
	align-items: center;
	gap: 4px;
	overflow: hidden;
}

.s-select-value-chip {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 2px;
	border-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
}

.s-select-overflow-badge {
	flex-shrink: 0;
	cursor: help;
}

.s-select-value-chip-remove {
	display: flex;
	width: 0.75rem;
	height: 0.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
}

.s-select-value-chip-remove:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}

.s-select-value-chip-remove:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

/* Select Content */
.s-select-content {
	position: relative;
	z-index: 50;
	max-height: 24rem;
	width: var(--radix-popover-trigger-width);
	min-width: min-content;
	overflow: hidden;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.s-select-content[data-state="open"] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}
.s-select-content[data-state="closed"] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
	--tw-exit-opacity: 0;
}
.s-select-content[data-state="open"] {
	--tw-enter-opacity: 0;
}
.s-select-content[data-state="closed"] {
	--tw-exit-scale: .95;
}
.s-select-content[data-state="open"] {
	--tw-enter-scale: .95;
}
.s-select-content[data-side="bottom"] {
	--tw-enter-translate-y: -0.5rem;
}
.s-select-content[data-side="left"] {
	--tw-enter-translate-x: 0.5rem;
}
.s-select-content[data-side="right"] {
	--tw-enter-translate-x: -0.5rem;
}
.s-select-content[data-side="top"] {
	--tw-enter-translate-y: 0.5rem;
}

/* Select Command */
.s-select-command {
	display: flex;
	flex-direction: column;
}

/* Select Search */
.s-select-search-wrapper {
	display: flex;
	align-items: center;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	padding: 8px;
}

.s-select-search-input {
	display: flex;
	height: 2rem;
	width: 100%;
	border-radius: 0.25rem;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	background-color: transparent;
	padding: 8px;
	font-size: 14px;
	line-height: 20px;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-select-search-input::placeholder {
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-select-search-input:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Select Options List */
.s-select-options-list {
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Select Empty */
.s-select-empty {
	padding-top: 36px;
	padding-bottom: 36px;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Select All Option */
.s-select-all-option {
	position: sticky;
	top: 0px;
	z-index: 2;
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.s-select-all-option-button {
	position: relative;
	display: flex;
	width: 100%;
	cursor: pointer;
	user-select: none;
	align-items: center;
	justify-content: flex-end;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	font-size: 14px;
	line-height: 20px;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-select-all-option-button .s-select-option-content {
	margin-left: auto;
	display: flex;
	width: auto;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	white-space: nowrap;
	text-align: right;
}



/* Select Group */
.s-select-group {
	overflow: visible;
}

/* Add border-top to groups after the first one */
.s-select-group+.s-select-group {
	border-top-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}

/* Select Label (Group Heading) - cmdk renders this as [cmdk-group-heading] */
.s-select-label,
[cmdk-group-heading] {
	position: sticky;
	top: 0px;
	z-index: 1;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

/* Select Item */
.s-select-option {
	position: relative;
	display: flex;
	width: 100%;
	cursor: pointer;
	user-select: none;
	align-items: center;
	border-radius: 2px;
	border-bottom-width: 1px;
	border-color: transparent;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	font-size: 14px;
	line-height: 20px;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-select-option[hidden] {
	display: none;
}

/* Hover state for non-selected items */
.s-select-option:not(.s-select-option-selected):hover {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

.s-select-option:not(.s-select-option-selected):focus {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

/* Highlight the active item when navigating via keyboard (only for non-selected items) */
.s-select-option:not(.s-select-option-selected)[aria-selected='true'],
.s-select-option:not(.s-select-option-selected)[data-selected='true'] {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Selected item styles */
.s-select-option-selected {
	border-radius: 0;
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.s-select-option-selected:hover,
.s-select-option-selected:focus {
	--tw-bg-opacity: 1;
	background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1));
}

/* Selected item with keyboard navigation */
.s-select-option-selected[aria-selected='true'],
.s-select-option-selected[data-selected='true'] {
	--tw-bg-opacity: 1;
	background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1));
}

.s-select-option-disabled {
	pointer-events: none;
	opacity: 0.5;
}

.s-select-option-content {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 8px;
}

.s-select-checkbox-wrapper {
	line-height: 0;
}

/* Override SCheckbox container styles when used in select */
.s-select-checkbox-wrapper .s-checkbox-container > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.s-select-checkbox-wrapper .s-checkbox-wrapper {
	gap: 0px;
}

/* Readonly checkbox styling - keep checked appearance but show as non-interactive */
.s-select-checkbox-readonly .s-checkbox-root {
	cursor: default;
	opacity: 0.6;
}

.s-select-option-check {
	margin-left: auto;
	width: 16px;
	height: 16px;
	--tw-text-opacity: 1;
	color: rgb(27 126 57 / var(--tw-text-opacity, 1));
}

/* Select Separator */
.s-select-separator {
	margin-left: -0.25rem;
	margin-right: -0.25rem;
	height: 1px;
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}

/* Select Description */
.s-select-description {
	margin-top: 4px !important;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

/* Invisible bridge for overflow popover to prevent closing when moving cursor slowly */
.s-select-overflow-popover-content {
	position: relative;
}

/* Pseudo-element creates an invisible bridge extending below the popover (since it opens upward with side="top") */
.s-select-overflow-popover-content::before {
	content: '';
	position: absolute;
	/* Extend downward to bridge the gap between trigger and popover */
	top: 100%;
	left: 0;
	right: 0;
	/* Height should cover the gap (sideOffset is 4px by default) plus some extra space */
	height: 12px;
	/* Invisible but still captures hover events */
	background: transparent;
	pointer-events: auto;
}.s-time-picker {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	gap: 16px;
}

.s-time-picker-input-wrapper {
	width: 33.333333%;
	flex: 1 1 0%;
}

.s-time-picker-input .s-input-field {
	text-align: center;
}

/* Hide spinner arrows for number inputs */
.s-time-picker input[type='number']::-webkit-inner-spin-button,
.s-time-picker input[type='number']::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.s-time-picker input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.s-time-picker-arrows {
	display: flex;
	height: auto;
	flex-direction: column;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	line-height: 0;
}

.s-time-picker-arrow-btn {
	cursor: pointer;
	border-style: none;
	background-color: transparent;
	padding: 0px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-time-picker-arrow-btn:hover {
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
}

.s-time-picker-arrow-btn:disabled {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-time-picker-arrow-btn:focus-visible {
	outline-width: 2px;
	outline-offset: 1px;
	outline-color: #0472e1;
}

/* Variables declaration */
.rdp-root {
  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */

  --rdp-day-height: 44px; /* The height of the day cells. */
  --rdp-day-width: 44px; /* The width of the day cells. */

  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
  --rdp-day_button-height: 42px; /* The height of the day cells. */
  --rdp-day_button-width: 42px; /* The width of the day cells. */

  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */

  --rdp-dropdown-gap: 0.5rem; /* The gap between the dropdowns used in the month captons. */

  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */

  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */

  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
  --rdp-range_middle-color: inherit; /* The color of the range text. */

  --rdp-range_start-color: white; /* The color of the range text. */
  --rdp-range_start-background: linear-gradient(
    var(--rdp-gradient-direction),
    transparent 50%,
    var(--rdp-range_middle-background-color) 50%
  ); /* Used for the background of the start of the selected range. */
  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */

  --rdp-range_end-background: linear-gradient(
    var(--rdp-gradient-direction),
    var(--rdp-range_middle-background-color) 50%,
    transparent 50%
  ); /* Used for the background of the end of the selected range. */
  --rdp-range_end-color: white; /* The color of the range text. */
  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */

  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */

  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */

  --rdp-gradient-direction: 90deg;

  --rdp-animation_duration: 0.3s;
  --rdp-animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
}

.rdp-root[dir="rtl"] {
  --rdp-gradient-direction: -90deg;
}

.rdp-root[data-broadcast-calendar="true"] {
  --rdp-outside-opacity: unset;
}

/* Root of the component. */
.rdp-root {
  position: relative; /* Required to position the navigation toolbar. */
  box-sizing: border-box;
}

.rdp-root * {
  box-sizing: border-box;
}

.rdp-day {
  width: var(--rdp-day-width);
  height: var(--rdp-day-height);
  text-align: center;
}

.rdp-day_button {
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  justify-content: center;
  align-items: center;
  display: flex;

  width: var(--rdp-day_button-width);
  height: var(--rdp-day_button-height);
  border: var(--rdp-day_button-border);
  border-radius: var(--rdp-day_button-border-radius);
}

.rdp-day_button:disabled {
  cursor: revert;
}

.rdp-caption_label {
  z-index: 1;

  position: relative;
  display: inline-flex;
  align-items: center;

  white-space: nowrap;
  border: 0;
}

.rdp-dropdown:focus-visible ~ .rdp-caption_label {
  outline: 5px auto Highlight;
  /* biome-ignore lint/suspicious/noDuplicateProperties: backward compatibility */
  outline: 5px auto -webkit-focus-ring-color;
}

.rdp-button_next,
.rdp-button_previous {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  appearance: none;

  width: var(--rdp-nav_button-width);
  height: var(--rdp-nav_button-height);
}

.rdp-button_next:disabled,
.rdp-button_next[aria-disabled="true"],
.rdp-button_previous:disabled,
.rdp-button_previous[aria-disabled="true"] {
  cursor: revert;

  opacity: var(--rdp-nav_button-disabled-opacity);
}

.rdp-chevron {
  display: inline-block;
  fill: var(--rdp-accent-color);
}

.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
  transform: rotate(180deg);
  transform-origin: 50%;
}

.rdp-dropdowns {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rdp-dropdown-gap);
}
.rdp-dropdown {
  z-index: 2;

  /* Reset */
  opacity: 0;
  appearance: none;
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  cursor: inherit;
  border: none;
  line-height: inherit;
}

.rdp-dropdown_root {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-month_caption {
  display: flex;
  align-content: center;
  height: var(--rdp-nav-height);
  font-weight: bold;
  font-size: large;
}

.rdp-root[data-nav-layout="around"] .rdp-month,
.rdp-root[data-nav-layout="after"] .rdp-month {
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-month_caption {
  justify-content: center;
  margin-inline-start: var(--rdp-nav_button-width);
  margin-inline-end: var(--rdp-nav_button-width);
  position: relative;
}

.rdp-root[data-nav-layout="around"] .rdp-button_previous {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
}

.rdp-root[data-nav-layout="around"] .rdp-button_next {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: var(--rdp-nav-height);
  display: inline-flex;
  justify-content: center;
}

.rdp-months {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rdp-months-gap);
  max-width: fit-content;
}

.rdp-month_grid {
  border-collapse: collapse;
}

.rdp-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;

  display: flex;
  align-items: center;

  height: var(--rdp-nav-height);
}

.rdp-weekday {
  opacity: var(--rdp-weekday-opacity);
  padding: var(--rdp-weekday-padding);
  font-weight: 500;
  font-size: smaller;
  text-align: var(--rdp-weekday-text-align);
  text-transform: var(--rdp-weekday-text-transform);
}

.rdp-week_number {
  opacity: var(--rdp-week_number-opacity);
  font-weight: 400;
  font-size: small;
  height: var(--rdp-week_number-height);
  width: var(--rdp-week_number-width);
  border: var(--rdp-week_number-border);
  border-radius: var(--rdp-week_number-border-radius);
  text-align: var(--rdp-weeknumber-text-align);
}

/* DAY MODIFIERS */
.rdp-today:not(.rdp-outside) {
  color: var(--rdp-today-color);
}

.rdp-selected {
  font-weight: bold;
  font-size: large;
}

.rdp-selected .rdp-day_button {
  border: var(--rdp-selected-border);
}

.rdp-outside {
  opacity: var(--rdp-outside-opacity);
}

.rdp-disabled:not(.rdp-selected) {
  opacity: var(--rdp-disabled-opacity);
}

.rdp-hidden {
  visibility: hidden;
  color: var(--rdp-range_start-color);
}

.rdp-range_start {
  background: var(--rdp-range_start-background);
}

.rdp-range_start .rdp-day_button {
  background-color: var(--rdp-range_start-date-background-color);
  color: var(--rdp-range_start-color);
}

.rdp-range_middle {
  background-color: var(--rdp-range_middle-background-color);
}

.rdp-range_middle .rdp-day_button {
  border: unset;
  border-radius: unset;
  color: var(--rdp-range_middle-color);
}

.rdp-range_end {
  background: var(--rdp-range_end-background);
  color: var(--rdp-range_end-color);
}

.rdp-range_end .rdp-day_button {
  color: var(--rdp-range_start-color);
  background-color: var(--rdp-range_end-date-background-color);
}

.rdp-range_start.rdp-range_end {
  background: revert;
}

.rdp-focusable {
  cursor: pointer;
}

@keyframes rdp-slide_in_left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_in_right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rdp-slide_out_left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes rdp-slide_out_right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.rdp-weeks_before_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_before_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-weeks_after_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_enter {
  animation: rdp-slide_in_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_exit {
  animation: rdp-slide_out_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_before_enter {
  animation: rdp-slide_in_right var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-root[dir="rtl"] .rdp-weeks_after_exit {
  animation: rdp-slide_out_left var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

@keyframes rdp-fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes rdp-fade_out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.rdp-caption_after_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_after_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_enter {
  animation: rdp-fade_in var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}

.rdp-caption_before_exit {
  animation: rdp-fade_out var(--rdp-animation_duration)
    var(--rdp-animation_timing) forwards;
}
.s-date-time-picker {
	width: 100%;
	overflow: hidden;
	border-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Popover content scrolling - rendered via portal so targeted by its own class */
.s-date-time-picker-popover-content {
	max-height: var(--radix-popover-content-available-height);
	overflow-y: auto;
}

/* Disabled state for entire picker */
.s-date-time-picker--disabled {
	pointer-events: none;
	user-select: none;
	opacity: 0.5;
}

.s-date-time-picker--disabled .rdp-nav_button,
.s-date-time-picker--disabled .rdp-day_button {
	cursor: not-allowed;
}

.s-date-time-picker .rdp-root {
	--rdp-accent-color: #0472e1;
	--rdp-accent-background-color: #e6f2ff;
	--rdp-background-color: #FFFFFF;
	--rdp-outline: 2px solid #0472e1;
	--rdp-outline-selected: 2px solid #0472e1;
	--rdp-today-color: #0472e1;
}
.s-date-time-picker .rdp-day_button {
	border-radius: 6px;
}
.s-date-time-picker .rdp-chevron {
	fill: #2C3035;
}
.s-date-time-picker .rdp-chevron:hover {
	fill: #505458;
}

.s-date-time-picker .rdp-months {
	display: flex;
	max-width: 100%;
	flex-direction: column;
	gap: 0;
	padding: 12px;
}
.s-date-time-picker .rdp-months .rdp-month_grid {
	display: flex;
	max-width: 100%;
	flex-direction: column;
	gap: 0;
}

.s-date-time-picker .rdp-month {
	width: 100%;
}

.s-date-time-picker .rdp-month_caption {
	margin-bottom: 12px;
	display: flex;
	height: 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-left: 4px;
	padding-right: 4px;
}

.s-date-time-picker .rdp-caption_label {
	display: flex;
	height: 1.5rem;
	align-items: center;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .rdp-weekdays {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0;
}

.s-date-time-picker .rdp-weekday {
	flex: 1 1 0%;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: center;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* No gap between week rows (gap-ti added visible vertical whitespace) */
.s-date-time-picker .rdp-weeks {
	display: grid;
	width: 100%;
	gap: 0;
}

.s-date-time-picker .rdp-week td {
	height: 2rem;
}

/* Today ring — skip when this day is part of a multi-day range (range caps use pill shape, not a circle) */
.s-date-time-picker
	.rdp-weeks:not(:has(.rdp-focused))
	.rdp-day.rdp-today:not(.rdp-range_middle):not(.rdp-range_start:not(.rdp-range_end)):not(
		.rdp-range_end:not(.rdp-range_start)
	)
	.rdp-day_button[tabindex='0'] {
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(115 161 166 / var(--tw-bg-opacity, 1));
	font-weight: 700;
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .rdp-week {
	display: grid;
	height: 2rem;
	width: 100%;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Override rdp default width: var(--rdp-day-width) so cells fill grid columns when the month is full width */
.s-date-time-picker .rdp-day {
	display: flex;
	min-width: 0px;
	align-items: center;
	justify-content: center;
	padding: 0;
	text-align: center;
	width: 100%;
	max-width: 100%;
}

.s-date-time-picker .rdp-day_button {
	display: flex;
	height: 2rem;
	width: 2rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	border-style: none;
	background-color: transparent;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-date-time-picker .rdp-day_button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.s-date-time-picker .rdp-day_button:active {
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}

.s-date-time-picker .rdp-day_button:hover {
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}
/* Do not set border-radius here — it overrides range pill caps; label only flags selected for a11y */
.s-date-time-picker .rdp-day_button[aria-label*='selected'] {
	--tw-bg-opacity: 1;
	background-color: rgb(115 161 166 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.s-date-time-picker .rdp-outside .rdp-day_button {
	opacity: 0.5;
}
.s-date-time-picker .rdp-day_button[aria-selected='true'] {
	--tw-bg-opacity: 1;
	background-color: rgb(115 161 166 / var(--tw-bg-opacity, 1));
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .rdp-day_button[aria-selected='true']:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(3 89 175 / var(--tw-bg-opacity, 1));
}

.s-date-time-picker .rdp-day_button:disabled {
	cursor: not-allowed;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
	opacity: 0.4;
}

.s-date-time-picker .rdp-day_button:disabled:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-date-time-picker .rdp-day_button:disabled {
	text-decoration: line-through;
}

/* Style today's date with aria-label */
/* .s-date-time-picker .rdp-day_button[aria-label*="Today"][tabindex="0"]:not([data-today='true']) {
	@apply border border-info-400 font-bold text-neutral-0 bg-info-400;
} */

.s-date-time-picker .rdp-day_button[aria-selected='true']:disabled {
	--tw-bg-opacity: 1;
	background-color: rgb(167 170 175 / var(--tw-bg-opacity, 1));
}

.s-date-time-picker .rdp-day_button:focus-visible {
	outline-width: 2px;
	outline-offset: 2px;
	outline-color: #73a1a6;
}

/* Today highlight */
.s-date-time-picker .rdp-day_button[data-today='true'] {
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(115 161 166 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .rdp-day_button[data-today='true'][aria-selected='true'] {
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .s-time-picker-section {
	border-top-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	padding: 12px;
}

.s-date-time-picker .s-time-zone-section {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .s-time-zone-section .s-timezone-icon {
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}



.s-date-time-picker .s-action-buttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	padding: 12px;
}

/* Navigation buttons styling */
.s-date-time-picker .rdp-nav {
	margin: 12px;
	display: flex;
	height: 1.5rem;
	align-items: center;
	gap: 4px;
}

.s-date-time-picker .rdp-nav_button {
	display: flex;
	height: 1.5rem;
	width: 1.5rem;
	flex-shrink: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border-style: none;
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-date-time-picker .rdp-nav_button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .rdp-nav_button:disabled {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .rdp-nav_button:disabled:hover {
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .rdp-nav_button:focus-visible {
	outline-width: 2px;
	outline-offset: 2px;
	outline-color: #73a1a6;
}

.s-date-time-picker .rdp-nav_button svg {
	height: 0.75rem;
	width: 0.75rem;
}

/* Month transition animations */
.s-date-time-picker .rdp-months {
	position: relative;
}

.s-date-time-picker .rdp-month {
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Slide animation for month transitions */
@keyframes slideFromRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideFromLeft {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.s-date-time-picker .rdp-month[data-direction="next"] {
	animation: slideFromRight 0.3s ease-in-out;
}

.s-date-time-picker .rdp-month[data-direction="prev"] {
	animation: slideFromLeft 0.3s ease-in-out;
}

/* Range mode: full-width cells + full-width buttons so the bar is continuous (see daypicker.dev / default rdp gradients) */
.s-date-time-picker .rdp-range_middle {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.s-date-time-picker .rdp-selected.rdp-range_middle {
	--tw-bg-opacity: 1;
	background-color: rgb(115 161 166 / var(--tw-bg-opacity, 1));
}

.s-date-time-picker .rdp-range_start,
.s-date-time-picker .rdp-range_end {
	position: relative;
	background-color: transparent;
}

.s-date-time-picker .rdp-range_start .rdp-day_button,
.s-date-time-picker .rdp-range_end .rdp-day_button {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: none;
	--tw-bg-opacity: 1;
	background-color: rgb(115 161 166 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Logical radii so LTR/RTL matches range direction and wins over .rdp-today / default rounded-full */
.s-date-time-picker .rdp-range_start:not(.rdp-range_end) .rdp-day_button {
	border-start-start-radius: 9999px;
	border-end-start-radius: 9999px;
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.s-date-time-picker .rdp-range_end:not(.rdp-range_start) .rdp-day_button {
	border-start-end-radius: 9999px;
	border-end-end-radius: 9999px;
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

/* When both range_start and range_end are on the same element (single date selected in range mode) */
.s-date-time-picker .rdp-range_start.rdp-range_end .rdp-day_button {
	width: 2rem;
	max-width: none;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(115 161 166 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-date-time-picker .rdp-range_middle .rdp-day_button {
	width: 100%;
	max-width: none;
	border-radius: 0;
	--tw-bg-opacity: 1;
	background-color: rgb(115 161 166 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Base .rdp-day_button uses hover:rounded-full; keep range bar continuous on hover */
.s-date-time-picker .rdp-range_middle .rdp-day_button:hover {
	border-radius: 0;
}

.s-date-time-picker .rdp-range_start:not(.rdp-range_end) .rdp-day_button:hover {
	border-start-start-radius: 9999px;
	border-end-start-radius: 9999px;
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.s-date-time-picker .rdp-range_end:not(.rdp-range_start) .rdp-day_button:hover {
	border-start-end-radius: 9999px;
	border-end-end-radius: 9999px;
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}.s-filter-pill__select-wrapper {
	display: inline-flex;
	width: fit-content;
}

.s-filter-pill__select-wrapper .s-select-trigger {
	width: auto;
}

.s-filter-pill__select-content {
	z-index: 10000001 !important;
}

.s-filter-pill__datetime-popover-content {
	z-index: 10000001 !important;
}

.s-filter-pill {
	box-sizing: border-box;
	display: inline-flex;
	height: 1.75rem;
	min-height: 1.75rem;
	cursor: pointer;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	border-radius: 9999px;
	border-width: 1px;
	border-style: solid;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 12px;
	line-height: 16px;
	line-height: 1;
}

/* Boolean primary: add = outline, active = filled */
.s-filter-pill--boolean-add-primary {
	--tw-border-opacity: 1;
	border-color: rgb(80 165 252 / var(--tw-border-opacity, 1));
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.s-filter-pill--boolean-active-primary {
	border-color: transparent;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Boolean secondary: add = grey, active = grey with primary text only */
.s-filter-pill--add {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-filter-pill--boolean-active-secondary {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-filter-pill--boolean-active-secondary .s-filter-pill__label {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

/* Array/DateTime primary - same colors for add and active (no color change) */
.s-filter-pill--add-primary,
.s-filter-pill--active-primary {
	border-color: transparent;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-filter-pill--active-primary .s-filter-pill__value {
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Array/DateTime secondary - same colors for add and active (no color change) */
.s-filter-pill--add-secondary,
.s-filter-pill--active-secondary {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-filter-pill--active-secondary .s-filter-pill__value {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

/* Chevron darker for secondary add state (no value) - override light opacity */
.s-filter-pill--add-secondary .s-select-chevron,
.s-filter-pill--add-secondary .s-filter-pill__chevron {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	opacity: 1;
}

/* Chevron primary blue for secondary variant when selected (has value) */
.s-filter-pill--active-secondary .s-select-chevron,
.s-filter-pill--active-secondary .s-filter-pill__chevron {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	opacity: 1;
}

/* Primary variant: X icon and chevrons white (override opacity) */
.s-filter-pill--add-primary .s-filter-pill__remove,
.s-filter-pill--active-primary .s-filter-pill__remove,
.s-filter-pill--add-primary .s-filter-pill__chevron,
.s-filter-pill--active-primary .s-filter-pill__chevron,
.s-filter-pill--add-primary .s-select-chevron,
.s-filter-pill--active-primary .s-select-chevron {
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	opacity: 1;
}

.s-filter-pill:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.s-filter-pill__icon {
	display: flex;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

/* Match + icon: no opacity so X and + icons have same color */
.s-filter-pill__remove {
	display: flex;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
}

/* Match SSelect chevron: size-sm, opacity-50, transition-transform */
.s-filter-pill__chevron {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	opacity: 0.7;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

/* Rotate chevron when DateTime popover is open (Radix passes aria-expanded to trigger) */
.s-filter-pill[aria-expanded="true"] .s-select-chevron {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.s-input-list {
	/* Base styles - using Tailwind utilities via the component */
}

.dropdown-trigger {
	display: inline-flex;
	height: 32px;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding: 8px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition-property: box-shadow;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}.dropdown-trigger:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}.dropdown-trigger:focus-visible {
	--tw-border-opacity: 1;
	border-color: rgb(4 114 225 / var(--tw-border-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}.dropdown-trigger[data-state="open"] {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.dropdown-content {
	z-index: 50;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.dropdown-content[data-state="open"] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.dropdown-content[data-state="closed"] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
	--tw-exit-opacity: 0;
}

.dropdown-content[data-state="open"] {
	--tw-enter-opacity: 0;
}

.dropdown-content[data-state="closed"] {
	--tw-exit-scale: .95;
}

.dropdown-content[data-state="open"] {
	--tw-enter-scale: .95;
}

.dropdown-content[data-side="bottom"] {
	--tw-enter-translate-y: -0.5rem;
}

.dropdown-content[data-side="left"] {
	--tw-enter-translate-x: 0.5rem;
}

.dropdown-content[data-side="right"] {
	--tw-enter-translate-x: -0.5rem;
}

.dropdown-content[data-side="top"] {
	--tw-enter-translate-y: 0.5rem;
}

/* Width variants */
.dropdown-width-fluid {
	width: var(--radix-dropdown-menu-trigger-width);
	min-width: 12.5rem;
}

.dropdown-width-small {
	width: 10rem;
}

.dropdown-width-regular {
	width: 14rem;
}

.dropdown-width-medium {
	width: 18rem;
}

.dropdown-width-large {
	width: 24rem;
}

.dropdown-item {
	position: relative;
	display: flex;
	cursor: pointer;
	user-select: none;
	align-items: center;
	gap: 4px;
	border-radius: 2px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 14px;
	line-height: 20px;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.dropdown-item:focus-visible {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.dropdown-item[data-disabled] {
	pointer-events: none;
	opacity: 0.5;
}

.dropdown-item-inset {
	padding-left: 2rem;
}

.dropdown-checkbox-item {
	position: relative;
	display: flex;
	cursor: pointer;
	user-select: none;
	align-items: center;
	border-radius: 2px;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	padding-left: 2rem;
	padding-right: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.dropdown-checkbox-item:focus-visible {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.dropdown-checkbox-item[data-disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.dropdown-radio-item {
	position: relative;
	display: flex;
	cursor: pointer;
	user-select: none;
	align-items: center;
	border-radius: 2px;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	padding-left: 2rem;
	padding-right: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.dropdown-radio-item:focus {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.dropdown-radio-item[data-disabled] {
	pointer-events: none;
	opacity: 0.5;
}

.dropdown-label {
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 12px;
	line-height: 16px;
	line-height: 1.25rem;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.dropdown-label-inset {
	padding-left: 2rem;
}

.dropdown-separator {
	margin-left: -0.25rem;
	margin-right: -0.25rem;
	margin-top: 0.375rem;
	margin-bottom: 0.375rem;
	height: 1px;
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.dropdown-shortcut {
	margin-left: auto;
	font-size: 0.75rem;
	line-height: 1rem;
	letter-spacing: 0.1em;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.dropdown-sub-trigger {
	display: flex;
	cursor: pointer;
	user-select: none;
	align-items: center;
	gap: 4px;
	border-radius: 2px;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 14px;
	line-height: 20px;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.dropdown-sub-trigger:focus {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.dropdown-sub-trigger[data-state="open"] {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.dropdown-sub-trigger-inset {
	padding-left: 2rem;
}

.dropdown-sub-content {
	z-index: 50;
	min-width: 12.5rem;
	overflow: hidden;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}

.dropdown-sub-content[data-state="open"] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
}

.dropdown-sub-content[data-state="closed"] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
	--tw-exit-opacity: 0;
}

.dropdown-sub-content[data-state="open"] {
	--tw-enter-opacity: 0;
}

.dropdown-sub-content[data-state="closed"] {
	--tw-exit-scale: .95;
}

.dropdown-sub-content[data-state="open"] {
	--tw-enter-scale: .95;
}

.dropdown-sub-content[data-side="bottom"] {
	--tw-enter-translate-y: -0.5rem;
}

.dropdown-sub-content[data-side="left"] {
	--tw-enter-translate-x: 0.5rem;
}

.dropdown-sub-content[data-side="right"] {
	--tw-enter-translate-x: -0.5rem;
}

.dropdown-sub-content[data-side="top"] {
	--tw-enter-translate-y: 0.5rem;
}

/* Sub-content width variants use the same classes as main content */

.dropdown-item-indicator {
	position: absolute;
	left: 0.5rem;
	display: flex;
	width: 0.875rem;
	height: 0.875rem;
	align-items: center;
	justify-content: center;
}

.dropdown-check-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.dropdown-circle-icon {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	fill: currentColor;
}

.dropdown-chevron-icon {
	margin-left: auto;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Item states */
.dropdown-item-checked {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

/* Hover and focus styles for items */
.dropdown-item:hover,
.dropdown-checkbox-item:hover,
.dropdown-radio-item:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* ScrollArea Styles */
.dropdown-scroll-area-root {
	margin: -0.25rem;
	width: calc(100% + 0.5rem);
}

.dropdown-scroll-area-viewport {
	height: 100%;
	width: 100%;
	max-height: 560px;
	padding: 0.25rem;
}

.dropdown-scroll-area-scrollbar {
	display: flex;
	touch-action: none;
	user-select: none;
	background-color: transparent;
	padding: 0.125rem;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	animation-duration: 150ms;
	animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.dropdown-scroll-area-scrollbar:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.dropdown-scroll-area-scrollbar[data-orientation="horizontal"] {
	height: 0.625rem;
}

.dropdown-scroll-area-scrollbar[data-orientation="vertical"] {
	width: 0.625rem;
}

.dropdown-scroll-area-scrollbar[data-orientation="horizontal"] {
	flex-direction: column;
}

.dropdown-scroll-area-thumb {
	position: relative;
	flex: 1 1 0%;
	border-radius: 10px;
	--tw-bg-opacity: 1;
	background-color: rgb(167 170 175 / var(--tw-bg-opacity, 1));
}

.dropdown-scroll-area-thumb::before {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	min-height: 44px;
	width: 100%;
	min-width: 44px;
	--tw-translate-x: -50%;
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	--tw-content: '';
	content: var(--tw-content);
}

.dropdown-scroll-area-corner {
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}
/* ===== Container ============================================== */
.s-merge-var-input-container {
	display: flex;
	flex-direction: column;
}
.s-merge-var-input-container > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(4px * var(--tw-space-y-reverse));
}
.s-merge-var-input-container {
	--s-merge-var-input-menu-max-h: calc(var(--sting-space-7xl) * 4);
}

/* ===== Wrapper (mirrors SInput) =============================== */
.s-merge-var-input-wrapper {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: 4px;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.s-merge-var-input-wrapper:focus-within {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}

.s-merge-var-input-wrapper-disabled {
	cursor: not-allowed;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-merge-var-input-wrapper-readonly {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* ===== Field wrapper / editable ============================== */
.s-merge-var-input-field-wrapper {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	gap: 8px;
	line-height: 1;
	min-width: 0;
}

.s-merge-var-input-field {
	width: 100%;
	font-size: 0.875rem;
	line-height: 1.25rem;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	/* Default to single-line behaviour — no wrap, no shrink, no overflow chrome.
	   `overflow-x: hidden` keeps the badges from creating a horizontal scrollbar
	   inside the bordered wrapper; long content is gracefully truncated. */
	min-width: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.s-merge-var-input-field-multiline {
	white-space: pre-wrap;
	word-break: break-word;
	overflow-y: auto;
	max-height: calc(var(--sting-space-7xl) + var(--sting-space-xxl));
}

/* Placeholder via :empty + data-placeholder — same trick as SEmailEditor's
   contenteditable. We add an explicit `empty` modifier so the placeholder
   shows even when the editable contains nothing but the trailing
   zero-width space we insert after badges. */
.s-merge-var-input-field-empty::before {
	content: attr(data-placeholder);
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	pointer-events: none;
}

.s-merge-var-input-wrapper-disabled .s-merge-var-input-field {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* ===== Sizes (mirrors SInput sizes) ========================== */
.s-merge-var-input-small .s-merge-var-input-wrapper {
	height: 1.75rem;
	padding: 4px;
}

.s-merge-var-input-regular .s-merge-var-input-wrapper {
	height: 32px;
	padding: 8px;
}

.s-merge-var-input-large .s-merge-var-input-wrapper {
	height: 40px;
	padding: 16px;
}

/* Allow the multi-line variant to grow beyond the size's nominal height. */
.s-merge-var-input-wrapper:has(.s-merge-var-input-field-multiline) {
	height: auto;
	min-height: var(--sting-space-lg);
}

/* ===== Validation states ===================================== */
.s-merge-var-input-error .s-merge-var-input-wrapper {
	--tw-border-opacity: 1;
	border-color: rgb(222 24 39 / var(--tw-border-opacity, 1));
}
.s-merge-var-input-error .s-merge-var-input-wrapper:focus-within {
	--tw-border-opacity: 1;
	border-color: rgb(222 24 39 / var(--tw-border-opacity, 1));
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(222 24 39 / var(--tw-ring-opacity, 1));
}

.s-merge-var-input-description {
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-validation {
	font-size: 12px;
	line-height: 16px;
}

.s-merge-var-input-validation-success {
	--tw-text-opacity: 1;
	color: rgb(13 98 37 / var(--tw-text-opacity, 1));
}

/* ===== Prepend / Append / Clear (mirrors SInput) ============= */
.s-merge-var-input-prepend {
	margin-left: 8px;
	margin-right: 8px;
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-wrapper-disabled .s-merge-var-input-prepend,
.s-merge-var-input-wrapper-disabled .s-merge-var-input-append {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-append {
	margin-left: 8px;
	margin-right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-append:not(:last-child) {
	margin-right: 4px;
}

.s-merge-var-input-clear-button {
	margin-left: 8px;
	margin-right: 8px;
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 0.25rem;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-merge-var-input-clear-button:hover {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-clear-button:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
}

.s-merge-var-input-clear-button:has(+.s-merge-var-input-append) {
	margin-right: 4px;
}

/* ===== Merge-variable trigger button ========================= */
.s-merge-var-input-trigger-slot {
	/* No outer margin — the trigger button supplies its own breathing room. */
	margin-left: 0;
	margin-right: 0;
}

.s-merge-var-input-trigger {
	display: inline-flex;
	height: 24px;
	width: 24px;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	border-width: 0px;
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-merge-var-input-trigger:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(1 38 75 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-trigger:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-merge-var-input-trigger:disabled {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-trigger:hover:disabled {
	background-color: transparent;
}

/* ===== Merge-variable menu — mirrors SEmailEditor's popover === */
.s-merge-var-input-menu {
	position: relative;
	width: 15rem;
	overflow: hidden;
	padding: 0;
	max-width: calc(100vw - var(--sting-space-md));
	max-height: min(
		var(--s-merge-var-input-menu-max-h),
		var(--radix-dropdown-menu-content-available-height, var(--s-merge-var-input-menu-max-h))
	);
}

.s-merge-var-input-menu .dropdown-scroll-area-root {
	margin: 0;
	width: 100%;
	overflow: hidden;
	max-height: min(
		var(--s-merge-var-input-menu-max-h),
		var(--radix-dropdown-menu-content-available-height, var(--s-merge-var-input-menu-max-h))
	);
}

.s-merge-var-input-menu .dropdown-scroll-area-viewport {
	max-height: min(
		var(--s-merge-var-input-menu-max-h),
		var(--radix-dropdown-menu-content-available-height, var(--s-merge-var-input-menu-max-h))
	);
}

.s-merge-var-input-menu-title {
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 4px;
	padding-top: 16px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-menu-item {
	display: flex;
	width: 100%;
	cursor: pointer;
	align-items: center;
	gap: 8px;
	border-width: 0px;
	background-color: transparent;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-merge-var-input-menu-item:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-merge-var-input-menu-item:focus-visible {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-merge-var-input-menu-item[data-disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.s-merge-var-input-menu-item {
	min-width: 0;
}

.s-merge-var-input-menu-item > span {
	min-width: 0px;
	flex: 1 1 0%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.s-merge-var-input-menu-item-icon {
	height: 16px;
	width: 16px;
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-menu-load-more {
	justify-content: center;
	gap: 12px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-menu-load-more-icon {
	height: 12px;
	width: 12px;
	flex-shrink: 0;
}

/* ===== Merge-variable badge =================================
   Badge styling mirrors SBadge tokens without importing SBadge.css.
   Class names are composed in `createBadgeHtml` for parity with SBadge. */
.s-merge-var-input-token.s-badge {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	font-size: 12px;
	line-height: 16px;
	line-height: 1;
	background-color: var(--badge-bg);
	color: var(--badge-text);
	border-color: var(--badge-border);
}

.s-merge-var-input-token.s-badge-regular {
	height: 20px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.s-merge-var-input-token.s-badge-rounded-full {
	border-radius: 9999px;
}

.s-merge-var-input-token.s-badge-info {
	--tw-border-opacity: 1;
	border-color: rgb(208 224 225 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(239 245 245 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(69 106 109 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-token.s-badge-warning {
	--tw-border-opacity: 1;
	border-color: rgb(255 237 184 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 245 220 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(107 70 18 / var(--tw-text-opacity, 1));
}

.s-merge-var-input-token {
	margin-left: 2px;
	margin-right: 2px;
	user-select: all;
	vertical-align: baseline;
	cursor: pointer;
}
.radio-group-container {
	display: flex;
	flex-direction: column;
}

.radio-group-container > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(24px * var(--tw-space-y-reverse));
}

.radio-group-label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	line-height: 1 !important;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.radio-group-label.disabled {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.radio-group-description {
	margin-top: 2px !important;
	text-wrap: pretty;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.radio-group {
	display: flex;
	gap: 16px;
}

.radio-group-vertical {
	flex-direction: column;
}

.radio-group-horizontal {
	flex-direction: row;
	flex-wrap: wrap;
}

.radio-group-disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.radio-option-container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.radio-option-container.disabled {
	cursor: not-allowed;
}

.radio-option-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.radio-option-item {
	margin: 0px;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
	border-radius: 9999px;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding: 0px;
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.radio-option-item:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.radio-option-item:disabled {
	cursor: not-allowed;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.radio-option-item {
	appearance: none;
	/* Radix renders a <button>; reset padding so host app CSS cannot shift the circle vs the label */
	line-height: 1;
}

.radio-option-item:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
	transition: box-shadow 150ms ease;
}

.radio-option-item:focus-visible:hover {
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(3 89 175 / var(--tw-ring-opacity, 1));
}

.radio-option-item[data-state='checked'] {
	--tw-border-opacity: 1;
	border-color: rgb(4 114 225 / var(--tw-border-opacity, 1));
	background-image: radial-gradient(circle, #0472e1 45%, transparent 50%);
	background-repeat: no-repeat;
	background-position: center;
}

.radio-option-item[data-state='checked']:hover {
	background-image: radial-gradient(circle, #0359af 45%, transparent 50%);
}

.radio-option-item[data-state='checked'][data-disabled] {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	background-image: radial-gradient(circle, #c9ced6 45%, transparent 40%);
}

.radio-option-indicator {
	display: none;
}

.radio-option-label {
	display: flex;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	line-height: 20px;
	line-height: 1 !important;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* Inner wrapper can inherit host app line-height; radio stays items-start so the control looks “too high” */
.radio-group-container .radio-option-label > div:first-child {
	line-height: 1 !important;
}

/* Label inside group with group label/description - use para-regular by default (when NO description in option) */
.radio-group-container:has(.radio-group-label) .radio-option-label:not(:has(.radio-option-description)),
.radio-group-container:has(.radio-group-description) .radio-option-label:not(:has(.radio-option-description)) {
	font-size: 14px;
	line-height: 20px;
	line-height: 1 !important;
}

/* If the radio option itself has a description, use para-medium for the label */
.radio-group-container:has(.radio-group-label) .radio-option-label:has(.radio-option-description),
.radio-group-container:has(.radio-group-description) .radio-option-label:has(.radio-option-description),
.radio-option-label:has(.radio-option-description) {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	line-height: 1 !important;
}

.radio-option-label.disabled {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.radio-option-description {
	text-wrap: pretty;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.radio-option-description-no-icon {
	padding-left: 0px;
}

.radio-option-content {
	margin-top: 0.25rem;
	padding-left: 1.5rem;
}

/* Contained Variant Styles */
.radio-group-contained {
	max-width: max-content;
	gap: 0;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.radio-group-contained.radio-group-fluid {
	width: 100%;
	max-width: 100%;
}

.radio-group-contained.radio-group-horizontal-fluid .radio-option-container {
	flex: 1 1 0%;
}

.radio-group-contained .radio-option-container {
	box-sizing: border-box;
	overflow: hidden;
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}

/* Remove top border from all items except first to avoid double borders */
.radio-group-contained.radio-group-vertical .radio-option-container:not(:first-of-type) {
	margin-top: -1px;
}

.radio-group-contained.radio-group-horizontal .radio-option-container:not(:first-of-type) {
	margin-left: -1px;
}

.radio-group-contained .radio-option-wrapper {
	display: flex;
	height: 100%;
	align-items: center;
	gap: 0.5rem;
}

.radio-group-contained .radio-option-wrapper:has(.radio-option-description) {
	align-items: flex-start;
}

.radio-group-contained .radio-option-label {
	isolation: isolate;
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	white-space: nowrap;
}

.radio-group-contained .radio-option-label::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* First and last items rounded corners - vertical */
.radio-group-contained.radio-group-vertical .radio-option-container:first-of-type {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.radio-group-contained.radio-group-vertical .radio-option-container:last-of-type {
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
}

/* First and last items rounded corners - horizontal */
.radio-group-contained.radio-group-horizontal .radio-option-container:first-of-type {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.radio-group-contained.radio-group-horizontal .radio-option-container:last-of-type {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}

/* Selected state for contained variant */
.radio-group-contained .radio-option-container:has([data-state='checked']),
.radio-group-contained .radio-option-container[data-selected='true'] {
	--tw-border-opacity: 1;
	border-color: rgb(130 191 253 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.radio-group-contained .radio-option-container:has([data-state='checked']) .radio-option-label,
.radio-group-contained .radio-option-container[data-selected='true'] .radio-option-label {
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* Hide radio input in contained variant when showIcon is false */
.radio-option-item-hidden {
	pointer-events: none;
	position: absolute;
	bottom: 0px;
	left: 0px;
	opacity: 0;
}

/* Padding variants for contained */
.radio-group-contained.radio-group-padding-none .radio-option-container {
	min-height: 16px;
}

.radio-group-contained.radio-group-padding-none .radio-option-wrapper {
	padding: 0px;
}

.radio-group-contained.radio-group-padding-small .radio-option-container {
	min-height: 24px;
}

.radio-group-contained.radio-group-padding-small .radio-option-wrapper {
	padding-left: 0.625rem;
	padding-right: 0.625rem;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	font-size: 0.8125rem;
}

.radio-group-contained.radio-group-padding-regular .radio-option-container {
	min-height: 32px;
}

.radio-group-contained.radio-group-padding-regular .radio-option-wrapper {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.radio-group-contained.radio-group-padding-large .radio-option-container {
	min-height: 4rem;
}

.radio-group-contained.radio-group-padding-large .radio-option-wrapper {
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Horizontal contained spacing */
.radio-group-horizontal-contained > :not([hidden]) ~ :not([hidden]) {
	--tw-space-x-reverse: 0;
	margin-right: calc(-1px * var(--tw-space-x-reverse));
	margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
}

.radio-group-horizontal-contained .radio-option-container:first-of-type {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}

.radio-group-horizontal-contained .radio-option-container:last-of-type {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}.s-modal-overlay {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
	background: rgb(162, 193, 196);
	/* background: linear-gradient(145deg, rgba(162,193,196,0.80) 0%, rgba(224,219,198,0.80) 100%); */
	background: linear-gradient(145deg,
			rgba(230, 234, 235, 0.8) 0%,
			rgba(162, 193, 196, 0.8) 100%);
	padding-top: 1rem;
	padding-bottom: 1rem;
	z-index: 999;
	backdrop-filter: blur(4px);
}
.s-modal {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
	border-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding: 16px;
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	min-height: 100px;
	max-height: 96vh;
}

.s-modal-body {
	overflow-y: auto;
}

.s-modal-h-regular .s-modal-body {
	max-height: 60vh;
}

.s-modal-h-large .s-modal-body {
	max-height: 90vh;
}

.s-modal-content {
	flex: 1 1 0%;
	font-size: 1rem;
	line-height: 1.5rem;
}

.s-modal-space-none {
	row-gap: 0px;
	padding: 0px;
}

.s-modal-space-xsmall {
	row-gap: 2px;
	padding: 2px;
}

.s-modal-space-small {
	row-gap: 4px;
	padding: 4px;
}

.s-modal-space-regular {
	row-gap: 8px;
	padding: 8px;
}

.s-modal-space-large {
	row-gap: 16px;
	padding: 16px;
}

.s-modal-space-xlarge {
	row-gap: 24px;
	padding: 24px;
}

.s-modal-space-xxlarge {
	row-gap: 32px;
	padding: 32px;
}
.s-modal-close-button {
	position: relative;
	right: 0px;
	top: 0px;
	z-index: 50;
	border-radius: 0.25rem;
	padding: 0.5rem;
}
.s-modal-close-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-modal-close-button svg {
	width: 20px;
	height: 20px;
}

/* Fullscreen */

.s-modal-fullscreen {
	margin: 1rem;
	height: 100%;
	width: 100vw;
	overflow-y: auto;
	z-index: 130;
}

.s-modal-fullscreen .s-modal-header,
.s-modal-regular.s-modal-large .s-modal-header {
	z-index: 10;
}

/* .modal-large .modal-content,  .modal-fullscreen .modal-content {
  @apply 
  p-0;
} */

.s-modal-dialog-overlay {
	position: fixed;
	inset: 0px;
	z-index: 120;
	background-color: rgb(0 0 0 / 0.5);
}

.s-modal.regularscreen {
	z-index: 130;
}

.s-modal-dialog-content {
	display: flex;
	max-height: 100vh;
	justify-content: center;
}

.s-modal.front {
	z-index: 50;
	--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-modal.fullscreen {
	position: absolute;
	top: 20px;
	margin: 0px !important;
	height: 100vh;
	width: 98%;
}

.s-modal.regularscreen {
	position: fixed;
	left: 50%;
	top: 50%;
	--tw-translate-x: -50%;
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.s-modal .wrapper {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
}

.s-modal-dialog-close {
	display: flex;
	width: 100%;
}

/* Focus outline fixes for modal content */
.s-modal-body *:focus-visible {
	outline-offset: 2px;
}

/* Ensure focus rings are visible and not clipped by overflow */
.s-modal-body input:focus-visible,
.s-modal-body button:focus-visible,
.s-modal-body select:focus-visible,
.s-modal-body textarea:focus-visible,
.s-modal-body [tabindex]:focus-visible,
.s-modal-body [role="button"]:focus-visible {
	/* Use box-shadow instead of outline to ensure visibility in overflow containers */
	box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5), 0 0 0 4px rgb(147 197 253 / 0.3);
	outline: none;
}

/* Header Border - Base */

/* Header Border - Negative margins to extend border full width (matches modal padding) */
/* xsmall padding */
.s-modal[class*="!p-si"] .s-modal-header {
	margin-left: -2px;
	margin-right: -2px;
}
.s-modal[class*="!p-si"] .s-modal-header > * {
	padding-left: 2px;
	padding-right: 2px;
}

/* small padding */
.s-modal[class*="!p-ti"] .s-modal-header {
	margin-left: -4px;
	margin-right: -4px;
}
.s-modal[class*="!p-ti"] .s-modal-header > * {
	padding-left: 4px;
	padding-right: 4px;
}

/* regular padding */
.s-modal[class*="!p-mi"] .s-modal-header {
	margin-left: -8px;
	margin-right: -8px;
}
.s-modal[class*="!p-mi"] .s-modal-header > * {
	padding-left: 8px;
	padding-right: 8px;
}

/* large padding (default) */
.s-modal[class*="!p-sm"] .s-modal-header,
.s-modal-space-large .s-modal-header {
	margin-left: -16px;
	margin-right: -16px;
}
.s-modal[class*="!p-sm"] .s-modal-header > *,
.s-modal-space-large .s-modal-header > * {
	padding-left: 16px;
	padding-right: 16px;
}

/* xlarge padding */
.s-modal[class*="!p-md"] .s-modal-header {
	margin-left: -24px;
	margin-right: -24px;
}
.s-modal[class*="!p-md"] .s-modal-header > * {
	padding-left: 24px;
	padding-right: 24px;
}

/* xxlarge padding */
.s-modal[class*="!p-lg"] .s-modal-header {
	margin-left: -32px;
	margin-right: -32px;
}
.s-modal[class*="!p-lg"] .s-modal-header > * {
	padding-left: 32px;
	padding-right: 32px;
}

/* Footer Note - Base */
.s-modal-footer-note {
	margin-top: 8px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Footer Note - Padding variants (matches modal padding with negative margins) */
/* xsmall padding */
.s-modal[class*="!p-si"] .s-modal-footer-note {
	margin-left: -2px;
	margin-right: -2px;
	margin-bottom: -2px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* small padding */
.s-modal[class*="!p-ti"] .s-modal-footer-note {
	margin-left: -4px;
	margin-right: -4px;
	margin-bottom: -4px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* regular padding */
.s-modal[class*="!p-mi"] .s-modal-footer-note {
	margin-left: -8px;
	margin-right: -8px;
	margin-bottom: -8px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* large padding (default) */
.s-modal[class*="!p-sm"] .s-modal-footer-note,
.s-modal-space-large .s-modal-footer-note {
	margin-left: -16px;
	margin-right: -16px;
	margin-bottom: -16px;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* xlarge padding */
.s-modal[class*="!p-md"] .s-modal-footer-note {
	margin-left: -24px;
	margin-right: -24px;
	margin-bottom: -24px;
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* xxlarge padding */
.s-modal[class*="!p-lg"] .s-modal-footer-note {
	margin-left: -32px;
	margin-right: -32px;
	margin-bottom: -32px;
	padding-left: 32px;
	padding-right: 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.drawer-overlay {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	background-color: rgb(0 0 0 / 0.4);
	z-index: 9999999 !important;
}

/* Overlay animations */
.drawer-overlay[data-state='open'] {
	animation-name: enter;
	animation-duration: 150ms;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
	--tw-enter-opacity: 0;
}

.drawer-overlay[data-state='closed'] {
	animation-name: exit;
	animation-duration: 150ms;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
	--tw-exit-opacity: 0;
}

.drawer-container {
	position: fixed;
	display: flex;
	flex-direction: column;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	z-index: 10000000 !important;
	overflow: hidden;
}

/* Base drawer animations */
.drawer-container[data-state='open'] {
	transition-duration: 300ms;
	animation-name: enter;
	--tw-enter-opacity: initial;
	--tw-enter-scale: initial;
	--tw-enter-rotate: initial;
	--tw-enter-translate-x: initial;
	--tw-enter-translate-y: initial;
	--tw-enter-opacity: 0;
	--tw-enter-scale: .95;
	animation-duration: 300ms;
}

.drawer-container[data-state='closed'] {
	transition-duration: 200ms;
	animation-name: exit;
	--tw-exit-opacity: initial;
	--tw-exit-scale: initial;
	--tw-exit-rotate: initial;
	--tw-exit-translate-x: initial;
	--tw-exit-translate-y: initial;
	--tw-exit-opacity: 0;
	--tw-exit-scale: .95;
	animation-duration: 200ms;
}

/* Direction-specific animations */
.drawer-container.left[data-state='open'] {
	--tw-enter-translate-x: -100%;
}

.drawer-container.left[data-state='closed'] {
	--tw-exit-translate-x: -100%;
}

.drawer-container.right[data-state='open'] {
	--tw-enter-translate-x: 100%;
}

.drawer-container.right[data-state='closed'] {
	--tw-exit-translate-x: 100%;
}

.drawer-container.top[data-state='open'] {
	--tw-enter-translate-y: -100%;
}

.drawer-container.top[data-state='closed'] {
	--tw-exit-translate-y: -100%;
}

.drawer-container.bottom[data-state='open'] {
	--tw-enter-translate-y: 100%;
}

.drawer-container.bottom[data-state='closed'] {
	--tw-exit-translate-y: 100%;
}

/* For right and left drawers */
.drawer-container.right {
	bottom: 0px;
	right: 0px;
	top: 0px;
	height: 100%;
}

.drawer-container.left {
	bottom: 0px;
	left: 0px;
	top: 0px;
	height: 100%;
}

/* For top and bottom drawers */
.drawer-container.top,
.drawer-container.bottom {
	left: 0px;
	right: 0px;
	width: 100%;
}
.drawer-container.top {
	top: 0px;
}
.drawer-container.bottom {
	bottom: 0px;
}

/* Widths for right and left drawers */
.drawer-container.right.narrow,
.drawer-container.left.narrow {
	width: 320px;
}
.drawer-container.right.regular,
.drawer-container.left.regular {
	width: 560px;
}
.drawer-container.right.wide,
.drawer-container.left.wide {
	width: 920px;
}
.drawer-container.right.extra-wide,
.drawer-container.left.extra-wide {
	width: 1200px;
}

/* Heights for top and bottom drawers */
.drawer-h-short {
	height: 30vh;
}
.drawer-h-regular {
	height: 50vh;
}
.drawer-h-max {
	height: 90vh;
}
.drawer-h-full {
	height: 100%;
}

.drawer-close-button {
	position: absolute;
	border-radius: 0.25rem;
	padding: 0.5rem;
}

.drawer-close-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}
.drawer-close-button svg {
	height: 1.25rem;
	width: 1.25rem;
}
.drawer-close-button {
	left: auto;
	right: 0.75rem;
	top: 0.75rem;
}
.drawer-content > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.drawer-content > div:first-of-type > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

/* Drawer body - scrollable content area */
.drawer-body {
	flex: 1 1 0%;
	overflow-y: auto;
}

/* Drawer header - sticky at top */
.drawer-header-sticky {
	flex-shrink: 0;
}

/* Drawer footer - sticky at bottom */
.drawer-footer-sticky {
	margin-top: auto;
	flex-shrink: 0;
}

/* Invisible bridge for description popover to prevent closing when moving cursor */
.drawer-description-popover-content {
	position: relative;
}

.drawer-description-popover-content::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 12px;
	background: transparent;
	pointer-events: auto;
}
/* SPagination Base Styles */
.s-pagination {
    display: flex;
    width: fit-content;
    user-select: none;
    align-items: center
}

/* Button styles within pagination */
.s-pagination button {
    box-sizing: content-box;
    display: flex;
    height: 32px;
    min-width: 1.5rem;
    align-items: center;
    justify-content: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem
}

/* Pagination Item (List Item) Styles */
.s-pagination-item {
    margin-left: -1px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.s-pagination-item-selected {
    z-index: 2;
    --tw-border-opacity: 1 !important;
    border-color: rgb(130 191 253 / var(--tw-border-opacity, 1)) !important;
    --tw-bg-opacity: 1;
    background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1))
}

.s-pagination-item-disabled {
    z-index: 1;
    --tw-border-opacity: 1;
    border-color: rgb(247 247 248 / var(--tw-border-opacity, 1))
}

.s-pagination-item-ellipsis {
    --tw-border-opacity: 1 !important;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)) !important
}

/* Pagination Button Base Styles */
.s-pagination-button {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    line-height: 1;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    animation-duration: 200ms;
    cursor: pointer;
    --tw-text-opacity: 1;
    color: rgb(44 48 53 / var(--tw-text-opacity, 1));
    text-decoration-line: none
}
.s-pagination-button:hover {
    --tw-text-opacity: 1;
    color: rgb(26 29 33 / var(--tw-text-opacity, 1))
}
.s-pagination-button {
    border-width: 0px;
    background-color: transparent;
    padding: 0px
}

/* Pagination Button Disabled State */
.s-pagination-button-disabled {
    cursor: not-allowed;
    --tw-text-opacity: 1;
    color: rgb(167 170 175 / var(--tw-text-opacity, 1));
    text-decoration-line: none;
    pointer-events: none
}
.s-pagination-button-disabled:hover {
    --tw-text-opacity: 1;
    color: rgb(167 170 175 / var(--tw-text-opacity, 1))
}

/* Previous Button */
.s-pagination-prev {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-start-start-radius: 6px;
    border-end-start-radius: 6px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

/* Next Button */
.s-pagination-next {
    margin-left: -1px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border-start-end-radius: 6px;
    border-end-end-radius: 6px;
    border-width: 1px;
    border-style: solid;
    --tw-border-opacity: 1;
    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

/* Page Numbers List */
.s-pagination-list {
    margin: 0px;
    display: flex;
    list-style-type: none;
    padding: 0px
}.data-table {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 16px;
	font-family: inherit;
}

.data-table__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}

.data-table__control {
	border-radius: 8px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	min-width: 180px;
}

.data-table__control legend {
	padding-left: 4px;
	padding-right: 4px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.data-table__control ul {
	margin-top: 8px;
	margin-bottom: 0px;
	display: flex;
	list-style-type: none;
	flex-direction: column;
	gap: 6px;
	padding: 0px;
}

.data-table__order-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.data-table__order-actions {
	display: inline-flex;
	gap: 4px;
}

.data-table__order-actions button {
	cursor: pointer;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.data-table__order-actions button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.data-table__container {
	position: relative;
	overflow: auto;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}

.data-table__container--sticky-header {
	max-height: 600px;
}

.data-table__container--sticky-header thead {
	position: sticky;
	top: 0px;
	z-index: 10;
}

.data-table__container--sticky-header .data-table__th {
	position: sticky;
	top: 0px;
}

.data-table__select-all-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(130 191 253 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(242 246 247 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.data-table__select-all-banner-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.data-table__select-all-banner-action {
	cursor: pointer;
	border-width: 0px;
	background-color: transparent;
	padding: 0px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	text-decoration-line: underline;
	font-size: inherit;
}

.data-table__select-all-banner-action:hover {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

.data-table__select-all-banner-dismiss {
	display: flex;
	flex-shrink: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-width: 0px;
	background-color: transparent;
	padding: 4px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	opacity: 0.7;
}

.data-table__select-all-banner-dismiss:hover {
	opacity: 1;
}

.data-table__select-all-banner--warning {
	--banner-bg: #fffaed;
	--banner-border: #ffe68d;
	--banner-text: #6b4612;
	background-color: var(--banner-bg);
	border-bottom-color: var(--banner-border);
	color: var(--banner-text);
}

.data-table__select-all-banner--warning .data-table__select-all-banner-action {
	color: var(--banner-text);
}

.data-table__select-all-banner--warning .data-table__select-all-banner-action:hover {
	--banner-text-hover: #4f350c;
	color: var(--banner-text-hover);
}

.data-table__select-all-banner--warning .data-table__select-all-banner-dismiss {
	color: var(--banner-text);
}

.data-table__table {
	width: 100%;
	border-collapse: separate;
	--tw-border-spacing-x: 0px;
	--tw-border-spacing-y: 0px;
	border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
	table-layout: auto;
}

.data-table__table--resizable {
	table-layout: fixed;
}

.data-table__th,
.data-table__td {
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	border-bottom: 1px solid #e5e5e5;
	padding: 4px 8px;
}

.data-table__table tbody tr:last-child .data-table__td {
	border-bottom: none;
}

/* Hover effect for table rows - override cell background on hover */
.data-table__table tbody tr:hover .data-table__td {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Allow wrapping for cells when column resizing is enabled and column has been manually resized */
.data-table__table--resizable .data-table__td[style*="width"],
.data-table__table--resizable .data-table__th[style*="width"] {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Add border-right to table headers when column resizing is enabled */
.data-table__table--resizable .data-table__th:not(:last-child) {
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-right-width: 1px;
	border-left-width: 0px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}

.data-table__th {
	white-space: nowrap;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	font-weight: 600;
	font-size: 12px;
}

/* Styles for selection column checkboxes - now using SCheckbox */
.data-table__table [data-column-id="select"] .s-checkbox-container {
	margin: 0px;
}

.data-table__table [data-column-id="select"] .s-checkbox-root {
	width: 16px;
	height: 16px;
}

/* Center align selection column cells */
.data-table__table [data-column-id="select"] {
	text-align: center;
}

.data-table__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.data-table__header-content {
	display: flex;
	cursor: default;
	user-select: none;
	align-items: center;
	gap: 6px;
}

.data-table__header-content.is-sortable {
	cursor: pointer;
}

.data-table__header-actions {
	display: flex;
}

.data-table__pin-button {
	height: auto;
	width: auto;
	min-width: auto;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 6px;
	padding-right: 6px;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

/* Show pin button on header hover */
.data-table__th:hover .data-table__pin-button {
	opacity: 1;
}

/* Keep pin button visible when column is pinned */
.data-table__pin-button.is-pinned {
	opacity: 1;
}

/* Dropdown menu styling - SDropdown will handle most of this, but we can override if needed */
.data-table__column-menu {
	min-width: 200px;
}

.data-table__column-menu-filter {
	padding-top: 6px;
	padding-left: 12px;
	padding-right: 12px;
	padding-bottom: 8px;
}

.data-table__sort-indicator {
	display: flex;
	align-items: center;
	font-size: 12px;
	line-height: 16px;
	opacity: 0.7;
}

.data-table__resizer {
	position: absolute;
	right: -0.125rem;
	top: 0px;
	height: 100%;
	width: 0.25rem;
	cursor: col-resize;
	user-select: none;
	touch-action: none;
}

.data-table__resizer:hover,
.data-table__resizer.is-resizing {
	background-color: rgba(74, 144, 226, 0.45);
}

.data-table__empty {
	padding: 32px;
	text-align: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.data-table__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.data-table__pagination-size {
	display: flex;
	align-items: center;
	gap: 6px;
}

.data-table__drag-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	vertical-align: middle;
	line-height: 1;
}

.data-table__drag-handle--locked {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.data-table__tr--locked .data-table__td {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Row drop indicator — shown on the row currently under the dragged row.
   Drawn as an inset box-shadow on every cell so the line is continuous across
   the whole row even with `border-separate`. Direction (above/below) reflects
   the drag direction so the user sees exactly where the row will land. */
.data-table__tr--drop-above > .data-table__td {
	box-shadow: inset 0 2px 0 0 #0472e1;
}

.data-table__tr--drop-below > .data-table__td {
	box-shadow: inset 0 -2px 0 0 #0472e1;
}

/* When a pinned cell already paints its own pinning shadow, layer the drop
   indicator on top so both remain visible. */
.data-table__tr--drop-above > .data-table__td[style*="position: sticky"] {
	box-shadow:
		inset 0 2px 0 0 #0472e1,
		-4px 0 4px -4px gray inset;
}

.data-table__tr--drop-below > .data-table__td[style*="position: sticky"] {
	box-shadow:
		inset 0 -2px 0 0 #0472e1,
		-4px 0 4px -4px gray inset;
}

.data-table__table tbody tr.data-table__tr--locked:hover .data-table__td {
	/* Don't show the standard hover affordance on locked rows since there's
	   no interaction available. */
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Floating clone shown via `<DragOverlay>` while a row is being dragged.
   Sized by dnd-kit to match the source row's bounding box, so the clone
   keeps its original dimensions regardless of which row it's hovering
   over — preventing the visual stretch/compress that occurs when rows
   have different heights. */
.data-table__drag-overlay {
	overflow: hidden;
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	cursor: grabbing;
	pointer-events: none;
}

.data-table__drag-overlay .data-table__table {
	width: 100%;
}

/* The overlay renders a single row, so suppress the per-cell bottom border
   and any hover affordance from the base `.data-table__td` styles. */
.data-table__tr--overlay > .data-table__td {
	border-bottom: none;
}

.data-table__drag-overlay tr:hover .data-table__td {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.data-table__controls-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

.data-table__global-search-wrapper {
	display: flex;
}

.data-table__global-search {
	min-width: 200px;
}

.data-table__column-visibility-wrapper {
	display: flex;
}

.data-table__column-visibility-item {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 12px;
	padding-right: 12px;
}

.data-table__column-visibility-item .s-checkbox-container {
	margin: 0px;
}
/* Base styles for the s-tabs-container */
.s-tabs-container {
	display: flex;
	width: 100%
}

.s-tabs-horizontal {
	flex-direction: column
}

.s-tabs-vertical {
	flex-direction: row
}

/* Tab list styles */
.s-tab-list {
	display: flex
}

.s-tab-list-horizontal {
	margin-bottom: 16px;
	flex-direction: row;
	border-bottom-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-tab-list-vertical {
	margin-right: 24px;
	flex-direction: column
}

/* Full width variants - matching Vue structure */
.s-tab-list-full-width,
.s-tab-list-full-width .s-tab-trigger {
	width: 100%
}

.s-tab-list-vertical.s-tab-list-full-width {
	margin-right: 0
}

/* Vertical triggers always take full width of parent for proper borders */
.s-tab-list-vertical .s-tab-trigger {
	width: 100%
}

/* Tab trigger base styles */
.s-tab-trigger {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms
}
.s-tab-trigger:focus {
	outline: 2px solid transparent;
	outline-offset: 2px
}
.s-tab-trigger:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 2px
}
.s-tab-trigger:disabled {
	cursor: not-allowed;
	opacity: 0.5
}
.s-tab-trigger {
	font-size: 14px;
	line-height: 20px;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	min-width: 80px;
	user-select: none;
	white-space: nowrap;
	outline: 2px solid transparent;
	outline-offset: 2px
}
.s-tab-trigger:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	text-decoration-line: none
}
.s-tab-trigger {
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent
}

/* Horizontal tab triggers */
.s-tab-trigger-horizontal {
	justify-content: center;
	border-bottom-width: 2px;
	border-style: solid;
	border-color: transparent;
	position: relative;
	margin-bottom: -1px
}

/* Vertical tab triggers */
.s-tab-trigger-vertical {
	justify-content: flex-start;
	box-sizing: border-box;
	border-left-width: 1px;
	border-bottom-width: 1px;
	border-style: solid;
	border-left-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-border-opacity: 1;
	border-bottom-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}
.s-tab-trigger-vertical:hover {
	--tw-border-opacity: 1;
	border-left-color: rgb(196 198 204 / var(--tw-border-opacity, 1))
}
.s-tab-trigger-vertical {
	font-size: 12px;
	line-height: 16px
}

.s-tab-list-vertical .s-tab-trigger-vertical:last-of-type {
	border-bottom-color: transparent
}

/* Active state for horizontal */
.s-tab-trigger-horizontal[data-state='active'] {
	--tw-border-opacity: 1;
	border-bottom-color: rgb(30 140 251 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1))
}

/* Active state for vertical */
.s-tab-trigger-vertical[data-state='active'] {
	border-left-color: rgb(30 140 251 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	box-sizing: border-box;
	border-style: solid;
	--tw-border-opacity: 1;
	border-bottom-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-tab-list-vertical .s-tab-trigger-vertical[data-state='active']:last-of-type {
	border-bottom-color: transparent
}

/* Icon color on active */
.s-tab-trigger[data-state='active'] svg {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1))
}

/* Size variants */
.s-tabs-sm .s-tab-trigger,
.s-tab-trigger.s-tabs-sm {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 8px;
	padding-bottom: 8px
}

.s-tabs-md .s-tab-trigger,
.s-tab-trigger.s-tabs-md {
	padding: 8px
}

.s-tabs-lg .s-tab-trigger,
.s-tab-trigger.s-tabs-lg {
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px
}

/* Contained variant */
.s-tabs-contained .s-tab-list > :not([hidden]) ~ :not([hidden]) {
	--tw-divide-x-reverse: 0;
	border-right-width: calc(1px * var(--tw-divide-x-reverse));
	border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
	--tw-divide-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-divide-opacity, 1))
}

.s-tab-trigger-contained {
	border-bottom-width: 0px;
	border-top-width: 4px;
	border-color: transparent;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1))
}

.s-tab-trigger-contained:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1))
}

.s-tab-trigger-contained[data-state='active'] {
	--tw-border-opacity: 1;
	border-color: rgb(30 140 251 / var(--tw-border-opacity, 1));
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1))
}

/* divide-x’s child selector beats `.s-tab-trigger-contained[data-state='active']` on specificity for tabs 2+. */
.s-tabs-contained .s-tab-list > .s-tab-trigger-contained[data-state='active'] {
	--tw-border-opacity: 1;
	border-color: rgb(30 140 251 / var(--tw-border-opacity, 1))
}

/* Tab content styles */
.s-tab-content {
	outline: 2px solid transparent;
	outline-offset: 2px
}
.s-tab-content:focus {
	outline: 2px solid transparent;
	outline-offset: 2px
}
.s-tab-content[data-state="inactive"] {
	display: none
}
.s-tab-content[data-state="active"] {
	opacity: 1
}
.s-tab-content {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
	animation-duration: 300ms
}

/*
 * Vertical + connected: same tab trigger styles as default vertical STabs; list and panel
 * share one row with no gap between columns.
 * Below md: list is replaced by a dropdown selector; md+: fixed-width rail beside panel.
 */
.s-tabs-vertical.s-tabs-vertical-connected {
	align-items: stretch
}
@media not all and (min-width: 768px) {
	.s-tabs-vertical.s-tabs-vertical-connected {
		flex-direction: column
	}
}

.s-tabs-vertical.s-tabs-vertical-connected .s-tab-list-vertical {
	margin-right: 0px;
	min-width: 200px;
	max-width: 280px;
	flex-shrink: 0;
	align-self: stretch;
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1))
}

@media not all and (min-width: 768px) {
	.s-tabs-vertical.s-tabs-vertical-connected .s-tab-list-vertical {
		width: 100%;
		min-width: 0px;
		max-width: none;
		border-bottom-width: 1px;
		border-style: solid;
		--tw-border-opacity: 1;
		border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
	}
}
.s-tabs-vertical.s-tabs-vertical-connected .s-tab-trigger-vertical {
	padding: 16px
}

/* Inactive rows show the rail; only the selected trigger is white (content panel stays white). */
.s-tabs-vertical.s-tabs-vertical-connected .s-tab-trigger-vertical[data-state='inactive'] {
	background-color: transparent
}

.s-tabs-vertical.s-tabs-vertical-connected .s-tab-trigger-vertical[data-state='active'] {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.s-tabs-vertical.s-tabs-vertical-connected .s-tab-content {
	min-width: 0px;
	flex: 1 1 0%;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding: 16px
}

/* Mobile dropdown selector for connected vertical tabs */
.s-tab-mobile-select {
	margin-bottom: 16px;
	display: none
}
@media not all and (min-width: 768px) {
	.s-tab-mobile-select {
		display: block
	}
	.s-tab-list-connected-desktop {
		display: none
	}
}

.s-tab-mobile-select-trigger {
	width: 100%;
	text-align: left
}

.s-tab-mobile-select-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 12px
}

.s-tab-mobile-select-item {
	cursor: pointer
}

/* Overflow/More feature styles */
.s-tab-overflow-hidden {
	display: none !important
}

/* More trigger - inherits tab trigger styles, just needs minor adjustments */
.s-tab-more-trigger {
	border-bottom-color: transparent
}

/* More dropdown item */
.s-tab-more-item {
	cursor: pointer
}
/* Remove number input spinners */
.s-pin-input input[type='number']::-webkit-inner-spin-button,
.s-pin-input input[type='number']::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.s-pin-input input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Ensure consistent box-sizing */
.s-pin-input input {
	box-sizing: border-box;
}

/* Base styles for the s-textarea wrapper */
.s-textarea-wrapper {
	display: flex;
	flex-direction: column;
}
.s-textarea-wrapper > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(4px * var(--tw-space-y-reverse));
}

/* Container for the s-textarea and its potential suffix (clear button) */
.s-textarea-container {
	position: relative;
	display: flex;
	width: 100%;
}

/* Base s-textarea styles */
.s-textarea-base {
	width: 100%;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 1px;
	padding-bottom: 1px;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-color: #fff;
}
.s-textarea-base:focus {
	--tw-border-opacity: 1;
	border-color: rgb(4 114 225 / var(--tw-border-opacity, 1));
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
}
.s-textarea-base::placeholder {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}
.s-textarea-base:disabled {
	cursor: not-allowed;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Size variants */
.s-textarea-regular {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 14px;
	line-height: 20px;
}

.s-textarea-large {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	font-size: 16px;
	line-height: 24px;
}

/* Auto-sizing styles */
.field-sizing-content {
	field-sizing: content;
	min-height: 6rem;
}

/* Validation status styles */
.s-textarea-error {
	--tw-border-opacity: 1;
	border-color: rgb(222 24 39 / var(--tw-border-opacity, 1));
}
.s-textarea-error:focus {
	--tw-border-opacity: 1;
	border-color: rgb(222 24 39 / var(--tw-border-opacity, 1));
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(222 24 39 / var(--tw-ring-opacity, 1));
}

.s-textarea-success {
	--tw-border-opacity: 1;
	border-color: rgb(27 126 57 / var(--tw-border-opacity, 1));
}

.s-textarea-success:focus {
	--tw-border-opacity: 1;
	border-color: rgb(27 126 57 / var(--tw-border-opacity, 1));
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(27 126 57 / var(--tw-ring-opacity, 1));
}

/* Disabled state */
.s-textarea-disabled {
	cursor: not-allowed;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Label styles */
.s-textarea-label-container {
	display: flex;
	align-items: center;
	gap: 4px;
}

.s-textarea-label {
	display: block;
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	font-size: 14px;
	line-height: 20px;
}

/* Label size for large s-textarea */
.s-textarea-wrapper:has(.s-textarea-large) .s-textarea-label {
	font-size: 16px;
	line-height: 24px;
}

.s-textarea-label.disabled {
	opacity: 0.5;
}

.s-textarea-label-info {
	display: flex;
	height: 16px;
	width: 16px;
	align-items: center;
	justify-content: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Description styles */
.s-textarea-description {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	font-size: 14px;
	line-height: 20px;
}

/* Description size for large s-textarea */
.s-textarea-wrapper:has(.s-textarea-large) .s-textarea-description {
	font-size: 16px;
	line-height: 24px;
}

/* Success message styles */
.s-textarea-validation-success {
	margin-top: 4px;
	--tw-text-opacity: 1;
	color: rgb(13 98 37 / var(--tw-text-opacity, 1));
	font-size: 14px;
	line-height: 20px;
}

/* Success message size for large s-textarea */
.s-textarea-wrapper:has(.s-textarea-large) .s-textarea-validation-success {
	font-size: 16px;
	line-height: 24px;
}

/* Clear button styles */
.s-textarea-suffix {
	position: absolute;
	right: 12px;
	top: 12px;
	display: flex;
	align-items: center;
}

.s-textarea-clear-button {
	display: inline-flex;
	height: 1.25rem;
	width: 1.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-textarea-clear-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(167 170 175 / var(--tw-bg-opacity, 1));
}

.s-textarea-clear-button:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}

.s-textarea-clear-button:disabled {
	pointer-events: none;
	opacity: 0.5;
}

/* Adjust clear button position for large s-textarea */
.s-textarea-wrapper:has(.s-textarea-large) .s-textarea-suffix {
	right: 16px;
	top: 16px;
}

/* Placeholder text sizing */
.s-textarea-regular::placeholder {
	font-size: 14px;
	line-height: 20px;
}

.s-textarea-large::placeholder {
	font-size: 16px;
	line-height: 24px;
}

/* Footer container for validation messages and character counter */
.s-textarea-footer {
	margin-top: 4px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

/* Character counter styles */
.s-textarea-character-counter {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
	flex-shrink: 0;
	text-align: right;
	margin-left: auto;
}

/* Character counter when at limit - red color */
.s-textarea-character-counter-limit {
	--tw-text-opacity: 1;
	color: rgb(222 24 39 / var(--tw-text-opacity, 1));
}

/* Character counter when standalone (no validation message) */
.s-textarea-character-counter:only-child {
	margin-top: 4px;
}

/* Character counter size for large s-textarea */
.s-textarea-wrapper:has(.s-textarea-large) .s-textarea-character-counter {
	font-size: 16px;
	line-height: 24px;
}/* SToast Component Styles - Using Sting Design Tokens */

/* ============================================================================
   TOAST CONTAINER STYLES
   ============================================================================ */

.s-toast {
	position:
		relative;
	display:
		flex;
	min-width:
		18rem;
	max-width:
		24rem;
	flex-direction:
		column;
	overflow:
		hidden;
	border-radius:
		4px;
	border-width:
		1px;
	box-shadow:
		rgba(1, 42, 56, 0.08) 0px 2px 8px,
		rgba(1, 42, 56, 0.06) 0px 4px 16px;
}

.s-toast-neutral {
	--tw-border-opacity:
		1;
	border-color:
		rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity:
		1;
	background-color:
		rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity:
		1;
	color:
		rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-toast-primary {
	--tw-border-opacity:
		1;
	border-color:
		rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity:
		1;
	background-color:
		rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity:
		1;
	color:
		rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-toast-info {
	--tw-border-opacity:
		1;
	border-color:
		rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity:
		1;
	background-color:
		rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity:
		1;
	color:
		rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-toast-success {
	--tw-border-opacity:
		1;
	border-color:
		rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity:
		1;
	background-color:
		rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity:
		1;
	color:
		rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-toast-warning {
	--tw-border-opacity:
		1;
	border-color:
		rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity:
		1;
	background-color:
		rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity:
		1;
	color:
		rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-toast-danger {
	--tw-border-opacity:
		1;
	border-color:
		rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity:
		1;
	background-color:
		rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity:
		1;
	color:
		rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* ============================================================================
   TOAST ICON STYLES (aligned with variant colors)
   ============================================================================ */

.s-toast-icon-neutral {
	--tw-text-opacity:
		1;
	color:
		rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-toast-icon-primary {
	--tw-text-opacity:
		1;
	color:
		rgb(4 114 225 / var(--tw-text-opacity, 1));
}

.s-toast-icon-info {
	--tw-text-opacity:
		1;
	color:
		rgb(89 136 140 / var(--tw-text-opacity, 1));
}

.s-toast-icon-success {
	--tw-text-opacity:
		1;
	color:
		rgb(35 162 74 / var(--tw-text-opacity, 1));
}

.s-toast-icon-warning {
	--tw-text-opacity:
		1;
	color:
		rgb(136 96 26 / var(--tw-text-opacity, 1));
}

.s-toast-icon-danger {
	--tw-text-opacity:
		1;
	color:
		rgb(253 77 87 / var(--tw-text-opacity, 1));
}

/* ============================================================================
   TOAST PROGRESS BAR STYLES (aligned with variant colors and button colors)
   ============================================================================ */

.s-toast-progress {
	height:
		100%;
	transform-origin:
		left;
}

.s-toast-progress-neutral {
	--tw-bg-opacity:
		1;
	background-color:
		rgb(167 170 175 / var(--tw-bg-opacity, 1));
}

.s-toast-progress-primary {
	--tw-bg-opacity:
		1;
	background-color:
		rgb(4 114 225 / var(--tw-bg-opacity, 1));
}

.s-toast-progress-info {
	--tw-bg-opacity:
		1;
	background-color:
		rgb(89 136 140 / var(--tw-bg-opacity, 1));
}

.s-toast-progress-success {
	--tw-bg-opacity:
		1;
	background-color:
		rgb(27 126 57 / var(--tw-bg-opacity, 1));
}

.s-toast-progress-warning {
	--tw-bg-opacity:
		1;
	background-color:
		rgb(165 124 31 / var(--tw-bg-opacity, 1));
}

.s-toast-progress-danger {
	--tw-bg-opacity:
		1;
	background-color:
		rgb(222 24 39 / var(--tw-bg-opacity, 1));
}

/* Progress bar animation */
@keyframes toast-progress {
	from {
		transform: scaleX(1);
	}
	to {
		transform: scaleX(0);
	}
}

.s-toast-progress-animated {
	animation: toast-progress linear forwards;
}

/* ============================================================================
   TOAST TITLE & DESCRIPTION
   ============================================================================ */

.s-toast-title {
	font-size:
		14px;
	line-height:
		20px;
	font-weight:
		500;
	--tw-text-opacity:
		1;
	color:
		rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-toast-description {
	font-size:
		14px;
	line-height:
		20px;
	--tw-text-opacity:
		1;
	color:
		rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* ============================================================================
   RADIX TOAST ROOT STYLES
   ============================================================================ */

.s-toast-radix-root {
	pointer-events:
		auto;
	position:
		relative;
	display:
		flex;
	width:
		100%;
	align-items:
		flex-start;
}

.s-toast-radix-root[data-swipe='cancel'] {
	--tw-translate-x:
		0px;
	transform:
		translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.s-toast-radix-root[data-swipe='end'] {
	transform: translateX(var(--radix-toast-swipe-end-x));
}

.s-toast-radix-root[data-swipe='move'] {
	transition-property:
		none;
	transform: translateX(var(--radix-toast-swipe-move-x));
}

/* ============================================================================
   TOAST VIEWPORT STYLES
   ============================================================================ */

.s-toast-viewport {
	pointer-events:
		none !important;
	position:
		fixed;
	z-index:
		100000000;
	display:
		flex;
	max-height:
		100vh;
	flex-direction:
		column-reverse;
	gap:
		12px;
	overflow:
		visible;
	padding:
		16px;
}

.s-toast-viewport > * {
	pointer-events:
		auto !important;
}

@media (min-width: 640px) {
	.s-toast-viewport {
		flex-direction:
		column;
	}
}

/* ============================================================================
   TOAST POSITION & ANIMATION STYLES
   ============================================================================ */

/* Bottom Right Position */
.s-toast-position-bottom-right[data-state='open'] {
	animation: toast-in-right 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.s-toast-position-bottom-right[data-state='closed'] {
	animation: toast-out-right 0.15s ease-in;
}

/* Bottom Left Position */
.s-toast-position-bottom-left[data-state='open'] {
	animation: toast-in-left 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.s-toast-position-bottom-left[data-state='closed'] {
	animation: toast-out-left 0.15s ease-in;
}

/* ============================================================================
   KEYFRAME ANIMATIONS
   ============================================================================ */

@keyframes toast-in-right {
	from {
		transform: translateX(calc(100% + 1rem));
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes toast-out-right {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(calc(100% + 1rem));
		opacity: 0;
	}
}

@keyframes toast-in-left {
	from {
		transform: translateX(calc(-100% - 1rem));
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes toast-out-left {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(calc(-100% - 1rem));
		opacity: 0;
	}
}

/* Animation utility classes */
.animate-toast-in-right {
	animation: toast-in-right 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-toast-out-right {
	animation: toast-out-right 0.15s ease-in;
}

.animate-toast-in-left {
	animation: toast-in-left 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-toast-out-left {
	animation: toast-out-left 0.15s ease-in;
}
/* SNotification Component Styles - Using Sting Design Tokens */

/* Base notification styles */
.s-notification {
	position: relative;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	padding: 0;
}

.s-notification-root {
	position: relative;
	width: 100%;
	border-radius: 8px;
}

.s-notification-container {
	position: relative;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px;
}

.s-notification-icon {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-shrink: 0;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.s-notification-icon svg {
	height: 20px;
	width: 20px;
}

.s-notification-main {
	position: relative;
	box-sizing: border-box;
	display: flex;
	min-height: 1px;
	min-width: 1px;
	flex-shrink: 0;
	flex-grow: 1;
	flex-basis: 0px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	padding: 0;
}

.s-notification-content {
	position: relative;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-shrink: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 4px;
	padding: 0;
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	line-height: 1;
}

.s-notification-title {
	width: 100%;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	font-family: 'Inter', sans-serif;
}

.s-notification-description {
	width: 100%;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	font-family: 'Inter', sans-serif;
}

.s-notification-actions {
	position: relative;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-shrink: 0;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 0;
}

/* Apply negative margin when the first button in actions is a ghost variant */
.s-notification-actions:has(> :first-child[class*="-ghost"]) {
	margin-left: -8px;
}

.s-notification-action {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	padding: 0;
}

.s-notification-action-content {
	position: relative;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-shrink: 0;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.s-notification-action-text {
	white-space: nowrap;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	line-height: 1;
	font-family: 'Inter', sans-serif;
}

.s-notification-close {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-shrink: 0;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.s-notification-close-icon {
	height: 16px;
	width: 16px;
}

/* Variant Styles */

/* Info variant */
.s-notification-info .s-notification-root {
	--tw-bg-opacity: 1;
	background-color: rgb(247 250 250 / var(--tw-bg-opacity, 1));
}

.s-notification-info.s-notification-stroke .s-notification-root {
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(146 182 186 / var(--tw-border-opacity, 1));
}

.s-notification-info .s-notification-icon svg {
	--tw-text-opacity: 1;
	color: rgb(49 75 78 / var(--tw-text-opacity, 1));
}

.s-notification-info .s-notification-title {
	--tw-text-opacity: 1;
	color: rgb(49 75 78 / var(--tw-text-opacity, 1));
}

.s-notification-info .s-notification-action-text {
	--tw-text-opacity: 1;
	color: rgb(89 136 140 / var(--tw-text-opacity, 1));
}

/* Primary variant */
.s-notification-primary .s-notification-root {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.s-notification-primary.s-notification-stroke .s-notification-root {
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(130 191 253 / var(--tw-border-opacity, 1));
}

.s-notification-primary .s-notification-icon svg {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

.s-notification-primary .s-notification-title {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

.s-notification-primary .s-notification-action-text {
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
}

/* Danger variant */
.s-notification-danger .s-notification-root {
	--tw-bg-opacity: 1;
	background-color: rgb(250 241 244 / var(--tw-bg-opacity, 1));
}

.s-notification-danger.s-notification-stroke .s-notification-root {
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(255 180 188 / var(--tw-border-opacity, 1));
}

.s-notification-danger .s-notification-icon svg {
	--tw-text-opacity: 1;
	color: rgb(115 8 17 / var(--tw-text-opacity, 1));
}

.s-notification-danger .s-notification-title {
	--tw-text-opacity: 1;
	color: rgb(115 8 17 / var(--tw-text-opacity, 1));
}

.s-notification-danger .s-notification-action-text {
	--tw-text-opacity: 1;
	color: rgb(222 24 39 / var(--tw-text-opacity, 1));
}

/* Warning variant */
.s-notification-warning .s-notification-root {
	--tw-bg-opacity: 1;
	background-color: rgb(255 245 220 / var(--tw-bg-opacity, 1));
}

.s-notification-warning.s-notification-stroke .s-notification-root {
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(255 223 98 / var(--tw-border-opacity, 1));
}

.s-notification-warning .s-notification-icon svg {
	--tw-text-opacity: 1;
	color: rgb(107 70 18 / var(--tw-text-opacity, 1));
}

.s-notification-warning .s-notification-title {
	--tw-text-opacity: 1;
	color: rgb(107 70 18 / var(--tw-text-opacity, 1));
}

.s-notification-warning .s-notification-action-text {
	--tw-text-opacity: 1;
	color: rgb(107 70 18 / var(--tw-text-opacity, 1));
}

/* Success variant */
.s-notification-success .s-notification-root {
	--tw-bg-opacity: 1;
	background-color: rgb(238 255 243 / var(--tw-bg-opacity, 1));
}

.s-notification-success.s-notification-stroke .s-notification-root {
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(107 221 140 / var(--tw-border-opacity, 1));
}

.s-notification-success .s-notification-icon svg {
	--tw-text-opacity: 1;
	color: rgb(27 126 57 / var(--tw-text-opacity, 1));
}

.s-notification-success .s-notification-title {
	--tw-text-opacity: 1;
	color: rgb(1 65 20 / var(--tw-text-opacity, 1));
}

.s-notification-success .s-notification-action-text {
	--tw-text-opacity: 1;
	color: rgb(27 126 57 / var(--tw-text-opacity, 1));
}

/* Neutral variant */
.s-notification-neutral .s-notification-root {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-notification-neutral.s-notification-stroke .s-notification-root {
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
}

.s-notification-neutral .s-notification-icon svg {
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-notification-neutral .s-notification-title {
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-notification-neutral .s-notification-action-text {
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
}

/* Close button hover states */
.s-notification-close button {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	padding: 4px;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-notification-close button:hover {
	background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
	--tw-bg-opacity: 0.05;
}

/* Interactive states */
.s-notification-action-text {
	cursor: pointer;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-notification-action-text:hover {
	opacity: 0.75;
}/* SProgressBar Component Styles */


@keyframes indeterminate {
	0% {
		left: -35%;
		right: 100%;
	}
	50% {
		left: 100%;
		right: -90%;
	}
	75% {
		left: 100%;
		right: -90%;
	}
	100% {
		left: 100%;
		right: -90%;
	}
}

@keyframes indeterminate-short {
	0% {
		left: -200%;
		right: 100%;
	}
	50% {
		left: 107%;
		right: -8%;
	}
	75% {
		left: 107%;
		right: -8%;
	}
	100% {
		left: 107%;
		right: -8%;
	}
}

/* Variant colors - use text-* utilities to set 'color' property */

.s-progress {
	position: absolute;
	top: 0px;
	height: 0.25rem;
	width: 100%;
	overflow: hidden;
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}

.s-progress-success {
	--tw-bg-opacity: 1;
	background-color: rgb(27 126 57 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(27 126 57 / var(--tw-text-opacity, 1));
}

.s-progress-warning {
	--tw-bg-opacity: 1;
	background-color: rgb(165 124 31 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(165 124 31 / var(--tw-text-opacity, 1));
}

.s-progress-info {
	--tw-bg-opacity: 1;
	background-color: rgb(89 136 140 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(89 136 140 / var(--tw-text-opacity, 1));
}

.s-progress-danger {
	--tw-bg-opacity: 1;
	background-color: rgb(222 24 39 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(222 24 39 / var(--tw-text-opacity, 1));
}

.s-progress-primary {
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
}


/* Indeterminate progress bar with two animating layers */
.s-progress-indeterminate {
	height: 100%;
	width: 100%;
	background-color: transparent !important;
}

/* Pseudo-elements inherit currentColor from parent */
.s-progress-indeterminate::before,
.s-progress-indeterminate::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	will-change: left, right;
	background-color: currentColor;
}

.s-progress-indeterminate::before {
	animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.s-progress-indeterminate::after {
	animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
	animation-delay: 2s;
}


.s-list-view {
    display: flex
}

/* Direction variants */
.s-list-view-horizontal {
    flex-direction: row
}

.s-list-view-vertical {
    flex-direction: column
}

/* Gap variants */
.s-list-view-gap-none {
    gap: 0
}

.s-list-view-gap-small {
    gap: 8px
}

.s-list-view-gap-regular {
    gap: 16px
}

.s-list-view-gap-large {
    gap: 24px
}

/* List Item */
.s-list-item {
    display: flex
}

/* Align content variants */
.s-list-item-align-default {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between
}

.s-list-item-align-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

/* List Item Internal Structure */
.s-list-item-container {
    display: flex
}

.s-list-item-avatar-wrapper {
    display: flex;
    height: 40px;
    width: 40px;
    justify-self: center;
    padding: 8px
}

.s-list-item-avatar-circle {
    position: relative;
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(138 141 147 / var(--tw-text-opacity, 1))
}

.s-list-item-avatar-icon {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem
}

.s-list-item-content {
    display: flex;
    width: 100%;
    padding: 8px
}

.s-list-item-aside {
    display: flex;
    align-items: center;
    padding: 0;
    --tw-text-opacity: 1;
    color: rgb(196 198 204 / var(--tw-text-opacity, 1))
}

/* SStackedList styles - Exact replica from Vue with s- prefix */

.s-stacklist {
	position: relative;
	margin-bottom: 0px;
	padding-left: 0px;
}

.s-stacklist.s-divider > :not([hidden]) ~ :not([hidden]) {
	--tw-divide-y-reverse: 0;
	border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
	border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
	border-style: solid;
	--tw-divide-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-divide-opacity, 1));
}

.s-stacklist li.s-list-block {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.s-stacklist li.s-list-block.s-warning {
	--tw-bg-opacity: 1;
	background-color: rgb(255 250 237 / var(--tw-bg-opacity, 1));
}

.s-stacklist li.s-list-block.s-success {
	--tw-bg-opacity: 1;
	background-color: rgb(238 255 243 / var(--tw-bg-opacity, 1));
}

.s-stacklist li.s-list-block.s-danger {
	--tw-bg-opacity: 1;
	background-color: rgb(250 241 244 / var(--tw-bg-opacity, 1));
}

.s-stacklist li.s-list-block.s-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.s-stacklist li.s-list-block.s-border-div {
	border-left-width: 1px;
	border-right-width: 1px;
}

.s-stacklist li.s-list-block.s-border-div:first-of-type {
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	border-left-width: 1px;
	border-right-width: 1px;
	border-top-width: 1px;
}

.s-stacklist li.s-list-block.s-border-div:last-of-type {
	border-bottom-right-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
	border-left-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px !important;
}

.s-stacklist.s-selectable li.s-list-block:hover {
	cursor: pointer;
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.s-stacklist li .s-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.s-stacklist li .s-wrapper .s-icon {
	position: relative;
	height: 32px;
	width: 32px;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 237 184 / var(--tw-bg-opacity, 1));
	padding: 8px;
	--tw-text-opacity: 1;
	color: rgb(136 96 26 / var(--tw-text-opacity, 1));
}

.s-stacklist li .s-wrapper .s-avatar {
	height: 32px;
	width: 32px;
	border-radius: 9999px;
}

.s-stacklist li .s-content {
	display: flex;
	flex-direction: column;
}

.s-stacklist li .s-content > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(6px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(6px * var(--tw-space-y-reverse));
}

.s-stacklist li .s-content {
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: left;
}

.s-stacklist li .s-content .s-title {
	margin-top: 2px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-stacklist li .s-content .s-sub-title {
	font-size: 0.75rem;
	line-height: 1rem;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Description primary - smaller title, larger description */
.s-stacklist.s-description-primary li .s-content .s-title {
	margin-top: 2px;
	font-size: 0.75rem;
	line-height: 1rem;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-stacklist.s-description-primary li .s-content .s-sub-title {
	font-size: 0.875rem;
	line-height: 1.25rem;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-stacklist li.s-list-block .s-action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
}

.s-stacklist li.s-list-block .s-check-icon {
	height: 20px;
	width: 20px;
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
}

.s-stacklist li.s-list-block .s-trash-icon {
	height: 20px;
	width: 20px;
	--tw-text-opacity: 1;
	color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.s-stacklist li.s-list-block.s-selected {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.s-stacklist li.s-list-block.s-selected:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1));
}

/* ── Drag & drop support ────────────────────────────────────────────────── */

.s-stacklist li.s-list-block {
	/* Position context for the absolute drop indicator */
	position: relative;
}

.s-stacklist li.s-list-block .s-drag-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-radius: 2px;
}

.s-stacklist li.s-list-block .s-drag-handle:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}

.s-stacklist li.s-list-block .s-drag-handle {
	touch-action: none;
}

.s-stacklist li.s-list-block.s-dragging {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0px 0px 2px 0px rgba(0, 0, 30, 0.10), 0px 2px 4px 0px rgba(0, 0, 30, 0.10), 0px 4px 8px 0px rgba(0, 0, 30, 0.10);
	--tw-shadow-colored: 0px 0px 2px 0px var(--tw-shadow-color), 0px 2px 4px 0px var(--tw-shadow-color), 0px 4px 8px 0px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	z-index: 1000;
	cursor: grabbing !important;
}

/* Floating clone rendered inside `<DragOverlay>` while an item is being
   dragged. Sized by dnd-kit to match the source item's bounding box, so
   the clone keeps its original dimensions regardless of which item it's
   hovering over — preventing the visual stretch/compress that occurs
   when items have different heights. */
.s-stacklist li.s-list-block.s-drag-overlay-item {
	cursor: grabbing;
	border-radius: 2px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	pointer-events: none;
}

.s-stacklist li.s-list-block .s-drop-indicator {
	pointer-events: none;
	position: absolute;
	left: 0px;
	right: 0px;
	height: 0.125rem;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	z-index: 10;
}

.s-stacklist li.s-list-block .s-drop-indicator.s-drop-indicator-top {
	top: -1px;
}

.s-stacklist li.s-list-block .s-drop-indicator.s-drop-indicator-bottom {
	bottom: -1px;
}

.s-stacklist li.s-list-block .s-drop-indicator::before,
.s-stacklist li.s-list-block .s-drop-indicator::after {
	content: '';
	position: absolute;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	top: -3px;
}

.s-stacklist li.s-list-block .s-drop-indicator::before {
	left: -4px;
}

.s-stacklist li.s-list-block .s-drop-indicator::after {
	right: -4px;
}

.s-stacklist li.s-stacklist-edge-drop-zone {
	pointer-events: none;
	position: absolute;
	left: 0px;
	right: 0px;
	z-index: 20;
	height: 16px;
	padding: 0px;
	list-style: none;
}

.s-stacklist li.s-stacklist-edge-drop-zone-top {
	top: -8px;
}

.s-stacklist li.s-stacklist-edge-drop-zone-bottom {
	bottom: -8px;
}

.s-stacklist li.s-stacklist-edge-drop-zone .s-drop-indicator {
	pointer-events: none;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 50%;
	height: 0.125rem;
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
}

.s-stacklist li.s-stacklist-edge-drop-zone .s-drop-indicator::before,
.s-stacklist li.s-stacklist-edge-drop-zone .s-drop-indicator::after {
	content: '';
	position: absolute;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	top: -3px;
}

.s-stacklist li.s-stacklist-edge-drop-zone .s-drop-indicator::before {
	left: -4px;
}

.s-stacklist li.s-stacklist-edge-drop-zone .s-drop-indicator::after {
	right: -4px;
}
/* SPageHeader Component Styles */

.s-page-header {
	z-index: 100;
	display: flex;
	width: 100%;
	flex-direction: column;
}

/* Main header - has box-shadow by default (when no SubHeader) */
.s-page-header-container {
	min-height: 32px;
	width: 100%;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 32px;
	padding-right: 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}
@media not all and (min-width: 768px) {

	.s-page-header-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}
.s-page-header-container {
	box-shadow: 0px 1px 2px -1px rgba(0, 0, 30, 0.20), 0px 2px 4px -2px rgba(0, 0, 30, 0.20);
}

/* When SubHeader exists, main header has border-bottom instead of box-shadow */
.s-page-header:has(.s-page-header-subheader) .s-page-header-container {
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	box-shadow: none;
}

.s-page-header-row {
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

@media not all and (min-width: 768px) {

	.s-page-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

.s-page-header-left {
	display: flex;
	gap: 24px;
}

@media not all and (min-width: 768px) {

	.s-page-header-left {
		width: 100%;
		min-width: 0px;
	}
}

.s-page-header-left.has-breadcrumb {
	flex-direction: row;
	align-items: flex-start;
}

.s-page-header-left.no-breadcrumb {
	flex-direction: row;
	align-items: center;
}

@media not all and (min-width: 768px) {

	.s-page-header-left.no-breadcrumb {
		align-items: flex-start;
	}
}

.s-page-header-leading-action {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.s-page-header-leading-action.with-breadcrumb {
	padding-top: 0.25rem;
}

.s-page-header-content {
	display: flex;
	min-width: 0px;
}

.s-page-header-content.has-breadcrumb {
	flex-direction: column;
	gap: 4px;
}

.s-page-header-breadcrumb {
	display: flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
}

.s-page-header-title-container {
	min-width: 0px;
}

.s-page-header-title-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.s-page-header-title {
	font-size: 20px;
	line-height: 26px;
	font-weight: 700;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}


.s-page-header-description-popover {
	font-size: 14px;
	line-height: 20px;
}

/* Invisible bridge for description popover to prevent closing when moving cursor slowly */
.s-page-header-description-popover-content {
	position: relative;
}

/* Pseudo-element creates an invisible bridge extending above the popover */
.s-page-header-description-popover-content::before {
	content: '';
	position: absolute;
	/* Extend upward to bridge the gap between trigger and popover */
	bottom: 100%;
	left: 0;
	right: 0;
	/* Height should cover the gap (sideOffset is 4px by default) plus some extra space */
	height: 12px;
	/* Invisible but still captures hover events */
	background: transparent;
	pointer-events: auto;
}

.s-page-header-actions {
	display: flex;
	flex-shrink: 0;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

@media not all and (min-width: 768px) {

	.s-page-header-actions {
		width: 100%;
		flex-wrap: wrap;
	}
}

.s-page-header-description {
	max-width: 50ch;
	padding-top: 4px;
}

.s-page-header-description-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Leading action button wrapper */
.s-page-header-leading-action-button {
	display: flex;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
}

/* SubHeader Section - has box-shadow when present */
.s-page-header-subheader {
	width: 100%;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	padding-left: 32px;
	padding-right: 32px;
	padding-top: 16px;
	padding-bottom: 16px;
}
@media not all and (min-width: 768px) {

	.s-page-header-subheader {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* 2XL Screen Layout: Center content with max-width constraint (contained variant - default) */
@media (min-width: 1536px) {

	.s-page-header-contained .s-page-header-container {
		padding-left: 0px;
		padding-right: 0px;
	}

	.s-page-header-contained .s-page-header-row {
		margin-left: auto;
		margin-right: auto;
		max-width: 1536px;
		padding-left: 32px;
		padding-right: 32px;
	}

	.s-page-header-contained .s-page-header-subheader {
		padding-left: 0px;
		padding-right: 0px;
	}

	.s-page-header-contained .s-page-header-subheader-content {
		margin-left: auto;
		margin-right: auto;
		max-width: 1536px;
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* Full width variant - no max-width constraints */
.s-page-header-full .s-page-header-container {
	width: 100%;
}

.s-page-header-full .s-page-header-row {
	width: 100%;
}

.s-page-header-full .s-page-header-subheader {
	width: 100%;
}

.s-page-header-full .s-page-header-subheader-content {
	width: 100%;
}
.s-section-container {

	width: 100%
}

.s-section-header {

	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 1rem
	/* Bottom margin is driven by the `headerGap` modifier classes below. */
}

/* Gap between the header row and the card body (driven by the `headerGap`
 * prop). Default modifier `s-section-header-gap-small` matches the previous
 * hard-coded `mb-mi` so existing call sites are visually unchanged. */
.s-section-header-gap-none {

	margin-bottom: 0px
}

.s-section-header-gap-small {

	margin-bottom: 8px
}

.s-section-header-gap-regular {

	margin-bottom: 16px
}

.s-section-header-gap-large {

	margin-bottom: 24px
}

/* When a description is present, top-align the row so right actions stay
 * with the title rather than drifting down to the description baseline. */
.s-section-header-with-description {

	align-items: flex-start
}

.s-section-header-left {

	display: flex;

	flex: 1 1 0%;

	flex-direction: column;

	gap: 4px
}

.s-section-header-title {

	font-size: 16px;

	line-height: 24px;

	font-weight: 600;

	--tw-text-opacity: 1;

	color: rgb(26 29 33 / var(--tw-text-opacity, 1))
}

.s-section-header-description {

	font-size: 14px;

	line-height: 20px;

	--tw-text-opacity: 1;

	color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

.s-section-header-right {

	display: flex;

	align-items: center;

	gap: 0.5rem
}/* SContainedList styles - Vue behavior with React design tokens and s- prefix */

.s-contained-list {
	display: block;
	width: 100%;
}

.s-contained-list.s-text-small {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.s-contained-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.s-contained-list-dividers.s-list-items > :not([hidden]) ~ :not([hidden]) {
	border-top-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}

.s-contained-list-item {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: center;
	line-height: 1.25rem;
}

.s-contained-list-item > .s-item-wrapper,
.s-contained-list-item > .s-item-wrapper > .s-item-content {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 1rem;
}

.s-contained-list-item > .s-item-wrapper:first-child {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.s-labels-block .s-contained-list-item > .s-item-wrapper > .s-item-content {
	align-items: stretch;
	gap: 0px;
}

@media not all and (min-width: 768px) {

	.s-labels-block .s-contained-list-item > .s-item-wrapper > .s-item-content {
		flex-direction: column;
	}
}

.s-labels-block
	.s-contained-list-item
	> .s-item-wrapper
	> .s-item-content
	> span {
	display: flex;
	align-items: center;
}

.s-labels-block
	.s-contained-list-item
	> .s-item-wrapper
	> .s-item-content
	> .s-value {
	width: 100%;
	cursor: default;
	white-space: normal;
	line-height: 1.25rem;
}

.s-labels-block
	.s-contained-list-item
	> .s-item-wrapper
	> .s-item-content
	.s-value
	> button {
	margin-right: -0.5rem;
}

.s-justified {
	display: flex;
	justify-content: space-between;
}

.s-contained-list-item .s-label {
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-labels-block .s-contained-list-item .s-label {
	min-width: 12rem;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	line-height: 1.25rem;
}

.s-list-basic.s-list-small .s-contained-list-item .s-label,
.s-list-basic.s-list-small .s-contained-list-item .s-value {
	min-height: 1.75rem;
	padding: 0.25rem;
	line-height: 1rem;
}

.s-list-basic .s-list-item-indicator {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.s-list-basic .s-contained-list-item .s-label,
.s-list-basic .s-contained-list-item .s-value {
	display: flex;
	min-height: 2rem;
	align-items: center;
	padding: 0.5rem;
	line-height: 1.25rem;
}

.s-list-basic.s-list-large .s-contained-list-item .s-label,
.s-list-basic.s-list-large .s-contained-list-item .s-value {
	min-height: 2.5rem;
}

.s-list-basic.s-list-small.s-labels-block .s-contained-list-item .s-label,
.s-list-basic.s-list-small.s-labels-block .s-contained-list-item .s-value {
	padding: 0.25rem;
}

.s-list-basic.s-list-large.s-labels-block .s-contained-list-item .s-label,
.s-list-basic.s-list-large.s-labels-block .s-contained-list-item .s-value {
	padding: 1rem;
}

.s-list-regular.s-labels-inline .s-contained-list-item .s-label,
.s-list-regular.s-labels-inline .s-contained-list-item .s-value,
.s-list-small.s-labels-inline .s-contained-list-item .s-label,
.s-list-small.s-labels-inline .s-contained-list-item .s-value,
.s-list-large.s-labels-inline .s-contained-list-item .s-label,
.s-list-large.s-labels-inline .s-contained-list-item .s-value {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.s-labels-rows .s-contained-list-item > .s-item-wrapper > .s-item-content {
	flex-direction: column;
	align-items: flex-start;
	gap: 0px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.s-list-small.s-labels-rows
	.s-contained-list-item
	> .s-item-wrapper
	> .s-item-content {
	padding: 0.25rem;
}

.s-list-regular.s-labels-rows
	.s-contained-list-item
	> .s-item-wrapper
	> .s-item-content {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.s-list-large.s-labels-rows
	.s-contained-list-item
	> .s-item-wrapper
	> .s-item-content {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 10px;
	padding-right: 16px;
}

.s-labels-rows .s-contained-list-layout .s-list-item-indicator {
	padding-left: 0px;
	padding-right: 0px;
}

.s-contained-list-layout:last-of-type .s-contained-list-item {
	border-bottom-width: 0px;
}

.s-list-regular.s-labels-rows .s-contained-list-item .s-label,
.s-list-regular.s-labels-rows .s-contained-list-item .s-value,
.s-list-small.s-labels-rows .s-contained-list-item .s-label,
.s-list-small.s-labels-rows .s-contained-list-item .s-value,
.s-list-large.s-labels-rows .s-contained-list-item .s-label,
.s-list-large.s-labels-rows .s-contained-list-item .s-value {
	padding: 0px;
	line-height: 1.25rem;
	height: min-content;
	min-height: 1rem;
}

/* ================================================
   Menu Variant Styles - Matches CContainedList Vue
   ================================================ */

/* Container */
.s-contained-list.s-list-menu {
	margin-bottom: 16px;
	display: block;
	width: 100%;
}

/* Container with divider */
.s-contained-list.s-list-menu.s-list-menu--divider {
	padding-top: 16px;
	border-top: 1px solid #C4C6CC;
}

/* Header */
.s-list-menu .s-menu-header {
	margin-bottom: 8px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
}

/* Menu items container */
.s-list-menu .s-menu-items {
	display: flex;
	flex-direction: column;
}

/* Menu item base */
.s-menu-item {
	display: flex;
	cursor: pointer;
	user-select: none;
	border-radius: 4px;
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
	padding-top: 4px;   /* $space_ti */
	padding-bottom: 8px; /* $space_mi */
	transition: background-color 0.1s ease-in-out;
}

.s-menu-item:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-menu-item:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}

/* Menu item content layout */
.s-menu-item-content {
	display: flex;
	align-items: center;
}

/* Menu item icon */
.s-menu-item-icon {
	margin-right: 8px;
	flex-shrink: 0;
}

/* Menu item title */
.s-menu-item-title {
	font-size: 12px;
	line-height: 16px;
}

/* Menu item trailing icon (submenu indicator) */
.s-menu-item-trailing-icon {
	margin-left: auto;
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Menu item info icon (for disabled state) */
.s-menu-item-info-icon {
	margin-left: 4px;
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Menu item hover state */
.s-menu-item:not(.s-menu-item--disabled):hover {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	text-decoration-line: underline;
}

/* Menu item danger variant */
.s-menu-item--danger {
	--tw-text-opacity: 1;
	color: rgb(222 24 39 / var(--tw-text-opacity, 1));
}

.s-menu-item--danger:not(.s-menu-item--disabled):hover {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
	text-decoration-line: none;
}

/* Menu item disabled state */
.s-menu-item--disabled {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	text-decoration-line: none;
}

.s-menu-item--disabled:hover {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	text-decoration-line: none;
}

/* Legacy menu variant styles for backward compatibility */
.s-contained-list.s-list-menu a.s-contained-list-item:hover {
	background-color: transparent;
}

.s-contained-list.s-list-menu .s-contained-list-item .s-value {
	display: flex;
	cursor: pointer;
	align-items: center;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	margin-left: 0;
	min-height: 0;
	background-color: transparent;
	line-height: 16px;
}

.s-contained-list.s-list-menu .s-contained-list-item .s-value:hover {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
	text-decoration-line: underline;
}

.s-contained-list.s-list-menu .s-alert {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

.s-contained-list.s-list-menu.s-list-small .s-contained-list-item .s-value {
	display: flex;
	align-items: center;
	padding-top: 4px;
	padding-bottom: 8px;
	font-size: 14px;
	line-height: 20px;
}

.s-contained-list.s-list-menu.s-list-regular .s-contained-list-item .s-value {
	padding-top: 4px;
	padding-bottom: 8px;
	font-size: 14px;
	line-height: 20px;
}

.s-contained-list.s-list-menu.s-list-large .s-contained-list-item .s-value {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	padding-top: 16px;
	padding-bottom: 16px;
}

.s-contained-list-full-width,
.s-contained-list-full-width .s-contained-list-item {
	width: 100%;
}

.s-contained-list.s-list-basic .s-list-title-description {
	margin-bottom: 1rem;
}

.s-contained-list.s-list-basic
	.s-list-title-description
	> :not([hidden])
	~ :not([hidden]) {
	margin-top: 0.25rem;
}

.s-contained-list.s-list-menu .s-list-title-description {
	margin-bottom: 0.5rem;
}

.s-contained-list.s-list-menu h4.s-list-title {
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 12px;
	padding-bottom: 0;
}

.s-contained-list.s-list-basic .s-list-title-description .s-list-title {
	margin: 0px;
	margin-bottom: 0.25rem;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-contained-list-layout {
	position: relative;
}

.s-contained-list.s-list-menu .s-contained-list-layout {
	/* @apply transition-colors hover:bg-neutral-25; */
	padding: 0;
}

.s-contained-list-layout .s-list-label-bold {
	font-weight: 600;
}

.s-contained-list-layout .s-list-item-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
}



.s-contained-list-item .s-link:hover {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
	text-decoration-line: underline;
}

/* Typography with React design tokens */
.s-contained-list-item .s-label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.s-contained-list-item .s-value {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-labels-block .s-contained-list-item .s-label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.s-list-basic.s-list-small .s-contained-list-item .s-label,
.s-list-basic.s-list-small .s-contained-list-item .s-value {
	font-size: 14px;
	line-height: 20px;
}

.s-list-basic.s-list-large .s-contained-list-item .s-label,
.s-list-basic.s-list-large .s-contained-list-item .s-value {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
}

.s-contained-list.s-list-basic .s-list-title-description p {
	margin: 0px;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

/* Focus and interaction states */
.s-contained-list-item {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-labels-inline .s-contained-list-item:hover,
.s-labels-block .s-contained-list-item:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Justified alignment override */
.s-justified .s-contained-list-item > .s-item-wrapper > .s-item-content {
	justify-content: space-between;
}
/* Base Tracker Layouts */
.s-progress-tracker {
	position: relative;
	display: flex;
	min-width: 0px;
	max-width: 100%;
	align-items: flex-start;
	justify-content: space-between;
	container: progress-tracker / inline-size;
}

.s-progress-tracker:not(.s-vertical) {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.s-progress-tracker.s-minimum {
	width: max-content;
}

.s-progress-tracker.s-full {
	width: 100%;
}

/* Step */
.s-progress-step {
	position: relative;
	display: flex;
	width: 100%;
	min-width: 0px;
	flex-direction: column;
	gap: 4px;

	.s-step-description>* {
		padding-right: 32px;
	}
}

.s-progress-step-interactive {
	cursor: pointer;
	border-radius: 2px;
	touch-action: manipulation;
}

.s-progress-step-interactive:focus {
	outline: none;
}

.s-progress-step-interactive:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(80 165 252 / var(--tw-ring-opacity, 1));
}

.s-progress-tracker.s-align-center:not(.s-vertical) .s-progress-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	width: auto;

	.s-step-description>* {
		padding-right: 0;
	}
}

/* Horizontal center align - center the first child (title) with circle */
.s-progress-tracker.s-align-center:not(.s-vertical) .s-step-description > *:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
}

.s-progress-tracker.s-xsmall.s-align-center:not(.s-vertical) .s-step-description > *:first-child {
	min-height: 12px;
}

.s-progress-tracker.s-small.s-align-center:not(.s-vertical) .s-step-description > *:first-child {
	min-height: 16px;
}

.s-progress-tracker.s-large.s-align-center:not(.s-vertical) .s-step-description > *:first-child {
	min-height: 32px;
}

.s-progress-step>div:first-of-type {
	display: flex;
	flex-direction: row;
	align-items: center;
}

/* Circle */
.s-progress-circle {
	position: relative;
	z-index: 10;
	display: flex;
	height: 20px;
	width: 20px;
	flex-shrink: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-step-label {
	text-align: center;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
}

.s-progress-circle svg {
	height: 12px;
	width: 12px;
}

/* Size variants */
.s-progress-tracker.s-xsmall .s-progress-circle {
	height: 12px;
	width: 12px;
}

.s-progress-tracker.s-small .s-progress-circle {
	height: 16px;
	width: 16px;
}

.s-progress-tracker.s-large .s-progress-circle {
	height: 32px;
	width: 32px;
}

/* Step label sizes */
.s-progress-tracker.s-xsmall .s-progress-circle .s-step-label {
	font-size: 10px;
}

.s-progress-tracker.s-small .s-progress-circle .s-step-label {
	font-size: 0.75rem;
	line-height: 1rem;
}

.s-progress-tracker.s-large .s-progress-circle .s-step-label {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

/* Description */
.s-step-description {
	min-width: 0px;
	max-width: 100%;
	padding-top: 8px;
	font-weight: 400;
	line-height: 1rem;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	overflow-wrap: anywhere;
}

.s-step-description > * {
	min-width: 0;
	max-width: 100%;
}

/* Horizontal description - with padding */
.s-progress-tracker:not(.s-vertical) .s-step-description {
	padding-top: 8px;
}

.s-step-description span:first-of-type {
	padding-bottom: 4px;
}

.s-progress-step.s-active .s-step-description,
.s-progress-tracker.s-align-center .s-progress-step.s-active .s-step-description {
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* Description text sizes */
.s-progress-tracker.s-xsmall .s-progress-step .s-step-description {
	font-size: 0.75rem;
	line-height: 1rem;
}

.s-progress-tracker.s-small .s-progress-step .s-step-description {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.s-progress-tracker.s-large .s-progress-step .s-step-description {
	font-size: 16px;
	line-height: 24px;
}

/* Progress Bar */
.s-progress-bar {
	width: 100%;
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.s-progress-tracker.s-align-center:not(.s-vertical) .s-progress-step .s-progress-bar {
	position: absolute;
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

/* Progress bar heights */
.s-progress-tracker.s-xsmall .s-progress-bar,
.s-progress-tracker.s-small .s-progress-bar,
.s-progress-tracker.s-regular .s-progress-bar {
	height: 2px;
}

.s-progress-tracker.s-large .s-progress-bar {
	height: 4px;
}

/* === THEME === */

/* Done steps - success */
.s-progress-step.s-done .s-progress-bar,
.s-progress-tracker.s-align-center .s-progress-step.s-done .s-progress-bar,
.s-progress-step.s-done .s-progress-circle,
.s-progress-tracker.s-align-center .s-progress-step.s-done .s-progress-circle {
	--tw-bg-opacity: 1;
	background-color: rgb(13 98 37 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Active step - Blue */
.s-progress-step.s-active .s-progress-circle,
.s-progress-tracker.s-align-center .s-progress-step.s-active .s-progress-circle {
	--tw-bg-opacity: 1;
	background-color: rgb(1 38 75 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* Text colors for done and active steps */
.s-progress-step.s-done .s-step-description,
.s-progress-tracker.s-align-center .s-progress-step.s-done .s-step-description,
.s-progress-step.s-active .s-step-description,
.s-progress-tracker.s-align-center .s-progress-step.s-active .s-step-description {
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* === VERTICAL === */
.s-progress-tracker.s-vertical {
	width: 100%;
	flex-direction: column;
}

/* Step */
.s-progress-tracker.s-vertical .s-progress-step {
	height: 100%;
	flex-direction: row;
	align-items: flex-start;
	gap: 8px;
}

.s-progress-tracker.s-vertical.s-align-center .s-progress-step {
	height: 100%;
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

/* Circle */
.s-progress-tracker.s-vertical .s-progress-circle {
	margin-bottom: 0px;
}

/* Progress Bar */
.s-progress-tracker.s-vertical .s-progress-bar {
	min-height: 24px;
	width: 2px;
	flex: 1 1 0%;
}

.s-progress-tracker.s-vertical.s-large .s-progress-bar {
	width: 4px;
}

/* Inner vertical layout */
.s-progress-tracker.s-vertical .s-progress-step>div:first-of-type {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
}

/* Start alignment uses only the connector below the bullet */
.s-progress-tracker.s-vertical:not(.s-align-center) .s-progress-step .s-progress-bar-top {
	display: none;
}

/* Give start-aligned vertical steps more breathing room */
.s-progress-tracker.s-vertical:not(.s-align-center) .s-progress-step .s-progress-bar-bottom {
	min-height: 36px;
}

/* Active step paints only the top connector segment */
.s-progress-tracker.s-vertical .s-progress-step.s-active .s-progress-bar-top {
	--tw-bg-opacity: 1;
	background-color: rgb(13 98 37 / var(--tw-bg-opacity, 1));
}

/* Keep first/last rows centered while hiding extra outer connector lines */
.s-progress-tracker.s-vertical .s-progress-step:first-child .s-progress-bar-top,
.s-progress-tracker.s-vertical .s-progress-step:last-child .s-progress-bar-bottom {
	background-color: transparent;
}

/* Description - Vertical with no padding */
.s-progress-tracker.s-vertical .s-step-description {
	display: block;
	width: 100%;
	padding: 0px;
}

/* Vertical center alignment: center against actual content height */
.s-progress-tracker.s-vertical.s-align-center .s-step-description {
	padding-bottom: 0px;
}

.s-progress-tracker.s-vertical.s-xsmall .s-step-description {
	margin-top: 0px;
	padding: 0px;
}

.s-progress-tracker.s-vertical.s-small .s-step-description {
	margin-top: 0px;
	padding: 0px;
}

.s-progress-tracker.s-vertical.s-large .s-step-description {
	margin-top: 0.25rem;
	padding: 0px;
}

/* Ensure center mode does not add extra bottom padding from size variants */
.s-progress-tracker.s-vertical.s-align-center .s-step-description,
.s-progress-tracker.s-vertical.s-xsmall.s-align-center .s-step-description,
.s-progress-tracker.s-vertical.s-small.s-align-center .s-step-description,
.s-progress-tracker.s-vertical.s-large.s-align-center .s-step-description {
	padding-bottom: 0px;
}

/* Vertical center align - center the first child (title) with circle */
.s-progress-tracker.s-vertical.s-align-center .s-step-description > *:first-child {
	display: flex;
	align-items: center;
	min-height: 20px;
}

.s-progress-tracker.s-vertical.s-xsmall.s-align-center .s-step-description > *:first-child {
	min-height: 12px;
}

.s-progress-tracker.s-vertical.s-small.s-align-center .s-step-description > *:first-child {
	min-height: 16px;
}

.s-progress-tracker.s-vertical.s-large.s-align-center .s-step-description > *:first-child {
	min-height: 32px;
}

/* Narrow containers keep horizontal trackers readable inside drawers and phones. */
@container progress-tracker (max-width: 520px) {
	.s-progress-tracker:not(.s-vertical):not(.s-align-center) .s-progress-step {
		flex: 0 0 8rem;
		width: 8rem;
		scroll-snap-align: start;
	}

	.s-progress-tracker:not(.s-vertical) .s-progress-step .s-step-description > * {
		padding-right: 16px;
	}
}
/* SPageLayout Component Styles */

/* Ensure smooth scrolling for content areas */
.s-page-layout-content {
	scroll-behavior: smooth;
}

/* Optional: Add custom scrollbar styling using sting tokens */
.s-page-layout-navigation::-webkit-scrollbar,
.s-page-layout-content::-webkit-scrollbar {
	height: 8px;
	width: 8px; /* spacing.mi (8px) */
}

.s-page-layout-navigation::-webkit-scrollbar-track,
.s-page-layout-content::-webkit-scrollbar-track {
	background-color: transparent;
}

.s-page-layout-navigation::-webkit-scrollbar-thumb,
.s-page-layout-content::-webkit-scrollbar-thumb {
	border-radius: 4px; /* borderRadius.st (4px) */
	background: rgba(0, 0, 0, 0.1);
}

.s-page-layout-navigation::-webkit-scrollbar-thumb:hover,
.s-page-layout-content::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.2);
}

/* Banner Base Styles */
.s-banner {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-radius: 6px;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-banner-content {
  display: flex;
  max-width: 42rem;
  flex-direction: column;
  gap: 6px;
  padding: 32px;
}

.s-banner-title {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.08px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-banner-description {
  font-size: 12px;
  line-height: 16px;
  --tw-text-opacity: 1;
  color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-banner-buttons {
  display: flex;
  gap: 16px;
  padding-top: 16px;
}

.s-banner-image {
  display: flex;
  height: auto;
  width: 33.333333%;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.s-banner-image img {
  object-fit: cover;
  max-height: 11rem;
}

.s-banner-image video {
  border-radius: 6px;
  object-fit: cover;
  max-height: 11rem;
}

.s-banner-image video::-webkit-media-controls-panel {
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
  --tw-bg-opacity: 0.75;
}

/* Variants */
.s-banner-hero {
  border-radius: 0;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-bottom-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}


/* Sizes */

/* Small */
.s-banner-small .s-banner-content {
  gap: 4px;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.s-banner-small .s-banner-content .s-banner-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.s-banner-small .s-banner-content .s-banner-description {
  max-width: 32rem;
  font-size: 12px;
  line-height: 16px;
}

.s-banner-small .s-banner-content .s-banner-buttons {
  padding-top: 4px;
}

.s-banner-small .s-banner-image img,
.s-banner-small .s-banner-image video {
  max-height: 9rem;
}

.s-banner-small .s-banner-image video {
  border-radius: 6px;
}

/* Large */
.s-banner-large .s-banner-content {
  max-width: 48rem;
  gap: 4px;
  padding: 32px;
}

.s-banner-large .s-banner-content .s-banner-title {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.24px;
  font-weight: 600;
}

.s-banner-large .s-banner-content .s-banner-description {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.s-banner-large .s-banner-content .s-banner-buttons {
  padding-top: 16px;
}

.s-banner-large .s-banner-image img,
.s-banner-large .s-banner-image video {
  max-height: 12rem;
}

/* Themes */

.s-banner.s-banner-theme-default {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.s-banner.s-banner-theme-default .s-banner-buttons button.s-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(1 42 56 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(230 234 235 / var(--tw-text-opacity, 1));
}

/* Deep */
.s-banner.s-banner-theme-deep {
  background: rgb(1,42,56);
  background: linear-gradient(149deg, rgba(1,42,56,1) 0%, rgba(0,55,74,1) 100%);
}

.s-banner.s-banner-theme-deep .s-banner-title {
  --tw-text-opacity: 1;
  color: rgb(230 234 235 / var(--tw-text-opacity, 1));
}

.s-banner.s-banner-theme-deep .s-banner-description {
  color: rgb(230 234 235 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 0.7;
}

.s-banner.s-banner-theme-deep .s-banner-buttons button.s-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(191 249 11 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 42 56 / var(--tw-text-opacity, 1));
}

.s-banner.s-banner-theme-deep .s-banner-buttons button.s-btn-primary-outline {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(230 234 235 / var(--tw-border-opacity, 1));
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(230 234 235 / var(--tw-text-opacity, 1));
}

.s-banner.s-banner-theme-deep .s-banner-buttons button.s-btn-primary-outline:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 234 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(1 42 56 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  animation-duration: 300ms;
}

/* Ice and Sand */
.s-banner.s-banner-theme-iceandsand {
  background: rgb(162,193,196);
  background: linear-gradient(153deg, rgba(162,193,196,0.25) 0%, rgba(224,219,198,0.25) 100%);
}

.s-banner.s-banner-theme-iceandsand .s-banner-title {
  --tw-text-opacity: 1;
  color: rgb(41 48 49 / var(--tw-text-opacity, 1));
}

.s-banner.s-banner-theme-iceandsand .s-banner-description {
  color: rgb(41 48 49 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 0.8;
}

.s-banner.s-banner-theme-iceandsand .s-banner-buttons button.s-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(1 42 56 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(230 234 235 / var(--tw-text-opacity, 1));
}

.s-banner.s-banner-theme-iceandsand .s-banner-buttons button.s-btn-neutral {
  --tw-text-opacity: 1;
  color: rgb(41 48 49 / var(--tw-text-opacity, 1));
}

.s-banner.s-banner-theme-iceandsand .s-banner-buttons button.s-btn-neutral:hover {
  --tw-text-opacity: 1;
  color: rgb(41 48 49 / var(--tw-text-opacity, 1));
}

/* Container Styles */
.s-banner-container {
  width: 100%;
}

.s-banner-container-content {
  display: flex;
  justify-content: space-between;
}

.s-banner-content-wrapper {
  width: 100%;
  gap: 16px;
  padding: 16px;
}

@media (min-width: 1280px) {
  .s-banner-content-wrapper {
    padding: 24px;
  }
}

.s-banner-image-wrapper {
  display: none;
  width: 18rem;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .s-banner-image-wrapper {
    display: block;
  }
}

@media (min-width: 1536px) {
  .s-banner-image-wrapper {
    width: 24rem;
  }
}

.s-banner-elements {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.s-banner-header {
  gap: 4px;
}

.s-banner-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s-banner-subtext {
  font-size: 10px;
  line-height: 14px;
  --tw-text-opacity: 1;
  color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-banner-title-wrapper {
  gap: 2px;
} /* Main Hero Card Container */
.s-hero-card-container {
    display: flex;
    flex-direction: column
}
.s-hero-card-container > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

/* Banner */
.s-hero-card-banner-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px
}

.s-hero-card-banner-spacer {
    flex: 1 1 0%
}

/* Metrics Card */
.s-hero-card-metrics-card {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    flex-direction: column
}

/* Skip SCard’s outer shell in layout so .card is the flex/grid item (equal heights). */
.s-hero-card-wrapper-three > .card-component,
.s-hero-card-wrapper-four-and-above > .card-component {
    display: contents
}

.s-hero-card-wrapper-three > .card-component > .card,
.s-hero-card-wrapper-four-and-above > .card-component > .card {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    flex-direction: column
}

.s-hero-card-metrics-container-list {
    display: flex;
    align-items: center;
    gap: 16px
}

.s-hero-card-metrics-container-card {
    display: flex;
    height: 100%;
    flex-direction: column
}

.s-hero-card-metrics-content {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    font-size: 32px;
    line-height: 40px
}

.s-hero-card-metrics-content-list {
    display: flex
}

.s-hero-card-metrics-description {
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 16px;
    --tw-text-opacity: 1;
    color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

.s-hero-card-metrics-spacer {
    flex: 1 1 0%
}

.s-hero-card-metrics-action {
    display: flex;
    justify-content: flex-end
}

/* Metrics Wrapper - Item Count Variants */
.s-hero-card-wrapper-two-and-below {
    margin-top: 16px !important;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.s-hero-card-wrapper-three {
    margin-top: 16px !important;
    display: flex;
    align-items: stretch;
    gap: 16px
}

.s-hero-card-wrapper-four-and-above {
    margin-top: 16px !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px
}

@media (min-width: 1280px) {
    .s-hero-card-wrapper-four-and-above {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

/* Metrics Variants - Layout */
.s-hero-card-metrics-variant-list-item {
    display: flex;
    align-items: center;
    gap: 16px
}

.s-hero-card-metrics-variant-card-item {
    display: flex;
    flex-direction: column
}

/* Metrics Background Colors */
.s-hero-card-metrics-bg-danger {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(165 24 28 / var(--tw-text-opacity, 1))
}

.s-hero-card-metrics-bg-neutral {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(62 66 71 / var(--tw-text-opacity, 1))
}/* SEditor Base Styles */
.s-editor {
	/* keep root class explicit; sting-preflight utility is not available in this CSS scope */
}

/* TipTap Editor Wrapper */
.s-tiptap-editor {
	position: relative
}

/* Toolbar Styles */
.s-editor-toolbar {
	position: sticky;
	left: 0px;
	top: 0px;
	z-index: 2;
	display: flex;
	flex: none;
	justify-content: space-between;
	gap: 0.5rem;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
	padding: 0.5rem
}

.s-toolbar-left {
	display: flex;
	width: 70%;
	flex-wrap: wrap;
	gap: 4px
}

.s-toolbar-right {
	display: flex;
	width: 30%;
	justify-content: flex-end;
	gap: 8px
}

/* Editor Content Styles */
.s-editor-content {
	padding: 16px
}

/* TipTap Editor Styles */
.s-tiptap-editor .ProseMirror {
	min-height: 200px;
	border-style: none;
	outline: 2px solid transparent;
	outline-offset: 2px
}

.s-tiptap-editor .ProseMirror:focus {
	outline: 2px solid transparent;
	outline-offset: 2px
}

/* Placeholder styling */
.s-tiptap-editor .ProseMirror p.is-empty::before {
	pointer-events: none;
	float: left;
	height: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	content: attr(data-placeholder)
}

/* Table Styles - Matching STable component */
.s-tiptap-editor .selectedCell {
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(80 165 252 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1))
}

.s-tiptap-editor .tableWrapper {
	position: relative;
	margin-top: 8px;
	margin-bottom: 8px;
	width: fit-content;
	overflow: hidden;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-tiptap-editor .tableWrapper .resize-cursor {
	cursor: col-resize
}

.s-tiptap-editor table {
	min-width: 400px;
	table-layout: auto;
	border-collapse: collapse
}

/* Table Header - Matching STable.Head (bg-neutral-50 from STable) */
.s-tiptap-editor table thead {
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-tiptap-editor table th {
	min-width: 150px;
	padding: 8px;
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	border-right-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-tiptap-editor table th:last-child {
	border-right-width: 0px
}

.s-tiptap-editor table th {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1))
}

/* Rounded corners for first and last header cells */
.s-tiptap-editor table thead tr:first-child th:first-child {
	border-top-left-radius: 6px
}

.s-tiptap-editor table thead tr:first-child th:last-child {
	border-top-right-radius: 6px
}

/* Table Body - Matching STable.Body with row hover */
.s-tiptap-editor table tbody tr {
	--tw-border-opacity: 1;
	border-bottom-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}
.s-tiptap-editor table tbody tr:not(:last-child) {
	border-bottom-width: 1px
}

.s-tiptap-editor table tbody tr:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1))
}

.s-tiptap-editor table td {
	min-width: 150px;
	padding: 8px;
	font-size: 14px;
	line-height: 20px;
	border-right-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-tiptap-editor table td:last-child {
	border-right-width: 0px
}

/* Table Footer - Matching STable.Footer */
.s-tiptap-editor table tfoot {
	border-top-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-tiptap-editor table tfoot td {
	padding: 8px;
	font-size: 14px;
	line-height: 20px;
	border-right-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1))
}

.s-tiptap-editor table tfoot td:last-child {
	border-right-width: 0px
}

/* Image Styles */
.s-tiptap-editor .s-editor-image {
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 300px;
	justify-self: center
}

/* Paragraph Spacing */
.s-tiptap-editor p:not(:last-child) {
	margin-bottom: 0.5rem
}

/* Strikethrough styling */
.s-tiptap-editor s,
.s-tiptap-editor .ProseMirror s {
	text-decoration-line: line-through
}

/* Heading Styles */
.s-tiptap-editor h1 {
	margin-bottom: 16px;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700
}

.s-tiptap-editor h2 {
	margin-bottom: 12px;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700
}

.s-tiptap-editor h3 {
	margin-bottom: 8px;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700
}

.s-tiptap-editor h4 {
	margin-bottom: 8px;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600
}

.s-tiptap-editor h5 {
	margin-bottom: 4px;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600
}

.s-tiptap-editor h6 {
	margin-bottom: 4px;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600
}

/* List Styles */
.s-tiptap-editor ul {
	margin-left: 24px;
	list-style-type: disc
}

.s-tiptap-editor ol {
	margin-left: 24px;
	list-style-type: decimal
}

.s-tiptap-editor li {
	margin-bottom: 4px
}

/* Link Styles */
.s-tiptap-editor a {
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
	text-decoration-line: underline
}
.s-tiptap-editor a:hover {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1))
}

/* Code Styles */
.s-tiptap-editor code {
	border-radius: 0.25rem;
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.875rem;
	line-height: 1.25rem
}

.s-tiptap-editor pre {
	margin-top: 8px;
	margin-bottom: 8px;
	border-radius: 0.25rem;
	--tw-bg-opacity: 1;
	background-color: rgb(26 29 33 / var(--tw-bg-opacity, 1));
	padding: 16px;
	--tw-text-opacity: 1;
	color: rgb(240 241 243 / var(--tw-text-opacity, 1))
}

.s-tiptap-editor pre code {
	background-color: transparent;
	padding: 0;
	--tw-text-opacity: 1;
	color: rgb(240 241 243 / var(--tw-text-opacity, 1))
}

/* Blockquote Styles */
.s-tiptap-editor blockquote {
	margin-top: 8px;
	margin-bottom: 8px;
	border-left-width: 4px;
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	padding-left: 16px;
	font-style: italic;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1))
}

/* Horizontal Rule */
.s-tiptap-editor hr {
	margin-top: 16px;
	margin-bottom: 16px;
	border-top-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1))
}

/* Size Variants */
.s-editor-small .s-editor-content {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 8px;
	padding-bottom: 8px
}

.s-editor-small .s-tiptap-editor .ProseMirror {
	min-height: 150px;
	font-size: 0.875rem;
	line-height: 1.25rem
}

.s-editor-large .s-editor-content {
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 16px;
	padding-bottom: 16px
}

.s-editor-large .s-tiptap-editor .ProseMirror {
	min-height: 300px;
	font-size: 1rem;
	line-height: 1.5rem
}

/* State Variants */
.s-editor-disabled {
	cursor: not-allowed;
	opacity: 0.6
}

.s-editor-disabled .s-tiptap-editor .ProseMirror {
	cursor: not-allowed
}

.s-editor-readonly {
	opacity: 0.8
}

.s-editor-readonly .s-editor-toolbar {
	display: none
}

/* Highlight/Mark Styles */
.s-tiptap-editor mark {
	--tw-bg-opacity: 1;
	background-color: rgb(255 230 141 / var(--tw-bg-opacity, 1))
}

/* Merge Variable Styles */
.merge-var {
	display: inline-block;
	cursor: default;
	user-select: none;
	border-radius: 0.25rem;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(255 216 71 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 237 184 / var(--tw-bg-opacity, 1));
	padding-left: 0.375rem;
	padding-right: 0.375rem;
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(136 96 26 / var(--tw-text-opacity, 1))
}

.merge-var:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(255 230 141 / var(--tw-bg-opacity, 1))
}
.s-email-editor {
	position: relative;
	width: 100%;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-email-editor-regular {
	max-width: 640px;
}

.s-email-editor-wide {
	max-width: 48rem;
}

.s-email-editor-disabled {
	pointer-events: none;
	opacity: 0.6;
}

.s-email-editor-disabled-banner {
	pointer-events: auto;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-radius: 2px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(255 230 141 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 245 220 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(136 96 26 / var(--tw-text-opacity, 1));
}

.s-email-editor-canvas {
	position: relative;
}

.s-email-editor-section {
	position: relative;
	min-width: 0px;
	border-radius: 2px;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-section-hidden {
	border-style: dashed;
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

.s-email-editor-section-hidden.s-email-editor-section-locked {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.s-email-editor-section-hidden .s-email-editor-contenteditable,
.s-email-editor-section-hidden .s-email-editor-image-frame,
.s-email-editor-section-hidden .s-email-editor-button-link {
	opacity: 0.45;
}

.s-email-editor-editable .s-email-editor-section {
	cursor: text;
}

.s-email-editor-editable .s-email-editor-section:hover {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}

.s-email-editor-section-selected {
	--tw-border-opacity: 1;
	border-color: rgb(26 29 33 / var(--tw-border-opacity, 1));
}

.s-email-editor-section-selected.s-email-editor-section-card {
	--tw-border-opacity: 1;
	border-color: rgb(26 29 33 / var(--tw-border-opacity, 1));
}

.s-email-editor-section + .s-email-editor-section {
	margin-top: 16px;
}

.s-email-editor-section-text {
	font-size: 14px;
	line-height: 20px;
	line-height: 1.375;
}

.s-email-editor-section-locked {
	cursor: default;
}

.s-email-editor-locked-banner {
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-email-editor-section-card {
	border-radius: 2px;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.s-email-editor-section-card p + p,
.s-email-editor-section-card p + div,
.s-email-editor-section-card div + div {
	margin-top: 16px;
}

.s-email-editor-section-branding {
	border-width: 0px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 36px;
	padding-top: 0px;
	min-height: calc(var(--sting-space-7xl) + var(--sting-space-xxl));
}

.s-email-editor-editable .s-email-editor-section-branding {
	cursor: default;
}

.s-email-editor-editable .s-email-editor-section-branding:hover {
	border-width: 0px;
}

.s-email-editor-section-branding::before {
	content: '';
	display: block;
	height: var(--sting-space-md);
	margin-bottom: var(--sting-space-lg);
	background-image: repeating-linear-gradient(
		135deg,
		var(--sting-color-neutral-25) 0,
		var(--sting-color-neutral-25) 4px,
		var(--sting-color-neutral-0) 4px,
		var(--sting-color-neutral-0) 8px
	);
}

.s-email-editor-branding-content .em-powered {
	display: flex;
	justify-content: flex-end;
}

.s-email-editor-branding-content .em-powered-by {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: 9999px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 10px;
	line-height: 14px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-email-editor-branding-content img {
	height: 12px;
	width: 12px;
	opacity: 0.8;
}

.s-email-editor-section-text h1,
.s-email-editor-section-text h2,
.s-email-editor-section-text h3 {
	margin-bottom: 8px;
	font-weight: 600;
	line-height: 1.25;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-email-editor-section-text h1 {
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.16px;
	font-weight: 600;
}

.s-email-editor-section-text h2 {
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.08px;
	font-weight: 600;
}

.s-email-editor-section-text p + p {
	margin-top: 4px;
}

.s-email-editor-section-text strong {
	font-weight: 600;
}

.s-email-editor-section-text em {
	font-style: italic;
}

.s-email-editor-section-text u {
	text-decoration-line: underline;
}

.s-email-editor-section-text s {
	text-decoration-line: line-through;
}

.s-email-editor-section-text a {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	text-decoration-line: underline;
}

.s-email-editor-section-text blockquote {
	margin-top: 8px;
	margin-bottom: 8px;
	border-left-width: 2px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	padding-left: 16px;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-email-editor-section-text ul,
.s-email-editor-section-text ol {
	margin-top: 8px;
	margin-bottom: 8px;
	padding-left: 24px;
}

.s-email-editor-section-text ul {
	list-style-type: disc;
}

.s-email-editor-section-text ol {
	list-style-type: decimal;
}

.s-email-editor-section-muted {
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-email-editor-section-callout {
	border-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

.s-email-editor-align-left {
	text-align: left;
}

.s-email-editor-align-center {
	text-align: center;
}

.s-email-editor-align-right {
	text-align: right;
}

.s-email-editor-contenteditable {
	min-height: 24px;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-email-editor-contenteditable:empty::before {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	content: attr(data-placeholder);
}

/* Inline-editor concerns shared by both modern (`s-email-editor-merge-token`)
   and legacy (`.ed-label-mustache`) tokens. Visual colour / shape comes from
   the SBadge classes layered on top via `createEmailMergeTokenHtml`. */
.s-email-editor-merge-token,
.s-email-editor-section-text .ed-label-mustache {
	margin-left: 2px;
	margin-right: 2px;
	user-select: all;
	vertical-align: baseline;
	cursor: pointer;
}

.s-email-editor-readonly .s-email-editor-merge-token,
.s-email-editor-readonly .s-email-editor-section-text .ed-label-mustache {
	cursor: default;
}

/* Legacy seeded HTML (e.g. JSP-rendered `<span class="ed-label-mustache">`)
   can't easily acquire the `s-badge` classes at parse time, so we mirror
   SBadge's `info` (and `warning`) styling here using the same design tokens
   so legacy tokens look identical to freshly inserted ones. */
.s-email-editor-section-text .ed-label-mustache {
	display: inline-flex;
	height: 20px;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	border-radius: 9999px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(208 224 225 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(239 245 245 / var(--tw-bg-opacity, 1));
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 12px;
	line-height: 16px;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(69 106 109 / var(--tw-text-opacity, 1));
}

.s-email-editor-section-text .ed-label-mustache.mustache-warning {
	--tw-border-opacity: 1;
	border-color: rgb(255 237 184 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 245 220 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(107 70 18 / var(--tw-text-opacity, 1));
}

.s-email-editor-spacer-block {
	pointer-events: none;
}

/* Single canvas-level merge-variable trigger (mirrors #ed-mustache in tools.jspf).
   Lives inside the canvas and is positioned like a small tooltip at the caret.
   Kept above add-gap (z-30) so its button remains clickable when a short
   section places the caret trigger over the insert gap. */
.s-email-editor-merge-control {
	pointer-events: none;
	position: absolute;
	left: 20px;
	top: 12px;
	z-index: 40;
	display: flex;
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	align-items: center;
	transition-property: left,top;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	animation-duration: 150ms;
	animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.s-email-editor-merge-control-anchored {
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.s-email-editor-merge-button {
	pointer-events: auto;
	display: inline-flex;
	height: 36px;
	width: 36px;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-merge-button:hover {
	--tw-border-opacity: 1;
	border-color: rgb(80 165 252 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(1 38 75 / var(--tw-text-opacity, 1));
}

.s-email-editor-merge-button:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-email-editor-merge-button {
	position: relative;
}

.s-email-editor-merge-button-anchored {
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-email-editor-merge-button-anchored::after {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	width: 8px;
	height: 8px;
	--tw-translate-x: -50%;
	--tw-rotate: 45deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	border-left-width: 1px;
	border-top-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.s-email-editor-merge-token-control {
	pointer-events: none;
	position: absolute;
	z-index: 50;
	display: flex;
	--tw-translate-x: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.s-email-editor-merge-token-anchor {
	pointer-events: auto;
	height: 1px;
	width: 1px;
	opacity: 0;
}

/* Always rendered between sections (and after the last one) so the
   "+ insert" affordance is discoverable wherever the user hovers — not
   just on the selected section. The gap reserves a small constant
   height to act as a hit target; the button + line fade in on hover,
   focus, or while the dropdown is open. No layout shift. */
.s-email-editor-add-gap {
	position: relative;
	z-index: 30;
	display: flex;
	width: 100%;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-width: 0px;
	background-color: transparent;
	padding: 0px;
}
.s-email-editor-add-gap:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
}
.s-email-editor-add-gap {
	min-height: 24px;
}

.s-email-editor-add-gap-inner {
	display: flex;
	width: 100%;
	align-items: center;
}

.s-email-editor-add-button {
	display: inline-flex;
	height: 20px;
	width: 20px;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	opacity: 0;
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	animation-duration: 150ms;
}

.s-email-editor-add-line {
	height: 1px;
	flex: 1 1 0%;
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	opacity: 0;
	transition-property: background-color,opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	animation-duration: 150ms;
}

.s-email-editor-add-gap:hover .s-email-editor-add-button,
.s-email-editor-add-gap:focus-visible .s-email-editor-add-button,
.s-email-editor-add-gap[data-state='open'] .s-email-editor-add-button {
	--tw-border-opacity: 1;
	border-color: rgb(4 114 225 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
	opacity: 1;
}

.s-email-editor-add-gap:hover .s-email-editor-add-line,
.s-email-editor-add-gap:focus-visible .s-email-editor-add-line,
.s-email-editor-add-gap[data-state='open'] .s-email-editor-add-line {
	--tw-bg-opacity: 1;
	background-color: rgb(80 165 252 / var(--tw-bg-opacity, 1));
	opacity: 1;
}

.s-email-editor-add-gap:focus-visible .s-email-editor-add-button {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-email-editor-visibility-control {
	position: absolute;
	right: -36px;
	top: 0px;
	z-index: 10;
	display: flex;
	align-items: center;
}

.s-email-editor-visibility-button {
	display: inline-flex;
	height: 36px;
	width: 36px;
	align-items: center;
	justify-content: center;
	border-width: 0px;
	--tw-bg-opacity: 1;
	background-color: rgb(62 66 71 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-visibility-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(26 29 33 / var(--tw-bg-opacity, 1));
}

.s-email-editor-visibility-button:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-email-editor-section-hidden .s-email-editor-visibility-button {
	--tw-bg-opacity: 1;
	background-color: rgb(26 29 33 / var(--tw-bg-opacity, 1));
}

.s-email-editor-floating-actions {
	border-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-email-editor-action-button {
	display: inline-flex;
	height: 36px;
	width: 36px;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-action-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-email-editor-action-button:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-email-editor-action-button-icon {
	display: inline-flex;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
}

/* Matches the visibility button slot — flat, square, full-height, right-edge.
   `hideable` and "deletable" are mutually exclusive on a section so the two
   controls share the same affordance. */
.s-email-editor-delete-control {
	position: absolute;
	right: -36px;
	top: 0px;
	z-index: 10;
	display: flex;
	align-items: center;
}

.s-email-editor-delete-button {
	display: inline-flex;
	height: 36px;
	width: 36px;
	align-items: center;
	justify-content: center;
	border-width: 0px;
	--tw-bg-opacity: 1;
	background-color: rgb(62 66 71 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-delete-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(165 24 28 / var(--tw-bg-opacity, 1));
}

.s-email-editor-delete-button:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-email-editor-wing-button {
	position: absolute;
	left: -36px;
	top: 50%;
	z-index: 10;
	display: inline-flex;
	height: 32px;
	width: 32px;
	--tw-translate-y: -50%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-wing-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-email-editor-wing-button:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-email-editor-popover {
	position: relative;
	width: 15rem;
	padding: 0;
}

.s-email-editor-merge-popover {
	overflow: hidden;
}

.s-email-editor-merge-popover .dropdown-scroll-area-viewport {
	box-sizing: border-box;
	max-height: 20rem;
	overscroll-behavior: contain;
}

.s-email-editor-popover-title {
	padding-left: 16px;
	padding-right: 16px;
	padding-bottom: 4px;
	padding-top: 16px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-email-editor-menu-item {
	display: flex;
	width: 100%;
	cursor: pointer;
	align-items: center;
	gap: 8px;
	border-width: 0px;
	background-color: transparent;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-menu-item:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-email-editor-menu-item:focus-visible {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-email-editor-menu-item[data-disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.s-email-editor-menu-item-icon {
	height: 16px;
	width: 16px;
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-email-editor-menu-load-more {
	justify-content: center;
	gap: 12px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.s-email-editor-menu-load-more-icon {
	height: 12px;
	width: 12px;
	flex-shrink: 0;
}

.s-email-editor-image-frame {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	vertical-align: top;
}

.s-email-editor-image-frame img {
	display: block;
	height: auto;
	max-width: 100%;
	width: auto;
}

.s-email-editor-image-placeholder {
	display: flex;
	min-height: 8rem;
	min-width: 12rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-left: 16px;
	padding-right: 16px;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-email-editor-button-link {
	display: inline-flex;
	min-height: 32px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border-width: 0px;
	--tw-bg-opacity: 1;
	background-color: rgb(3 89 175 / var(--tw-bg-opacity, 1));
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	text-decoration-line: none;
}

.s-email-editor-button-link:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(2 63 125 / var(--tw-bg-opacity, 1));
}

.s-email-editor-button-link:disabled {
	cursor: default;
	opacity: 1;
}

.s-email-editor-button-link:disabled:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(3 89 175 / var(--tw-bg-opacity, 1));
}

/* Wraps the button + its optional description so they stack vertically while
   still honouring the section's text-align (left / center). */
.s-email-editor-button-stack {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.s-email-editor-align-center .s-email-editor-button-stack {
	align-items: center;
}

.s-email-editor-button-description {
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	max-width: calc(80px * 3.5);
	white-space: normal;
	word-break: break-word;
}

.s-email-editor-button-popover {
	width: 20rem;
}

.s-email-editor-image-popover {
	position: relative;
	z-index: 40;
	width: auto;
}

.s-email-editor-button-editor {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Soft, tooltip-styled editable preview that doubles as the description input.
   No border / focus ring — looks like the rendered description, but is fully
   editable. */
.s-email-editor-button-description-field {
	display: flex;
	width: 100%;
	cursor: text;
	border-radius: 6px;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.s-email-editor-button-description-field:focus-within {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.s-email-editor-button-description-input {
	min-height: 32px;
	width: 100%;
	resize: none;
	border-width: 0px;
	background-color: transparent;
	padding: 0;
	font-size: 12px;
	line-height: 16px;
	line-height: 1.375;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-email-editor-button-description-input::placeholder {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-email-editor-button-description-input:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.s-email-editor-button-description-input {
	/* Modern auto-grow — Chrome 123+, Safari 17.4+, Firefox 132+.
	   Falls back to the `rows` attribute on older browsers. */
	field-sizing: content;
}

.s-email-editor-button-align {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.s-email-editor-button-align-option {
	display: inline-flex;
	height: 36px;
	width: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-button-align-option:hover {
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-email-editor-button-align-option:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-email-editor-button-align-option-selected {
	--tw-border-opacity: 1;
	border-color: rgb(2 63 125 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(2 63 125 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-email-editor-button-align-option-selected:hover {
	--tw-border-opacity: 1;
	border-color: rgb(2 63 125 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(2 63 125 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* === Floating formatting toolbar (selection-anchored) ============= */
.s-email-editor-formatting-toolbar {
	pointer-events: auto;
	position: absolute;
	z-index: 50;
	display: flex;
	width: max-content;
	--tw-translate-x: -50%;
	--tw-translate-y: -100%;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding: 4px;
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	max-width: calc(100vw - 16px);
}

.s-email-editor-formatting-toolbar-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.s-email-editor-toolbar-button {
	display: inline-flex;
	height: 32px;
	width: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	border-width: 0px;
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-toolbar-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-email-editor-toolbar-button:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

.s-email-editor-toolbar-button:disabled,
.s-email-editor-toolbar-button[aria-disabled='true'] {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-email-editor-toolbar-button:disabled:hover,
.s-email-editor-toolbar-button[aria-disabled='true']:hover {
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-email-editor-toolbar-button-active {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

.s-email-editor-formatting-toolbar-link {
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
	border-top-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	padding-top: 4px;
}

.s-email-editor-formatting-toolbar-input {
	height: 32px;
	flex: 1 1 0%;
	border-radius: 2px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 8px;
	padding-right: 8px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.s-email-editor-formatting-toolbar-input:focus {
	--tw-border-opacity: 1;
	border-color: rgb(4 114 225 / var(--tw-border-opacity, 1));
}

.s-email-editor-formatting-toolbar-link-action {
	display: inline-flex;
	height: 32px;
	width: 32px;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	border-width: 0px;
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-email-editor-formatting-toolbar-link-action:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-email-editor-formatting-toolbar-link-action:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-color: #0472e1;
}

/* === Upload modal helpers =========================================
   Both the error banner and the "Your data is secure." microcopy live
   directly under the dropzone. They share the same left edge so the
   visual hierarchy reads as a single vertical stack instead of
   bouncing between left- and right-aligned rows. */
.s-email-editor-upload-secure {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-email-editor-upload-error {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 4px;
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(250 241 244 / var(--tw-bg-opacity, 1));
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(115 8 17 / var(--tw-text-opacity, 1));
}

.s-email-editor-upload-control .s-file-upload-icon,
.s-email-editor-upload-control .s-file-upload-helper,
.s-email-editor-upload-control .s-file-upload-placeholder span {
	display: none;
}

.s-email-editor-upload-control .s-file-upload-dropzone {
	display: flex;
	min-height: 8rem;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border-width: 1px;
	border-style: dashed;
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 24px;
	padding-bottom: 24px;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-email-editor-upload-control .s-file-upload-content > :not([hidden]) ~ :not([hidden]),
.s-email-editor-upload-control .s-file-upload-text > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.s-email-editor-upload-control .s-file-upload-files {
	margin-top: 8px;
}

.s-email-editor-upload-control > .sting-preflight:not(.s-file-upload) {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 8px;
	max-width: none;
}

.s-email-editor-upload-control > .sting-preflight:not(.s-file-upload) > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.s-email-editor-upload-control .s-file-upload-file-item {
	margin-top: 8px;
	max-width: none;
	border-radius: 0;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 12px;
	line-height: 16px;
}

.s-email-editor-upload-control .s-file-upload-file-name {
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

@media (max-width: 640px) {
	.s-email-editor-merge-control {
		left: 20px;
		top: 8px;
	}

	.s-email-editor-add-line {
		display: none;
	}

	.s-email-editor-visibility-control,
	.s-email-editor-delete-control {
		right: 0px;
		top: 0px;
	}
}
/* SCreatePage Component Styles */

.s-create-page {

    display: flex;

    min-height: 100vh;

    width: 100%;

    flex-direction: column;

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

/* Header - Full width, outside grid */
.s-create-page-header {

    width: 100%
}

.s-create-page-container {

    margin-left: auto;

    margin-right: auto;

    display: grid;

    width: 100%;

    grid-template-columns: repeat(12, minmax(0, 1fr));

    column-gap: 32px;

    row-gap: 24px
}

/* Affix (Left Sidebar/Navigation) */
.s-create-page-affix {

    display: flex;

    flex-direction: column
}

/* Content (Main Form Area) */
.s-create-page-content {

    isolation: isolate;

    display: flex;

    flex-direction: column
}

/* Aside (Right Sidebar) */
.s-create-page-aside {

    display: flex;

    flex-direction: column
}

/* ===== Content-Aside layout: fixed viewport, independent scrolling with FLEX ===== */

/* Lock the page to viewport height by default; relax this on <md */
.s-create-page--content-aside {

    display: flex;

    height: 100vh;

    max-height: 100vh;

    flex-direction: column;

    overflow: hidden
}
@media not all and (min-width: 768px) {

    .s-create-page--content-aside {

        height: auto;

        max-height: none;

        overflow: visible
    }
}

/* Container uses flex instead of grid for content-aside */
.s-create-page--content-aside .s-create-page-container {

    display: flex;

    min-height: 0px;

    flex: 1 1 0%;

    flex-direction: column;

    gap: 0px
}
@media not all and (min-width: 768px) {

    .s-create-page--content-aside .s-create-page-container {

        row-gap: 24px
    }
}

/* Body wrapper is row by default; stacks on <md */
.s-create-page--content-aside .s-create-page-body {

    display: flex;

    min-height: 0px;

    flex: 1 1 0%;

    flex-direction: row
}
@media not all and (min-width: 768px) {

    .s-create-page--content-aside .s-create-page-body {

        flex-direction: column
    }
}

/* Content area — flexible width, scrollable */
.s-create-page--content-aside .s-create-page-content {

    height: 100%;

    min-height: 0px;

    flex: 1 1 0%;

    overflow-y: auto;

    padding-top: 24px;

    padding-left: 32px;

    padding-right: 32px
}
@media not all and (min-width: 768px) {

    .s-create-page--content-aside .s-create-page-content {

        height: auto;

        width: 100%;

        flex: none;

        overflow: visible;

        padding-left: 16px;

        padding-right: 16px;

        padding-bottom: 24px
    }
}

/* Aside — fixed width, full height */
.s-create-page--content-aside .s-create-page-aside {

    height: 100%;

    min-height: 0px;

    width: 300px;

    flex-shrink: 0
}
@media not all and (min-width: 768px) {

    .s-create-page--content-aside .s-create-page-aside {

        height: auto;

        width: 100%;

        flex-shrink: 1
    }
}

/* Aside panel — neutral background, full height, left border */
.s-create-page-aside-panel {

    display: flex;

    height: 100%;

    flex-direction: column;

    border-left-width: 1px;

    --tw-border-opacity: 1;

    border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));

    --tw-bg-opacity: 1;

    background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1))
}
@media not all and (min-width: 768px) {

    .s-create-page-aside-panel {

        height: auto;

        border-top-width: 1px;

        border-left-width: 0px
    }
}

/* Aside inner scroll container — full height, scrollable */
.s-create-page-aside-sticky {

    min-height: 0px;

    flex: 1 1 0%;

    overflow-y: auto;

    padding: 32px
}
@media not all and (min-width: 768px) {

    .s-create-page-aside-sticky {

        overflow: visible;

        padding: 24px
    }
}
/* SRootLayout Component Styles */

/* Ensure smooth scrolling for the root layout */
.s-root-layout {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}




.sr-edit-table {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 16px;
	font-family: inherit;
}

/* Skip to content link - accessible skip navigation */
.sr-edit-table__skip-link {
	position: absolute;
	margin: -1px;
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
	border-width: 0px;
	line-height: 1;
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	padding: 1px;
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	text-decoration-line: none;
	clip: rect(0, 0, 0, 0);
	top: 0;
	left: 0;
	z-index: 100;
}

.sr-edit-table__skip-link:focus-visible {
	position: absolute;
	margin: 0px;
	height: auto;
	width: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
	display: inline-block;
}

.sr-edit-table__wrapper {
	width: 100%;
	overflow-x: auto;
}

.sr-edit-table__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}

.sr-edit-table__control {
	border-radius: 8px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	min-width: 180px;
}

.sr-edit-table__control legend {
	padding-left: 4px;
	padding-right: 4px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.sr-edit-table__control ul {
	margin-bottom: 0px;
	margin-top: 8px;
	display: flex;
	list-style-type: none;
	flex-direction: column;
	gap: 6px;
	padding: 0px;
}

.sr-edit-table__order-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sr-edit-table__order-actions {
	display: inline-flex;
	gap: 4px;
}

.sr-edit-table__order-actions button {
	cursor: pointer;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.sr-edit-table__order-actions button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.sr-edit-table__container {
	position: relative;
	overflow: auto;
	border-radius: 0;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}

.sr-edit-table__select-all-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(130 191 253 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(242 246 247 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.sr-edit-table__select-all-banner-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.sr-edit-table__select-all-banner-action {
	cursor: pointer;
	border-width: 0px;
	border-style: solid;
	background-color: transparent;
	padding: 0px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	text-decoration-line: underline;
	font-size: inherit;
}

.sr-edit-table__select-all-banner-action:hover {
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

.sr-edit-table__select-all-banner-dismiss {
	display: flex;
	flex-shrink: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-width: 0px;
	background-color: transparent;
	padding: 4px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	opacity: 0.7;
}

.sr-edit-table__select-all-banner-dismiss:hover {
	opacity: 1;
}

.sr-edit-table__select-all-banner--warning {
	--banner-bg: #fffaed;
	--banner-border: #ffe68d;
	--banner-text: #6b4612;
	background-color: var(--banner-bg);
	border-bottom-color: var(--banner-border);
	color: var(--banner-text);
}

.sr-edit-table__select-all-banner--warning
	.sr-edit-table__select-all-banner-action {
	color: var(--banner-text);
}

.sr-edit-table__select-all-banner--warning
	.sr-edit-table__select-all-banner-action:hover {
	--banner-text-hover: #4f350c;
	color: var(--banner-text-hover);
}

.sr-edit-table__select-all-banner--warning
	.sr-edit-table__select-all-banner-dismiss {
	color: var(--banner-text);
}

.sr-edit-table__table {
	width: 100%;
	border-collapse: separate;
	--tw-border-spacing-x: 0px;
	--tw-border-spacing-y: 0px;
	border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.sr-edit-table__th,
.sr-edit-table__td {
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	position: relative;
	padding: 0px;
	border-bottom: 1px solid #E1E2E6;
	min-height: 32px;
	height: 32px;
}

/* These were consumer specific styles which can't be in the library code */
/* .sr-edit-table__th:first-child,
.sr-edit-table__td:first-child :is(.sr-edit-table__cell-content) {
	padding-left: theme(spacing.lg);
}

.sr-edit-table__td:first-child .sr-edit-table__cell-input {
	margin-left: theme(spacing.lg);
} */

.sr-edit-table__td--error .sr-edit-table__cell-content {
	--tw-bg-opacity: 1;
	background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
	box-shadow: inset 0 0 0 1px #f87171;
	z-index: 10;
}

.sr-edit-table__td--error .sr-edit-table__cell-content:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}

.sr-edit-table__tooltip-trigger {
	position: absolute;
	inset: 0px;
}

/* Sticky header */
.sr-edit-table__table thead {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* Sticky footer */
.sr-edit-table__add-row {
	position: sticky;
	bottom: 0;
	z-index: 12;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Pinned header cells should sit above non-pinned sticky headers */
.sr-edit-table__th.sr-edit-table__cell--pinned {
	z-index: 11;
}

/* Pinned columns: make it visually obvious they are "fixed" */
.sr-edit-table__th.sr-edit-table__cell--pinned,
.sr-edit-table__td.sr-edit-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Make pinned headers pop a bit more than body cells */
.sr-edit-table__th.sr-edit-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Ensure pinned columns sit above scrollable cells */
.sr-edit-table__th.sr-edit-table__cell--pinned,
.sr-edit-table__td.sr-edit-table__cell--pinned {
	z-index: 2;
}

/* Pinned edge shadows (left/right) to visually separate pinned columns from scrollable content */
.sr-edit-table__th.sr-edit-table__cell--pinned-edge-left,
.sr-edit-table__td.sr-edit-table__cell--pinned-edge-left,
.sr-edit-table__th.sr-edit-table__cell--pinned-edge-right,
.sr-edit-table__td.sr-edit-table__cell--pinned-edge-right {
	/* Allow the edge shadow to render outside the cell; truncation is handled by .sr-edit-table__cell-content */
	overflow: visible;
}

.sr-edit-table__th.sr-edit-table__cell--pinned-edge-left::before,
.sr-edit-table__td.sr-edit-table__cell--pinned-edge-left::before {
	content: '';
	position: absolute;
	top: 0;
	right: -1px;
	bottom: 0;
	width: 2px;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
	filter: blur(2px);
}

.sr-edit-table__th.sr-edit-table__cell--pinned-edge-right::before,
.sr-edit-table__td.sr-edit-table__cell--pinned-edge-right::before {
	content: '';
	position: absolute;
	top: 0;
	left: -1px;
	bottom: 0;
	width: 2px;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
	filter: blur(2px);
}

/* Draw visible vertical dividers between columns */
.sr-edit-table__th:not(:last-child)::after,
.sr-edit-table__td:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background-color: #E1E2E6;
	pointer-events: none;
	z-index: 1;
}

.sr-edit-table__th:last-child,
.sr-edit-table__td:last-child {
	border-right-width: 0px;
}

.sr-edit-table__table tbody tr:last-child .sr-edit-table__td {
	border-bottom-width: 0px;
}

/* Allow wrapping for cells when column resizing is enabled and column has been manually resized */
.sr-edit-table__table--resizable .sr-edit-table__td[style*='width'] {
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Keep table headers as single line even when resizing is enabled */
.sr-edit-table__table--resizable .sr-edit-table__th[style*='width'] {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Add border-right to table headers when column resizing is enabled */
.sr-edit-table__table--resizable .sr-edit-table__th:not(:last-child) {
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 1px;
	border-top-width: 0px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}

/* Hide the ::after pseudo-element for resizable headers to avoid double borders */
.sr-edit-table__table--resizable .sr-edit-table__th:not(:last-child)::after {
	display: none;
}

.sr-edit-table__th {
	white-space: nowrap;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;

	&:has(.sr-edit-table__header-actions) {
		padding-top: 2px;
		padding-bottom: 2px;
	}
}

/* Excel-like cell editing styles */
.sr-edit-table__cell-content {
	cursor: cell;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	position: absolute;
	inset: 0px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
	/* Prevent overlaying adjacent cells */
	pointer-events: auto;
}

/* Actions column should not have absolutely positioned cell-content */
.sr-edit-table__td[data-column-id='actions'] {
	position: relative;
	z-index: 3;
}

.sr-edit-table__td[data-column-id='actions'] > * {
	position: relative;
	z-index: 3;
	pointer-events: auto;
}

.sr-edit-table__cell-content:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.sr-edit-table__cell-content--readonly {
	cursor: not-allowed;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	opacity: 0.6;
}

.sr-edit-table__cell-content--readonly:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

/* Readonly select trigger styling */
.sr-edit-table__cell-select-trigger--readonly {
	cursor: not-allowed !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1)) !important;
	opacity: 0.6 !important;
	box-shadow: inset 0 0 0 1px #A7AAAF !important;
}

.sr-edit-table__cell-select-trigger--readonly:hover {
	--tw-bg-opacity: 1 !important;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1)) !important;
	box-shadow: inset 0 0 0 1px #A7AAAF !important;
}

.sr-edit-table__cell-content--select.sr-edit-table__cell-content--readonly {
	cursor: not-allowed;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	opacity: 0.6;
}

.sr-edit-table__cell-content--select.sr-edit-table__cell-content--readonly:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.sr-edit-table__cell-content--select.sr-edit-table__cell-content--readonly .sr-edit-table__cell-select-chevron {
	opacity: 0.4;
}

/* Hide number input arrows/spinners */
.sr-edit-table__cell-input[type="number"] {
	-moz-appearance: textfield; /* Firefox */
}

.sr-edit-table__cell-input[type="number"]::-webkit-outer-spin-button,
.sr-edit-table__cell-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none; /* Chrome, Safari, Edge */
	margin: 0;
}

/* Keyboard focus styles for cells */
.sr-edit-table__cell-content:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.sr-edit-table__cell-content:focus-visible {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: inset 0 0 0 2px #0472e1;
	z-index: 5;
}

.sr-edit-table__cell-input {
	border-width: 2px;
	--tw-border-opacity: 1;
	border-color: rgb(4 114 225 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	position: absolute;
	inset: 0px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 0px;
	box-sizing: border-box;
	outline: 2px solid transparent;
	outline-offset: 2px;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

.sr-edit-table__cell-select-trigger {
	z-index: 20;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	box-shadow: inset 0 0 0 2px #0472e1;
	position: absolute;
	inset: 0px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	margin: 0px;
	box-sizing: border-box;
	outline: 2px solid transparent;
	outline-offset: 2px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	min-width: 0;
}

.sr-edit-table__td:focus-within .sr-edit-table__cell-input {
	z-index: 20;
	border-width: 2px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(4 114 225 / var(--tw-border-opacity, 1));
}

.sr-edit-table__cell-select-content {
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	z-index: 50;
	min-width: var(--radix-select-trigger-width);
	max-height: 200px;
	overflow: hidden;
}

.sr-edit-table__cell-select-viewport {
	padding: 0.25rem;
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		'Open Sans',
		'Helvetica Neue',
		sans-serif;
}

.sr-edit-table__cell-select-item {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	cursor: pointer;
	border-radius: 2px;
	outline: 2px solid transparent;
	outline-offset: 2px;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	user-select: none;
}

.sr-edit-table__cell-select-item:hover,
.sr-edit-table__cell-select-item[data-highlighted] {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.sr-edit-table__cell-select-item[data-disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.sr-edit-table__cell-select-indicator {
	position: absolute;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sr-edit-table__cell-content--select {
	padding-right: 8px;
}

.sr-edit-table__cell-select-chevron {
	margin-left: auto;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	animation-duration: 150ms;
	pointer-events: none;
}

/* Pencil edit indicator for input cells when showIndicator is enabled */
.sr-edit-table__cell-edit-indicator {
	margin-left: auto;
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(196 198 204 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	animation-duration: 150ms;
	pointer-events: none;
}

.sr-edit-table__cell-content:hover .sr-edit-table__cell-edit-indicator {
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.sr-edit-table__cell-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	max-width: 100%;
}

.sr-edit-table__cell-content--select .sr-edit-table__cell-text {
	flex: 1 1 0%;
}

.sr-edit-table__cell-content--select:hover .sr-edit-table__cell-select-chevron,
.sr-edit-table__cell-content--select:focus-within
	.sr-edit-table__cell-select-chevron {
	opacity: 0.8;
}

/* When showIndicator is enabled, keep the chevron always visible */
.sr-edit-table__cell-content--show-indicator .sr-edit-table__cell-select-chevron {
	--tw-text-opacity: 1;
	color: rgb(196 198 204 / var(--tw-text-opacity, 1));
	opacity: 1;
}

.sr-edit-table__cell-content--show-indicator:hover .sr-edit-table__cell-select-chevron {
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.sr-edit-table__add-button {
	margin-left: 24px;
	display: inline-flex;
	height: 1.75rem;
	width: 1.75rem;
	min-width: auto;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	padding: 0px;
}

.sr-edit-table__add-button .s-icon {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.sr-edit-table__add-column-cell {
	border-left-width: 1px;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: center;
	vertical-align: top;
	width: 56px;
}

.sr-edit-table__add-row {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.sr-edit-table__add-row-cell {
	text-align: left;
}

.sr-edit-table__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
}

.sr-edit-table__header-content {
	display: flex;
	cursor: default;
	user-select: none;
	align-items: center;
	gap: 6px;
}

.sr-edit-table__header-content.is-sortable {
	cursor: pointer;
}

.sr-edit-table__header-actions {
	display: flex;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}

.sr-edit-table__th:hover .sr-edit-table__header-actions {
	opacity: 1;
}

.sr-edit-table__th:focus-within .sr-edit-table__header-actions {
	opacity: 1;
}

.sr-edit-table__header-actions:has(.sr-edit-table__header-menu-button.is-open) {
	opacity: 1;
}

.sr-edit-table__header-menu-button {
	height: auto;
	width: auto;
	min-width: auto;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
}

/* Dropdown menu styling - SDropdown will handle most of this, but we can override if needed */
.sr-edit-table__column-menu {
	min-width: 200px;
}

.sr-edit-table__column-menu-filter {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 6px;
	padding-bottom: 8px;
}

.sr-edit-table__sort-indicator {
	display: flex;
	align-items: center;
	font-size: 12px;
	line-height: 16px;
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}

.sr-edit-table__th:hover .sr-edit-table__sort-indicator {
	opacity: 0.7;
}

.sr-edit-table__th.is-sorted .sr-edit-table__sort-indicator {
	opacity: 1;
}

.sr-edit-table__th.is-sorted:hover .sr-edit-table__sort-indicator {
	opacity: 1;
}

.sr-edit-table__resizer {
	position: absolute;
	right: -0.125rem;
	top: 0px;
	height: 100%;
	width: 0.25rem;
	cursor: col-resize;
	touch-action: none;
	user-select: none;
	z-index: 10;
}

.sr-edit-table__resizer:hover,
.sr-edit-table__resizer.is-resizing {
	background-color: rgba(74, 144, 226, 0.45);
}

.sr-edit-table__empty {
	padding: 0;
	text-align: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.sr-edit-table__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.sr-edit-table__pagination-actions {
	display: inline-flex;
	gap: 6px;
}

/* SButton styling adjustments for pagination */
.sr-edit-table__pagination-actions .s-btn {
	min-width: auto;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.sr-edit-table__pagination-size {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sr-edit-table__drag-handle {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sr-edit-table__controls-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}

.sr-edit-table__global-search-wrapper {
	display: flex;
}

.sr-edit-table__global-search {
	min-width: 200px;
}

.sr-edit-table__column-visibility-wrapper {
	display: flex;
}

.sr-edit-table__column-visibility-item {
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* Selection checkbox embedded in first column - header */
.sr-edit-table__selection-wrapper {
	display: flex;
	width: 100%;
	align-items: center;
	padding-left: 24px;
}

.sr-edit-table__selection-wrapper .s-checkbox {
	flex-shrink: 0;
	width: 16px;
}

.sr-edit-table__selection-content {
	min-width: 0px;
	flex: 1 1 0%;
	padding-left: 10px;
}

/* Row selection cell - checkbox positioned on left, content takes remaining space */
.sr-edit-table__td--has-selection {
	position: relative;
}

.sr-edit-table__td--has-selection .sr-edit-table__row-checkbox {
	position: absolute;
	bottom: 0px;
	top: 0px;
	z-index: 10;
	display: flex;
	align-items: center;
	padding-left: 12px;
	left: 20px;
}

.sr-edit-table__td--has-selection .sr-edit-table__selection-cell-content {
	position: relative;
	display: block;
	/* Offset: mi padding + checkbox (16px) + label padding (xs) */
	min-height: 32px;
}

/* Adjust editable cell absolute positioning when in selection column */
.sr-edit-table__td--has-selection .sr-edit-table__cell-content {
	left: calc(20px + 16px + 12px);
	right: 0;
}

.sr-edit-table__td--has-selection .sr-edit-table__cell-input {
	left: calc(20px + 16px + 12px);
	right: 0;
}

.sr-edit-table__td--has-selection .sr-edit-table__cell-select-trigger {
	left: calc(20px + 16px + 12px);
	right: 0;
}

.sr-edit-table__cell-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-style: none;

	span:last-child {
		flex-shrink: 0;
	}

	span:last-child {
		line-height: 0;
	}

	span:first-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Tabs for table-scoped layouts */
.sr-edit-table__tabs {
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-direction: column;
}

.sr-edit-table__tabs-list {
	display: flex;
	align-items: center;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.sr-edit-table__tabs-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	border-style: none;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	padding: 8px;
	padding-left: 16px;
	padding-right: 16px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	cursor: pointer;
}

.sr-edit-table__tabs-separator {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 1px;
	align-self: stretch;
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}

.sr-edit-table__tabs-trigger:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.sr-edit-table__tabs-trigger[data-state='active'] {
	z-index: 10;
	margin-right: -1px;
	border-width: 1px;
	border-top-width: 0px;
	border-style: solid;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
	--tw-border-opacity: 1;
	border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.sr-edit-table__tabs-trigger--error {
	border-top-width: 2px;
	--tw-border-opacity: 1;
	border-top-color: rgb(222 24 39 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(250 241 244 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

.sr-edit-table__tabs-trigger--error[data-state='active'] {
	border-top-width: 2px;
	--tw-border-opacity: 1 !important;
	border-top-color: rgb(222 24 39 / var(--tw-border-opacity, 1)) !important;
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

.sr-edit-table__tabs-content {
	flex: 1 1 0%;
	overflow: auto;
	animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
}
/* Stats Card Container - Horizontal Layout */
.s-stats-card-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow: hidden;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(240 241 243 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
@media not all and (min-width: 768px) {
	.s-stats-card-container {
		flex-direction: column;
	}
}

.s-stats-card-container-with-substats {
	--tw-border-opacity: 1;
	border-color: rgb(230 242 255 / var(--tw-border-opacity, 1));
}

/* Stats Card Item - Base */
.s-stats-card-item {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.s-stats-card-item-with-substats {
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* First Item - Rounded Left */
.s-stats-card-item-first {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
@media not all and (min-width: 768px) {
	.s-stats-card-item-first {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
}

/* Last Item - Rounded Right */
.s-stats-card-item-last {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}
@media not all and (min-width: 768px) {
	.s-stats-card-item-last {
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

/* Middle Items - No rounding */
.s-stats-card-item-middle {
	border-radius: 0;
}

/* Header - Title and Description */
.s-stats-card-header {
	margin-bottom: 8px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

/* Title */
.s-stats-card-title {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-stats-card-item-with-substats .s-stats-card-header {
	margin-bottom: 8px;
}

.s-stats-card-title.s-stats-card-title-tone-info {
	--tw-text-opacity: 1;
	color: rgb(49 75 78 / var(--tw-text-opacity, 1));
}

.s-stats-card-title.s-stats-card-title-tone-success {
	--tw-text-opacity: 1;
	color: rgb(1 65 20 / var(--tw-text-opacity, 1));
}

.s-stats-card-title.s-stats-card-title-tone-warning {
	--tw-text-opacity: 1;
	color: rgb(136 96 26 / var(--tw-text-opacity, 1));
}

.s-stats-card-title.s-stats-card-title-tone-danger {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

/* Description - Info Icon Button */
.s-stats-card-description {
	display: flex;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-width: 0px;
	background-color: transparent;
	padding: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.s-stats-card-description:hover {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-stats-card-item-with-substats .s-stats-card-description {
	width: 20px;
	height: 20px;
}

.s-stats-card-item-with-substats .s-stats-card-description svg {
	width: 20px;
	height: 20px;
}

/* Value Wrapper — single-stat: value + meta on one baseline row */
.s-stats-card-value-wrapper {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

/* Split layout: two metrics (value + label each), vertical divider */
.s-stats-card-split {
	/* Bottom only: `border-solid` + `border-neutral-50` apply to all sides; use `border-b-*` + explicit bottom style. */
	margin-top: 16px;
	display: flex;
	width: 100%;
	flex-direction: column;
	row-gap: 8px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}
@media (min-width: 640px) {
	.s-stats-card-split {
		flex-direction: row;
		align-items: stretch;
		row-gap: 0px;
	}
}

.s-stats-card-split-column {
	display: flex;
	min-width: 0px;
	flex: 1 1 0%;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding-bottom: 8px;
}

.s-stats-card-split-value {
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.24px;
	font-weight: 600;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-stats-card-split-label {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* When a metric carries a `tooltip`, the label becomes a single-line flex
 * row. The text truncates with an ellipsis when the column is narrower than
 * the label, while the info trigger stays pinned to the right edge and is
 * never orphaned onto a new line. The full label text is repeated as the
 * tooltip heading, so no information is lost when truncated. */
.s-stats-card-split-label-with-tooltip {
	display: flex;
	width: 100%;
	min-width: 0px;
	align-items: center;
	gap: 4px;
}

.s-stats-card-split-label-text {
	min-width: 0px;
	flex: 1 1 0%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Info-icon trigger pinned to the right edge of the label row. */
.s-stats-card-split-label-tooltip {
	display: inline-flex;
	flex-shrink: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-width: 0px;
	background-color: transparent;
	padding: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.s-stats-card-split-label-tooltip:hover {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

/* Tooltip body: bold heading (full label) + helper text. Colors are
 * inherited from STooltip so the dark/light variant stays consistent. */
.s-stats-card-split-label-tooltip-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;
}

.s-stats-card-split-label-tooltip-heading {
	margin: 0px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}

.s-stats-card-split-label-tooltip-body {
	margin: 0px;
	font-size: 12px;
	line-height: 16px;
	opacity: 0.8;
}

.s-stats-card-split-divider {
	height: 1px;
	width: 100%;
	flex-shrink: 0;
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
}

@media (min-width: 640px) {
	.s-stats-card-split-divider {
		margin-left: 16px;
		margin-right: 16px;
		height: auto;
		width: 1px;
		align-self: stretch;
	}
}

/* Value */
.s-stats-card-value {
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.24px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-stats-card-item-with-substats .s-stats-card-value {
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.24px;
	font-weight: 600;
	letter-spacing: 0em;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* Value - Tone variants */
.s-stats-card-value.s-stats-card-value-tone-info {
	--tw-text-opacity: 1;
	color: rgb(49 75 78 / var(--tw-text-opacity, 1));
}

.s-stats-card-value.s-stats-card-value-tone-success {
	--tw-text-opacity: 1;
	color: rgb(1 65 20 / var(--tw-text-opacity, 1));
}

.s-stats-card-value.s-stats-card-value-tone-warning {
	--tw-text-opacity: 1;
	color: rgb(136 96 26 / var(--tw-text-opacity, 1));
}

.s-stats-card-value.s-stats-card-value-tone-danger {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

/* Value Meta */
.s-stats-card-value-meta {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Sub-stats footer row */
.s-stats-card-substats {
	margin-top: 24px;
	display: flex;
	align-items: stretch;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	border-top-width: 0px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}

/* Sub-stat cell — equal-width column with vertical divider, optional click affordance */
.s-stats-card-substat-cell {
	display: flex;
	flex: 1 1 0%;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 8px;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-right-width: 1px;
	border-left-width: 0px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	text-decoration-line: none;
	margin: 0px;
	text-align: left;
}

.s-stats-card-substat-cell:last-child {
	border-right-width: 0px;
}

/* Interactive cell (href / onClick) — adds hover, focus ring, button reset */
.s-stats-card-substat-cell-interactive {
	cursor: pointer;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.s-stats-card-substat-cell-interactive:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}
.s-stats-card-substat-cell-interactive:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-offset: 0px;
	outline-color: #0472e1;
}

button.s-stats-card-substat-cell {
	border-width: 0px;
}

button.s-stats-card-substat-cell-interactive {
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-right-width: 1px;
	border-left-width: 0px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
}

button.s-stats-card-substat-cell-interactive:last-child {
	border-right-width: 0px;
}

.s-stats-card-substat-body {
	display: flex;
	min-width: 0px;
	flex-direction: column;
	gap: 2px;
}

.s-stats-card-substat-value {
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.16px;
	font-weight: 500;
	line-height: 1;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-label {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0em;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

@media (max-width: 640px) {
	.s-stats-card-item-with-substats {
		padding-left: 24px;
		padding-right: 24px;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.s-stats-card-item-with-substats .s-stats-card-header {
		margin-bottom: 12px;
	}

	.s-stats-card-item-with-substats .s-stats-card-description {
		width: 20px;
		height: 20px;
	}

	.s-stats-card-item-with-substats .s-stats-card-description svg {
		width: 20px;
		height: 20px;
	}

	.s-stats-card-item-with-substats .s-stats-card-value {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.16px;
		font-weight: 600;
		letter-spacing: 0em;
	}

	.s-stats-card-substats {
		margin-top: 12px;
	}

	.s-stats-card-substat-cell {
		min-height: 64px;
		padding-left: 16px;
		padding-right: 16px;
		padding-bottom: 16px;
	}

	.s-stats-card-substat-cell:first-child {
		padding-left: 0;
	}

	.s-stats-card-substat-cell:last-child {
		padding-right: 0;
	}

	.s-stats-card-substat-body {
		gap: 4px;
	}

	.s-stats-card-substat-value {
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.16px;
		font-weight: 500;
		line-height: 1;
	}

	.s-stats-card-substat-label {
		font-size: 14px;
		line-height: 20px;
	}
}

/* Sub-stat — Tone variants (cascade across value, label, icon) */
.s-stats-card-substat-value-tone-info {
	--tw-text-opacity: 1;
	color: rgb(49 75 78 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-label-tone-info {
	--tw-text-opacity: 1;
	color: rgb(69 106 109 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-icon-tone-info {
	--tw-text-opacity: 1;
	color: rgb(69 106 109 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-value-tone-success {
	--tw-text-opacity: 1;
	color: rgb(1 65 20 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-label-tone-success {
	--tw-text-opacity: 1;
	color: rgb(13 98 37 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-icon-tone-success {
	--tw-text-opacity: 1;
	color: rgb(13 98 37 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-value-tone-warning {
	--tw-text-opacity: 1;
	color: rgb(136 96 26 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-label-tone-warning {
	--tw-text-opacity: 1;
	color: rgb(165 124 31 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-icon-tone-warning {
	--tw-text-opacity: 1;
	color: rgb(165 124 31 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-value-tone-danger {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-label-tone-danger {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

.s-stats-card-substat-icon-tone-danger {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

/* Note Container — separated from metrics by a light rule (matches split + single layouts) */
.s-stats-card-note {
	margin-top: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Note Icon */
.s-stats-card-note-icon {
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(136 96 26 / var(--tw-text-opacity, 1));
}

/* Note Icon - Variants */
.s-stats-card-note-icon-info {
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(69 106 109 / var(--tw-text-opacity, 1));
}

.s-stats-card-note-icon-success {
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(13 98 37 / var(--tw-text-opacity, 1));
}

.s-stats-card-note-icon-warning {
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(165 124 31 / var(--tw-text-opacity, 1));
}

.s-stats-card-note-icon-danger {
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

/* Note Text */
.s-stats-card-note-text {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(165 124 31 / var(--tw-text-opacity, 1));
}

/* Note Text - Variants */
.s-stats-card-note-text-info {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(49 75 78 / var(--tw-text-opacity, 1));
}

.s-stats-card-note-text-success {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(1 65 20 / var(--tw-text-opacity, 1));
}

.s-stats-card-note-text-warning {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(136 96 26 / var(--tw-text-opacity, 1));
}

.s-stats-card-note-text-danger {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(115 8 17 / var(--tw-text-opacity, 1));
}

/* Divider between items */
.s-stats-card-divider {
	width: 1px;
	align-self: stretch;
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}
@media not all and (min-width: 768px) {
	.s-stats-card-divider {
		height: 1px;
		width: 100%;
		align-self: auto;
	}
}
/* Region Selector Modal specific styles */

/* Search - add some top margin to separate from header */
.s-region-selector-search {
	padding-top: 4px;
}

/* Body - Scrollable area */
.s-region-selector-body {
	max-height: 50vh;
	min-height: 200px;
	padding-left: 24px;
	padding-right: 24px;
}

/* Accordion container */
.s-region-selector-accordion {
	display: flex;
	flex-direction: column;
}

/* Group */
.s-region-selector-group {
	border-bottom-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}
.s-region-selector-group:last-child {
	border-bottom-width: 0px;
}

/* Group Header */
.s-region-selector-group-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Group Trigger (accordion trigger) */
.s-region-selector-group-trigger {
	display: flex;
	flex: 1 1 0%;
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	outline: 2px solid transparent;
	outline-offset: 2px;
	border-radius: 2px;
}
.s-region-selector-group-trigger:focus-visible {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}

.s-region-selector-group-label {
	display: flex;
	align-items: center;
	gap: 4px;
}

.s-region-selector-group-count {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Chevron icon */
.s-region-selector-chevron {
	width: 16px;
	height: 16px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	animation-duration: 200ms;
}

.s-region-selector-group-trigger[data-state='open'] .s-region-selector-chevron {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Group Content */
.s-region-selector-group-content {
	overflow: hidden;
}

.s-region-selector-group-content[data-state='open'] {
	animation: region-accordion-down 0.2s ease-out;
}

.s-region-selector-group-content[data-state='closed'] {
	animation: region-accordion-up 0.2s ease-out;
}

/* Options list */
.s-region-selector-options {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-left: 32px;
	padding-bottom: 8px;
}

/* Individual option */
.s-region-selector-option {
	display: flex;
	align-items: center;
	padding-top: 4px;
	padding-bottom: 4px;
}

.s-region-selector-option-disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.s-region-selector-option-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-region-selector-option-icon {
	flex-shrink: 0;
	font-size: 1rem;
	line-height: 1.5rem;
}

/* Empty state */
.s-region-selector-empty {
	padding-top: 36px;
	padding-bottom: 36px;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Accordion animations */
@keyframes region-accordion-down {
	from {
		height: 0;
	}
	to {
		height: var(--radix-accordion-content-height);
	}
}

@keyframes region-accordion-up {
	from {
		height: var(--radix-accordion-content-height);
	}
	to {
		height: 0;
	}
}
/* SConfigurePage Component Styles */

.s-configure-page {

    --tw-bg-opacity: 1;

    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

/* Content (Main Form Area - 8 columns) */
.s-configure-page-content {

    display: flex;

    flex-direction: column
}

/* Aside (Right Sidebar - 3 columns) */
.s-configure-page-aside {

    display: flex;

    flex-direction: column
}
/* SCodeEditor Component Styles */

.s-code-editor {
	width: 100%;
}

.s-code-editor-header {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-code-editor-container {
	position: relative;
}

/* CodeMirror overrides */
.s-code-editor-container .cm-editor {
	height: 100%;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	font-size: 14px;
	line-height: 1.6;
}

.s-code-editor-container .cm-scroller {
	overflow: auto;
}


.s-code-editor-container .cm-line {
	padding-right: 0px;
	padding-left: 6px;
}

/* Placeholder styling */
.s-code-editor-container .cm-editor[data-placeholder]::before {
	content: attr(data-placeholder);
	pointer-events: none;
	position: absolute;
	top: 24px;
	left: 24px;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Light theme customization */
.s-code-editor-container .cm-editor.cm-focused {
	outline: 2px solid transparent;
	outline-offset: 2px;
}


.s-code-editor-container .cm-activeLineGutter {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.s-code-editor-container .cm-activeLine {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-code-editor-container .cm-selectionBackground {
	--tw-bg-opacity: 1;
	background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.s-code-editor-container .cm-cursor {
	border-left-width: 2px;
	--tw-border-opacity: 1;
	border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

/* Scrollbar styling */
.s-code-editor-container .cm-scroller::-webkit-scrollbar {
	height: 0.5rem;
	width: 0.5rem;
}

.s-code-editor-container .cm-scroller::-webkit-scrollbar-track {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.s-code-editor-container .cm-scroller::-webkit-scrollbar-thumb {
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(167 170 175 / var(--tw-bg-opacity, 1));
}

.s-code-editor-container .cm-scroller::-webkit-scrollbar-thumb:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(138 141 147 / var(--tw-bg-opacity, 1));
}



/* SCode Component Styles */

.s-code {
	position: relative;
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.s-code-pre {
	margin: 0px;
	overflow: auto;
}

.s-code-block {
	display: block;
	padding: 24px;
}

.s-code-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom-width: 1px;
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.s-code-copy-button {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.25rem;
	padding: 0.25rem;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.s-code-copy-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.s-code-line-numbers {
	margin-right: 24px;
	user-select: none;
	border-right-width: 1px;
	padding-right: 24px;
	text-align: right;
	opacity: 0.5;
}

/* Bordered variant */
.s-code-bordered {
	border-width: 1px;
}

/* Rounded variant */
.s-code-rounded {
	overflow: hidden;
	border-radius: 8px;
}

/* Light theme */
.s-code-light {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-code-light .s-code-header {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-code-light .s-code-copy-button {
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-code-light .s-code-copy-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-code-light .s-code-line-numbers {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Dark theme */
.s-code-dark {
	--tw-border-opacity: 1;
	border-color: rgb(62 66 71 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(26 29 33 / var(--tw-bg-opacity, 1));
}

.s-code-dark .s-code-header {
	--tw-border-opacity: 1;
	border-color: rgb(62 66 71 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(44 48 53 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-code-dark .s-code-copy-button {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-code-dark .s-code-copy-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(62 66 71 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(196 198 204 / var(--tw-text-opacity, 1));
}

.s-code-dark .s-code-line-numbers {
	--tw-border-opacity: 1;
	border-color: rgb(62 66 71 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Monochrome theme */
.s-code-monochrome {
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.s-code-monochrome .s-code-header {
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.s-code-monochrome .s-code-copy-button {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-code-monochrome .s-code-copy-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-code-monochrome .s-code-line-numbers {
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Shiki overrides for monochrome */
.s-code-monochrome .shiki,
.s-code-monochrome .shiki span {
	color: var(--shiki-monochrome-color, #374151) !important;
}

/* Line numbers with Shiki */
.s-code-with-line-numbers .shiki code {
	counter-reset: line;
}

.s-code-with-line-numbers .shiki code > .line::before {
	counter-increment: line;
	content: counter(line);
	margin-right: 24px;
	display: inline-block;
	width: 2rem;
	user-select: none;
	padding-right: 24px;
	text-align: right;
	opacity: 0.5;
	border-right: 1px solid;
}

.s-code-light .s-code-with-line-numbers .shiki code > .line::before {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

.s-code-dark .s-code-with-line-numbers .shiki code > .line::before {
	--tw-border-opacity: 1;
	border-color: rgb(62 66 71 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

.s-code-monochrome .s-code-with-line-numbers .shiki code > .line::before {
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Shiki code block styling */
.s-code .shiki {
	background-color: transparent !important;
	margin: 0px;
	padding: 24px;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	line-height: 1;
}

.s-code .shiki code {
	display: block;
	line-height: 0.8;
}

.s-code .shiki code .line {
	display: block;
	line-height: 1;
}

/* Word wrap variant */
.s-code-wrap .s-code-pre {
	overflow-x: hidden;
}

.s-code-wrap .shiki,
.s-code-wrap .shiki code,
.s-code-wrap .shiki code .line {
	white-space: pre-wrap;
	word-break: break-all;
	overflow-wrap: break-word;
}

/* Scrollbar styling */
.s-code-pre::-webkit-scrollbar {
	height: 0.5rem;
	width: 0.5rem;
}

.s-code-light .s-code-pre::-webkit-scrollbar-track {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.s-code-light .s-code-pre::-webkit-scrollbar-thumb {
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(167 170 175 / var(--tw-bg-opacity, 1));
}

.s-code-light .s-code-pre::-webkit-scrollbar-thumb:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(138 141 147 / var(--tw-bg-opacity, 1));
}

.s-code-dark .s-code-pre::-webkit-scrollbar-track {
	--tw-bg-opacity: 1;
	background-color: rgb(44 48 53 / var(--tw-bg-opacity, 1));
}

.s-code-dark .s-code-pre::-webkit-scrollbar-thumb {
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(80 84 88 / var(--tw-bg-opacity, 1));
}

.s-code-dark .s-code-pre::-webkit-scrollbar-thumb:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(98 103 109 / var(--tw-bg-opacity, 1));
}

.s-code-monochrome .s-code-pre::-webkit-scrollbar-track {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-code-monochrome .s-code-pre::-webkit-scrollbar-thumb {
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(167 170 175 / var(--tw-bg-opacity, 1));
}

.s-code-monochrome .s-code-pre::-webkit-scrollbar-thumb:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(138 141 147 / var(--tw-bg-opacity, 1));
}
.s-timeline {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Timeline header */
.s-timeline-header {
	margin-bottom: 24px;
}
.s-timeline-header > :not([hidden]) ~ :not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(4px * var(--tw-space-y-reverse));
}

.s-timeline-header-title {
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.s-timeline-header-description {
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Show more/older - positioned to align with content column */
/* Padding = dot width (w-md/20px) + gap-sm (12px) = 32px */
.s-timeline-show-more {
	padding-left: 8px;
}

.s-timeline-show-more-link {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* Slide + fade animation for newly revealed items */
@keyframes timeline-item-enter {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.s-timeline-item {
	position: relative;
	display: flex;
	min-height: 94px;
	gap: 16px;

	/* Animation for newly revealed items (inline expand) */
	&.s-timeline-item-new {
		animation: timeline-item-enter 0.3s ease-out forwards;
	}

	/* Indicator column */
	.s-timeline-indicator {
		position: relative;
	}
	.s-timeline-indicator {
		display: flex;
	}
	.s-timeline-indicator {
		flex-direction: column;
	}
	.s-timeline-indicator {
		align-items: center;
	}
	.s-timeline-indicator {
		gap: 8px;
	}

	/* Dot icon styles */
	.s-timeline-dot {
		position: relative;
	}
	.s-timeline-dot {
		z-index: 10;
	}
	.s-timeline-dot {
		height: 24px;
	}
	.s-timeline-dot {
		width: 24px;
	}
	.s-timeline-dot {
		--tw-text-opacity: 1;
		color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	}

	/* Connector line */
	.s-timeline-connector {
		margin-bottom: 8px;
	}
	.s-timeline-connector {
		width: 1.5px;
	}
	.s-timeline-connector {
		flex: 1 1 0%;
	}
	.s-timeline-connector {
		--tw-bg-opacity: 1;
		background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	}

	/* Content column */
	.s-timeline-content {
		flex: 1 1 0%;
	}
	.s-timeline-content {
		padding-bottom: 24px;
	}

	.s-timeline-badge {
		margin-bottom: 8px;
	}

	.s-timeline-title {
		font-size: 14px;
		line-height: 20px;
		font-weight: 600;
	}

	.s-timeline-title {
		--tw-text-opacity: 1;
		color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	}

	.s-timeline-description {
		margin-top: 4px;
	}

	.s-timeline-description {
		font-size: 14px;
		line-height: 20px;
	}

	.s-timeline-description {
		--tw-text-opacity: 1;
		color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	}


	/* Danger variant */
	&.s-timeline-item-danger {
		.s-timeline-badge {
			--tw-text-opacity: 1;
			color: rgb(165 24 28 / var(--tw-text-opacity, 1));
		}
		.s-timeline-title {
			--tw-text-opacity: 1;
			color: rgb(165 24 28 / var(--tw-text-opacity, 1));
		}
		.s-timeline-dot {
			--tw-text-opacity: 1;
			color: rgb(165 24 28 / var(--tw-text-opacity, 1));
		}
	}
}
/* ──────────────────────────────────────────────────────────────────────────
 * SEventTracker
 * Design parity with cb-billing-desk-ui's BucketTimeline / EmailCard /
 * EmailInsertRow. Tone styles are declared directly with Tailwind utilities.
 * ────────────────────────────────────────────────────────────────────────── */

/* === Root === */
.s-event-tracker {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	container-type: inline-size;
}

/* === Group === */
.s-event-group {
	position: relative;
	display: grid;
	column-gap: 12px;
	/* [label][body] — fixed-width label column ensures every group's body
	 * (and therefore every card) lines up at the same x-position. */
	grid-template-columns:
		calc(80px + 64px) minmax(0, 1fr);
}

/* Distinct group gap while each group's rail remains continuous internally. */
.s-event-group + .s-event-group {
	margin-top: 20px;
}

/* In editable mode, boundary insert strips provide the visual gap themselves. */
.s-event-group:has(> .s-event-group-body > .s-event-insert:last-child) + .s-event-group,
.s-event-group + .s-event-group:has(> .s-event-group-body > .s-event-insert:first-child) {
	margin-top: 0px;
}

.s-event-group-label {
	/* The badge top is aligned with the marker top of the first row. Because
	 * the row has a fixed min-height and the marker is vertically centred within
	 * it, the marker top sits at the `st` spacing token. */
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding-top: 20px;
}

.s-event-group-with-leading-insert .s-event-group-label {
	padding-top: 40px;
}

.s-event-group-body {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* === Tones === */
.s-event-tone-neutral .s-event-marker-col::before {
	--tw-bg-opacity: 1;
	background-color: rgb(167 170 175 / var(--tw-bg-opacity, 1));
}

.s-event-tone-neutral .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(80 84 88 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(98 103 109 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-event-tone-neutral .s-event-row-anchor .s-event-marker,
.s-event-tone-neutral .s-event-row-empty .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(167 170 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-event-tone-neutral .s-event-row-anchor .s-event-card {
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.s-event-tone-neutral .s-event-row-anchor.s-event-row-clickable .s-event-card:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

.s-event-tone-info .s-event-marker-col::before {
	--tw-bg-opacity: 1;
	background-color: rgb(80 165 252 / var(--tw-bg-opacity, 1));
}

.s-event-tone-info .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(3 89 175 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-event-tone-info .s-event-row-anchor .s-event-marker,
.s-event-tone-info .s-event-row-empty .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(80 165 252 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(80 165 252 / var(--tw-text-opacity, 1));
}

.s-event-tone-info .s-event-row-anchor .s-event-card {
	--tw-border-opacity: 1;
	border-color: rgb(180 217 254 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.s-event-tone-info .s-event-row-anchor.s-event-row-clickable .s-event-card:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1));
}

.s-event-tone-success .s-event-marker-col::before {
	--tw-bg-opacity: 1;
	background-color: rgb(67 188 98 / var(--tw-bg-opacity, 1));
}

.s-event-tone-success .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(13 98 37 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(27 126 57 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-event-tone-success .s-event-row-anchor .s-event-marker,
.s-event-tone-success .s-event-row-empty .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(67 188 98 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(67 188 98 / var(--tw-text-opacity, 1));
}

.s-event-tone-success .s-event-row-anchor .s-event-card {
	--tw-border-opacity: 1;
	border-color: rgb(168 243 190 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(221 255 231 / var(--tw-bg-opacity, 1));
}

.s-event-tone-success .s-event-row-anchor.s-event-row-clickable .s-event-card:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(168 243 190 / var(--tw-bg-opacity, 1));
}

.s-event-tone-warning .s-event-marker-col::before {
	--tw-bg-opacity: 1;
	background-color: rgb(218 176 41 / var(--tw-bg-opacity, 1));
}

.s-event-tone-warning .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(195 154 38 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(218 176 41 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-event-tone-warning .s-event-row-anchor .s-event-marker,
.s-event-tone-warning .s-event-row-empty .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(255 216 71 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 216 71 / var(--tw-text-opacity, 1));
}

.s-event-tone-warning .s-event-row-anchor .s-event-card {
	--tw-border-opacity: 1;
	border-color: rgb(255 237 184 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 245 220 / var(--tw-bg-opacity, 1));
}

.s-event-tone-warning .s-event-row-anchor.s-event-row-clickable .s-event-card:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(255 237 184 / var(--tw-bg-opacity, 1));
}

.s-event-tone-danger .s-event-marker-col::before {
	--tw-bg-opacity: 1;
	background-color: rgb(253 77 87 / var(--tw-bg-opacity, 1));
}

.s-event-tone-danger .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(165 24 28 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(165 24 28 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.s-event-tone-danger .s-event-row-anchor .s-event-marker,
.s-event-tone-danger .s-event-row-empty .s-event-marker {
	--tw-border-opacity: 1;
	border-color: rgb(253 77 87 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(253 77 87 / var(--tw-text-opacity, 1));
}

.s-event-tone-danger .s-event-row-anchor .s-event-card {
	--tw-border-opacity: 1;
	border-color: rgb(255 214 217 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(250 241 244 / var(--tw-bg-opacity, 1));
}

.s-event-tone-danger .s-event-row-anchor.s-event-row-clickable .s-event-card:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(255 214 217 / var(--tw-bg-opacity, 1));
}

/* In the danger tone, emphasise the anchor's schedule text (first meta span,
 * e.g. "Scheduled on due date") in the tone colour so the urgency reads at a
 * glance. Other meta segments (recipient, etc.) keep their muted treatment. */
.s-event-tone-danger .s-event-row-anchor .s-event-card-meta > span:first-child {
	--tw-text-opacity: 1;
	color: rgb(165 24 28 / var(--tw-text-opacity, 1));
}

/* === Empty group (placeholder action) ===
 * Rendered as a row-shaped element so the rail still passes through a
 * placeholder marker, keeping the visual rhythm intact even when the group
 * has no events. The marker matches the anchor visual (hollow ring + inner
 * dot) at the same size as regular markers so empty rows line up cleanly
 * with the rest of the timeline. */
.s-event-row-empty .s-event-marker {
	width: 24px;
	height: 24px;
	min-width: 24px;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding: 0;
	border-width: 2px;
}

.s-event-row-empty .s-event-marker::after {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background-color: currentColor;
}

.s-event-row-empty .s-event-empty-action {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* Text-only empty placeholder (rendered when the group has no events and no
 * action button is shown). Tonally muted, sits in the card column so it
 * aligns horizontally with regular event titles. */
.s-event-row-empty .s-event-empty-text {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	font-size: 14px;
	line-height: 20px;
	min-width: 0;
}

/* === Insert strip (mirrors EmailInsertRow's design) === */
.s-event-insert {
	position: relative;
	display: flex;
	height: 20px;
	align-items: stretch;
	justify-content: center;
	border-radius: 6px;
	padding-left: 0;
	padding-right: 0;
	padding-top: 2px;
	padding-bottom: 2px;
	cursor: pointer;
	border-width: 0px;
	background-color: transparent;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	/* Offset the strip so it lives in the card column only (doesn't cross the rail) */
	margin-left: 36px;
	touch-action: manipulation;
}

.s-event-insert:hover,
.s-event-insert:focus,
.s-event-insert:focus-visible {
	outline: none;
}

.s-event-insert-surface {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	animation-duration: 200ms;
	animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
	opacity: 0;
	transform: scaleY(0.88);
	transform-origin: center;
}

/* Preview the actionable insert strips adjacent to the row/group under hover
 * or focus. Disabled insert groups borrow the nearest strips from their
 * enabled neighbours, so the due-date anchor can still be visually bracketed. */
.s-event-insert:not(:hover):not(:focus):not(:focus-visible):has(
		+ .s-event-row:is(:hover, :focus-within)
	)
	.s-event-insert-surface,
.s-event-row:is(:hover, :focus-within)
	+ .s-event-insert:not(:hover):not(:focus):not(:focus-visible)
	.s-event-insert-surface,
.s-event-group:has(
		+ .s-event-group-inserts-disabled:is(:hover, :focus-within)
	)
	.s-event-group-body
	> .s-event-insert:not(:hover):not(:focus):not(:focus-visible):last-child
	.s-event-insert-surface,
.s-event-group-inserts-disabled:is(:hover, :focus-within)
	+ .s-event-group
	.s-event-group-body
	> .s-event-insert:not(:hover):not(:focus):not(:focus-visible):first-child
	.s-event-insert-surface {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	transition-delay: 75ms;
	animation-delay: 75ms;
	opacity: 1;
	transform: scaleY(1);
}

.s-event-insert:hover .s-event-insert-surface,
.s-event-insert:focus .s-event-insert-surface,
.s-event-insert:focus-visible .s-event-insert-surface {
	--tw-bg-opacity: 1;
	background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1));
	transition-delay: 0s;
	animation-delay: 0s;
	opacity: 1;
	transform: scaleY(1);
}

.s-event-insert:focus-visible .s-event-insert-surface {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(80 165 252 / var(--tw-ring-opacity, 1));
}

.s-event-insert-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	animation-duration: 200ms;
	animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.s-event-insert:not(:hover):not(:focus):not(:focus-visible):has(
		+ .s-event-row:is(:hover, :focus-within)
	)
	.s-event-insert-icon,
.s-event-row:is(:hover, :focus-within)
	+ .s-event-insert:not(:hover):not(:focus):not(:focus-visible)
	.s-event-insert-icon,
.s-event-group:has(
		+ .s-event-group-inserts-disabled:is(:hover, :focus-within)
	)
	.s-event-group-body
	> .s-event-insert:not(:hover):not(:focus):not(:focus-visible):last-child
	.s-event-insert-icon,
.s-event-group-inserts-disabled:is(:hover, :focus-within)
	+ .s-event-group
	.s-event-group-body
	> .s-event-insert:not(:hover):not(:focus):not(:focus-visible):first-child
	.s-event-insert-icon {
	transition-delay: 100ms;
	animation-delay: 100ms;
	opacity: 1;
}

.s-event-insert:hover .s-event-insert-icon,
.s-event-insert:focus .s-event-insert-icon,
.s-event-insert:focus-visible .s-event-insert-icon {
	transition-delay: 0s;
	animation-delay: 0s;
	opacity: 1;
}

/* === Event row === */
.s-event-row {
	/* Use `align-items: stretch` (default) so the card cell fills the full row
	 * height. The marker col centres its marker via its own `items-center`,
	 * and the card centres its content via its own `items-center`. */
	position: relative;
	display: grid;
	min-height: 64px;
	column-gap: 8px;
	grid-template-columns: calc(24px + 4px) minmax(0, 1fr);
}

.s-event-row + .s-event-row {
	margin-top: 20px;
}

/* Marker column wrapper centres the marker pill on its own rail segment.
 * Each row owns one segment, so row/insert spacing creates the event gaps. */
.s-event-marker-col {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.s-event-marker-col::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX(-50%);
	z-index: 0;
	pointer-events: none;
}

.s-event-row-connected-prev .s-event-marker-col::before,
.s-event-group-connected-prev .s-event-group-body > .s-event-row:first-of-type .s-event-marker-col::before {
	top: -20px;
}

/* Marker pill (numeric chip or hollow ring) */
.s-event-marker {
	position: relative;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	height: 24px;
	min-width: 24px;
	white-space: nowrap;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 10px;
	line-height: 14px;
	font-weight: 600;
	border-width: 2px;
	box-sizing: border-box;
	z-index: 1;
}

/* Anchor marker base: white slot, tone border, tone text. The visual depends
 * on whether the consumer passed a `markerLabel` (custom) or not (default
 * hollow ring + inner dot). */
.s-event-row-anchor .s-event-marker {
	width: 24px;
	height: 24px;
	min-width: 24px;
	padding: 0;
	border-width: 2px;
}

/* Default anchor visual: hollow ring + small inner dot, drawn entirely in CSS
 * so it lines up perfectly with the regular markers. Triggered only when the
 * marker container is empty (no custom markerLabel). */
.s-event-row-anchor .s-event-marker:empty::after {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background-color: currentColor;
}

/* When a custom markerLabel is supplied (e.g. an SIcon, an avatar), make
 * the SVG render as a block so vertical alignment doesn't drift. */
.s-event-row-anchor .s-event-marker > svg {
	display: block;
	width: 100%;
	height: 100%;
}

.s-event-row-merged-marker .s-event-marker {
	visibility: hidden;
}

/* === Card === */
.s-event-card {
	position: relative;
	display: flex;
	width: 100%;
	align-items: center;
	text-align: left;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(240 241 243 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
	gap: 12px;
	padding: 12px;
	box-sizing: border-box;
	color: inherit;
	font: inherit;
	min-width: 0;
	text-decoration: none;
}

.s-event-card-main {
	display: flex;
	min-width: 0px;
	flex: 1 1 0%;
	align-items: center;
	text-align: left;
	border-width: 0px;
	background-color: transparent;
	padding: 0;
	color: inherit;
	font: inherit;
	text-decoration: none;
	touch-action: manipulation;
}

.s-event-card-main:focus {
	outline: none;
}

/* Strip default underline from the card and any nested elements (browsers
 * sometimes paint it on <button>/<a> children in certain hover/colour states). */
.s-event-card,
.s-event-card * {
	text-decoration: none;
}

.s-event-row-clickable .s-event-card-main {
	cursor: pointer;
}

.s-event-row-clickable .s-event-card:has(> .s-event-card-main:hover) {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-event-row-clickable .s-event-card:has(> .s-event-card-main:focus-visible) {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(80 165 252 / var(--tw-ring-opacity, 1));
}

/* Card body. Regular rows show meta first; anchor rows flip title above meta. */
.s-event-card-body {
	display: flex;
	min-width: 0px;
	flex: 1 1 0%;
	flex-direction: column;
}

.s-event-card-meta {
	display: flex;
	align-items: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	gap: 8px;
	font-size: 12px;
	line-height: 16px;
	min-width: 0;
}

.s-event-card-meta > * {
	min-width: 0;
}

.s-event-card-meta-separator {
	--tw-text-opacity: 1;
	color: rgb(167 170 175 / var(--tw-text-opacity, 1));
}

.s-event-card-meta-emphasis {
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
}

.s-event-card-title {
	display: flex;
	align-items: center;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
	margin-top: 2px;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	min-width: 0;
}

.s-event-card-title-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Inline icon-block in title — small rounded square shared by all rows. */
.s-event-card-icon-block {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* Right-side actions slot (… + chevron) */
.s-event-card-actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	gap: 4px;
}

.s-event-card-actions :where(button, a, [role='button']) {
	touch-action: manipulation;
}

.s-event-card-chevron {
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Spinner that replaces the trailing chevron while the row is loading.
 * Matches the chevron's footprint (16px) and tonal weight (neutral-400) so
 * the actions slot doesn't shift when toggling between states. */
.s-event-card-spinner {
	width: 24px;
	height: 24px;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Loading row: dim the body slightly and signal "busy" with a wait cursor on
 * the disabled card. Card content stays legible (≥0.7 opacity for AA) while
 * the spinner becomes the primary affordance. */
.s-event-row-loading .s-event-card-main {
	cursor: wait;
}

.s-event-row-loading .s-event-card-body {
	opacity: 0.7;
}

.s-event-row-loading .s-event-card-main:disabled {
	pointer-events: none;
}

/* The disabled <button> defaults to inheriting the parent card hover. Suppress
 * the hover/focus chrome so the row reads as inert during step creation. */
.s-event-row-loading.s-event-row-clickable
	.s-event-card:has(> .s-event-card-main:hover) {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.s-event-row-loading.s-event-row-clickable
	.s-event-card:has(> .s-event-card-main:focus-visible) {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* === Density: compact === */

.s-event-tracker-compact .s-event-group-label {
	/* Re-derive from `3xl` row height and `md` marker size. */
	padding-top: 12px;
}

.s-event-tracker-compact .s-event-group-with-leading-insert .s-event-group-label {
	padding-top: 24px;
}

.s-event-tracker-compact .s-event-insert {
	height: 12px;
}

.s-event-tracker-compact .s-event-row {
	min-height: 48px;
}

.s-event-tracker-compact .s-event-row + .s-event-row {
	margin-top: 16px;
}

.s-event-tracker-compact .s-event-row-connected-prev .s-event-marker-col::before,
.s-event-tracker-compact
	.s-event-group-connected-prev
	.s-event-group-body
	> .s-event-row:first-of-type
	.s-event-marker-col::before {
	top: -16px;
}

.s-event-tracker-compact .s-event-card {
	gap: 8px;
	padding: 8px;
}

.s-event-tracker-compact .s-event-card-icon-block {
	width: 16px;
	height: 16px;
}

/* === Responsive narrow-container layout ===
 * Container queries keep the tracker usable inside drawers and split panes,
 * not just on full viewport mobile screens. */
@container (max-width: 520px) {
	.s-event-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.s-event-group + .s-event-group {
		margin-top: 24px;
	}

	.s-event-group-label,
	.s-event-group-with-leading-insert .s-event-group-label,
	.s-event-tracker-compact .s-event-group-label,
	.s-event-tracker-compact .s-event-group-with-leading-insert .s-event-group-label {
		justify-content: flex-start;
		padding-bottom: 8px;
		padding-left: 32px;
		padding-top: 0;
	}

	.s-event-row {
		min-height: 64px;
		column-gap: 8px;
		grid-template-columns: 24px minmax(0, 1fr);
	}

	.s-event-tracker-compact .s-event-row {
		min-height: 56px;
	}

	.s-event-marker {
		height: 24px;
		min-width: 24px;
		padding-left: 6px;
		padding-right: 6px;
		padding-top: 0;
		padding-bottom: 0;
		font-size: 10px;
		line-height: 14px;
		font-weight: 600;
	}

	.s-event-row-anchor .s-event-marker {
		width: 24px;
		height: 24px;
		min-width: 24px;
	}

	.s-event-card {
		align-items: flex-start;
		gap: 8px;
		padding: 8px;
	}

	.s-event-card-main {
		align-items: flex-start;
		min-height: 32px;
	}

	.s-event-card-meta {
		align-items: flex-start;
		flex-wrap: wrap;
		column-gap: 6px;
		row-gap: 2px;
		overflow-wrap: anywhere;
	}

	.s-event-card-meta > * {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	.s-event-card-title {
		align-items: flex-start;
		gap: 6px;
	}

	.s-event-card-title-text {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		overflow-wrap: anywhere;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.s-event-card-actions {
		align-self: flex-start;
		gap: 4px;
	}

	.s-event-card-actions :where(button, a, [role='button']) {
		min-height: 32px;
		min-width: 32px;
	}

	.s-event-insert {
		height: auto;
		margin-left: 32px;
		min-height: 32px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.s-event-insert-surface {
		--tw-bg-opacity: 1;
		background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
		opacity: 1;
		transform: scaleY(1);
	}

	.s-event-insert:hover .s-event-insert-surface,
	.s-event-insert:focus .s-event-insert-surface,
	.s-event-insert:focus-visible .s-event-insert-surface {
		--tw-bg-opacity: 1;
		background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1));
	}

	.s-event-insert-icon {
		opacity: 1;
	}

	.s-event-row-empty .s-event-empty-action {
		align-items: flex-start;
	}
}

/* === Animation for newly inserted events === */
@keyframes s-event-row-enter {
	from {
		opacity: 0;
		transform: translateY(calc(8px * -1));
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.s-event-row-new {
	animation: s-event-row-enter 0.25s ease-out forwards;
}
/* SProductSection - Product marketing section layouts */

:where(.s-product-section) *,
	:where(.s-product-section) ::before,
	:where(.s-product-section) ::after {
		box-sizing: border-box;
		border-width: 0;
		border-style: solid;
		border-color: #e5e7eb;
	}

:where(.s-product-section) ::before,
	:where(.s-product-section) ::after {
		--tw-content: '';
	}

:where(.s-product-section),
	:where(.s-product-section) {
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
		-moz-tab-size: 4;
		tab-size: 4;
		font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		font-feature-settings: normal;
		font-variation-settings: normal;
		-webkit-tap-highlight-color: transparent;
	}

:where(.s-product-section) {
		margin: 0;
	}

:where(.s-product-section) hr {
		height: 0;
		color: inherit;
		border-top-width: 1px;
	}

:where(.s-product-section) abbr:where([title]) {
		text-decoration: underline dotted;
	}

:where(.s-product-section) h1,
	:where(.s-product-section) h2,
	:where(.s-product-section) h3,
	:where(.s-product-section) h4,
	:where(.s-product-section) h5,
	:where(.s-product-section) h6 {
		font-size: inherit;
		font-weight: inherit;
	}

:where(.s-product-section) a {
		color: inherit;
		text-decoration: inherit;
	}

:where(.s-product-section) b,
	:where(.s-product-section) strong {
		font-weight: bolder;
	}

:where(.s-product-section) code,
	:where(.s-product-section) kbd,
	:where(.s-product-section) samp,
	:where(.s-product-section) pre {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		font-feature-settings: normal;
		font-variation-settings: normal;
		font-size: 1em;
	}

:where(.s-product-section) small {
		font-size: 80%;
	}

:where(.s-product-section) sub,
	:where(.s-product-section) sup {
		font-size: 75%;
		line-height: 0;
		position: relative;
		vertical-align: baseline;
	}

:where(.s-product-section) sub {
		bottom: -0.25em;
	}

:where(.s-product-section) sup {
		top: -0.5em;
	}

:where(.s-product-section) table {
		text-indent: 0;
		border-color: inherit;
		border-collapse: collapse;
	}

:where(.s-product-section) button,
	:where(.s-product-section) input,
	:where(.s-product-section) optgroup,
	:where(.s-product-section) select,
	:where(.s-product-section) textarea {
		font-family: inherit;
		font-feature-settings: inherit;
		font-variation-settings: inherit;
		font-size: 100%;
		font-weight: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		color: inherit;
		margin: 0;
		padding: 0;
	}

:where(.s-product-section) button,
	:where(.s-product-section) select {
		text-transform: none;
	}

:where(.s-product-section) button,
	:where(.s-product-section) input:where([type='button']),
	:where(.s-product-section) input:where([type='reset']),
	:where(.s-product-section) input:where([type='submit']) {
		-webkit-appearance: button;
		background-color: transparent;
		background-image: none;
	}

:where(.s-product-section) :-moz-focusring {
		outline: auto;
	}

:where(.s-product-section) :-moz-ui-invalid {
		box-shadow: none;
	}

:where(.s-product-section) progress {
		vertical-align: baseline;
	}

:where(.s-product-section) ::-webkit-inner-spin-button,
	:where(.s-product-section) ::-webkit-outer-spin-button {
		height: auto;
	}

:where(.s-product-section) [type='search'] {
		-webkit-appearance: textfield;
		outline-offset: -2px;
	}

:where(.s-product-section) ::-webkit-search-decoration {
		-webkit-appearance: none;
	}

:where(.s-product-section) ::-webkit-file-upload-button {
		-webkit-appearance: button;
		font: inherit;
	}

:where(.s-product-section) summary {
		display: list-item;
	}

:where(.s-product-section) blockquote,
	:where(.s-product-section) dl,
	:where(.s-product-section) dd,
	:where(.s-product-section) h1,
	:where(.s-product-section) h2,
	:where(.s-product-section) h3,
	:where(.s-product-section) h4,
	:where(.s-product-section) h5,
	:where(.s-product-section) h6,
	:where(.s-product-section) hr,
	:where(.s-product-section) figure,
	:where(.s-product-section) p,
	:where(.s-product-section) pre {
		margin: 0;
	}

:where(.s-product-section) fieldset {
		margin: 0;
		padding: 0;
	}

:where(.s-product-section) legend {
		padding: 0;
	}

:where(.s-product-section) ol,
	:where(.s-product-section) ul,
	:where(.s-product-section) menu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

:where(.s-product-section) dialog {
		padding: 0;
	}

:where(.s-product-section) textarea {
		resize: vertical;
	}

:where(.s-product-section) input::placeholder,
	:where(.s-product-section) textarea::placeholder {
		opacity: 1;
		color: #9ca3af;
	}

:where(.s-product-section) button,
	:where(.s-product-section) [role='button'] {
		cursor: pointer;
	}

:where(.s-product-section) :disabled {
		cursor: default;
	}

:where(.s-product-section) img,
	:where(.s-product-section) svg,
	:where(.s-product-section) video,
	:where(.s-product-section) canvas,
	:where(.s-product-section) audio,
	:where(.s-product-section) iframe,
	:where(.s-product-section) embed,
	:where(.s-product-section) object {
		display: block;
		vertical-align: middle;
	}

:where(.s-product-section) img,
	:where(.s-product-section) video {
		max-width: 100%;
		height: auto;
	}

:where(.s-product-section) [hidden]:where(:not([hidden='until-found'])) {
		display: none;
	}

.s-product-section {
		--tw-bg-opacity: 1;
		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
		padding: 16px;
}

/* Background variants - white is default, neutral adds grey background */
.s-product-section--background-neutral {
		--tw-bg-opacity: 1;
		background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Title - centered for default variant */
.s-product-section__title {
		text-align: center;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -0.16px;
		font-weight: 700;
		--tw-text-opacity: 1;
		color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* Title block - groups title, description, tabs */
.s-product-section__title-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		text-align: center;
}

/* Tabs switcher - contained width, centered, full-width tabs; 24px gap from title/description */
.s-product-section__tabs {
		display: flex;
		width: 100%;
		justify-content: center;
}

.s-product-section__tabs > * {
		width: 100%;
		min-width: 0px;
		max-width: 48rem;
}

/* Hero variant */
.s-product-section--hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 32px;
}

.s-product-section--hero .s-product-section__hero-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
}

.s-product-section--hero .s-product-section__hero-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 64px;
}

.s-product-section--hero .s-product-section__hero-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
}

.s-product-section--hero .s-product-section__hero-text-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		text-align: center;
}

.s-product-section--hero .s-product-section__title {
		min-width: 0px;
		max-width: 60%;
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -0.32px;
		font-weight: 700;
		--tw-text-opacity: 1;
		color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

@media (min-width: 1024px) {

		.s-product-section--hero .s-product-section__title {
				font-size: 32px;
				line-height: 40px;
				letter-spacing: -0.24px;
				font-weight: 600;
		}
}

.s-product-section--hero .s-product-section__description {
		max-width: 36rem;
		font-size: 14px;
		line-height: 20px;
		--tw-text-opacity: 1;
		color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.s-product-section--default .s-product-section__primary-action {
		display: flex;
		justify-content: center;
		padding-top: 24px;
}

.s-product-section--hero .s-product-section__content {
		width: 100%;
		min-width: 0px;
		max-width: 56rem;
}
.s-product-section--default .s-product-section__content {
		width: 100%;
		min-width: 0px;
}

/* Default variant - title block + content block with 40px gap */
.s-product-section--default .s-product-section__default-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
}

.s-product-section--default .s-product-section__logo {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 12px;
}

.s-product-section--default .s-product-section__description {
		max-width: 36rem;
		font-size: 14px;
		line-height: 20px;
		--tw-text-opacity: 1;
		color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

/* Content block - wraps content and primaryAction */
.s-product-section__content-block {
		display: flex;
		width: 100%;
		max-width: 72rem;
		flex-direction: column;
		align-items: center;
		gap: 24px;
}
/* SProductPlug Root */
.s-product-plug {
    display: flex;
    min-height: 0px;
    flex-direction: column;
    overflow: hidden
}

.s-product-plug-content {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    flex-direction: column
}

.s-product-plug-carousel-area {
    display: flex;
    min-height: 0px;
    flex: 1 1 0%;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px
}

/* Header */
.s-product-plug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 16px;
    padding-bottom: 16px
}

.s-product-plug-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(26 29 33 / var(--tw-text-opacity, 1))
}

.s-product-plug-header-right {
    display: flex;
    align-items: center;
    gap: 8px
}

/* Body */
.s-product-plug-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 24px;
    padding-bottom: 24px
}

.s-product-plug-body-content {
    display: flex;
    max-width: 70%;
    flex-direction: column;
    gap: 4px
}

.s-product-plug-body-nav {
    display: flex;
    align-items: center;
    gap: 8px
}

.s-product-plug-body-nav-container {
    display: flex;
    min-height: 0px;
    width: 100%;
    flex: 1 1 0%;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(240 241 243 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
    justify-content: center
}

/* Carousel */
.s-product-plug-carousel {
    position: relative;
    height: 100%;
    min-height: 0px;
    width: 100%;
    flex: 1 1 0%;
    overflow: hidden;
    border-radius: 8px;
    --tw-bg-opacity: 1;
    background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1))
}

.s-product-plug-slide-track {
    display: flex;
    height: 100%;
    transition-property: transform;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.s-product-plug-slide {
    display: flex;
    height: 100%;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center
}

.s-product-plug-slide img {
    display: block;
    height: auto;
    max-height: 92%;
    width: auto;
    max-width: 92%;
    object-fit: contain
}

/* Indicators */
.s-product-plug-indicators {
    position: absolute;
    left: 50%;
    display: flex;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    align-items: center;
    justify-content: center;
    gap: 8px
}

.s-product-plug-dot {
    height: 4px;
    width: 16px;
    cursor: pointer;
    border-radius: 2px;
    --tw-bg-opacity: 1;
    background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    animation-duration: 200ms
}

.s-product-plug-dot:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
    --tw-ring-offset-width: 1px
}

.s-product-plug-dot:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(138 141 147 / var(--tw-bg-opacity, 1))
}

.s-product-plug-dot[data-active="true"] {
    --tw-bg-opacity: 1;
    background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1))
}

/* Bottom Row: flex layout so footer buttons align right without absolute */
.s-product-plug-bottom-row {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 32px;
    padding-bottom: 32px
}

/* Footer Buttons */
.s-product-plug-footer-buttons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px
}

/* When inside modal, rely on modal container spacing */
.s-modal .s-product-plug-header {
    padding-left: 0px;
    padding-right: 0px
}

.s-modal .s-product-plug-body {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px
}

.s-modal .s-product-plug-carousel-area {
    padding-left: 0px;
    padding-right: 0px
}

.s-modal .s-product-plug-bottom-row {
    padding-right: 0px
}
/* Root container ----------------------------------------------------------- */
.s-carousel {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 24px;
	overflow: hidden;
}
.s-carousel:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 2px;
}

/* `transparent` is the default — no fill, no border, no rounding so the carousel
 * inherits whatever surface its parent provides. */
.s-carousel--bg-transparent {
	background-color: transparent;
}

/* `neutral` adds a soft neutral surface and rounded corners — useful when the
 * carousel sits on a white page and needs visual containment. */
.s-carousel--bg-neutral {
	border-radius: 8px;
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Viewport / track ---------------------------------------------------------- */
.s-carousel__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.s-carousel__viewport[data-content-static='true'] {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 32px;
	overflow: visible;
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 32px;
	padding-bottom: 32px;
}

.s-carousel__track {
	display: flex;
	width: 100%;
	transition-property: transform;
	transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	animation-duration: 500ms;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.s-carousel__slide {
	display: flex;
	width: 100%;
	flex-shrink: 0;
	align-items: center;
	gap: 32px;
	padding-left: 24px;
	padding-right: 24px;
	padding-top: 32px;
	padding-bottom: 32px;
	flex-direction: column-reverse;
}

@media (min-width: 768px) {
	.s-carousel__slide {
		flex-direction: row;
		gap: 40px;
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	/* Default behaviour: media on the right */
	.s-carousel__slide[data-media-side='right'] {
		flex-direction: row;
	}

	/* Per-slide override: media on the left */
	.s-carousel__slide[data-media-side='left'] {
		flex-direction: row-reverse;
	}

	.s-carousel__viewport[data-content-static='true'] {
		flex-direction: row;
		gap: 40px;
		padding-left: 40px;
		padding-right: 40px;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.s-carousel__viewport[data-content-static='true'][data-media-side='right'] {
		flex-direction: row;
	}

	.s-carousel__viewport[data-content-static='true'][data-media-side='left'] {
		flex-direction: row-reverse;
	}
}

/* Content / media panes ---------------------------------------------------- */
.s-carousel__content {
	display: flex;
	width: 100%;
	min-width: 0px;
	flex-direction: column;
	gap: 24px;
	overflow-wrap: break-word;
}

.s-carousel__static-content {
	display: flex;
	width: 100%;
	min-width: 0px;
	flex-direction: column;
	gap: 24px;
	overflow-wrap: break-word;
}

.s-carousel__media-column {
	display: flex;
	width: 100%;
	min-width: 0px;
	flex-direction: column;
	gap: 24px;
}

.s-carousel__media-viewport {
	position: relative;
	width: 100%;
	min-width: 0px;
	overflow: hidden;
}

.s-carousel__media {
	display: flex;
	width: 100%;
	min-width: 0px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

@media (min-width: 768px) {
	.s-carousel__content,
	.s-carousel__static-content {
		flex-shrink: 0;
		flex-grow: 1;
		flex-basis: 44%;
	}

	.s-carousel__media,
	.s-carousel__media-column {
		flex-shrink: 0;
		flex-grow: 1;
		flex-basis: 52%;
	}
}

.s-carousel__slide[data-content-static='true'] {
	gap: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.s-carousel__slide[data-content-static='true'] .s-carousel__media {
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: 100%;
}

.s-carousel__media img,
.s-carousel__media video,
.s-carousel__media svg {
	display: block;
	height: 100%;
	max-height: 100%;
	min-height: 0px;
	width: 100%;
	min-width: 0px;
	max-width: 100%;
	object-fit: contain;
}

.s-carousel__media > * {
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
}

/* Subtle entrance animation on the active slide's panes ------------------- */
@keyframes s-carousel-enter {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.s-carousel__slide[data-active='true'] .s-carousel__content,
.s-carousel__slide[data-active='true'] .s-carousel__media {
	animation: s-carousel-enter 380ms ease-out both;
}

.s-carousel__slide[data-active='true'] .s-carousel__media {
	animation-delay: 80ms;
}

/* Reduced motion: drop transitions + entrance animation ------------------- */
.s-carousel[data-reduced-motion='true'] .s-carousel__track {
	transition-property: none;
}

.s-carousel[data-reduced-motion='true']
	.s-carousel__slide[data-active='true']
	.s-carousel__content,
.s-carousel[data-reduced-motion='true']
	.s-carousel__slide[data-active='true']
	.s-carousel__media {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.s-carousel__track {
		transition-property: none;
	}

	.s-carousel__slide[data-active='true'] .s-carousel__content,
	.s-carousel__slide[data-active='true'] .s-carousel__media {
		animation: none;
	}
}

/* Controls (dots + arrows) ------------------------------------------------- */
.s-carousel__controls {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-left: 24px;
	padding-right: 24px;
	padding-bottom: 24px;
}

.s-carousel__controls[data-content-static='true'] {
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}

.s-carousel__indicators {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.s-carousel__arrows {
	position: static;
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (min-width: 768px) {
	.s-carousel__controls {
		padding-left: 32px;
		padding-right: 32px;
	}

	.s-carousel__arrows {
		position: absolute;
		right: 32px;
	}

	.s-carousel__controls[data-has-indicators='false'] .s-carousel__arrows {
		position: static;
	}
}

.s-carousel__dot {
	display: flex;
	height: 2rem;
	width: 2rem;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	background-color: transparent;
}

.s-carousel__dot:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}

.s-carousel__dot {
	touch-action: manipulation;
}

.s-carousel__dot::before {
	content: '';
	display: block;
	height: 4px;
	width: 16px;
	border-radius: 2px;
	--tw-bg-opacity: 1;
	background-color: rgb(196 198 204 / var(--tw-bg-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 200ms;
	animation-duration: 200ms;
}

.s-carousel__dot:hover::before {
	--tw-bg-opacity: 1;
	background-color: rgb(138 141 147 / var(--tw-bg-opacity, 1));
}

.s-carousel__dot[data-active='true']::before {
	--tw-bg-opacity: 1;
	background-color: rgb(4 114 225 / var(--tw-bg-opacity, 1));
}

/* Visually-hidden live region --------------------------------------------- */
.s-carousel__live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sr-pivot-table {
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 16px;
	font-family: inherit;
}

.sr-pivot-table__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.sr-pivot-table__controls-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sr-pivot-table__controls-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.sr-pivot-table__container {
	position: relative;
	overflow: auto;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__table {
	width: 100%;
	border-collapse: separate;
	--tw-border-spacing-x: 0px;
	--tw-border-spacing-y: 0px;
	border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.sr-pivot-table__table--resizable {
	table-layout: fixed;
}

/* ===== HEADER STYLES ===== */

.sr-pivot-table__th {
	box-sizing: border-box;
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
	text-align: left;
	font-size: 14px;
	line-height: 20px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	position: relative;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	border-bottom: 1px solid #E1E2E6;
	border-right: 1px solid #E1E2E6;
	min-height: 32px;
	/* Height grows with wrapped header content; min-height keeps the
	   compact 32px baseline so single-line headers still match the
	   body-cell rhythm. */
	vertical-align: middle;
	overflow: hidden;
}

.sr-pivot-table__th:last-child {
	border-right: none;
}

.sr-pivot-table__resizer {
	position: absolute;
	right: -0.125rem;
	top: 0px;
	height: 100%;
	width: 0.25rem;
	cursor: col-resize;
	touch-action: none;
	user-select: none;
	z-index: 12;
}

.sr-pivot-table__resizer:hover,
.sr-pivot-table__resizer.is-resizing {
	background-color: rgba(74, 144, 226, 0.45);
}

/* Header group (top-level like Q1, Q2) */
.sr-pivot-table__th--group {
	text-align: left;
	font-weight: 600;
	border-bottom: 1px solid #E1E2E6;
}

/* Ensure grouped column headers (Quarter, Q1, Q2, etc.) render left-aligned */
.sr-pivot-table__th--group .sr-pivot-table__header {
	justify-content: flex-start;
}

.sr-pivot-table__th--group .sr-pivot-table__header-label {
	text-align: left;
}

/* Left-align top column-dimension label row */
.sr-pivot-table__th--column-dimension-label {
	text-align: left;
}

.sr-pivot-table__th--column-dimension-label .sr-pivot-table__header {
	justify-content: flex-start;
}

.sr-pivot-table__th--column-dimension-label .sr-pivot-table__header-label {
	text-align: left;
}

/* Column dimension headers (e.g., "Quarter / Year" with individual actions) */
.sr-pivot-table__column-dimension-headers {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
}

/* Keep multi-column dimension labels compact + left-aligned (Quarter / Year) */
.sr-pivot-table__column-dimension-headers .sr-pivot-table__header-cell {
	width: auto;
}

.sr-pivot-table__column-dimension-headers .sr-pivot-table__header-content {
	flex: 0 0 auto;
}

.sr-pivot-table__column-dimension-headers .sr-pivot-table__header-label-button {
	flex: 0 0 auto;
}

/* Single column-dimension header should keep label + action grouped (e.g. Quarter + menu). */
.sr-pivot-table__header-cell--single-column-dimension .sr-pivot-table__header-content {
	flex: 0 0 auto;
	justify-content: flex-start;
}

.sr-pivot-table__header-cell--single-column-dimension .sr-pivot-table__header-label-button {
	flex: 0 0 auto;
	justify-content: flex-start;
	text-align: left;
}

.sr-pivot-table__column-dimension-separator {
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	font-weight: 400;
}

/* Sortable header */
.sr-pivot-table__th--sortable {
	cursor: pointer;
	user-select: none;
}

.sr-pivot-table__th--sortable:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

/* Right-aligned header */
.sr-pivot-table__th--right {
	text-align: right;
}

/* Header content wrapper */
.sr-pivot-table__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-width: 0;
	width: 100%;
	overflow: hidden;
}

.sr-pivot-table__header-content {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sr-pivot-table__header-label {
	/* Headers wrap across multiple lines so long labels stay fully
	   visible. Body cell values keep their single-line truncation —
	   see `.sr-pivot-table__cell-value`. `break-words` lets pathological
	   tokens (e.g. a single very long word) still wrap within the
	   column instead of forcing horizontal overflow. */
	white-space: normal;
	overflow-wrap: break-word;
	font-weight: 600;
	min-width: 0;
}

/* Filter icon in header */
.sr-pivot-table__filter-icon {
	flex-shrink: 0;
	cursor: pointer;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.sr-pivot-table__th:hover .sr-pivot-table__filter-icon {
	opacity: 1;
}

/* Sort indicator */
.sr-pivot-table__sort-indicator {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	opacity: 0;
	transition: opacity 0.15s ease-in-out;
}

.sr-pivot-table__th:hover .sr-pivot-table__sort-indicator {
	opacity: 0.7;
}

.sr-pivot-table__th.is-sorted .sr-pivot-table__sort-indicator {
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	opacity: 1;
}

/* Sticky header */
.sr-pivot-table__table thead {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* ===== BODY CELL STYLES ===== */

.sr-pivot-table__td {
	box-sizing: border-box;
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	text-align: left;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
	position: relative;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid #E1E2E6;
	border-right: 1px solid #E1E2E6;
	min-height: 32px;
	height: 32px;
	vertical-align: middle;
	white-space: nowrap;
}

.sr-pivot-table__td:last-child {
	border-right: none;
}

/* Right-aligned cell (for numbers) */
.sr-pivot-table__td--right {
	text-align: right;
	--tw-numeric-spacing: tabular-nums;
	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

/* Group cell (first column with expand/collapse) */
.sr-pivot-table__td--group {
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(44 48 53 / var(--tw-text-opacity, 1));
}

/* ===== ROW DEPTH STYLING ===== */

/* Root level (Region).
 * Only the *parent* cell (the column that holds the chevron + group
 * label) gets the bold + dark treatment — it is the row's primary
 * identity. Sibling group cells in the same row (e.g. a unique-value
 * cell like "USD" or a record-count cell like "5 records") fall back
 * to the lighter weight defined for `.sr-pivot-table__td--group`, so
 * they read as supporting metadata instead of competing with the
 * chevron column for visual weight. This also keeps a collapsed
 * depth-0 row visually consistent with a collapsed depth-1 row,
 * whose unique-value / record-count cells render via the
 * `.sr-pivot-table__tr--depth-1 .sr-pivot-table__td--group` rule
 * below. */
.sr-pivot-table__tr--depth-0 .sr-pivot-table__td--parent {
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* Spanning cell (Region spanning multiple rows).
   Drop the cell's own padding so the inner sticky frame below defines the
   visual row. The frame is sized like a single non-spanning row
   (min-height + the cell's own padding) and centers its content
   vertically, so toggling expand/collapse keeps the label at the same x
   and y coordinates. */
.sr-pivot-table__td--spanning {
	vertical-align: top;
	padding: 0;
	border-right: 1px solid #C4C6CC;
	background-color: #F0F1F3;
}

.sr-pivot-table__td--spanning .sr-pivot-table__group-header {
	justify-content: flex-start;
}

/* Keep the spanning cell's value in view while scrolling within its rowSpan.
   The label sticks just below the (optionally sticky) header so it remains
   visible until the user scrolls past the entire group. The offset is
   provided via the --sr-pivot-table-header-offset variable set on the
   container so multi-row headers and non-sticky configurations both work.
   The min-height + flex centering makes the sticky frame match a single
   non-spanning row visually so toggling expand/collapse does not shift the
   label vertically. Continuation pills (when present) render *inside* the
   same `.group-header` flex container, so pill and pill-less rows share
   the identical sticky frame and the chevron + value sit at the same y. */
.sr-pivot-table__td--spanning > .sr-pivot-table__group-header,
.sr-pivot-table__td--spanning > .sr-pivot-table__row-dimension-value {
	position: sticky;
	top: var(--sr-pivot-table-header-offset, 0px);
	/* box-border is required because Tailwind preflight is disabled in this
	   package, so without it min-height stacks on top of the padding and
	   makes the sticky frame 40px tall instead of 32px, pushing the label
	   4px lower than its centred-non-spanning twin. */
	box-sizing: border-box;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 4px;
	padding-bottom: 4px;
	min-height: 32px;
}

/* Row-dimension value spans (non-expandable spanning cells) need explicit
   flex centering since their default style is `display: block`. Truncation
   still works because `truncate` (overflow/ellipsis/no-wrap) is applied to
   the same element. */
.sr-pivot-table__td--spanning > .sr-pivot-table__row-dimension-value {
	display: flex;
	align-items: center;
}

/* Sub-level (Product) */
.sr-pivot-table__tr--depth-1 .sr-pivot-table__td--group {
	font-weight: 400;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

/* Spanning parent cell always looks like a parent, even inside depth-1 rows */
.sr-pivot-table__td--spanning.sr-pivot-table__td--parent {
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__tr--depth-2 .sr-pivot-table__td--group {
	font-weight: 400;
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

/* ===== SUBTOTAL ROW ===== */

.sr-pivot-table__tr--subtotal {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__tr--subtotal .sr-pivot-table__td {
	--tw-bg-opacity: 1;
	background-color: rgb(242 246 247 / var(--tw-bg-opacity, 1));
	font-weight: 500;
	border-bottom: 1px solid #b4d9fe;
}

.sr-pivot-table__tr--subtotal .sr-pivot-table__td--group {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__subtotal-label {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.sr-pivot-table__sigma-icon {
	--tw-text-opacity: 1;
	color: rgb(4 114 225 / var(--tw-text-opacity, 1));
	font-size: 14px;
	font-weight: 600;
}

/* ===== GRAND TOTAL ROW ===== */

.sr-pivot-table__tr--grand-total .sr-pivot-table__td,
.sr-pivot-table__td--total {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__tr--grand-total .sr-pivot-table__td {
	border-top: 1px solid #C4C6CC;
	border-bottom: none;
}

.sr-pivot-table__tr--grand-total .sr-pivot-table__td--group {
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

/* Sticky footer for grand total */
.sr-pivot-table__table tfoot {
	position: sticky;
	bottom: 0;
	z-index: 10;
}

/* ===== EXPAND/COLLAPSE ===== */

.sr-pivot-table__group-header {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sr-pivot-table__expand-button {
	display: flex;
	height: 1.25rem;
	width: 1.25rem;
	flex-shrink: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 0.25rem;
	border-width: 0px;
	background-color: transparent;
	padding: 0px;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.sr-pivot-table__expand-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__expand-button:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
	--tw-ring-opacity: 1;
	--tw-ring-color: rgb(4 114 225 / var(--tw-ring-opacity, 1));
	--tw-ring-offset-width: 1px;
}

.sr-pivot-table__expand-button:disabled,
.sr-pivot-table__expand-button[aria-disabled="true"] {
	cursor: not-allowed;
	--tw-text-opacity: 1;
	color: rgb(196 198 204 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__expand-button:disabled:hover,
.sr-pivot-table__expand-button[aria-disabled="true"]:hover {
	background-color: transparent;
	--tw-text-opacity: 1;
	color: rgb(196 198 204 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__expand-spacer {
	flex-shrink: 0;
	width: 20px;
}

.sr-pivot-table__group-label {
	flex: 1 1 0%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.sr-pivot-table__group-count {
	white-space: nowrap;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
}

/* Wraps GroupValueCell + continuation pills on the dimension cell so the
   pills sit inline with the value while the chevron + label keep their
   existing layout. */
/* Continuation pills render as an inline-flex sibling of the chevron +
   value inside `.group-header`. Because `.group-header` is already a
   `flex items-center` row, the pill participates in the same vertical
   centring as the chevron — no wrapper, no extra DOM, no y-drift. */
.sr-pivot-table__group-continuation-pills {
	margin-left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* When a non-expandable spanning cell hosts a pill, we render the
   row-dimension value inside `.group-header` (so the sticky frame stays
   consistent) but suppress the indent normally reserved for the chevron
   button. */
.sr-pivot-table__group-header--no-chevron > .sr-pivot-table__group-label {
	margin-left: 0;
}

.sr-pivot-table__group-continuation-pill {
	white-space: nowrap;
}

/* Cross-window-total adornment next to the Σ Subtotal label. Visual
   weight is intentionally low so the metric numbers stay the focal
   point — meaning is carried by the tooltip. */
.sr-pivot-table__subtotal-cross-page-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
	cursor: help;
}

.sr-pivot-table__subtotal-cross-page-indicator:focus-visible {
	border-radius: 2px;
	outline-style: solid;
	outline-width: 2px;
	outline-offset: 1px;
	outline-color: #0472e1;
}

/* ===== PINNED COLUMNS ===== */

/* Pinned header cells sit above non-pinned sticky headers */
.sr-pivot-table__th.sr-pivot-table__cell--pinned {
	z-index: 11;
}

/* Pinned columns background */
.sr-pivot-table__th.sr-pivot-table__cell--pinned,
.sr-pivot-table__td.sr-pivot-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(247 247 248 / var(--tw-bg-opacity, 1));
}

/* Ensure pinned columns sit above scrollable cells */
.sr-pivot-table__th.sr-pivot-table__cell--pinned,
.sr-pivot-table__td.sr-pivot-table__cell--pinned {
	z-index: 2;
}

/* Pinned edge shadows — overflow visible so the pseudo-element renders outside the cell */
.sr-pivot-table__th.sr-pivot-table__cell--pinned-edge-left,
.sr-pivot-table__td.sr-pivot-table__cell--pinned-edge-left,
.sr-pivot-table__th.sr-pivot-table__cell--pinned-edge-right,
.sr-pivot-table__td.sr-pivot-table__cell--pinned-edge-right {
	overflow: visible;
}

.sr-pivot-table__th.sr-pivot-table__cell--pinned-edge-left::before,
.sr-pivot-table__td.sr-pivot-table__cell--pinned-edge-left::before {
	content: '';
	position: absolute;
	top: 0;
	right: -1px;
	bottom: 0;
	width: 2px;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
	filter: blur(2px);
}

.sr-pivot-table__th.sr-pivot-table__cell--pinned-edge-right::before,
.sr-pivot-table__td.sr-pivot-table__cell--pinned-edge-right::before {
	content: '';
	position: absolute;
	top: 0;
	left: -1px;
	bottom: 0;
	width: 2px;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
	filter: blur(2px);
}

.sr-pivot-table__tr--subtotal .sr-pivot-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(242 246 247 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__tr--grand-total .sr-pivot-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

/* ===== EMPTY STATE ===== */

.sr-pivot-table__empty {
	padding: 32px;
	text-align: center;
	--tw-text-opacity: 1;
	color: rgb(98 103 109 / var(--tw-text-opacity, 1));
}

/* ===== PAGINATION ===== */

.sr-pivot-table__pagination-wrapper {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: flex-end;
}

/* ===== EXPAND/COLLAPSE ALL CONTROLS ===== */

.sr-pivot-table__expand-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ===== ROW HOVER ===== */

.sr-pivot-table__tr--hovered-row .sr-pivot-table__td {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__tr--hovered-group-descendant .sr-pivot-table__td {
	--tw-bg-opacity: 1;
	background-color: rgb(242 246 247 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__td--hover-ancestor {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__td--hover-group {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__tr--hovered-row .sr-pivot-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__tr--hovered-group-descendant .sr-pivot-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(242 246 247 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__td--hover-ancestor.sr-pivot-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__td--hover-group.sr-pivot-table__cell--pinned {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__tr--subtotal:hover .sr-pivot-table__td,
.sr-pivot-table__tr--grand-total:hover .sr-pivot-table__td {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

/* Last row in table */
.sr-pivot-table__table tbody tr:last-child .sr-pivot-table__td {
	border-bottom: none;
}

/* ===== VALUE CELL ===== */

.sr-pivot-table__cell-value {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sr-pivot-table__row-dimension-value {
	display: block;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Total column styling (last column or designated total) */
.sr-pivot-table__th--total {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
	font-weight: 600;
	--tw-text-opacity: 1;
	color: rgb(26 29 33 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__tr--hovered-row .sr-pivot-table__td--total,
.sr-pivot-table__tr--hovered-group-descendant .sr-pivot-table__td--total {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
}

/* ===== PERFORMANCE WARNING ===== */

.sr-pivot-table__performance-warning {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 0.25rem;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(255 230 141 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 245 220 / var(--tw-bg-opacity, 1));
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(165 124 31 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__performance-warning-icon {
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(218 176 41 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__performance-warning-text {
	flex: 1 1 0%;
}

/* ===== HEADER CELL COMPONENT ===== */

.sr-pivot-table__header-cell {
	display: flex;
	width: 100%;
	align-items: center;
	min-width: 0;
}

.sr-pivot-table__header-cell--right {
	justify-content: flex-end;
}

.sr-pivot-table__header-cell--center {
	justify-content: center;
}

.sr-pivot-table__header-cell--center .sr-pivot-table__header-content {
	justify-content: center;
}

.sr-pivot-table__header-cell--center .sr-pivot-table__header-label-button {
	justify-content: center;
	text-align: center;
}

.sr-pivot-table__header-cell--sorted .sr-pivot-table__sort-icon {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-cell--filtered .sr-pivot-table__header-action-button {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-content {
	display: flex;
	flex: 1 1 0%;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sr-pivot-table__header-label-button {
	display: flex;
	flex: 1 1 0%;
	cursor: pointer;
	align-items: center;
	gap: 8px;
	border-width: 0px;
	background-color: transparent;
	padding: 0px;
	text-align: left;
	min-width: 0;
	overflow: hidden;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.sr-pivot-table__header-label-button--sortable:hover {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-label-button:disabled {
	cursor: default;
}

.sr-pivot-table__sort-icon {
	flex-shrink: 0;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.sr-pivot-table__header-label-button:hover .sr-pivot-table__sort-icon,
.sr-pivot-table__sort-icon--active {
	opacity: 1;
}

.sr-pivot-table__sort-icon--active {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-action-button {
	display: flex;
	height: 1.25rem;
	width: 1.25rem;
	flex-shrink: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	border-radius: 0.25rem;
	border-width: 0px;
	background-color: transparent;
	padding: 0px;
	--tw-text-opacity: 1;
	color: rgb(138 141 147 / var(--tw-text-opacity, 1));
	opacity: 0;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.sr-pivot-table__th:hover .sr-pivot-table__header-action-button,
.sr-pivot-table__header-action-button--active,
.sr-pivot-table__header-action-button--open {
	opacity: 1;
}

.sr-pivot-table__header-action-button:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(80 84 88 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-action-button--active {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-action-button--open {
	--tw-bg-opacity: 1;
	background-color: rgb(225 226 230 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-action-panel {
	min-width: 220px;
	max-width: 360px;
}

/* ===== HEADER ACTION MENU ===== */

.sr-pivot-table__header-menu {
	min-width: 160px;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(196 198 204 / var(--tw-border-opacity, 1));
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
	padding-top: 12px;
	padding-bottom: 12px;
	--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sr-pivot-table__header-menu-item {
	display: flex;
	width: 100%;
	cursor: pointer;
	align-items: center;
	gap: 16px;
	border-width: 0px;
	background-color: transparent;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	font-size: 12px;
	line-height: 16px;
	--tw-text-opacity: 1;
	color: rgb(62 66 71 / var(--tw-text-opacity, 1));
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.sr-pivot-table__header-menu-item:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__header-menu-item--active {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-menu-item--active:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__header-menu-check {
	margin-left: auto;
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-menu-badge {
	margin-left: auto;
	border-radius: 9999px;
	--tw-bg-opacity: 1;
	background-color: rgb(180 217 254 / var(--tw-bg-opacity, 1));
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: 10px;
	font-weight: 500;
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}

.sr-pivot-table__header-menu-divider {
	margin-top: 12px;
	margin-bottom: 12px;
	border-top-width: 1px;
	border-style: solid;
	--tw-border-opacity: 1;
	border-color: rgb(225 226 230 / var(--tw-border-opacity, 1));
}

/* ===== ACTIVE FILTER INDICATOR ===== */

.sr-pivot-table__filter-icon--active {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	opacity: 1;
}

.sr-pivot-table__th.is-filtered {
	--tw-bg-opacity: 1;
	background-color: rgb(242 246 247 / var(--tw-bg-opacity, 1));
}

.sr-pivot-table__th.is-sorted {
	--tw-bg-opacity: 1;
	background-color: rgb(240 241 243 / var(--tw-bg-opacity, 1));
}

/* ===== SORT INDICATOR ENHANCEMENTS ===== */

.sr-pivot-table__sort-indicator--active {
	--tw-text-opacity: 1;
	color: rgb(3 89 175 / var(--tw-text-opacity, 1));
	opacity: 1;
}

/* ===== STICKY HEADER/FOOTER TOGGLE ===== */

.sr-pivot-table__table--sticky-header thead {
	position: sticky;
	top: 0;
	z-index: 10;
}

.sr-pivot-table__table--sticky-footer tfoot {
	position: sticky;
	bottom: 0;
	z-index: 10;
}

/* Non-sticky mode */
.sr-pivot-table__table:not(.sr-pivot-table__table--sticky-header) thead {
	position: relative;
}

.sr-pivot-table__table:not(.sr-pivot-table__table--sticky-footer) tfoot {
	position: relative;
}

/* ===== CELL CLICK STYLES ===== */

.sr-pivot-table__td--clickable {
	cursor: pointer;
}

.sr-pivot-table__td--clickable:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(230 242 255 / var(--tw-bg-opacity, 1));
	--tw-text-opacity: 1;
	color: rgb(2 63 125 / var(--tw-text-opacity, 1));
}
.s-module-empty-state {

	display: flex;

	width: 100%;

	flex-direction: column;

	gap: 24px
}

.s-module-empty-state-text {

	display: flex;

	flex: 1 1 0%;

	flex-direction: column;

	gap: 48px
}

.s-module-empty-state-visual {

	display: flex;

	width: 100%;

	align-items: center;

	justify-content: center
}

/* Wrapper that positions whatever badge atom the consumer provides */
.s-module-empty-state-badge-slot {

	display: inline-flex
}

.s-module-empty-state-heading {

	margin: 0px;

	font-size: 24px;

	line-height: 32px;

	letter-spacing: -0.16px;

	font-weight: 600;

	--tw-text-opacity: 1;

	color: rgb(26 29 33 / var(--tw-text-opacity, 1))
}

.s-module-empty-state-description {

	margin: 0px;

	font-size: 14px;

	line-height: 20px;

	--tw-text-opacity: 1;

	color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

.s-module-empty-state-feature-list {

	margin: 0px;

	display: flex;

	list-style-type: none;

	flex-direction: column;

	gap: 24px;

	padding: 0px
}

.s-module-empty-state-feature-item {

	display: flex;

	flex-direction: column;

	gap: 4px
}

.s-module-empty-state-feature-title {

	font-size: 14px;

	line-height: 20px;

	font-weight: 600;

	--tw-text-opacity: 1;

	color: rgb(44 48 53 / var(--tw-text-opacity, 1))
}

.s-module-empty-state-feature-description {

	font-size: 14px;

	line-height: 20px;

	--tw-text-opacity: 1;

	color: rgb(98 103 109 / var(--tw-text-opacity, 1))
}

.s-module-empty-state-actions {

	display: flex;

	flex-wrap: wrap;

	align-items: center;

	column-gap: 12px
}

@media (min-width: 768px) {
	.s-module-empty-state {

		flex-direction: row;

		align-items: center
	}

	.s-module-empty-state-visual {

		width: auto;

		flex: 1 1 0%
	}
}
