/*
 * SIMAKARA LMS components (v1, 20 Oct 2026). Opt-in `.sk-*` classes built only from simakara-tokens.css,
 * so every component follows the light/dark theme automatically. Guide + markup: docs/lms-design-system.md;
 * live gallery: docs/lms-design-system.html.
 *
 * States are expressed with ARIA/data attributes, not extra classes:
 *   [aria-pressed] [aria-selected] [aria-checked] [aria-current] [aria-invalid] [aria-busy] [disabled]
 *   [data-tone="success|danger|warning|info|neutral|primary|secondary"]
 *   [data-state="selected|correct|wrong|dimmed"] (quiz choices)
 */

/* =========================================================================================== Typography */
.sk-display,
.sk-title-1,
.sk-title-2 {
	margin: 0;
	font-family: var(--sk-font-display);
	color: var(--sk-fg);
	text-wrap: balance;
}
.sk-display {
	font-size: var(--sk-text-display);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.03em;
}
.sk-display em,
.sk-title-1 em {
	font-style: normal;
	color: var(--sk-primary-ink);
}
.sk-title-1 {
	font-size: var(--sk-text-title-1);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}
.sk-title-2 {
	font-size: var(--sk-text-title-2);
	font-weight: 800;
	line-height: var(--sk-leading-snug);
	letter-spacing: -0.015em;
}
.sk-title-3 {
	margin: 0;
	font-family: var(--sk-font-sans);
	font-size: var(--sk-text-title-3);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--sk-fg);
}
.sk-body-lg {
	font-size: var(--sk-text-body-lg);
	font-weight: 500;
	line-height: var(--sk-leading-relaxed);
	color: var(--sk-fg);
}
.sk-body {
	font-size: var(--sk-text-body);
	line-height: 1.6;
	color: var(--sk-fg);
}
.sk-body-sm {
	font-size: var(--sk-text-body-sm);
	font-weight: 500;
	line-height: var(--sk-leading-normal);
	color: var(--sk-fg-muted);
}
.sk-caption {
	font-size: var(--sk-text-caption);
	font-weight: 500;
	line-height: 1.4;
	color: var(--sk-fg-subtle);
}
.sk-overline {
	font-size: var(--sk-text-overline);
	font-weight: 700;
	line-height: var(--sk-leading-snug);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sk-fg-muted);
}
.sk-muted {
	color: var(--sk-fg-muted);
}
.sk-link {
	color: var(--sk-primary-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.sk-link:hover {
	text-decoration-thickness: 2px;
}

/* =========================================================================================== Layout */
.sk-page {
	width: 100%;
	max-width: calc(var(--sk-content-max) + 2 * var(--sk-gutter));
	margin-inline: auto;
	padding-inline: var(--sk-gutter);
}
.sk-reading {
	width: 100%;
	max-width: var(--sk-reading-max);
	margin-inline: auto;
}
.sk-section + .sk-section {
	margin-top: var(--sk-section-gap);
}
.sk-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sk-space-3);
	margin-bottom: var(--sk-space-4);
}
.sk-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sk-stack-gap);
}
.sk-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sk-space-2);
}
.sk-divider {
	height: 1px;
	border: 0;
	margin: var(--sk-space-4) 0;
	background: var(--sk-border);
}

/* =========================================================================================== Card */
.sk-card {
	background: var(--sk-surface);
	color: var(--sk-fg);
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-lg);
	box-shadow: var(--sk-shadow-sm);
	padding: var(--sk-card-pad);
}
.sk-card--sunken {
	background: var(--sk-surface-sunken);
	box-shadow: none;
}
.sk-card--interactive {
	cursor: pointer;
	transition:
		border-color var(--sk-dur-base) var(--sk-ease),
		box-shadow var(--sk-dur-base) var(--sk-ease),
		transform var(--sk-dur-base) var(--sk-ease);
}
.sk-card--interactive:hover {
	border-color: var(--sk-primary-border);
	box-shadow: var(--sk-shadow-md);
}
.sk-card[data-tone] {
	background: var(--sk-tone-soft);
	border-color: var(--sk-tone-border);
}
.sk-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-space-3);
	margin-bottom: var(--sk-space-3);
}
.sk-card__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--sk-space-2);
	margin-top: var(--sk-space-4);
	padding-top: var(--sk-space-4);
	border-top: 1px solid var(--sk-border);
}

