/*
	UI kit - "Deep Glass"
	Shared component layer on top of the tokens in rtf6x/css/index.css.
	Pages that want these components link this file and use the classes below.
	Not wired into index.css or any project yet - see docs/superpowers/specs/2026-09-11-ui-kit-design.md
*/

:root {
	/* Ember accent - replaces a flat --brand fill for anything this kit draws */
	--uk-ember-1: #ffb057;
	--uk-ember-2: #e8590a;
	--uk-ember-3: #a8330a;
	--uk-ember-gradient: linear-gradient(160deg, var(--uk-ember-1) 0%, var(--uk-ember-2) 55%, var(--uk-ember-3) 100%);
	--uk-ember-text-on: #170a03;

	/* Semantic status colors */
	--uk-success: #8fd39a;
	--uk-success-bg: rgba(111, 184, 122, 0.14);
	--uk-success-border: rgba(111, 184, 122, 0.32);
	--uk-warning: #f0a83d;
	--uk-warning-bg: rgba(245, 158, 11, 0.16);
	--uk-warning-border: rgba(245, 158, 11, 0.38);
	--uk-danger: #ff5c52;
	--uk-danger-bg: rgba(255, 69, 58, 0.16);
	--uk-danger-border: rgba(255, 69, 58, 0.36);
	/* solid accent for anything that isn't the gradient itself (dots, badges, tabs, links) -
	   deliberately pulled toward red, not sampled from the gradient's lighter/yellower start */
	--uk-accent: #ff6a33;
	--uk-accent-bg: rgba(255, 90, 26, 0.16);
	--uk-accent-border: rgba(255, 90, 26, 0.36);

	/* Surfaces */
	--uk-bg: #0a0a0b;
	--uk-panel-bg: rgba(10, 9, 8, 0.62);
	--uk-panel-border: rgba(255, 255, 255, 0.08);
	--uk-field-bg: rgba(0, 0, 0, 0.35);
	--uk-field-border: rgba(255, 255, 255, 0.12);
	--uk-field-border-hover: rgba(255, 255, 255, 0.22);

	/* Text */
	--uk-text: #f5f5f4;
	--uk-muted: #a3a3a6;
	--uk-faint: #6b6b6f;

	/* Type */
	--uk-font-heading: "Rajdhani", sans-serif;
	--uk-font-body: "Manrope", system-ui, sans-serif;
	--uk-font-mono: "JetBrains Mono", monospace;

	/* Shared inset: every component's text starts this far from its box edge,
	   regardless of whether the component itself has a 1px border. A bordered
	   element uses (--uk-inset - 1px) padding; a borderless one uses --uk-inset. */
	--uk-inset: 12px;
}

/* ---------- Panel ---------- */

.uk-panel {
	position: relative;
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--uk-panel-bg);
	backdrop-filter: blur(28px) saturate(120%);
	-webkit-backdrop-filter: blur(28px) saturate(120%);
	border: 1px solid var(--uk-panel-border);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 24px 48px -24px rgba(0, 0, 0, 0.75);
	color: var(--uk-text);
	font-family: var(--uk-font-body);
}

/* Media variant: cover image bleeds to the panel edge instead of sitting
   padded inside it - panel clips it via overflow, so only one radius to keep in sync */
.uk-panel--media {
	padding: 0;
	overflow: hidden;
	gap: 0;
}

.uk-panel__media {
	width: 100%;
	display: block;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	object-position: center;
}

.uk-panel__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.uk-panel__title {
	font-family: var(--uk-font-heading);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.02em;
}

/* ---------- Button ---------- */

