/* KICAP component primitives. All selectors are opt-in and namespaced. */
body.kicap-component-locked {
	overscroll-behavior: none;
}

.kicap-button,
.kicap-icon-button,
.kicap-input,
.kicap-select,
.kicap-chip,
.kicap-tabs__tab,
.kicap-pagination__link,
.kicap-dropdown__toggle {
	transition: background-color var(--kicap-motion-fast) var(--kicap-ease-standard), border-color var(--kicap-motion-fast) var(--kicap-ease-standard), color var(--kicap-motion-fast) var(--kicap-ease-standard), box-shadow var(--kicap-motion-fast) var(--kicap-ease-standard), opacity var(--kicap-motion-fast) var(--kicap-ease-standard), transform var(--kicap-motion-fast) var(--kicap-ease-standard);
}

.kicap-button {
	position: relative;
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: var(--kicap-space-3);
	padding: var(--kicap-space-3) var(--kicap-space-5);
	border: 1px solid transparent;
	border-radius: var(--kicap-radius-sm);
	background: var(--kicap-button-primary-bg);
	color: var(--kicap-button-primary-text);
	font: 600 var(--kicap-font-size-sm) / var(--kicap-line-height-tight) var(--kicap-font-sans);
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.kicap-button:hover:not([disabled]):not([aria-disabled="true"]),
.kicap-button:focus-visible:not([disabled]):not([aria-disabled="true"]) {
	filter: brightness(0.94);
	color: var(--kicap-button-primary-text);
	text-decoration: none;
}

.kicap-button:active:not([disabled]):not([aria-disabled="true"]),
.kicap-button.is-active:not([disabled]):not([aria-disabled="true"]) {
	transform: translateY(1px);
}

.kicap-button--secondary {
	border-color: var(--kicap-button-secondary-border);
	background: var(--kicap-button-secondary-bg);
	color: var(--kicap-button-secondary-text);
}

.kicap-button--secondary:hover:not([disabled]):not([aria-disabled="true"]),
.kicap-button--secondary:focus-visible:not([disabled]):not([aria-disabled="true"]) {
	background: var(--kicap-color-accent-subtle);
	color: var(--kicap-text);
	filter: none;
}

.kicap-button--ghost {
	border-color: transparent;
	background: transparent;
	color: var(--kicap-text);
}

.kicap-button--ghost:hover:not([disabled]):not([aria-disabled="true"]),
.kicap-button--ghost:focus-visible:not([disabled]):not([aria-disabled="true"]) {
	background: var(--kicap-surface-elevated);
	border-color: var(--kicap-border);
	color: var(--kicap-color-accent-strong);
	filter: none;
}

.kicap-button--danger {
	background: var(--kicap-status-danger);
	color: var(--kicap-text-inverse);
}

.kicap-button--full {
	display: flex;
	width: 100%;
}

.kicap-button[disabled],
.kicap-button[aria-disabled="true"],
.kicap-icon-button[disabled],
.kicap-icon-button[aria-disabled="true"],
.kicap-input[disabled],
.kicap-select[disabled],
.kicap-chip[disabled],
.kicap-chip[aria-disabled="true"],
.kicap-tabs__tab[disabled],
.kicap-tabs__tab[aria-disabled="true"],
.kicap-pagination__link[aria-disabled="true"] {
	opacity: 0.52;
	cursor: not-allowed;
	pointer-events: none;
}

.kicap-button.is-loading,
.kicap-button[aria-busy="true"],
.kicap-icon-button.is-loading,
.kicap-icon-button[aria-busy="true"],
.kicap-card[aria-busy="true"],
.kicap-modal[aria-busy="true"],
.kicap-drawer[aria-busy="true"],
.kicap-dropdown[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
}

.kicap-button.is-loading::after,
.kicap-button[aria-busy="true"]::after,
.kicap-icon-button.is-loading::after,
.kicap-icon-button[aria-busy="true"]::after {
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--kicap-radius-pill);
	content: "";
	animation: kicap-component-spin var(--kicap-motion-base) linear infinite;
}

.kicap-button.is-loading > *,
.kicap-button[aria-busy="true"] > *,
.kicap-icon-button.is-loading > *,
.kicap-icon-button[aria-busy="true"] > * {
	opacity: 0;
}

.kicap-icon-button {
	position: relative;
	display: inline-grid;
	width: 44px;
	height: 44px;
	place-items: center;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--kicap-radius-pill);
	background: transparent;
	color: var(--kicap-text);
	cursor: pointer;
}