/* Tone plumbing: any component with data-tone reads --sk-tone-* */
[data-tone="success"] {
	--sk-tone-soft: var(--sk-success-soft);
	--sk-tone-ink: var(--sk-success-ink);
	--sk-tone-border: var(--sk-success-border);
	--sk-tone-solid: var(--sk-success-solid);
	--sk-tone-on: var(--sk-on-success);
}
[data-tone="danger"] {
	--sk-tone-soft: var(--sk-danger-soft);
	--sk-tone-ink: var(--sk-danger-ink);
	--sk-tone-border: var(--sk-danger-border);
	--sk-tone-solid: var(--sk-danger-solid);
	--sk-tone-on: var(--sk-on-danger);
}
[data-tone="warning"] {
	--sk-tone-soft: var(--sk-warning-soft);
	--sk-tone-ink: var(--sk-warning-ink);
	--sk-tone-border: var(--sk-warning-border);
	--sk-tone-solid: var(--sk-warning-solid);
	--sk-tone-on: var(--sk-on-warning);
}
[data-tone="info"] {
	--sk-tone-soft: var(--sk-info-soft);
	--sk-tone-ink: var(--sk-info-ink);
	--sk-tone-border: var(--sk-info-border);
	--sk-tone-solid: var(--sk-info-solid);
	--sk-tone-on: var(--sk-on-info);
}
[data-tone="neutral"] {
	--sk-tone-soft: var(--sk-neutral-soft);
	--sk-tone-ink: var(--sk-neutral-ink);
	--sk-tone-border: var(--sk-neutral-border);
	--sk-tone-solid: var(--sk-neutral-solid);
	--sk-tone-on: var(--sk-on-neutral);
}
[data-tone="primary"] {
	--sk-tone-soft: var(--sk-primary-soft);
	--sk-tone-ink: var(--sk-primary-ink);
	--sk-tone-border: var(--sk-primary-border);
	--sk-tone-solid: var(--sk-primary);
	--sk-tone-on: var(--sk-on-primary);
}
[data-tone="secondary"] {
	--sk-tone-soft: var(--sk-secondary-soft);
	--sk-tone-ink: var(--sk-secondary-ink);
	--sk-tone-border: var(--sk-secondary-border);
	--sk-tone-solid: var(--sk-secondary);
	--sk-tone-on: var(--sk-on-secondary);
}