.uk-btn {
	border: 1px solid transparent;
	font-family: var(--uk-font-body);
	cursor: pointer;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 6px;
	padding: 8px 14px 8px 12px;
	font-size: 12px;
	font-weight: 700;
	transition: filter 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.uk-btn:focus-visible {
	outline: 2px solid var(--uk-ember-1);
	outline-offset: 2px;
}

.uk-btn--primary {
	background: var(--uk-ember-gradient);
	color: var(--uk-ember-text-on);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.uk-btn--primary:hover {
	filter: brightness(1.08);
}

.uk-btn--primary:active {
	filter: brightness(0.94);
}

.uk-btn--secondary {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.16);
	color: var(--uk-text);
	font-weight: 800; /* light-on-dark text needs more weight than dark-on-light at the same number to read equally bold */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.uk-btn--secondary:hover {
	background: rgba(255, 255, 255, 0.11);
	border-color: rgba(255, 255, 255, 0.24);
}

.uk-btn--secondary:active {
	background: rgba(255, 255, 255, 0.06);
}

.uk-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--uk-muted);
	font-weight: 700;
}

.uk-btn--ghost:hover {
	color: var(--uk-text);
	background: rgba(255, 255, 255, 0.05);
}

.uk-btn--ghost:active {
	background: rgba(255, 255, 255, 0.02);
}

@media (prefers-reduced-motion: reduce) {
	.uk-btn {
		transition: none;
	}
}

/* Large - for a hero/standalone CTA, not inside a dense panel */
.uk-btn--lg {
	padding: 12px 22px;
	font-size: 13.5px;
	border-radius: 9px;
	letter-spacing: 0.01em;
}

.uk-btn--lg.uk-btn--primary {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		0 10px 22px -12px rgba(232, 89, 10, 0.5);
}

.uk-btn__chev {
	width: 0;
	height: 0;
	border-top: 3.5px solid transparent;
	border-bottom: 3.5px solid transparent;
	border-left: 5px solid currentColor;
	opacity: 0.85;
}

/* ---------- Badge ---------- */

.uk-badge {
	font-family: var(--uk-font-mono);
	font-size: 10.5px;
	font-weight: 700;
	padding: 4px calc(var(--uk-inset) - 1px);
	border-radius: 6px;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	text-decoration: none;
	color: inherit;
}

.uk-badge--neutral {
	background: rgba(255, 255, 255, 0.05);
	color: #c7c7cb;
	border-color: rgba(255, 255, 255, 0.1);
}

.uk-badge--accent {
	background: var(--uk-accent-bg);
	color: var(--uk-accent);
	border-color: var(--uk-accent-border);
}

.uk-badge--success {
	background: var(--uk-success-bg);
	color: var(--uk-success);
	border-color: var(--uk-success-border);
}

.uk-badge--warning {
	background: var(--uk-warning-bg);
	color: var(--uk-warning);
	border-color: var(--uk-warning-border);
}

.uk-badge--danger {
	background: var(--uk-danger-bg);
	color: var(--uk-danger);
	border-color: var(--uk-danger-border);
}

.uk-badge--interactive {
	font-family: var(--uk-font-body);
	font-size: 12.5px;
	font-weight: 400;
	padding: 6px 12px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.25);
	color: var(--uk-text);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		text-shadow 0.2s ease;
}

.uk-badge--interactive:hover {
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--uk-bg);
	text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.uk-badge--interactive {
		transition: none;
	}
}

.uk-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 6px currentColor;
	flex: none;
}

/* ---------- Tabs ---------- */

.uk-tabs {
	display: flex;
	gap: 2px;
	width: fit-content;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 3px;
}

.uk-tab {
	padding: 5px 12px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--uk-muted);
	border-radius: 5px;
	border: none;
	background: none;
	font-family: var(--uk-font-body);
	cursor: pointer;
	transition: color 0.12s ease, background-color 0.12s ease;
}

.uk-tab:hover:not([aria-selected="true"]) {
	color: var(--uk-text);
	background: rgba(255, 255, 255, 0.05);
}

.uk-tab:focus-visible {
	outline: 2px solid var(--uk-ember-1);
	outline-offset: 2px;
}