.kicap-icon-button:hover:not([disabled]):not([aria-disabled="true"]),
.kicap-icon-button:focus-visible:not([disabled]):not([aria-disabled="true"]),
.kicap-icon-button.is-active:not([disabled]):not([aria-disabled="true"]) {
	border-color: var(--kicap-border);
	background: var(--kicap-surface-elevated);
	color: var(--kicap-color-accent-strong);
}

.kicap-icon-button:active:not([disabled]):not([aria-disabled="true"]) {
	transform: scale(0.96);
}

.kicap-icon-button > .kicap-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.kicap-field {
	display: grid;
	gap: var(--kicap-space-2);
	min-width: 0;
}

.kicap-field__label {
	color: var(--kicap-text);
	font: 600 var(--kicap-font-size-sm) / var(--kicap-line-height-base) var(--kicap-font-sans);
}

.kicap-field__hint,
.kicap-field__message {
	color: var(--kicap-text-muted);
	font: 400 var(--kicap-font-size-xs) / var(--kicap-line-height-base) var(--kicap-font-sans);
}

.kicap-field.is-invalid .kicap-field__message {
	color: var(--kicap-status-danger);
}

.kicap-field.is-invalid .kicap-input,
.kicap-field.is-invalid .kicap-select {
	border-color: var(--kicap-status-danger);
}

.kicap-field[aria-busy="true"] {
	cursor: progress;
}

.kicap-field[aria-disabled="true"] {
	opacity: 0.52;
	pointer-events: none;
}

.kicap-input,
.kicap-select {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 44px;
	padding: var(--kicap-space-3) var(--kicap-space-4);
	border: 1px solid var(--kicap-input-border);
	border-radius: var(--kicap-radius-sm);
	background-color: var(--kicap-input-bg);
	color: var(--kicap-input-text);
	font: 400 var(--kicap-font-size-base) / var(--kicap-line-height-base) var(--kicap-font-sans);
	box-shadow: none;
}

.kicap-select {
	padding-right: calc(var(--kicap-space-5) + var(--kicap-space-4));
	cursor: pointer;
}

.kicap-input::placeholder {
	color: var(--kicap-input-placeholder);
	opacity: 1;
}

.kicap-input:-webkit-autofill {
	border-color: var(--kicap-input-border);
	-webkit-text-fill-color: var(--kicap-input-text);
	caret-color: var(--kicap-input-text);
	box-shadow: 0 0 0 1000px var(--kicap-input-bg) inset;
}

.kicap-input:hover:not([disabled]),
.kicap-select:hover:not([disabled]) {
	border-color: var(--kicap-border-strong);
}

.kicap-input:focus-visible,
.kicap-select:focus-visible {
	border-color: var(--kicap-focus-ring);
	outline: var(--kicap-focus-width) solid var(--kicap-focus-ring);
	outline-offset: var(--kicap-focus-offset);
	box-shadow: 0 0 0 4px var(--kicap-focus-shadow);
}

.kicap-input:-webkit-autofill:focus-visible {
	box-shadow: 0 0 0 1000px var(--kicap-input-bg) inset, 0 0 0 4px var(--kicap-focus-shadow);
}

.kicap-input:active:not([disabled]),
.kicap-select:active:not([disabled]) {
	background-color: var(--kicap-surface-elevated);
}

.kicap-input[aria-busy="true"],
.kicap-select[aria-busy="true"] {
	cursor: progress;
}

.kicap-card {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-md);
	background: var(--kicap-surface);
	color: var(--kicap-text);
	box-shadow: var(--kicap-shadow-soft);
	transition: border-color var(--kicap-motion-fast) var(--kicap-ease-standard), background-color var(--kicap-motion-fast) var(--kicap-ease-standard), box-shadow var(--kicap-motion-fast) var(--kicap-ease-standard), transform var(--kicap-motion-fast) var(--kicap-ease-standard), opacity var(--kicap-motion-fast) var(--kicap-ease-standard);
}

.kicap-card--interactive {
	cursor: pointer;
}

.kicap-card--interactive:hover,
.kicap-card--interactive:focus-visible,
.kicap-card--interactive.is-active {
	border-color: var(--kicap-border-strong);
	background: var(--kicap-surface-elevated);
	box-shadow: var(--kicap-shadow-elevated);
}

.kicap-card--interactive:active {
	transform: translateY(1px);
}

.kicap-card[aria-disabled="true"],
.kicap-card[disabled] {
	opacity: 0.52;
	pointer-events: none;
}

.kicap-card[aria-busy="true"] {
	opacity: 0.72;
}

.kicap-card__header,
.kicap-card__body,
.kicap-card__footer {
	padding: var(--kicap-space-5);
}