/* =========================================================================================== Button */
.sk-btn {
	--sk-btn-h: var(--sk-control-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sk-space-2);
	min-height: var(--sk-btn-h);
	padding: 0 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--sk-radius-pill);
	background: transparent;
	color: var(--sk-fg);
	font-family: var(--sk-font-sans);
	font-size: var(--sk-text-body);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition:
		background-color var(--sk-dur-base) var(--sk-ease),
		border-color var(--sk-dur-base) var(--sk-ease),
		color var(--sk-dur-base) var(--sk-ease),
		box-shadow var(--sk-dur-base) var(--sk-ease),
		transform var(--sk-dur-fast) var(--sk-ease);
}
.sk-btn:focus-visible {
	outline: none;
	box-shadow: var(--sk-focus-ring);
}
.sk-btn:active:not(:disabled):not([aria-disabled="true"]) {
	transform: scale(0.98);
}
.sk-btn:disabled,
.sk-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}
.sk-btn > svg {
	width: var(--sk-icon-md);
	height: var(--sk-icon-md);
	flex: none;
}
.sk-btn--primary {
	background: var(--sk-primary);
	color: var(--sk-on-primary);
	box-shadow: var(--sk-shadow-sm);
}
.sk-btn--primary:hover:not(:disabled) {
	background: var(--sk-primary-hover);
}
.sk-btn--primary:active:not(:disabled) {
	background: var(--sk-primary-active);
}
.sk-btn--secondary {
	background: var(--sk-secondary);
	color: var(--sk-on-secondary);
}
.sk-btn--secondary:hover:not(:disabled) {
	background: var(--sk-secondary-hover);
}
.sk-btn--outline {
	background: var(--sk-surface);
	border-color: var(--sk-border-strong);
	color: var(--sk-fg);
}
.sk-btn--outline:hover:not(:disabled) {
	background: var(--sk-surface-hover);
	border-color: var(--sk-primary);
}
.sk-btn--ghost {
	color: var(--sk-fg-muted);
}
.sk-btn--ghost:hover:not(:disabled),
.sk-btn--ghost[aria-pressed="true"] {
	background: var(--sk-surface-sunken);
	color: var(--sk-fg);
}
.sk-btn--danger {
	background: var(--sk-danger-soft);
	border-color: var(--sk-danger-border);
	color: var(--sk-danger-ink);
}
.sk-btn--danger:hover:not(:disabled) {
	background: var(--sk-danger-solid);
	border-color: var(--sk-danger-solid);
	color: var(--sk-on-danger);
}
.sk-btn--link {
	min-height: auto;
	padding: 0;
	border-radius: var(--sk-radius-xs);
	color: var(--sk-primary-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sk-btn--sm {
	--sk-btn-h: var(--sk-control-sm);
	padding: 0 0.875rem;
	font-size: var(--sk-text-body-sm);
}
.sk-btn--lg {
	--sk-btn-h: var(--sk-control-lg);
	padding: 0 1.75rem;
	font-size: var(--sk-text-body-lg);
}
.sk-btn--block {
	display: flex;
	width: 100%;
}
.sk-btn--icon {
	width: var(--sk-btn-h);
	padding: 0;
}
.sk-btn[aria-busy="true"] {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.sk-btn[aria-busy="true"]::after {
	content: "";
	position: absolute;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid var(--sk-fg-muted);
	border-right-color: transparent;
	border-radius: 50%;
	animation: sk-spin 0.7s linear infinite;
}
.sk-btn--primary[aria-busy="true"]::after {
	border-color: var(--sk-on-primary);
	border-right-color: transparent;
}
@keyframes sk-spin {
	to {
		transform: rotate(360deg);
	}
}

/* =========================================================================================== Choice (quiz option)
 * <button class="sk-choice" data-state="correct" aria-pressed="true">
 *   <span class="sk-choice__key">C</span><span class="sk-choice__text">…</span><svg class="sk-choice__icon">…</svg>
 * </button>
 * The answer text always stays --sk-fg: state is carried by the tint, the 2px border, the key badge and the icon,
 * never by recolouring the sentence the student has to read.
 */
.sk-choice {
	--sk-choice-bg: var(--sk-surface);
	--sk-choice-border: var(--sk-border-strong);
	--sk-choice-key-bg: var(--sk-surface-sunken);
	--sk-choice-key-fg: var(--sk-fg-muted);
	--sk-choice-key-border: var(--sk-border-strong);
	display: flex;
	align-items: flex-start;
	gap: var(--sk-space-3);
	width: 100%;
	min-height: var(--sk-control-lg);
	padding: 0.75rem var(--sk-space-4);
	border: 1.5px solid var(--sk-choice-border);
	border-radius: var(--sk-radius-md);
	background: var(--sk-choice-bg);
	color: var(--sk-fg);
	font: inherit;
	font-size: var(--sk-text-body);
	font-weight: 500;
	line-height: var(--sk-leading-normal);
	text-align: left;
	cursor: pointer;
	transition:
		background-color var(--sk-dur-base) var(--sk-ease),
		border-color var(--sk-dur-base) var(--sk-ease),
		box-shadow var(--sk-dur-base) var(--sk-ease);
}
.sk-choice:hover:not(:disabled):not([data-state]) {
	--sk-choice-bg: var(--sk-surface-hover);
	--sk-choice-border: var(--sk-primary-border);
}
.sk-choice:focus-visible {
	outline: none;
	box-shadow: var(--sk-focus-ring);
}
.sk-choice__key {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	margin-top: -0.0625rem;
	border: 1px solid var(--sk-choice-key-border);
	border-radius: 50%;
	background: var(--sk-choice-key-bg);
	color: var(--sk-choice-key-fg);
	font-size: var(--sk-text-caption);
	font-weight: 800;
	line-height: 1;
}
.sk-choice__text {
	flex: 1;
	min-width: 0;
	padding-top: 0.0625rem;
	overflow-wrap: anywhere;
}
.sk-choice__icon {
	flex: none;
	width: var(--sk-icon-md);
	height: var(--sk-icon-md);
	margin-top: 0.1875rem;
}
.sk-choice[data-state="selected"],
.sk-choice[aria-pressed="true"]:not([data-state]),
.sk-choice[aria-checked="true"]:not([data-state]) {
	--sk-choice-bg: var(--sk-primary-soft);
	--sk-choice-border: var(--sk-primary);
	--sk-choice-key-bg: var(--sk-primary);
	--sk-choice-key-fg: var(--sk-on-primary);
	--sk-choice-key-border: var(--sk-primary);
}
.sk-choice[data-state="correct"] {
	--sk-choice-bg: var(--sk-success-soft);
	--sk-choice-border: var(--sk-success-border);
	--sk-choice-key-bg: var(--sk-success-solid);
	--sk-choice-key-fg: var(--sk-on-success);
	--sk-choice-key-border: var(--sk-success-solid);
	border-width: 2px;
}
.sk-choice[data-state="correct"] .sk-choice__icon {
	color: var(--sk-success-ink);
}
.sk-choice[data-state="wrong"] {
	--sk-choice-bg: var(--sk-danger-soft);
	--sk-choice-border: var(--sk-danger-border);
	--sk-choice-key-bg: var(--sk-danger-solid);
	--sk-choice-key-fg: var(--sk-on-danger);
	--sk-choice-key-border: var(--sk-danger-solid);
	border-width: 2px;
}
.sk-choice[data-state="wrong"] .sk-choice__icon {
	color: var(--sk-danger-ink);
}
/* After the answer is revealed, the options the student did not pick step back but stay readable (>= 4.5:1). */
.sk-choice[data-state="dimmed"] {
	--sk-choice-bg: var(--sk-surface-sunken);
	--sk-choice-border: var(--sk-border);
	color: var(--sk-fg-muted);
}
.sk-choice:disabled,
.sk-choice[aria-disabled="true"] {
	cursor: default;
}

/* =========================================================================================== Radio, checkbox, switch */
.sk-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sk-space-3);
	min-height: var(--sk-tap);
	padding-block: 0.625rem;
	color: var(--sk-fg);
	font-size: var(--sk-text-body);
	line-height: var(--sk-leading-normal);
	cursor: pointer;
}
.sk-check:has(input:disabled) {
	color: var(--sk-fg-disabled);
	cursor: not-allowed;
}
.sk-radio,
.sk-checkbox {
	appearance: none;
	display: inline-grid;
	place-content: center;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.125rem 0 0;
	border: 1.5px solid var(--sk-border-control);
	background: var(--sk-surface);
	cursor: inherit;
	transition:
		border-color var(--sk-dur-fast) var(--sk-ease),
		background-color var(--sk-dur-fast) var(--sk-ease);
}
.sk-radio {
	border-radius: 50%;
}
.sk-checkbox {
	border-radius: 0.375rem;
}
.sk-radio::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--sk-on-primary);
	transform: scale(0);
	transition: transform var(--sk-dur-fast) var(--sk-ease);
}
.sk-checkbox::before {
	content: "";
	width: 0.6875rem;
	height: 0.6875rem;
	background: var(--sk-on-primary);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0);
	transition: transform var(--sk-dur-fast) var(--sk-ease);
}
.sk-radio:checked,
.sk-checkbox:checked {
	border-color: var(--sk-primary);
	background: var(--sk-primary);
}
.sk-radio:checked::before,
.sk-checkbox:checked::before {
	transform: scale(1);
}
.sk-radio:hover:not(:disabled):not(:checked),
.sk-checkbox:hover:not(:disabled):not(:checked) {
	border-color: var(--sk-primary-ink);
}
.sk-radio:focus-visible,
.sk-checkbox:focus-visible {
	outline: none;
	box-shadow: var(--sk-focus-ring);
}
.sk-radio:disabled,
.sk-checkbox:disabled {
	border-color: var(--sk-border);
	background: var(--sk-surface-sunken);
}
.sk-checkbox[aria-invalid="true"],
.sk-radio[aria-invalid="true"] {
	border-color: var(--sk-danger-border);
}