.uk-tab[aria-selected="true"] {
	background: var(--uk-accent-bg);
	color: var(--uk-accent);
	box-shadow: inset 0 0 0 1px var(--uk-accent-border);
}

@media (prefers-reduced-motion: reduce) {
	.uk-tab {
		transition: none;
	}
}

/* ---------- Status row ---------- */

.uk-status {
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 9px;
	padding: 12px calc(var(--uk-inset) - 1px);
	font-size: 12.5px;
	color: var(--uk-muted);
}

.uk-status__title {
	display: flex;
	align-items: center;
	font-size: 12.5px;
	margin-bottom: 4px;
	font-weight: 700;
	color: var(--uk-text);
}

.uk-status__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--uk-accent);
	display: inline-block;
	margin-right: 7px;
	flex: none;
}

/* ---------- Progress ---------- */

.uk-progress {
	height: 4px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.uk-progress__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--uk-ember-1), var(--uk-ember-2));
	border-radius: 3px;
}

/* ---------- Form fields ---------- */

.uk-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uk-label {
	font-family: var(--uk-font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--uk-muted);
}

.uk-input,
.uk-textarea,
.uk-select {
	font-family: var(--uk-font-body);
	font-size: 13px;
	color: var(--uk-text);
	background: var(--uk-field-bg);
	border: 1px solid var(--uk-field-border);
	border-radius: 7px;
	padding: 9px calc(var(--uk-inset) - 1px);
	width: 100%;
}

.uk-textarea {
	resize: vertical;
	min-height: 72px;
	font-family: var(--uk-font-body);
}

.uk-input::placeholder,
.uk-textarea::placeholder {
	color: var(--uk-faint);
}

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

.uk-input:focus,
.uk-textarea:focus,
.uk-select:focus {
	outline: none;
	border-color: var(--uk-ember-2);
	box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.22);
}

.uk-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--uk-muted) 50%), linear-gradient(135deg, var(--uk-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) center,
		calc(100% - 13px) center;
	background-size:
		5px 5px,
		5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
	cursor: pointer;
}

/* ---------- Dropdown (custom select) ----------
   Native <select> can't have a styled menu - the popup is the OS's, not CSS's.
   This is a real listbox built from a button + <ul role="listbox">, wired up by
   rtf6x/js/ui-kit.js. Markup contract:
   <div class="uk-dropdown" data-uk-dropdown data-name="env" data-value="production">
     <button type="button" class="uk-dropdown__trigger">
       <span class="uk-dropdown__value">Production</span>
       <span class="uk-btn__chev uk-dropdown__chev"></span>
     </button>
     <ul class="uk-dropdown__menu" role="listbox">
       <li role="option" data-value="production">Production</li>
       ...
     </ul>
   </div>
*/

.uk-dropdown {
	position: relative;
}

.uk-dropdown__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--uk-font-body);
	font-size: 13px;
	color: var(--uk-text);
	background: var(--uk-field-bg);
	border: 1px solid var(--uk-field-border);
	border-radius: 7px;
	padding: 9px calc(var(--uk-inset) - 1px);
	cursor: pointer;
	transition: border-color 0.12s ease;
}

.uk-dropdown__trigger:hover {
	border-color: var(--uk-field-border-hover);
}

.uk-dropdown__trigger:focus-visible {
	outline: none;
	border-color: var(--uk-ember-2);
	box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.22);
}

.uk-dropdown[data-open="true"] .uk-dropdown__trigger {
	border-color: var(--uk-field-border-hover);
}

.uk-dropdown__chev {
	color: var(--uk-muted);
	transition: transform 0.12s ease;
	flex: none;
}

.uk-dropdown[data-open="true"] .uk-dropdown__chev {
	transform: rotate(90deg);
}