.kicap-card__header {
	border-bottom: 1px solid var(--kicap-border);
}

.kicap-card__footer {
	margin-top: auto;
	border-top: 1px solid var(--kicap-border);
}

.kicap-badge,
.kicap-chip {
	display: inline-flex;
	min-height: 24px;
	align-items: center;
	justify-content: center;
	gap: var(--kicap-space-2);
	border: 1px solid transparent;
	border-radius: var(--kicap-radius-pill);
	font: 600 var(--kicap-font-size-xs) / var(--kicap-line-height-tight) var(--kicap-font-sans);
	white-space: nowrap;
}

.kicap-badge {
	padding: var(--kicap-space-2) var(--kicap-space-3);
	background: var(--kicap-color-accent-subtle);
	color: var(--kicap-color-accent-strong);
}

.kicap-badge--success { background: var(--kicap-status-success-subtle); color: var(--kicap-status-success); }
.kicap-badge--warning { background: var(--kicap-status-warning-subtle); color: var(--kicap-status-warning); }
.kicap-badge--danger { background: var(--kicap-status-danger-subtle); color: var(--kicap-status-danger); }
.kicap-badge--info { background: var(--kicap-status-info-subtle); color: var(--kicap-status-info); }

.kicap-badge.is-active,
.kicap-badge:hover,
.kicap-badge:focus-visible {
	filter: brightness(0.96);
}

.kicap-badge[aria-disabled="true"],
.kicap-badge[disabled] {
	opacity: 0.52;
}

.kicap-badge[aria-busy="true"] {
	cursor: progress;
	opacity: 0.72;
}

.kicap-chip {
	min-height: 44px;
	padding: var(--kicap-space-2) var(--kicap-space-4);
	border-color: var(--kicap-border);
	background: var(--kicap-surface);
	color: var(--kicap-text-muted);
	cursor: pointer;
}

.kicap-chip:hover:not([disabled]):not([aria-disabled="true"]),
.kicap-chip:focus-visible:not([disabled]):not([aria-disabled="true"]) {
	border-color: var(--kicap-color-accent);
	background: var(--kicap-color-accent-subtle);
	color: var(--kicap-color-accent-strong);
}

.kicap-chip:active:not([disabled]):not([aria-disabled="true"]),
.kicap-chip.is-active:not([disabled]):not([aria-disabled="true"]),
.kicap-chip[aria-pressed="true"] {
	border-color: var(--kicap-color-accent);
	background: var(--kicap-color-accent);
	color: var(--kicap-text-inverse);
}

.kicap-chip[aria-busy="true"] {
	cursor: progress;
	opacity: 0.72;
}

.kicap-modal,
.kicap-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--kicap-z-modal);
	display: grid;
	background: var(--kicap-overlay);
	transition: opacity var(--kicap-motion-base) var(--kicap-ease-standard), visibility var(--kicap-motion-base) var(--kicap-ease-standard);
}

.kicap-modal[hidden],
.kicap-drawer[hidden] {
	display: none;
}

.kicap-modal {
	place-items: center;
	padding: var(--kicap-space-5);
}

.kicap-modal__backdrop,
.kicap-drawer__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	background: transparent;
	cursor: default;
}

.kicap-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 640px);
	max-height: min(100%, 760px);
	overflow: auto;
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-lg);
	background: var(--kicap-surface-elevated);
	color: var(--kicap-text);
	box-shadow: var(--kicap-shadow-elevated);
}

.kicap-modal__header,
.kicap-modal__body,
.kicap-modal__footer {
	padding: var(--kicap-space-6);
}

.kicap-modal__header,
.kicap-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kicap-space-4);
}

.kicap-modal__header { border-bottom: 1px solid var(--kicap-border); }
.kicap-modal__footer { border-top: 1px solid var(--kicap-border); }

.kicap-modal__title {
	margin: 0;
	color: var(--kicap-text);
	font: 650 var(--kicap-font-size-xl) / var(--kicap-line-height-tight) var(--kicap-font-sans);
}

.kicap-modal.is-active .kicap-modal__dialog,
.kicap-modal__dialog:hover,
.kicap-modal__dialog:focus-visible {
	border-color: var(--kicap-border-strong);
}

.kicap-modal__dialog:active {
	transform: translateY(1px);
}

.kicap-modal[aria-disabled="true"] .kicap-modal__dialog,
.kicap-modal[aria-busy="true"] .kicap-modal__dialog {
	opacity: 0.72;
}

.kicap-drawer {
	justify-items: start;
}

.kicap-drawer--end {
	justify-items: end;
}