.sk-switch {
	appearance: none;
	position: relative;
	flex: none;
	width: 2.75rem;
	height: 1.5rem;
	margin: 0;
	border: 1.5px solid var(--sk-border-control);
	border-radius: var(--sk-radius-pill);
	background: var(--sk-surface-sunken);
	cursor: pointer;
	transition:
		background-color var(--sk-dur-base) var(--sk-ease),
		border-color var(--sk-dur-base) var(--sk-ease);
}
.sk-switch::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.1875rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--sk-fg-muted);
	transform: translateY(-50%);
	transition:
		transform var(--sk-dur-base) var(--sk-ease),
		background-color var(--sk-dur-base) var(--sk-ease);
}
.sk-switch:checked {
	border-color: var(--sk-primary);
	background: var(--sk-primary);
}
.sk-switch:checked::before {
	background: var(--sk-on-primary);
	transform: translate(1.25rem, -50%);
}
.sk-switch:focus-visible {
	outline: none;
	box-shadow: var(--sk-focus-ring);
}

/* =========================================================================================== Field, input, select */
.sk-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}
.sk-label {
	color: var(--sk-fg);
	font-size: var(--sk-text-body-sm);
	font-weight: 700;
	line-height: var(--sk-leading-snug);
}
.sk-label__opt {
	color: var(--sk-fg-subtle);
	font-weight: 500;
}
.sk-input,
.sk-select,
.sk-textarea {
	width: 100%;
	min-height: var(--sk-control-md);
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--sk-border-control);
	border-radius: var(--sk-radius-sm);
	background: var(--sk-surface);
	color: var(--sk-fg);
	font: inherit;
	font-size: var(--sk-text-body); /* 16px: no iOS zoom */
	line-height: var(--sk-leading-normal);
	transition:
		border-color var(--sk-dur-fast) var(--sk-ease),
		box-shadow var(--sk-dur-fast) var(--sk-ease);
}
.sk-textarea {
	min-height: 6.5rem;
	resize: vertical;
}
.sk-input::placeholder,
.sk-textarea::placeholder {
	color: var(--sk-fg-subtle);
	opacity: 1;
}
.sk-input:hover:not(:disabled),
.sk-select:hover:not(:disabled),
.sk-textarea:hover:not(:disabled) {
	border-color: var(--sk-fg-muted);
}
.sk-input:focus-visible,
.sk-select:focus-visible,
.sk-textarea:focus-visible {
	outline: none;
	border-color: var(--sk-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-focus) 25%, transparent);
}
.sk-input:disabled,
.sk-select:disabled,
.sk-textarea:disabled {
	border-color: var(--sk-border);
	background: var(--sk-surface-sunken);
	color: var(--sk-fg-disabled);
	cursor: not-allowed;
}
.sk-input[aria-invalid="true"],
.sk-select[aria-invalid="true"],
.sk-textarea[aria-invalid="true"] {
	border-color: var(--sk-danger-border);
}
.sk-select {
	appearance: none;
	padding-right: 2.5rem;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--sk-fg-muted) 50%),
		linear-gradient(135deg, var(--sk-fg-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 1.125rem) 50%,
		calc(100% - 0.8125rem) 50%;
	background-size: 0.3125rem 0.3125rem;
	background-repeat: no-repeat;
	cursor: pointer;
}
.sk-select option {
	background: var(--sk-surface-raised);
	color: var(--sk-fg);
}
.sk-help {
	color: var(--sk-fg-subtle);
	font-size: var(--sk-text-caption);
	line-height: 1.4;
}
.sk-error {
	display: flex;
	gap: 0.375rem;
	color: var(--sk-danger-ink);
	font-size: var(--sk-text-caption);
	font-weight: 600;
	line-height: 1.4;
}