.uk-dropdown__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--uk-panel-bg);
	backdrop-filter: blur(24px) saturate(120%);
	-webkit-backdrop-filter: blur(24px) saturate(120%);
	border: 1px solid var(--uk-panel-border);
	border-radius: 9px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06) inset,
		0 16px 32px -12px rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: translateY(-4px) scale(0.98);
	pointer-events: none;
	transition: opacity 0.12s ease, transform 0.12s ease;
	max-height: 220px;
	overflow-y: auto;
}

.uk-dropdown[data-open="true"] .uk-dropdown__menu {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.uk-dropdown__menu [role="option"] {
	font-family: var(--uk-font-body);
	font-size: 13px;
	color: var(--uk-muted);
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
}

.uk-dropdown__menu [role="option"]:hover,
.uk-dropdown__menu [role="option"][data-active="true"] {
	background: rgba(255, 255, 255, 0.06);
	color: var(--uk-text);
}

.uk-dropdown__menu [role="option"][aria-selected="true"] {
	background: var(--uk-accent-bg);
	color: var(--uk-accent);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.uk-dropdown__trigger,
	.uk-dropdown__chev,
	.uk-dropdown__menu {
		transition: none;
	}
}

/* Checkbox / radio - custom box, native input kept for a11y (visually hidden, not display:none) */

.uk-check,
.uk-radio {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--uk-font-body);
	font-size: 13px;
	color: var(--uk-text);
	cursor: pointer;
}

.uk-check input,
.uk-radio input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.uk-check__box,
.uk-radio__box {
	width: 16px;
	height: 16px;
	flex: none;
	border: 1px solid var(--uk-field-border);
	background: var(--uk-field-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.uk-check__box {
	border-radius: 5px;
}

.uk-radio__box {
	border-radius: 50%;
}

.uk-check input:checked + .uk-check__box,
.uk-radio input:checked + .uk-radio__box {
	background: var(--uk-ember-gradient);
	border-color: transparent;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.uk-check__box::after {
	content: "";
	width: 4px;
	height: 8px;
	border-right: 2px solid var(--uk-ember-text-on);
	border-bottom: 2px solid var(--uk-ember-text-on);
	transform: rotate(45deg) translate(-1px, -1px);
	opacity: 0;
}

.uk-check input:checked + .uk-check__box::after {
	opacity: 1;
}

.uk-radio__box::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--uk-ember-text-on);
	opacity: 0;
}

.uk-radio input:checked + .uk-radio__box::after {
	opacity: 1;
}

.uk-check input:focus-visible + .uk-check__box,
.uk-radio input:focus-visible + .uk-radio__box {
	outline: 2px solid var(--uk-ember-1);
	outline-offset: 2px;
}

/* Toggle / switch */

.uk-switch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--uk-font-body);
	font-size: 13px;
	color: var(--uk-text);
	cursor: pointer;
}

.uk-switch input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.uk-switch__track {
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: var(--uk-field-bg);
	border: 1px solid var(--uk-field-border);
	position: relative;
	flex: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.uk-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--uk-muted);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.uk-switch input:checked + .uk-switch__track {
	background: var(--uk-ember-gradient);
	border-color: transparent;
}

.uk-switch input:checked + .uk-switch__track .uk-switch__thumb {
	transform: translateX(14px);
	background: var(--uk-ember-text-on);
}

.uk-switch input:focus-visible + .uk-switch__track {
	outline: 2px solid var(--uk-ember-1);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.uk-switch__track,
	.uk-switch__thumb {
		transition: none;
	}
}

/* ---------- Links ---------- */