.kicap-drawer__panel {
	position: relative;
	z-index: 1;
	display: flex;
	width: min(100%, 420px);
	height: 100%;
	flex-direction: column;
	border-right: 1px solid var(--kicap-border);
	background: var(--kicap-surface-elevated);
	color: var(--kicap-text);
	box-shadow: var(--kicap-shadow-elevated);
}

.kicap-drawer--end .kicap-drawer__panel {
	border-right: 0;
	border-left: 1px solid var(--kicap-border);
}

.kicap-drawer__header,
.kicap-drawer__body,
.kicap-drawer__footer {
	padding: var(--kicap-space-5);
}

.kicap-drawer__header,
.kicap-drawer__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kicap-space-4);
}

.kicap-drawer__header { border-bottom: 1px solid var(--kicap-border); }
.kicap-drawer__body { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.kicap-drawer__footer { border-top: 1px solid var(--kicap-border); }

.kicap-drawer.is-active .kicap-drawer__panel,
.kicap-drawer__panel:hover,
.kicap-drawer__panel:focus-visible {
	border-color: var(--kicap-border-strong);
}

.kicap-drawer__panel:active {
	transform: translateX(1px);
}

.kicap-drawer[aria-disabled="true"] .kicap-drawer__panel,
.kicap-drawer[aria-busy="true"] .kicap-drawer__panel {
	opacity: 0.72;
}

.kicap-dropdown {
	position: relative;
	display: inline-block;
}

.kicap-dropdown__toggle {
	display: block;
	min-height: 44px;
	align-items: center;
	gap: var(--kicap-space-3);
	padding: var(--kicap-space-3) var(--kicap-space-4);
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-sm);
	background: var(--kicap-surface);
	color: var(--kicap-text);
	font: 600 var(--kicap-font-size-sm) / var(--kicap-line-height-tight) var(--kicap-font-sans);
	cursor: pointer;
}

.kicap-dropdown__toggle:hover:not([disabled]),
.kicap-dropdown__toggle:focus-visible,
.kicap-dropdown.is-active .kicap-dropdown__toggle {
	border-color: var(--kicap-color-accent);
	background: var(--kicap-surface-elevated);
	color: var(--kicap-color-accent-strong);
}

.kicap-dropdown__toggle:active:not([disabled]) { transform: translateY(1px); }

.kicap-dropdown__menu {
	position: absolute;
	top: calc(100% + var(--kicap-space-2));
	left: 0;
	z-index: var(--kicap-z-dropdown);
	min-width: 12rem;
	padding: var(--kicap-space-2);
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-md);
	background: var(--kicap-surface-elevated);
	box-shadow: var(--kicap-shadow-soft);
}

.kicap-dropdown__menu[hidden] { display: none; }
.kicap-dropdown--end .kicap-dropdown__menu { right: 0; left: auto; }

.kicap-dropdown__item {
	display: flex;
	width: 100%;
	min-height: 44px;
	align-items: center;
	padding: var(--kicap-space-3);
	border: 0;
	border-radius: var(--kicap-radius-sm);
	background: transparent;
	color: var(--kicap-text);
	font: 400 var(--kicap-font-size-sm) / var(--kicap-line-height-base) var(--kicap-font-sans);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.kicap-dropdown__item:hover,
.kicap-dropdown__item:focus-visible,
.kicap-dropdown__item.is-active,
.kicap-dropdown__item[aria-current="true"] {
	background: var(--kicap-color-accent-subtle);
	color: var(--kicap-color-accent-strong);
}

.kicap-dropdown__item:active { transform: translateX(1px); }
.kicap-dropdown__item[disabled], .kicap-dropdown__item[aria-disabled="true"] { opacity: 0.52; pointer-events: none; }
.kicap-dropdown__item[aria-busy="true"] { cursor: progress; opacity: 0.72; }

.kicap-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kicap-space-2);
}

.kicap-pagination__link {
	display: inline-grid;
	min-width: 44px;
	min-height: 44px;
	place-items: center;
	padding: var(--kicap-space-2);
	border: 1px solid var(--kicap-border);
	border-radius: var(--kicap-radius-sm);
	background: var(--kicap-surface);
	color: var(--kicap-text);
	font: 600 var(--kicap-font-size-sm) / var(--kicap-line-height-tight) var(--kicap-font-sans);
	text-decoration: none;
}

.kicap-pagination__link:hover,
.kicap-pagination__link:focus-visible {
	border-color: var(--kicap-color-accent);
	background: var(--kicap-color-accent-subtle);
	color: var(--kicap-color-accent-strong);
}

