/**
 * Forms — Geist data-entry components consolidated.
 *
 * Adapted from https://github.com/geist-org/geist-ui/tree/master/components/{button,input,select,checkbox,radio,toggle,textarea}
 *
 * Components:
 *   .st-btn       Button — types, sizes, ghost, auto, shadow, loading, disabled
 *   .st-input     Input — types, label, icon, sizes
 *   .st-select    Select (native <select> styled like input + chevron)
 *   .st-checkbox  Checkbox (hidden native input + custom visual)
 *   .st-radio     Radio
 *   .st-toggle    Toggle (switch)
 *   .st-textarea  Multiline input
 *
 * Geist palette baked in:
 *   default     border #eaeaea / hover #888 / text #000
 *   secondary   bg #000 / text #fff
 *   success     #0070f3
 *   warning     #f5a623
 *   error       #ee0000
 */

@layer components {

	/* ============================================================
	   BUTTON — Geist clone
	   ============================================================ */

	.st-btn {
		box-sizing: border-box;
		display: inline-block;
		min-inline-size: 10.5rem;
		block-size: 2.5rem;
		padding: 0 1.375rem;
		border-radius: var(--st-radius);
		border: 1px solid var(--st-border);
		background: var(--st-bg);
		color: #888;
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 2.5rem;
		text-align: center;
		text-transform: capitalize;
		white-space: nowrap;
		user-select: none;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition:
			background-color 200ms ease,
			border 200ms ease,
			color 200ms ease,
			box-shadow 200ms ease,
			transform 200ms ease;
	}

	.st-btn:hover,
	.st-btn:focus-visible {
		background: var(--st-bg);
		border-color: var(--st-text);
		color: var(--st-text);
	}

	.st-btn[disabled],
	.st-btn--disabled {
		background: #fafafa;
		border-color: #eaeaea;
		color: #ccc;
		cursor: not-allowed;
		pointer-events: none;
	}

	/* --- Sizes --- */
	.st-btn--mini   { min-inline-size: 4rem;   block-size: 1.5rem;   padding: 0 0.75rem;  font-size: 0.75rem;    line-height: 1.5rem; }
	.st-btn--small  { min-inline-size: 8rem;   block-size: 2rem;     padding: 0 1.125rem; font-size: 0.8125rem;  line-height: 2rem; }
	.st-btn--large  { min-inline-size: 13rem;  block-size: 2.875rem; padding: 0 1.625rem; font-size: 1rem;       line-height: 2.875rem; }

	/* --- Auto width --- */
	.st-btn--auto { min-inline-size: 0; inline-size: auto; padding-inline: 1.15rem; }

	/* --- Type variants --- */
	.st-btn--secondary { background: var(--st-text); border-color: var(--st-text); color: var(--st-bg); }
	.st-btn--secondary:hover, .st-btn--secondary:focus-visible { background: var(--st-bg); color: var(--st-text); }

	.st-btn--success { background: #0070f3; border-color: #0070f3; color: #fff; }
	.st-btn--success:hover, .st-btn--success:focus-visible { background: var(--st-bg); color: #0070f3; }

	.st-btn--warning { background: #f5a623; border-color: #f5a623; color: #fff; }
	.st-btn--warning:hover, .st-btn--warning:focus-visible { background: var(--st-bg); color: #f5a623; }

	.st-btn--error   { background: #ee0000; border-color: #ee0000; color: #fff; }
	.st-btn--error:hover, .st-btn--error:focus-visible { background: var(--st-bg); color: #ee0000; }

	.st-btn--abort   { background: transparent; border-color: transparent; color: #888; min-inline-size: 0; }
	.st-btn--abort:hover, .st-btn--abort:focus-visible { background: transparent; border-color: transparent; color: var(--st-text); }

	/* --- Ghost variants (transparent bg, colored border + text) --- */
	.st-btn--ghost.st-btn--secondary { background: var(--st-bg); color: var(--st-text); border-color: var(--st-text); }
	.st-btn--ghost.st-btn--secondary:hover, .st-btn--ghost.st-btn--secondary:focus-visible { background: var(--st-text); color: var(--st-bg); }

	.st-btn--ghost.st-btn--success { background: var(--st-bg); color: #0070f3; border-color: #0070f3; }
	.st-btn--ghost.st-btn--success:hover, .st-btn--ghost.st-btn--success:focus-visible { background: #0070f3; color: #fff; }

	.st-btn--ghost.st-btn--warning { background: var(--st-bg); color: #f5a623; border-color: #f5a623; }
	.st-btn--ghost.st-btn--warning:hover, .st-btn--ghost.st-btn--warning:focus-visible { background: #f5a623; color: #fff; }

	.st-btn--ghost.st-btn--error { background: var(--st-bg); color: #ee0000; border-color: #ee0000; }
	.st-btn--ghost.st-btn--error:hover, .st-btn--ghost.st-btn--error:focus-visible { background: #ee0000; color: #fff; }

	/* --- Shadow modifier --- */
	.st-btn--shadow { box-shadow: 0 5px 10px rgb(0 0 0 / 0.12); }
	.st-btn--shadow:hover, .st-btn--shadow:focus-visible { box-shadow: 0 8px 30px rgb(0 0 0 / 0.12); transform: translate3d(0, -1px, 0); }

	/* --- Icon child --- */
	.st-btn__icon {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		margin-inline-end: 0.5rem;
	}
	.st-btn__icon--right {
		margin-inline-end: 0;
		margin-inline-start: 0.5rem;
	}

	/* ============================================================
	   INPUT — Geist clone
	   ============================================================ */

	.st-input-wrapper {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		block-size: 2.25rem;
		min-inline-size: 0;
		padding-inline: 0.625rem;
		border: 1px solid var(--st-border);
		border-radius: var(--st-radius);
		background: var(--st-bg);
		font-size: 0.875rem;
		color: var(--st-text);
		transition: border-color 200ms ease, color 200ms ease;
	}

	.st-input-wrapper:hover,
	.st-input-wrapper:focus-within {
		border-color: #888;
	}

	.st-input-wrapper--disabled,
	.st-input-wrapper:has(.st-input[disabled]) {
		background: #fafafa;
		color: #888;
		cursor: not-allowed;
	}

	/* --- Status types --- */
	.st-input-wrapper--secondary { border-color: #666; }
	.st-input-wrapper--secondary:hover, .st-input-wrapper--secondary:focus-within { border-color: #666; }

	.st-input-wrapper--success { border-color: #d3e5ff; }
	.st-input-wrapper--success:hover, .st-input-wrapper--success:focus-within { border-color: #0070f3; }

	.st-input-wrapper--warning { border-color: #ffefcf; }
	.st-input-wrapper--warning:hover, .st-input-wrapper--warning:focus-within { border-color: #f5a623; }

	.st-input-wrapper--error   { border-color: #ee0000; color: #ee0000; }
	.st-input-wrapper--error:hover, .st-input-wrapper--error:focus-within { border-color: #c50000; }

	/* --- Sizes --- */
	.st-input-wrapper--mini   { block-size: 1.5rem;  font-size: 0.75rem;    padding-inline: 0.5rem; }
	.st-input-wrapper--small  { block-size: 1.875rem; font-size: 0.8125rem; padding-inline: 0.5rem; }
	.st-input-wrapper--large  { block-size: 2.625rem; font-size: 1rem;      padding-inline: 0.875rem; }

	/* --- Native <input> reset --- */
	.st-input {
		flex: 1;
		min-inline-size: 0;
		block-size: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		font: inherit;
		outline: none;
	}

	.st-input::placeholder { color: #999; }
	.st-input[disabled] { cursor: not-allowed; }

	/* --- Inline label (left/right) --- */
	.st-input-label {
		display: inline-flex;
		align-items: center;
		block-size: 2.25rem;
		padding-inline: 0.625rem;
		border: 1px solid var(--st-border);
		background: var(--st-bg-subtle);
		color: #888;
		font-size: 0.875rem;
		white-space: nowrap;
	}
	.st-input-label--left {
		border-end-start-radius: var(--st-radius);
		border-start-start-radius: var(--st-radius);
		border-inline-end: 0;
	}
	.st-input-label--right {
		border-end-end-radius: var(--st-radius);
		border-start-end-radius: var(--st-radius);
		border-inline-start: 0;
	}

	.st-input-wrapper--with-left-label  { border-start-start-radius: 0; border-end-start-radius: 0; }
	.st-input-wrapper--with-right-label { border-start-end-radius: 0;   border-end-end-radius: 0; }

	/* --- Inline icon --- */
	.st-input-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		flex-shrink: 0;
		color: #888;
	}
	.st-input-icon--left  { margin-inline-end: 0.5rem; }
	.st-input-icon--right { margin-inline-start: 0.5rem; }

	/* --- Block label (above input) --- */
	.st-field {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}
	.st-field__label {
		font-size: 0.8125rem;
		color: var(--st-text);
		font-weight: 500;
	}
	.st-field__hint {
		font-size: 0.75rem;
		color: var(--st-text-muted);
	}

	/* ============================================================
	   TEXTAREA — same chrome as input wrapper, multiline
	   ============================================================ */

	.st-textarea {
		display: block;
		inline-size: 100%;
		min-block-size: 4.5rem;
		padding: 0.5rem 0.625rem;
		border: 1px solid var(--st-border);
		border-radius: var(--st-radius);
		background: var(--st-bg);
		color: var(--st-text);
		font: inherit;
		font-size: 0.875rem;
		line-height: 1.5;
		resize: vertical;
		transition: border-color 200ms ease;
	}
	.st-textarea:hover,
	.st-textarea:focus-visible {
		border-color: #888;
		outline: none;
	}
	.st-textarea[disabled] { background: #fafafa; color: #888; cursor: not-allowed; }
	.st-textarea--success { border-color: #d3e5ff; }
	.st-textarea--success:focus-visible { border-color: #0070f3; }
	.st-textarea--warning { border-color: #ffefcf; }
	.st-textarea--warning:focus-visible { border-color: #f5a623; }
	.st-textarea--error   { border-color: #ee0000; color: #ee0000; }
	.st-textarea--error:focus-visible { border-color: #c50000; }

	/* ============================================================
	   SELECT — Geist custom component clone
	   (NOT a native <select> — fully custom dropdown panel + options)
	   ============================================================ */

	.st-select {
		position: relative;
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		block-size: 2.25rem;
		min-inline-size: 11.5em;
		padding: 0 2rem 0 0.75rem;
		border: 1px solid var(--st-border);
		border-radius: var(--st-radius);
		background: var(--st-bg);
		font-size: 0.875rem;
		color: var(--st-text);
		cursor: pointer;
		user-select: none;
		white-space: nowrap;
		max-inline-size: 90vw;
		transition: border 150ms ease, color 200ms ease, box-shadow 200ms ease;
	}

	.st-select:hover,
	.st-select:focus-visible,
	.st-select[data-st-open="true"] {
		border-color: var(--st-text);
		outline: none;
	}

	.st-select[data-st-disabled="true"] {
		background: #fafafa;
		color: #888;
		cursor: not-allowed;
		pointer-events: none;
	}

	.st-select--mini   { block-size: 1.5rem;  min-inline-size: 8em;   font-size: 0.75rem;    padding: 0 1.625rem 0 0.5rem; }
	.st-select--small  { block-size: 1.875rem; min-inline-size: 10em; font-size: 0.8125rem; padding: 0 1.75rem 0 0.625rem; }
	.st-select--large  { block-size: 2.625rem; min-inline-size: 12em; font-size: 1rem;      padding: 0 2.25rem 0 0.875rem; }

	.st-select--success { border-color: #d3e5ff; }
	.st-select--success:hover, .st-select--success[data-st-open="true"] { border-color: #0070f3; }

	.st-select--warning { border-color: #ffefcf; }
	.st-select--warning:hover, .st-select--warning[data-st-open="true"] { border-color: #f5a623; }

	.st-select--error   { border-color: #ee0000; color: #ee0000; }
	.st-select--error:hover, .st-select--error[data-st-open="true"] { border-color: #c50000; }

	/* --- Value text (selected option) --- */

	.st-select__value {
		flex: 1;
		min-inline-size: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: inherit;
		color: inherit;
		/* No line-height: 1 — the descenders (g/p/y) need the natural line box
		   to fit inside the overflow:hidden clip. Vertical centering is handled
		   by the parent .st-select's flex align-items: center. */
	}

	.st-select__value--placeholder {
		color: #999;
	}

	/* --- Chevron icon (rotates on open) --- */

	.st-select__chevron {
		position: absolute;
		inset-inline-end: 0.625rem;
		inset-block-start: 50%;
		transform: translateY(-50%);
		inline-size: 0.875em;
		block-size: 0.875em;
		pointer-events: none;
		color: var(--st-border);
		transition: transform 200ms ease, color 200ms ease;
	}

	.st-select:hover .st-select__chevron,
	.st-select[data-st-open="true"] .st-select__chevron {
		color: var(--st-text);
	}

	.st-select[data-st-open="true"] .st-select__chevron {
		transform: translateY(-50%) rotate(180deg);
	}

	/* --- Dropdown panel --- */

	.st-select__dropdown {
		position: absolute;
		inset-block-start: calc(100% + 0.25rem);
		inset-inline: 0;
		max-block-size: 17em;
		overflow-y: auto;
		overflow-anchor: none;
		padding-block: 0.375em;
		background: var(--st-bg);
		border-radius: var(--st-radius);
		box-shadow: 0 30px 60px rgb(0 0 0 / 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		z-index: 100;
		scroll-behavior: smooth;
		transition:
			opacity 200ms cubic-bezier(0.1, 0.6, 0.1, 1),
			transform 200ms cubic-bezier(0.1, 0.6, 0.1, 1),
			visibility 0s linear 200ms;
	}

	.st-select[data-st-open="true"] .st-select__dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition:
			opacity 200ms cubic-bezier(0.1, 0.6, 0.1, 1),
			transform 200ms cubic-bezier(0.1, 0.6, 0.1, 1),
			visibility 0s linear 0s;
	}

	/* --- Option --- */

	.st-select__option {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		inline-size: 100%;
		block-size: 2.25rem;
		padding: 0 0.667rem;
		background: var(--st-bg);
		color: #888;
		font-size: 0.75rem;
		font-weight: 400;
		border: 0;
		cursor: pointer;
		transition: background 200ms ease, color 200ms ease;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.st-select__option:hover {
		background: #fafafa;
		color: var(--st-text);
	}

	.st-select__option[aria-selected="true"] {
		background: #eaeaea;
		color: var(--st-text);
	}

	.st-select__option[aria-selected="true"]:hover {
		background: #eaeaea;
	}

	.st-select__option[aria-disabled="true"] {
		background: #fafafa;
		color: #ccc;
		cursor: not-allowed;
	}

	/* --- Divider option --- */

	.st-select__divider {
		block-size: 0;
		margin-block: 0.25rem;
		border-block-start: 1px solid var(--st-border);
		pointer-events: none;
	}

	/* --- Multi-select variant (Geist `multiple` prop) --- */

	.st-select--multiple {
		block-size: auto;
		min-block-size: 2.25rem;
		padding: 0.25rem 2rem 0.25rem 0.5rem;
	}

	.st-select__values {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		flex: 1;
		min-inline-size: 0;
	}

	.st-select__placeholder {
		color: #999;
		font-size: inherit;
	}

	.st-select__values:not(:empty) + .st-select__placeholder { display: none; }

	.st-select__tag {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.125rem 0.375rem;
		background: var(--st-accents-2);
		color: var(--st-foreground);
		border-radius: 4px;
		font-size: 0.8125rem;
		line-height: 1.4;
		max-inline-size: 100%;
	}

	.st-select__tag-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.st-select__tag-remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 14px;
		block-size: 14px;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 50%;
		color: inherit;
		cursor: pointer;
		opacity: 0.6;
		transition: opacity 120ms, background 120ms;
	}

	.st-select__tag-remove:hover {
		opacity: 1;
		background: rgb(0 0 0 / 0.1);
	}

	.st-select__tag-remove svg {
		inline-size: 10px;
		block-size: 10px;
	}

	.st-select--multiple .st-select__option[aria-selected="true"]::after {
		content: "✓";
		margin-inline-start: auto;
		color: var(--st-success);
		font-weight: 600;
	}

	.st-select--multiple .st-select__option[aria-selected="true"] {
		background: var(--st-bg);
	}

	/* --- Group label option --- */

	.st-select__label {
		padding: 0 0.667rem;
		block-size: 2rem;
		display: flex;
		align-items: center;
		font-size: 0.875rem;
		font-weight: 500;
		color: var(--st-text);
		text-transform: capitalize;
		border-block-end: 1px solid var(--st-border);
		cursor: default;
		pointer-events: none;
	}

	/* ============================================================
	   CHECKBOX — Geist clone (hidden native + custom box via ::before/::after)
	   ============================================================ */

	.st-checkbox {
		display: inline-flex;
		align-items: center;
		gap: 0.4375rem;
		font-size: 0.875rem;
		line-height: 1;
		cursor: pointer;
		user-select: none;
	}

	.st-checkbox__input {
		position: absolute;
		opacity: 0;
		inline-size: 0;
		block-size: 0;
		pointer-events: none;
	}

	.st-checkbox__box {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 0.875rem;
		block-size: 0.875rem;
		border: 1px solid #888;
		border-radius: 2px;
		background: var(--st-bg);
		color: transparent;
		transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
	}

	.st-checkbox__box::after {
		content: "";
		display: block;
		inline-size: 6px;
		block-size: 3px;
		border-inline-start: 2px solid currentColor;
		border-block-end: 2px solid currentColor;
		transform: translateY(-1px) rotate(-45deg);
	}

	.st-checkbox__input:checked + .st-checkbox__box {
		background: var(--st-text);
		border-color: var(--st-text);
		color: var(--st-bg);
	}

	.st-checkbox__input:focus-visible + .st-checkbox__box {
		box-shadow: 0 0 0 3px rgb(0 102 204 / 0.25);
	}

	.st-checkbox__input[disabled] + .st-checkbox__box,
	.st-checkbox--disabled .st-checkbox__box {
		background: #fafafa;
		border-color: #eaeaea;
		cursor: not-allowed;
	}

	.st-checkbox--disabled { opacity: 0.75; cursor: not-allowed; }

	/* Type variants — color of the checked fill */
	.st-checkbox--success .st-checkbox__input:checked + .st-checkbox__box { background: #0070f3; border-color: #0070f3; }
	.st-checkbox--warning .st-checkbox__input:checked + .st-checkbox__box { background: #f5a623; border-color: #f5a623; }
	.st-checkbox--error   .st-checkbox__input:checked + .st-checkbox__box { background: #ee0000; border-color: #ee0000; }

	.st-checkbox-group {
		display: flex;
		flex-wrap: wrap;
		gap: 0.875rem;
	}
	.st-checkbox-group--column { flex-direction: column; gap: 0.5rem; }

	/* ============================================================
	   RADIO — Geist clone (round point with inner dot when active)
	   ============================================================ */

	.st-radio {
		display: inline-flex;
		flex-direction: column;
		gap: 0.125rem;
		cursor: pointer;
		user-select: none;
	}

	.st-radio__name {
		display: inline-flex;
		align-items: center;
		font-size: 0.875rem;
		font-weight: 600;
		gap: 0.375rem;
	}

	.st-radio__input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
		inline-size: 0;
		block-size: 0;
	}

	.st-radio__point {
		flex-shrink: 0;
		position: relative;
		inline-size: 0.875rem;
		block-size: 0.875rem;
		border: 1px solid #888;
		border-radius: 50%;
		transition: border-color 200ms ease;
		transform: scale(0.875);
	}

	.st-radio__point::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: var(--st-text);
		transform: scale(0);
		transition: transform 200ms ease;
	}

	.st-radio__input:checked ~ .st-radio__name .st-radio__point::before {
		transform: scale(0.875);
	}

	.st-radio__input:checked ~ .st-radio__name .st-radio__point { border-color: var(--st-text); }

	.st-radio__desc {
		margin-block-start: 0.125rem;
		margin-inline-start: 1.5rem;
		font-size: 0.8125rem;
		font-weight: 400;
		color: var(--st-text-muted);
	}

	.st-radio__input:focus-visible ~ .st-radio__name .st-radio__point {
		box-shadow: 0 0 0 3px rgb(0 102 204 / 0.25);
	}

	.st-radio--disabled { opacity: 0.55; cursor: not-allowed; }

	/* Type variants */
	.st-radio--success .st-radio__input:checked ~ .st-radio__name .st-radio__point { border-color: #0070f3; }
	.st-radio--success .st-radio__input:checked ~ .st-radio__name .st-radio__point::before { background: #0070f3; }
	.st-radio--warning .st-radio__input:checked ~ .st-radio__name .st-radio__point { border-color: #f5a623; }
	.st-radio--warning .st-radio__input:checked ~ .st-radio__name .st-radio__point::before { background: #f5a623; }
	.st-radio--error   .st-radio__input:checked ~ .st-radio__name .st-radio__point { border-color: #ee0000; }
	.st-radio--error   .st-radio__input:checked ~ .st-radio__name .st-radio__point::before { background: #ee0000; }

	.st-radio-group {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
	}
	.st-radio-group--row { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }

	/* ============================================================
	   TOGGLE — Geist clone (pill-shape switch with sliding knob)
	   ============================================================ */

	.st-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		cursor: pointer;
		user-select: none;
	}

	.st-toggle__input {
		position: absolute;
		opacity: 0;
		inline-size: 0;
		block-size: 0;
		pointer-events: none;
	}

	.st-toggle__track {
		position: relative;
		flex-shrink: 0;
		inline-size: 1.75rem;
		block-size: 0.875rem;
		padding: 0;
		border: 1px solid transparent;
		border-radius: 0.875rem;
		background: #eaeaea;
		transition:
			background-color 200ms cubic-bezier(0, 0, 0.2, 1) 120ms,
			border-color 200ms cubic-bezier(0, 0, 0.2, 1) 120ms;
	}

	.st-toggle__knob {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 1px;
		inline-size: calc(0.875rem - 4px);
		block-size: calc(0.875rem - 4px);
		border-radius: 50%;
		background: var(--st-bg);
		box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 1px 3px rgb(0 0 0 / 0.1);
		transform: translateY(-50%);
		transition: inset-inline-start 280ms cubic-bezier(0, 0, 0.2, 1);
	}

	.st-toggle__input:checked ~ .st-toggle__track {
		background: var(--st-text);
	}

	.st-toggle__input:checked ~ .st-toggle__track .st-toggle__knob {
		inset-inline-start: calc(100% - (0.875rem - 4px) - 1px);
		box-shadow: none;
	}

	.st-toggle__input:focus-visible ~ .st-toggle__track {
		box-shadow: 0 0 0 3px rgb(0 102 204 / 0.25);
	}

	.st-toggle__input[disabled] ~ .st-toggle__track {
		background: #fafafa;
		border-color: #eaeaea;
		cursor: not-allowed;
	}
	.st-toggle__input[disabled]:checked ~ .st-toggle__track {
		background: #888;
		border-color: #888;
	}
	.st-toggle__input[disabled] ~ .st-toggle__track .st-toggle__knob {
		background: #eaeaea;
	}

	.st-toggle__label {
		font-size: 0.875rem;
		color: var(--st-text);
	}

	/* Type variants */
	.st-toggle--success .st-toggle__input:checked ~ .st-toggle__track { background: #0070f3; }
	.st-toggle--warning .st-toggle__input:checked ~ .st-toggle__track { background: #f5a623; }
	.st-toggle--error   .st-toggle__input:checked ~ .st-toggle__track { background: #ee0000; }

	/* ============================================================
	   RATING — Geist clone (5 stars, hover-preview, click-set)
	   ============================================================ */

	.st-rating {
		display: inline-flex;
		align-items: center;
		gap: 0.2em;
		font-size: 1rem;
	}

	.st-rating__star {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 1.5em;
		block-size: 1.5em;
		padding: 0;
		background: none;
		border: 0;
		color: var(--st-border);
		cursor: pointer;
		transition: color 30ms linear, transform 30ms linear;
	}

	.st-rating__star svg {
		inline-size: 100%;
		block-size: 100%;
		fill: currentColor;
	}

	.st-rating__star[data-active="true"] {
		color: #f5a623;
	}

	.st-rating__star:hover {
		transform: scale(0.9);
	}

	.st-rating--secondary .st-rating__star[data-active="true"] { color: #666; }
	.st-rating--success   .st-rating__star[data-active="true"] { color: #0070f3; }
	.st-rating--warning   .st-rating__star[data-active="true"] { color: #f5a623; }
	.st-rating--error     .st-rating__star[data-active="true"] { color: #ee0000; }

	.st-rating--locked .st-rating__star { cursor: default; }

	/* ============================================================
	   SLIDER — native <input type="range"> styled like Geist
	   ============================================================ */

	.st-slider {
		appearance: none;
		-webkit-appearance: none;
		display: block;
		inline-size: 100%;
		block-size: 0.5rem;
		padding: 0;
		background: var(--st-text);
		border-radius: 50px;
		cursor: pointer;
		outline: none;
	}

	.st-slider::-webkit-slider-thumb {
		appearance: none;
		-webkit-appearance: none;
		inline-size: 1.25rem;
		block-size: 1.25rem;
		border-radius: 50%;
		background: var(--st-text);
		border: 2px solid var(--st-bg);
		box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
		cursor: pointer;
		transition: transform 120ms ease;
	}
	.st-slider::-moz-range-thumb {
		inline-size: 1.25rem;
		block-size: 1.25rem;
		border-radius: 50%;
		background: var(--st-text);
		border: 2px solid var(--st-bg);
		box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
		cursor: pointer;
		transition: transform 120ms ease;
	}

	.st-slider:hover::-webkit-slider-thumb,
	.st-slider:active::-webkit-slider-thumb { transform: scale(1.1); }
	.st-slider:hover::-moz-range-thumb,
	.st-slider:active::-moz-range-thumb     { transform: scale(1.1); }

	.st-slider[disabled] {
		background: #eaeaea;
		cursor: not-allowed;
	}

	.st-slider--success { background: #0070f3; }
	.st-slider--success::-webkit-slider-thumb { background: #0070f3; }
	.st-slider--success::-moz-range-thumb     { background: #0070f3; }

	.st-slider--warning { background: #f5a623; }
	.st-slider--warning::-webkit-slider-thumb { background: #f5a623; }
	.st-slider--warning::-moz-range-thumb     { background: #f5a623; }

	.st-slider--error { background: #ee0000; }
	.st-slider--error::-webkit-slider-thumb { background: #ee0000; }
	.st-slider--error::-moz-range-thumb     { background: #ee0000; }

	.st-slider-field {
		display: flex;
		align-items: center;
		gap: 0.875rem;
	}

	.st-slider-field__value {
		min-inline-size: 2.5rem;
		font-size: 0.8125rem;
		color: var(--st-text-muted);
		text-align: end;
		font-variant-numeric: tabular-nums;
	}

	/* ============================================================
	   BUTTON-GROUP — connected buttons sharing borders
	   ============================================================ */

	.st-btn-group {
		display: inline-flex;
		align-items: stretch;
		isolation: isolate;
	}

	.st-btn-group .st-btn {
		min-inline-size: 0;
		padding: 0 0.875rem;
		border-radius: 0;
		margin-inline-start: -1px;
	}

	.st-btn-group .st-btn:first-child { margin-inline-start: 0; border-start-start-radius: var(--st-radius); border-end-start-radius: var(--st-radius); }
	.st-btn-group .st-btn:last-child  { border-start-end-radius: var(--st-radius);   border-end-end-radius: var(--st-radius); }

	.st-btn-group .st-btn:hover,
	.st-btn-group .st-btn:focus-visible,
	.st-btn-group .st-btn[aria-pressed="true"] { z-index: 1; }

	.st-btn-group .st-btn[aria-pressed="true"] {
		background: var(--st-text);
		color: var(--st-bg);
		border-color: var(--st-text);
	}

	.st-btn-group--vertical {
		flex-direction: column;
	}
	.st-btn-group--vertical .st-btn {
		margin-inline-start: 0;
		margin-block-start: -1px;
	}
	.st-btn-group--vertical .st-btn:first-child {
		margin-block-start: 0;
		border-radius: 0;
		border-start-start-radius: var(--st-radius);
		border-start-end-radius: var(--st-radius);
	}
	.st-btn-group--vertical .st-btn:last-child {
		border-radius: 0;
		border-end-start-radius: var(--st-radius);
		border-end-end-radius: var(--st-radius);
	}

	/* ============================================================
	   INPUT PASSWORD — Geist clone (eye toggle right)
	   ============================================================ */

	.st-input-password__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
		flex-shrink: 0;
		background: transparent;
		border: 0;
		padding: 0;
		margin-inline-start: 0.375rem;
		color: var(--st-text-muted);
		cursor: pointer;
		transition: color 120ms;
	}
	.st-input-password__toggle:hover { color: var(--st-text); }
	.st-input-password__toggle svg { inline-size: 1rem; block-size: 1rem; }

	/* ============================================================
	   AUTOCOMPLETE — Input + filtered dropdown (Geist clone)
	   ============================================================ */

	.st-autocomplete {
		position: relative;
		display: inline-flex;
		flex-direction: column;
	}

	.st-autocomplete__dropdown {
		position: absolute;
		inset-block-start: calc(100% + 0.25rem);
		inset-inline: 0;
		max-block-size: 17em;
		overflow-y: auto;
		padding-block: 0.375em;
		background: var(--st-bg);
		border-radius: var(--st-radius);
		box-shadow: 0 30px 60px rgb(0 0 0 / 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		z-index: 100;
		transition:
			opacity 200ms cubic-bezier(0.1, 0.6, 0.1, 1),
			transform 200ms cubic-bezier(0.1, 0.6, 0.1, 1),
			visibility 0s linear 200ms;
	}

	.st-autocomplete[data-st-open="true"] .st-autocomplete__dropdown {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition:
			opacity 200ms cubic-bezier(0.1, 0.6, 0.1, 1),
			transform 200ms cubic-bezier(0.1, 0.6, 0.1, 1),
			visibility 0s linear 0s;
	}

	.st-autocomplete__option {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		inline-size: 100%;
		block-size: 2.25rem;
		padding: 0 0.667rem;
		background: var(--st-bg);
		color: #888;
		font-size: 0.75rem;
		border: 0;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: background 200ms ease, color 200ms ease;
	}

	.st-autocomplete__option:hover,
	.st-autocomplete__option[data-st-focus="true"] {
		background: #fafafa;
		color: var(--st-text);
	}

	.st-autocomplete__option[aria-selected="true"] {
		background: #eaeaea;
		color: var(--st-text);
	}

	.st-autocomplete__empty {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.875rem;
		color: var(--st-text-muted);
		font-size: 0.8125rem;
		font-style: italic;
	}

	.st-autocomplete__loading {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.875rem;
	}
}