@layer components {
	/* Buttons ---------------------------------------------------------------- */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--s-2);
		min-height: 2.75rem;
		padding: 0 var(--s-4);
		border: 1px solid transparent;
		border-radius: var(--r-control);
		font: inherit;
		font-size: var(--fs-sm);
		font-weight: 650;
		line-height: 1;
		text-decoration: none;
		cursor: pointer;
		background: var(--primary);
		color: var(--on-primary);
		transition: background-color 0.12s, border-color 0.12s;
	}

	.btn:hover {
		background: var(--primary-strong);
		text-decoration: none;
	}

	.btn[disabled],
	.btn[aria-busy="true"] {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.btn-secondary {
		background: var(--surface);
		color: var(--ink);
		border-color: var(--rule-strong);
	}

	.btn-secondary:hover {
		background: var(--surface-sunken);
	}

	.btn-quiet {
		background: transparent;
		color: var(--link);
	}

	.btn-quiet:hover {
		background: var(--primary-soft);
	}

	.btn-danger {
		background: var(--danger);
		color: #fff;
	}

	.btn-danger:hover {
		background: color-mix(in oklab, var(--danger) 82%, black);
	}

	.btn-accent {
		background: var(--accent);
		color: var(--on-accent);
	}

	.btn-accent:hover {
		background: color-mix(in oklab, var(--accent) 88%, black);
	}

	.btn-sm {
		min-height: 2.25rem;
		padding: 0 var(--s-3);
	}

	.btn-block {
		width: 100%;
	}

	.icon-btn {
		display: inline-grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		border-radius: var(--r-control);
		background: transparent;
		color: inherit;
		cursor: pointer;
		position: relative;
	}

	.icon-btn:hover {
		background: color-mix(in oklab, currentColor 12%, transparent);
	}

	/* Forms ------------------------------------------------------------------ */
	.form-stack {
		display: grid;
		gap: var(--s-5);
	}

	.form-row {
		display: grid;
		gap: var(--s-5);
	}

	@media (min-width: 40em) {
		.form-row {
			grid-template-columns: 1fr 1fr;
		}
	}

	.field {
		display: grid;
		gap: var(--s-1);
		align-content: start;
	}

	.field > label,
	.fieldset > legend {
		font-size: var(--fs-sm);
		font-weight: 650;
	}

	.hint {
		font-size: var(--fs-xs);
		color: var(--ink-muted);
	}

	.input,
	.select,
	.textarea {
		width: 100%;
		min-height: 2.75rem;
		padding: var(--s-2) var(--s-3);
		border: 1px solid var(--rule-strong);
		border-radius: var(--r-control);
		background: var(--surface);
		color: var(--ink);
		font: inherit;
		font-size: var(--fs-base);
	}

	.textarea {
		min-height: 8rem;
		resize: vertical;
		line-height: var(--lh-body);
	}

	.input:hover,
	.select:hover,
	.textarea:hover {
		border-color: var(--ink-faint);
	}

	.input::placeholder {
		color: var(--ink-faint);
	}

	.is-invalid .input,
	.is-invalid .select,
	.is-invalid .textarea {
		border-color: var(--danger);
		box-shadow: inset 3px 0 0 var(--danger);
	}

	.field-error {
		font-size: var(--fs-xs);
		font-weight: 600;
		color: var(--danger);
	}

	.input[type="color"] {
		padding: var(--s-1);
		width: 5rem;
	}

	.input[type="file"] {
		padding: var(--s-2);
	}

	.check {
		font-weight: 400;
		display: flex;
		align-items: flex-start;
		gap: var(--s-3);
		font-size: var(--fs-sm);
	}

	.check input {
		width: 1.25rem;
		height: 1.25rem;
		margin: 0.15rem 0 0;
		accent-color: var(--primary);
		flex: none;
	}

	.check-text {
		display: grid;
		gap: 2px;
	}

	.check-text > span:first-child {
		font-weight: 650;
	}

	.fieldset {
		border: 0;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--s-3);
	}

	.hp {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	/* Alerts and toasts ------------------------------------------------------- */
	.alert {
		display: flex;
		gap: var(--s-3);
		align-items: flex-start;
		padding: var(--s-3) var(--s-4);
		border-radius: var(--r-control);
		border-left: 4px solid var(--info);
		background: var(--info-soft);
		font-size: var(--fs-sm);
	}

	.alert .icon {
		margin-top: 0.1em;
		color: var(--info);
	}

	.alert-success {
		border-color: var(--ok);
		background: var(--ok-soft);
	}

	.alert-success .icon {
		color: var(--ok);
	}

	.alert-warning {
		border-color: var(--warn);
		background: var(--warn-soft);
	}

	.alert-warning .icon {
		color: var(--warn);
	}

	.alert-danger {
		border-color: var(--danger);
		background: var(--danger-soft);
	}

	.alert-danger .icon {
		color: var(--danger);
	}

	.alert strong {
		display: block;
	}

	/* Badges ------------------------------------------------------------------ */
	.badge {
		display: inline-flex;
		align-items: center;
		gap: var(--s-1);
		padding: 0.15rem 0.6rem;
		border-radius: var(--r-pill);
		font-size: var(--fs-xs);
		font-weight: 650;
		line-height: 1.5;
		background: var(--surface-sunken);
		color: var(--ink-muted);
		border: 1px solid var(--rule);
		white-space: nowrap;
	}

	.badge-ok {
		background: var(--ok-soft);
		color: var(--ok);
		border-color: transparent;
	}

	.badge-warn {
		background: var(--warn-soft);
		color: var(--warn);
		border-color: transparent;
	}

	.badge-danger {
		background: var(--danger-soft);
		color: var(--danger);
		border-color: transparent;
	}

	.badge-info {
		background: var(--info-soft);
		color: var(--info);
		border-color: transparent;
	}

	.badge-sample {
		background: var(--accent);
		color: var(--on-accent);
		border-color: transparent;
	}

	/* Panels and layout helpers ----------------------------------------------- */
	.panel {
		background: var(--surface);
		border: 1px solid var(--rule);
		border-radius: var(--r-panel);
	}

	.panel-pad {
		padding: var(--s-5);
	}

	.panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-3);
		padding: var(--s-4) var(--s-5);
		border-bottom: 1px solid var(--rule);
	}

	.panel-head h2 {
		font-size: var(--fs-md);
	}

	.stack > * + * {
		margin-top: var(--s-4);
	}

	.cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3);
		align-items: center;
	}

	/* Tables ------------------------------------------------------------------ */
	.table-wrap {
		overflow-x: auto;
	}

	.table {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--fs-sm);
	}

	.table th,
	.table td {
		padding: var(--s-3) var(--s-4);
		text-align: left;
		vertical-align: middle;
		border-bottom: 1px solid var(--rule);
	}

	.table thead th {
		font-weight: 650;
		color: var(--ink-muted);
		background: var(--surface-sunken);
		white-space: nowrap;
	}

	.table tbody tr:hover {
		background: color-mix(in oklab, var(--primary) 5%, transparent);
	}

	.table tbody tr:last-child td {
		border-bottom: 0;
	}

	.table .num,
	.table .actions {
		text-align: right;
	}

	.table .cell-primary {
		font-weight: 650;
		color: var(--ink);
		text-decoration: none;
	}

	.table a.cell-primary:hover {
		text-decoration: underline;
	}

	.sort-link {
		display: inline-flex;
		align-items: center;
		gap: var(--s-1);
		color: inherit;
		text-decoration: none;
		font-weight: inherit;
	}

	.sort-link:hover {
		color: var(--ink);
		text-decoration: underline;
	}

	th[aria-sort="ascending"] .sort-link::after {
		content: "\2191";
	}

	th[aria-sort="descending"] .sort-link::after {
		content: "\2193";
	}

	th[aria-sort="ascending"],
	th[aria-sort="descending"] {
		color: var(--ink);
	}

	.toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3);
		align-items: end;
		padding: var(--s-4) var(--s-5);
		border-bottom: 1px solid var(--rule);
	}

	.toolbar .field {
		min-width: 11rem;
	}

	.toolbar .field-search {
		flex: 1 1 16rem;
	}

	.table-foot {
		display: flex;
		flex-wrap: wrap;
		gap: var(--s-3);
		justify-content: space-between;
		align-items: center;
		padding: var(--s-3) var(--s-5);
		border-top: 1px solid var(--rule);
		font-size: var(--fs-sm);
		color: var(--ink-muted);
	}

	.pagination {
		display: flex;
		gap: var(--s-2);
	}

	/* Menus (details-based, work without scripting) ---------------------------- */
	.menu {
		position: relative;
	}

	.menu > summary {
		list-style: none;
		cursor: pointer;
	}

	.menu > summary::-webkit-details-marker {
		display: none;
	}

	.menu-panel {
		position: absolute;
		right: 0;
		top: calc(100% + var(--s-2));
		z-index: 40;
		min-width: 14rem;
		max-width: min(22rem, 92vw);
		padding: var(--s-2);
		background: var(--surface);
		color: var(--ink);
		border: 1px solid var(--rule);
		border-radius: var(--r-panel);
		box-shadow: var(--shadow-float);
	}

	.menu-item {
		display: flex;
		align-items: center;
		gap: var(--s-3);
		width: 100%;
		padding: var(--s-2) var(--s-3);
		border: 0;
		border-radius: var(--r-control);
		background: transparent;
		color: inherit;
		font: inherit;
		font-size: var(--fs-sm);
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}

	.menu-item:hover {
		background: var(--surface-sunken);
	}

	/* Dialog ------------------------------------------------------------------ */
	dialog.dialog {
		width: min(28rem, calc(100vw - 2rem));
		padding: 0;
		border: 1px solid var(--rule);
		border-radius: var(--r-panel);
		background: var(--surface);
		color: var(--ink);
		box-shadow: var(--shadow-float);
	}

	dialog.dialog::backdrop {
		background: rgb(10 20 26 / 0.55);
	}

	.dialog-body {
		padding: var(--s-5);
		display: grid;
		gap: var(--s-3);
	}

	.dialog-actions {
		display: flex;
		justify-content: flex-end;
		gap: var(--s-3);
		padding: var(--s-4) var(--s-5);
		border-top: 1px solid var(--rule);
		background: var(--surface-sunken);
		border-radius: 0 0 var(--r-panel) var(--r-panel);
	}

	/* Empty, loading and error states ------------------------------------------ */
	.empty {
		display: grid;
		justify-items: start;
		gap: var(--s-3);
		padding: var(--s-7) var(--s-5);
		max-width: 34rem;
	}

	.empty .icon {
		width: 2rem;
		height: 2rem;
		color: var(--ink-faint);
	}

	.empty h2 {
		font-size: var(--fs-md);
	}

	.skeleton {
		display: block;
		height: 1rem;
		border-radius: var(--r-control);
		background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--rule) 50%, var(--surface-sunken) 75%);
		background-size: 200% 100%;
		animation: shimmer 1.4s linear infinite;
	}

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

	.spinner {
		width: 1rem;
		height: 1rem;
		border: 2px solid currentColor;
		border-right-color: transparent;
		border-radius: 50%;
		animation: spin 0.7s linear infinite;
	}

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

	/* Definition lists --------------------------------------------------------- */
	.facts {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: var(--s-2) var(--s-5);
		margin: 0;
		font-size: var(--fs-sm);
	}

	.facts dt {
		color: var(--ink-muted);
	}

	.facts dd {
		margin: 0;
		overflow-wrap: anywhere;
	}

	.page-head {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: end;
		gap: var(--s-4);
		margin-bottom: var(--s-5);
	}

	.page-head p {
		color: var(--ink-muted);
		margin-top: var(--s-1);
	}
}