.kicap-pagination__link:active { transform: translateY(1px); }
.kicap-pagination__link.is-active, .kicap-pagination__link[aria-current="page"] { border-color: var(--kicap-color-accent); background: var(--kicap-color-accent); color: var(--kicap-text-inverse); }
.kicap-pagination[aria-busy="true"] { cursor: progress; opacity: 0.72; pointer-events: none; }

.kicap-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kicap-space-2);
	margin: 0;
	padding: 0;
	color: var(--kicap-text-muted);
	font: 400 var(--kicap-font-size-sm) / var(--kicap-line-height-base) var(--kicap-font-sans);
	list-style: none;
}

.kicap-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--kicap-space-2);
}

.kicap-breadcrumb__item:not(:last-child)::after {
	color: var(--kicap-text-subtle);
	content: "/";
}

.kicap-breadcrumb a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	color: var(--kicap-text-muted);
	text-decoration: none;
}

.kicap-breadcrumb a:hover,
.kicap-breadcrumb a:focus-visible,
.kicap-breadcrumb__item.is-active,
.kicap-breadcrumb__item[aria-current="page"] {
	color: var(--kicap-color-accent-strong);
}

.kicap-breadcrumb a:active { color: var(--kicap-color-accent); }
.kicap-breadcrumb[aria-disabled="true"] { opacity: 0.52; pointer-events: none; }
.kicap-breadcrumb[aria-busy="true"] { cursor: progress; opacity: 0.72; }

.kicap-tabs {
	display: flex;
	gap: var(--kicap-space-2);
	border-bottom: 1px solid var(--kicap-border);
	overflow-x: auto;
}

.kicap-tabs__tab {
	min-height: 44px;
	padding: var(--kicap-space-3) var(--kicap-space-4);
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--kicap-text-muted);
	font: 600 var(--kicap-font-size-sm) / var(--kicap-line-height-tight) var(--kicap-font-sans);
	white-space: nowrap;
	cursor: pointer;
}

.kicap-tabs__tab:hover:not([disabled]),
.kicap-tabs__tab:focus-visible:not([disabled]) {
	color: var(--kicap-text);
}

.kicap-tabs__tab:active:not([disabled]) { transform: translateY(1px); }
.kicap-tabs__tab.is-active, .kicap-tabs__tab[aria-selected="true"] { border-bottom-color: var(--kicap-color-accent); color: var(--kicap-color-accent-strong); }
.kicap-tabs[aria-busy="true"] { cursor: progress; opacity: 0.72; pointer-events: none; }

.kicap-empty-state {
	display: grid;
	min-height: 12rem;
	place-items: center;
	padding: var(--kicap-space-8) var(--kicap-space-5);
	border: 1px dashed var(--kicap-border-strong);
	border-radius: var(--kicap-radius-md);
	background: var(--kicap-surface);
	color: var(--kicap-text-muted);
	text-align: center;
}

.kicap-empty-state__content {
	display: grid;
	max-width: 30rem;
	gap: var(--kicap-space-3);
	justify-items: center;
}

.kicap-empty-state__title {
	margin: 0;
	color: var(--kicap-text);
	font: 650 var(--kicap-font-size-lg) / var(--kicap-line-height-tight) var(--kicap-font-sans);
}

.kicap-empty-state__description {
	margin: 0;
	color: var(--kicap-text-muted);
}

.kicap-empty-state:hover,
.kicap-empty-state:focus-visible {
	border-color: var(--kicap-border-strong);
}

.kicap-empty-state:active {
	transform: translateY(1px);
}

.kicap-empty-state.is-active { border-color: var(--kicap-color-accent); background: var(--kicap-color-accent-subtle); }
.kicap-empty-state[aria-disabled="true"] { opacity: 0.52; }
.kicap-empty-state[aria-busy="true"] { cursor: progress; opacity: 0.72; }

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

@media (prefers-reduced-motion: reduce) {
	.kicap-button,
	.kicap-icon-button,
	.kicap-input,
	.kicap-select,
	.kicap-card,
	.kicap-chip,
	.kicap-tabs__tab,
	.kicap-pagination__link,
	.kicap-dropdown__toggle {
		transition-duration: 0ms;
	}

	.kicap-button.is-loading::after,
	.kicap-button[aria-busy="true"]::after,
	.kicap-icon-button.is-loading::after,
	.kicap-icon-button[aria-busy="true"]::after {
		animation: none;
	}
}

@media (max-width: 575px) {
	.kicap-modal { padding: var(--kicap-space-3); }
	.kicap-modal__header,
	.kicap-modal__body,
	.kicap-modal__footer { padding: var(--kicap-space-5); }
	.kicap-modal__dialog { border-radius: var(--kicap-radius-md); }
}