.uk-link {
	color: var(--uk-accent);
	text-decoration: underline;
	text-decoration-color: rgba(255, 90, 26, 0.4);
	text-underline-offset: 3px;
	transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

.uk-link:hover {
	color: var(--uk-ember-1);
	text-decoration-color: currentColor;
}

.uk-link:focus-visible {
	outline: 2px solid var(--uk-ember-1);
	outline-offset: 2px;
	border-radius: 2px;
}

.uk-link--muted {
	color: var(--uk-muted);
	text-decoration-color: rgba(255, 255, 255, 0.25);
}

.uk-link--muted:hover {
	color: var(--uk-text);
}

@media (prefers-reduced-motion: reduce) {
	.uk-link {
		transition: none;
	}
}

/* ---------- Typography ---------- */

.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4 {
	font-family: var(--uk-font-heading);
	font-weight: 700;
	color: var(--uk-text);
	margin: 0;
	letter-spacing: 0.01em;
}

.uk-h1 {
	font-size: 32px;
}

.uk-h2 {
	font-size: 24px;
}

.uk-h3 {
	font-size: 18px;
}

.uk-h4 {
	font-size: 15px;
	letter-spacing: 0.02em;
}

.uk-text {
	font-family: var(--uk-font-body);
	color: var(--uk-text);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

.uk-text--muted {
	color: var(--uk-muted);
}

.uk-text--small {
	font-size: 12.5px;
}

.uk-code {
	font-family: var(--uk-font-mono);
	font-size: 0.9em;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 1px 6px;
	border-radius: 4px;
	color: var(--uk-text);
}

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

.uk-divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin: 0;
	width: 100%;
	align-self: stretch;
}

/* ---------- Nav (sidebar) ----------
   Matches the shape of the site's own nav__group/nav__list/nav__link
   (index.css) so this maps onto the real homepage markup, not a new pattern. */

.uk-nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.uk-nav__group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.uk-nav__heading {
	font-family: var(--uk-font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--uk-accent);
	margin: 0;
}

.uk-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.uk-nav__link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 2px 0;
	font-family: var(--uk-font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--uk-text);
	text-shadow: 1px 0 3px rgba(0, 0, 0, 1);
	text-decoration: none;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	text-align: left;
	transition: color 0.12s ease;
}

.uk-nav__link:hover {
	color: var(--uk-accent);
}

.uk-nav__link:focus-visible {
	outline: 2px solid var(--uk-ember-1);
	outline-offset: 2px;
}

.uk-nav__link[aria-current="page"] {
	color: var(--uk-accent);
}

/* ---------- Icon link ----------
   Bare icon-only contact/social link, matching the site's own
   contacts__link pattern (icon, no circle, no label). */

.uk-icon-link {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--uk-text);
	opacity: 0.75;
	transition: opacity 0.12s ease;
}

.uk-icon-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.uk-icon-link:hover {
	opacity: 1;
}

.uk-icon-link:focus-visible {
	outline: 2px solid var(--uk-ember-1);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.uk-icon-link {
		transition: none;
	}
}

/* ---------- Definition list ---------- */

.uk-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 16px;
	margin: 0;
}

.uk-dl dt {
	font-family: var(--uk-font-mono);
	font-size: 11px;
	color: var(--uk-faint);
	white-space: nowrap;
}

.uk-dl dd {
	margin: 0;
	font-size: 13px;
	color: var(--uk-muted);
	line-height: 1.5;
}

.uk-dl dd a {
	color: var(--uk-accent);
}

/* ---------- Vertical list (selector) ----------
   Same active language as .uk-tab (tinted bg + inset ring), just stacked -
   for picking one item from a list, distinct from page-level .uk-nav__link. */

.uk-vlist {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.uk-vlist__item {
	width: 100%;
	text-align: left;
	padding: 7px calc(var(--uk-inset) - 1px);
	border-radius: 6px;
	border: none;
	background: none;
	font-family: var(--uk-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--uk-muted);
	cursor: pointer;
	transition: color 0.12s ease, background-color 0.12s ease;
}

.uk-vlist__item:hover {
	color: var(--uk-text);
	background: rgba(255, 255, 255, 0.05);
}

.uk-vlist__item[aria-current="true"] {
	background: var(--uk-accent-bg);
	color: var(--uk-accent);
	box-shadow: inset 0 0 0 1px var(--uk-accent-border);
}

@media (prefers-reduced-motion: reduce) {
	.uk-vlist__item {
		transition: none;
	}
}