/* =========================================================================================== Dropdown menu
 * <div class="sk-menu" role="menu"> <button class="sk-menu__item" role="menuitem" aria-checked="true">…</button>
 * Position it yourself (absolute under its trigger); z-index comes from here.
 */
.sk-menu {
	z-index: var(--sk-z-dropdown);
	min-width: 12rem;
	max-height: min(22rem, 70vh);
	overflow-y: auto;
	padding: var(--sk-space-1);
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-md);
	background: var(--sk-surface-raised);
	color: var(--sk-fg);
	box-shadow: var(--sk-shadow-lg);
}
.sk-menu__label {
	padding: var(--sk-space-2) var(--sk-space-3) var(--sk-space-1);
	color: var(--sk-fg-subtle);
	font-size: var(--sk-text-overline);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sk-menu__item {
	display: flex;
	align-items: center;
	gap: var(--sk-space-2);
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem var(--sk-space-3);
	border: 0;
	border-radius: var(--sk-radius-sm);
	background: transparent;
	color: var(--sk-fg);
	font: inherit;
	font-size: var(--sk-text-body-sm);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}
.sk-menu__item:hover,
.sk-menu__item:focus-visible {
	outline: none;
	background: var(--sk-surface-sunken);
}
.sk-menu__item[aria-checked="true"],
.sk-menu__item[aria-selected="true"],
.sk-menu__item[aria-current="true"] {
	background: var(--sk-primary-soft);
	color: var(--sk-fg);
	box-shadow: inset 3px 0 0 var(--sk-primary);
}
.sk-menu__item[data-tone="danger"] {
	color: var(--sk-danger-ink);
}
.sk-menu__sep {
	height: 1px;
	margin: var(--sk-space-1) 0;
	background: var(--sk-border);
}

/* =========================================================================================== Badge / status */
:where(.sk-badge) {
	--sk-tone-soft: var(--sk-neutral-soft);
	--sk-tone-ink: var(--sk-neutral-ink);
	--sk-tone-border: var(--sk-neutral-border);
}
.sk-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 1.5rem;
	padding: 0.125rem 0.625rem;
	border: 1px solid color-mix(in srgb, var(--sk-tone-border) 55%, transparent);
	border-radius: var(--sk-radius-pill);
	background: var(--sk-tone-soft);
	color: var(--sk-tone-ink);
	font-size: var(--sk-text-caption);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.sk-badge--solid {
	border-color: transparent;
	background: var(--sk-tone-solid, var(--sk-neutral-solid));
	color: var(--sk-tone-on, var(--sk-on-neutral));
}
.sk-badge--dot::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--sk-tone-border);
}
.sk-badge--lg {
	min-height: 2rem;
	padding: 0.25rem 0.875rem;
	font-size: var(--sk-text-body-sm);
}

/* =========================================================================================== Alert / banner */
:where(.sk-alert) {
	--sk-tone-soft: var(--sk-info-soft);
	--sk-tone-ink: var(--sk-info-ink);
	--sk-tone-border: var(--sk-info-border);
}
.sk-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--sk-space-3);
	padding: var(--sk-space-3) var(--sk-space-4);
	border: 1px solid color-mix(in srgb, var(--sk-tone-border) 50%, transparent);
	border-left: 4px solid var(--sk-tone-border);
	border-radius: var(--sk-radius-md);
	background: var(--sk-tone-soft);
	color: var(--sk-fg);
	font-size: var(--sk-text-body-sm);
	line-height: var(--sk-leading-normal);
}
.sk-alert__icon {
	flex: none;
	width: var(--sk-icon-md);
	height: var(--sk-icon-md);
	color: var(--sk-tone-ink);
}
.sk-alert__title {
	display: block;
	margin-bottom: 0.125rem;
	color: var(--sk-tone-ink);
	font-weight: 700;
}

/* =========================================================================================== Sticky: app bar, section, action bar */
.sk-appbar {
	position: sticky;
	top: 0;
	z-index: var(--sk-z-header);
	display: flex;
	align-items: center;
	gap: var(--sk-space-3);
	min-height: var(--sk-header-h);
	padding: var(--sk-space-2) var(--sk-gutter);
	border-bottom: 1px solid var(--sk-border);
	background: color-mix(in srgb, var(--sk-surface-raised) 88%, transparent);
	color: var(--sk-fg);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.sk-appbar__title {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	font-family: var(--sk-font-display);
	font-size: var(--sk-text-title-3);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sk-appbar__spacer {
	flex: 1;
}
.sk-sticky {
	position: sticky;
	top: var(--sk-sticky-top);
	z-index: var(--sk-z-sticky);
	background: var(--sk-sticky-bg, var(--sk-bg)); /* set --sk-sticky-bg to the parent's surface inside cards */
}
.sk-actionbar {
	position: sticky;
	bottom: 0;
	z-index: var(--sk-z-sticky);
	display: flex;
	gap: var(--sk-space-2);
	padding: var(--sk-space-3) var(--sk-gutter) calc(var(--sk-space-3) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--sk-border);
	background: color-mix(in srgb, var(--sk-surface-raised) 92%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* =========================================================================================== Tabs / segmented */
.sk-tabs {
	display: inline-flex;
	gap: var(--sk-space-1);
	max-width: 100%;
	overflow-x: auto;
	padding: var(--sk-space-1);
	border-radius: var(--sk-radius-pill);
	background: var(--sk-surface-sunken);
	scrollbar-width: none;
}
.sk-tab {
	flex: none;
	min-height: var(--sk-control-sm);
	padding: 0 var(--sk-space-4);
	border: 0;
	border-radius: var(--sk-radius-pill);
	background: transparent;
	color: var(--sk-fg-muted);
	font: inherit;
	font-size: var(--sk-text-body-sm);
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color var(--sk-dur-base) var(--sk-ease),
		color var(--sk-dur-base) var(--sk-ease);
}
.sk-tab:hover {
	color: var(--sk-fg);
}
.sk-tab[aria-selected="true"],
.sk-tab[aria-current="page"] {
	background: var(--sk-surface);
	color: var(--sk-fg);
	box-shadow: var(--sk-shadow-sm);
}
.sk-tab:focus-visible {
	outline: none;
	box-shadow: var(--sk-focus-ring);
}

/* =========================================================================================== Progress */
.sk-progress {
	/* markup: <div class="sk-progress" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span style="width:40%"></span></div> */
	height: 0.5rem;
	overflow: hidden;
	border-radius: var(--sk-radius-pill);
	background: var(--sk-surface-sunken);
}
.sk-progress > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--sk-primary);
	transition: width var(--sk-dur-slow) var(--sk-ease);
}
.sk-progress[data-tone] > span {
	background: var(--sk-tone-solid);
}

/* =========================================================================================== Dialog */
.sk-scrim {
	position: fixed;
	inset: 0;
	z-index: var(--sk-z-overlay);
	background: var(--sk-overlay);
}
.sk-dialog {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: var(--sk-z-modal);
	width: min(32rem, calc(100vw - 2 * var(--sk-gutter)));
	max-height: calc(100dvh - 2 * var(--sk-gutter));
	overflow-y: auto;
	padding: var(--sk-space-6);
	border: 1px solid var(--sk-border);
	border-radius: var(--sk-radius-xl);
	background: var(--sk-surface-raised);
	color: var(--sk-fg);
	box-shadow: var(--sk-shadow-lg);
	transform: translate(-50%, -50%);
}

/* =========================================================================================== Skeleton, empty */
.sk-skeleton {
	border-radius: var(--sk-radius-sm);
	background: linear-gradient(
		90deg,
		var(--sk-surface-sunken) 0%,
		var(--sk-surface-hover) 50%,
		var(--sk-surface-sunken) 100%
	);
	background-size: 200% 100%;
	animation: sk-shimmer 1.4s var(--sk-ease-in-out) infinite;
}
@keyframes sk-shimmer {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: -100% 0;
	}
}
.sk-empty {
	display: grid;
	justify-items: center;
	gap: var(--sk-space-2);
	padding: var(--sk-space-8) var(--sk-space-4);
	border: 1px dashed var(--sk-border-strong);
	border-radius: var(--sk-radius-lg);
	color: var(--sk-fg-muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.sk-skeleton,
	.sk-btn[aria-busy="true"]::after {
		animation: none;
	}
}